issafworks

An MVP version of my personal website. It includes a portfolio showcasing some of the projects I worked on and a blog to share different ideas and lessons I learn.

Cover image of project

Tech stack used

AstroGraphQLGSAPHygraphJavaScriptTailwind CSSVercelVue.js
Why a personal website?

I can show my work, share ideas, and demonstrate my skills (on many levels). It's my way of showing you instead of telling you. Zooming out, I believe it's important to understand the economy, my industry, and what I bring to the table. This helps me clarify it for myself and showcase it over time.

I also hope this will allow me to connect with interesting and smart people who resonate with me. Being able to discuss concepts and ideas, share tips and lessons, and just have genuine conversations would be amazing.

Project requirements
Cover image for issafworksCover image for issafblog

The goal was to build a basic version (MVP) and quickly ship that. Then, over time, add more features, improve the website (UX, copywriting, SEO, performance, accessibility), and add more content. My requirements were simple:

  1. Have a portfolio section and a blog
  2. Use technologies I wanted to learn more about (GSAP, Tailwind, server-side rendering, CMS, and GraphQL) and build everything from scratch
  3. Great performance and speed
  4. Free to host and connect a custom domain (while traffic is low)
Tech stack choices

This was actually fun to research. I learned a lot. Because this is more of a static website than a web app, Vue.js (my go to Frontend framework) wasn't the best choice. I was going to pick Nuxt.js but discovered Astro and went with that. Three reasons for that:

  • It allowed me to have a hybrid rendering strategy
  • It supports writing components in Vue.js, React, and other frameworks
  • It offers view transitions to animate elements between pages

Most pages are static so I used SSG rendering. That means all the HTML, CSS, and JavaScript is generated on build. Blog overview page and individual article pages require a call to a CMS so I used SSR for those.

Speaking of CMS, I used Hygraph, it has a generous free tier, a clean UI, and the ability to fetch data using GraphQL. Lastly, for any client-side interactivity, I used Vue.js components. This improves not only performance but SEO as well.

Most images were resized, compressed and converted to “.webp” to optimize performance and speed. Tailwind was used for CSS. Finally, I used GSAP to create scroll-based animations.

What's next for this project?

This is a living project and will evolve as I evolve. I will continue maintaining and updating it as my needs and objectives change. For example I decided to build the blog from scratch. That's because I wanted to understand the technical nuances and specificities of building a blog. I also wanted the ability to create a custom reading experience. That being said, I am open to migrating to a dedicated blogging platform down the line if my needs change.