I had previously made a portfolio website using plain HTML and CSS, which had lived way past its due date. I decided to start from scratch using Astro framework as I had heard great things about the development experience. Portfolio site also doesn't necessarily need many fancy and heavy frontend rendering techniques so React frameworks would have been an overkill. Tailwind CSS was chosen for styling because of its excellent customization possibilities over other CSS frameworks. I decided to deploy the website to Cloudflare as I have also registered my custom domain name with them.

Main focus was to develop a website that is fast, responsive, and accessible. Except maybe for the landing page. I am planning to create some stylish CSS animations for it in the future. The other pages I plan to keep very lightweight and fast for the best user experience. The website is designed to be mobile first in order to allow the user interface to work great and render fast on mobile devices, which is very important in todays digital world. Astro's built-in support for responsive images and lazy loading was utilized to make the loading even more performant while PlayForm/Compress package was utilized for compressing text files for the bundle. Flexbox and Tailwind's break points are heavily used so that the websites scales grazefully to both mobile and desktop devices. The website is also designed to be accessible to everyone, different functionalities have been developed screen readers in mind, and the color scheme is designed to be readable for people with color blindness.

I used InkScape to create the SVG logo in the landing page (the one with my name). Dark and light modes were implemented so that users can have the experience they prefer the most. The implementation is very traditional: I store and retrieve the mode preferences from the LocalStorage. I also check the preferences set for the user's device so that the first time the user enters the website it will be rendered in a theme that suits their needs the best.

Originally, this portfolio was purely static website and it was deployed to Github pages. Because of this I decided to use Web3Forms to handle emails so that I don't have to put my email address to the website. Web3Forms works with API key so of course somebody could still have sent me spam using the key, but atleast it's a lot easier to stop the spam if all the emails are coming through the same channel. However, after I bought my own domain and decided to deploy the website to Cloudflare using SSR, I opted to use Resend for the email redirecting instead. Resend gives more control over the API keys and how to configure them and with SSR I can now also hide the API key so that it cannot be used in malicious scripts. I created API route to my portfolio which has logic for the Resend integration. The contact form only sends the POST request to API route. The API route also uses Cloudflare's Turnstile Captcha to verify that the sender is real user.