I must admit it feels a bit redundant to tell you about the page you're currently visiting, but I think this is also interesting. Previously, I had my portfolio hosted on Squarespace, but I felt I didn't really get value for the money I paid for them. Originally, my main draw was to offload hosting and maintenance to someone else, but I think nowadays I can handle a simple static pages myself. I enjoy writing React and I wanted to learn next.js, so I decided to do the same as all web developers: writing an overly complicated markdown to html converter instead of using something sane like Wordpress.

All of the code and content are contained in one git repository. The next.js builder uses glob to statically build all pages on build time. The site is hosted in Vercel, a Vercel build and deployment is automatically triggered whenever new content or code is pushed to the repository. Portfolio pages are configured with a Front Matter extended Markdown files. The Front Matter metadata configures page names, image carousels and possible YouTube videos. YouTube videos can also be embedded in the main body of the text with a special youtube:// prefixed image tag. Since this was a learning project, the styling is done with tailwindcss tags. The only traditional css on the page is the fade animation on the images.

I'm very happy how the page looks and scales to different devices. The deployed pages are very fast from Vercel and developing the pages with React and next.js is a joy. Writing Markdown is good way to write blog posts like this, but I must admit it's a bit heavy that I need to upload new pages and images to Github instead of using a VYSIWYG editor...

All code in Github: https://github.com/joonamo/joonamodotcom

Used technology

• React
• next.js
• Vercel
• tailwindcss
• Front Matter
• plaiceholder
• Git