Welcome to the New Era of My Personal Website
If you’ve visited my website before, you might notice something different this time around—everything’s changed, and for the better! Gone are the days of navigating through a maze of HTML pages. Welcome to my newly revamped website, now powered by Astro, where fluidity and ease of access take the front seat.
Why I Decided to Make the Switch
For the past three years, I’ve honed my skills in HTML, building websites that, while functional, increasingly felt rigid and disconnected. Each page loaded separately, and the site was bloating with content, making updates cumbersome and user navigation frustrating. It was clear I needed a change—to create a space that was not only dynamic but also consolidated and intuitive.
The Challenges of Moving Away from HTML
HTML was my comfort zone, and stepping away from it meant venturing into unfamiliar territory. I had dabbled in NextJS, which gave me a taste of modern web development frameworks, but adopting Astro was a fresh challenge. Astro promised a seamless integration of components and static site generation, features that were attractive yet daunting for someone accustomed to the straightforwardness of HTML.
My Learning Journey with Astro
Astro, while new, didn’t take long to grasp. Its component-based structure was something I was partially familiar with thanks to my brief stint with NextJS. The real game changer, however, was how Astro handles loading—only the necessary components are loaded, which drastically speeds up the site and reduces bandwidth usage. Learning to implement this was not without its hurdles, but the Astro community and documentation were invaluable resources.
The Fluidity and Efficiency of Astro
One of the major benefits I’ve noticed since the switch is the fluidity of the website. It feels like a single, cohesive application rather than a collection of individual pages. This not only makes the website faster but also makes it much easier for visitors to interact with. Information is now readily available, and reaching out to me has never been simpler.
Integrating Images and Visuals
To enhance user engagement, I integrated various visuals throughout the site like a travel page that shows all the countries I have visited (more to come :p):
Here’s a visual of the old website design:
Code Snippets from the New Website
Let’s take a look at some of the code that powers the new site. Here’s a snippet showing how components are loaded in Astro, with animations to make it look smoother:
Looking Forward
This overhaul was a significant step out of my comfort zone, but it has been incredibly rewarding. The new website not only looks better but functions more effectively, providing a user-friendly experience that aligns with modern web standards. The journey from HTML to Astro has taught me the importance of adaptability and the benefits of embracing new technologies.