It seems like every programmer, no matter the field, owns his/her own website nowadays! There are a lot of amazing portfolios out there, including 3D interactive ones! However, these seem like a lot of work to make initially, so I'd like something simpler due to time constraints. ⌚

And that raises another interesting question: How can we save as much time as possible with our portfolio?

But I don't do web-development... 🤔

So lets address the elephant in the room:

• I do not know JavaScript. 😢
• I do not know CSS. 😭
• My phone is dead, so I can not call the zoo to take back their elephant. 🐘

So instead of learning these technologies, I thought it might be beneficial to work with something I already know! Kotlin! There is a magnificent framework called Kobweb to assist men and women alike in developing their place on the worldwide web. Let's use that and start our project. 🤩

The Idea 💡

Okay, so bear with me:

But how on earth would we achieve this?! Well, I have an interesting idea. All it requires is the GitHub Rest API & a JSON parser. 👀

So lets say we have a beautiful new repository that does something incredible we would like to show on our portfolio. We'd have to add that to our website by creating some buttons and adding some links etc. Using the API however we can just pull all repositories we want and display them in a nice grid.

We do this by declaring what users (and if we want to specific repositories) we want to grab the data from. Then we have a method where we can declare filters! This is handy if you want to ignore projects that only contains docs, or your own secret profile on GitHub. Personally, I also want to hide all forks:

 private fun shouldSkipRepo(repository: Repository): Boolean {
    if (repository.fork!!) return true
    if (repository.topics != null && repository.topics!!.contains("bad-code")) return true
    return false
}

Okay, this sounds good. So this is where I initially ended the project. However, you've probably noticed that there is more text due to your well-functioning eyes and the scrollbar on the right of your screen. 👍🏻

The "Blog Post" System! 📝

Yeah, so when I actually wanted to show people what I made and linked them to my website they obviously still had to go through all my repositories manually. This is not very dope, as the cool kids say! 😎 Plus, those readmes do not always contain images or videos of the project in action. 🎬

Luckily I'm not only hip, but also a programmer! Kobweb has extensive markdown support. In fact, if you drag in a .md file in your resources it will generate a page for it. 📝

However, since we want to automate as much as possible we need to think of a system that can check this automatically. Luckily, there are ways in Kobweb to check all pages (even ones that are generated by markdown).

ctx.router.routes.map { it.path }.filter { it.startsWith("/projects/") }

If we just give it the same name as the repository (and then look for a match by force converting both to Kebab case) and add a link to our new custom project page on the repository widget we are done. Bob is your uncle! 👨🏻

Extra features! 🌟

The site needs a special touch to look good! This is why I decided to display a random animated emoji on the front page! Such as this one:

However, on some dates & times it is not random at all! For example, on the Tag der Deutschen Einheit we show the German flag!

Not only that, but I also added a video background with a very low opacity. This gives the site a more 'lively' feeling. Look mom, I'm a UI designer! 🤩✨

"Can I create something like this too?" 🤔💭

Absolutely! In fact, I created a portfolio template with TODOs noted everywhere where you need to put your own information. This means that (after setting up Kobweb) you can get your site running in just a few minutes! 🏃🏻‍♂️💨

Conclusion 🤓

I couldn't be happier with the outcome; this project really took off well! I did not imagine it would actually look good enough to be considered presentable and its functionality would be great! 😋

I also never expected to have this much fun creating a website! If you have never dabbled into web-development and happen to know Kotlin I can not recommend you Kobweb enough. 🙏🏻

That is all for this post! 👋🏻