An auto-updating content portfolio template made in Kotlin using Kobweb!
Click here for an example built with the template.
This repository template contains a ready-to-go website built in Kotlin for you to use.
The project retrieves data from your social network accounts & GitHub to create a simple overview site that is automatically updated. This way you don't have to add a new project to your website if you create a new repository using your GitHub account. Deploy once, never update again.
I am someone that doesn't only create big projects, but also a lot of smaller ones. I don't want to have to update my website every week. Who has the time for that?
This solution simply saves a lot of time.
You can look at a live version of a website that used this template here.
- Support multiple GitHub accounts on same portfolio.
- Add repos from other users in Config.kt file without having to change a single line of code.
- Add content generation for LinkedIn.
- Add content generation for X.
- Add content generation for Youtube.
- Open the project in IntelliJ (or navigate to project folder in cmd).
- Open the Terminal tab at the bottom of your screen.
- Type the following:
$ cd site
$ kobweb run
- Open http://localhost:8080 with your browser to see the result. This is a live view of your website; any time you make adjustments, the site will rebuild and you can view the results here. Note: You can configure the port in site/.kobweb/conf.yaml.
-
Replace io.github.username.projectname with your username & projectname.
-
Edit the Config.kt file.
Here you change most of the site, including, but not limited to:
- Sitename.
- About Me text.
- Fonts to use (and where).
- The sitemap.
- Your usernames.
-
Edit the Const.kt & Res.kt file so the site looks and behaves the way you want.
-
Add your own fonts in the build.gradle.kts file.
-
Drag in your own logo (or remove the logo if you don't want one) in resources/images/logo/.
-
Done! You can also easily add your own pages to the site. Check out the Kobweb README to find out how.
- Open up your terminal in the site folder again. If you are still in IntelliJ running the site, press Q in the terminal to stop it.
- Then export the project using:
kobweb export --layout static
Although this project does not use it, the Kobweb markdown support is enabled. This means that when you drag your markdown files into the markdown folder in your resources, it'll generate a page for each one of them. For a better explanation check here.
If you want to create your own pages, or change the layout, these Chrome Extensions are recommended.
Name | Description |
---|---|
Layout Debugger | Chrome extension for highlighting DOM elements to better debug layout issues |
Response Viewer | Show multiple screens once, Responsive design tester |
GoFullPage | Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions! |
- IntelliJ - IDE used
- Kotlin - Language used to program in
- Kobweb - Framework built on top of Compose HTML
- kotlinx.serialization - Kotlin multiplatform / multi-format serialization used for JSON deserialization
- GitHub REST API - Used to retrieve data from GitHub
- @OnsPetruske - Idea & Initial work.
See also the list of contributors who participated in this project.
I found out about Kobweb due to this LinkedIn post, in which Binay Shaw showcased his Kotfolio project. So special thanks to him.
And lastly thanks to the entire Kobweb community, whom assisted me by taking their time to answer my questions in their Discord server.