As a software engineer, I’ve always been passionate about creating personal projects that showcase my skills and interests. Recently, I decided to create my new website using Astro, a static site builder that allows for the use of React components.
The purpose of my website is to act as a portfolio project host, a place where I can showcase my personal photography projects and music creations as a DJ. Astro appealed to me because of its performance, flexibility and the ability to incorporate React components into a static site.
Why Astro?
Astro is a static site builder that is designed to bring modern web development to static sites. It allows developers to use React components, Sass, and other modern web development tools to create fast, responsive sites. Additionally, it provides features like code splitting, prefetching, and lazy loading, which helps to improve site performance.
One of the major benefits of using Astro is the ability to create dynamic, interactive components that can be reused throughout the site. This is particularly useful when building a portfolio site, as it allows for the easy creation of custom components to showcase projects.
Creating My Site
The first step in creating my site was to set up a basic Astro project structure. This involved creating a new Astro project and configuring the project settings to my preferences. I chose to use Sass for styling, and also set up a few basic site pages, including a homepage and pages for my photography and music projects.
For my photography page, I created a custom component to display my portfolio of photos. I used the Masonry layout library to create a dynamic grid layout that would adapt to different screen sizes. Additionally, I incorporated a lightbox plugin to allow visitors to view larger versions of the photos.
On my music page, I created a custom component to showcase my DJ mixes. I used the Howler.js library to create a custom audio player that would allow visitors to play and pause the music. Additionally, I created custom artwork for each mix and incorporated it into the player.
Deploying My Site
Once my site was complete, I needed to deploy it to a hosting service. I chose to use Vercel, a popular site hosting service that provides easy deployment and continuous integration, and serverless functions for advanced site features.
To deploy my site, I first connected my Git repository to Vercel. I then configured the deployment settings to build my Astro site and deploy it to a custom domain. Vercel also provided features like HTTPS support, automatic builds, and CDNs to improve site performance.
Conclusion
Creating my own website with Astro was a fun and rewarding experience. Astro’s flexibility and use of modern web development tools allowed me to create a fast, responsive site that showcases my personal projects. Additionally, deploying my site to Vercel was quick and easy, allowing me to share my work with others.
If you’re a software engineer looking to create a portfolio site or showcase personal projects, I highly recommend giving Astro a try. Its use of React components and modern web development tools makes it a great choice for creating dynamic, interactive sites.