The goal was a personal portfolio that could evolve with my growth in web development and data engineering. Over five iterations I tried different stacks — a static site, a refined static site, a React SPA, an extended React app, and finally Python + Jinja. This is what each version taught me.
Version 1 — Minimal static HTML & CSS
Built only with HTML and CSS, focused on rapid prototyping: Home, Academic Profile, Professional Profile, Projects and Travels. Navigation was a header menu with no interactivity. Easy to maintain, but scalability was already a concern.
Version 2 — Better design, still static
A refined color palette and typography, better spacing, dedicated sections for project details and a simpler navigation bar. A few small JavaScript snippets for animations, but the content stayed static. It looked better, yet adding features meant repeating code — I wanted something component-based.
Version 3 — Migrating to React
The site was broken down into React components, navigation moved to React Router for a single-page feel, and I started fetching dynamic data such as my GitHub repositories. State management, smoother transitions and the door open to features like dark mode and API integrations.
Version 4 — Extending React
A complete homepage redesign with a hero section, refined colors and typography; API integrations such as a Spotify widget; React Hooks for cleaner state logic. My confidence in front-end work grew, but I still lacked a natural way to plug in the Python scripts behind my data projects.
Version 5 — A fresh start with Python + Jinja
I restarted the project on Flask with server-side rendering. Jinja templates for every section, a clear separation of concerns, and the ability to import my Python modules for data manipulation directly into the site. The design kept the dark-mode aesthetic and gained a personal logo and sidebar navigation. This is the version you are reading now.
What the five versions taught me
- Make the site scalable for new features, whether data visualization or UX.
- Integrate with backend scripts so data-driven elements can be added without complex client-side orchestration.
- Keep a professional, modern look that reflects progress in both design and engineering.
Being willing to pivot between technologies — React versus Python + Jinja — was the most valuable lesson. The plan is to keep adding projects, data engineering demos and to explore microservices or SSR frameworks in future updates.