---

---

My Portfolio 📄

Welcome to my portfolio website, crafted with Astro—a modern, lightweight static site generator. This project was designed as a learning experience to showcase my skills and projects while exploring the capabilities of Astro.

Key Features 🔑

• Speed and Performance: Built with Astro, the site ensures fast load times and optimized performance.
• Minimalistic Design: Clean, responsive design focused on presenting content clearly and attractively.
• Projects Showcase: Detailed project pages highlighting my work, with images, descriptions, and links to live demos and source code.
• Blog Section: A blog where I share insights, tutorials, and experiences from my learning journey.
• Contact Page: A contact page where you can see all of my socials and contact information.

Development Process 🛠️

Planning and Design

The development process began with meticulous planning and design. I outlined the key sections I wanted to include—Home, Projects, Blog, and Contact. Using Figma, I created wireframes to visualize the layout and user interface. The focus was on a clean, minimalistic design that highlights content without unnecessary distractions.

Setting Up Astro

After finalizing the design, I set up the Astro project. Astro’s documentation and CLI made it easy to get started. I appreciated Astro’s approach of delivering zero JavaScript by default, ensuring optimal performance from the start.

Building the Pages

I built each page as a separate component, utilizing Astro’s file-based routing. Markdown was used extensively for content management, particularly in the blog and project description sections. This allowed for easy updates and content additions. This file for example, was written exclusively in Markdown.

Styling and Responsiveness

For styling, I decided to use full custom SASS, which integrates seamlessly with Astro. I did this to have the customisability that I desired, and I also don’t particularly like working with CSS frameworks like Tailwind and Bootstrap.

(Almost) Zero JavaScript

One of the standout features of my portfolio is its minimal use of JavaScript. Astro’s philosophy of delivering zero JavaScript by default was a perfect match for my goal of creating a fast, efficient website. By leveraging Astro’s capabilities, I ensured that most of the site’s interactivity and functionality are handled without any JavaScript present at “runtime”. The only feature where JavaScript was present was the trailing feature around the cursor.

Optimization and Deployment

Before deployment, I performed thorough testing to ensure everything worked as expected. Astro’s built-in optimization features, like image optimization and minification, were extremely helpful. Finally, I deployed the site using NGINX, as I had a server left where I already had other projects running.

Conclusion 🏁

Building this portfolio with Astro has been an enriching and educational experience. It not only allowed me to create a platform to showcase my projects and skills but also provided a deep dive into the capabilities of Astro and modern web development techniques. By focusing on performance, clean design, and interactive features, I aimed to create a site that is both functional and aesthetically pleasing. Particularly I enjoyed writing it with no JavaScript in mind, as I normally use it extensively in other websites which I commonly write in Svelte or React.