For a long time, I wanted to have a website where I could showcase my projects and experiences and have the freedom to design it however I liked.
This project refers to the website you are browsing right now. I built it using Astro, Tailwind CSS, and Vanilla JavaScript. I already had some experience with web development, but not with these new technologies nor with the help of LLMs.
Sections
The website consists of four sections: About Me, Projects, Travels, and More. The About Me section displays information in cards, following the LinkedIn design for showing role changes within the same company. The Projects and More sections provide a brief summary, and clicking on a card takes you to more detailed information.
The most interesting section is Travels. It features an interface that combines a horizontal scrolling timeline with an interactive 3D globe.
On the timeline, you can scroll sideways, and the start date of the corresponding trip appears marked:
When selecting different trips, the 3D globe automatically rotates to center on the specific location. Conversely, interacting with the pins on the globe synchronizes the timeline with the corresponding date.
In the following video, we can see an example of how the two components interact:
Technologies
- Framework: Astro
- Styles: Tailwind CSS
- Interactivity: Vanilla JavaScript, Three.js (for the globe)