Portfolio

Software engineer portfolio websiteApr 2023–Aug 2023

Screenshot or cover image from Portfolio

Project description

The website you are reading now. Built from scratch with Vue and Nuxt, it features a neat content structure based on Markdown files to showcase portfolio projects and CV entries.

Having a solid idea of how I wanted it to work and look, I decided to avoid the temptation of using ready-made project templates or themes.

A paper and a pen were used for planning the site structure, while the UI design up to the mockup level was crafted in Figma.

Figma mockup of website

Project pages, CV items, and tag descriptions are controlled by Markdown files for easy content management, while a custom-built tag system helps link similar content together.

Editing the Markdown file of this project pageExample page showing projects with tag "python"

Technical overview

  • Built with Vue .
  • Nuxt 3 powers the app as a robust SSR and site generation framework, using Nitro as the server engine.
  • Tailwind provides styling utilities.
  • Nuxt Content offers a powerful data layer based on Markdown files and YAML front matter blocks.
  • Vercel orchestrates the deployment of the app.

Also, vue-tippy is used for accessible tooltips, and Nuxt Image for optimizing image sizes and rendering.