Problem
I needed a professional, fast, and recruiter-friendly portfolio platform that could present my software projects clearly, support case-study style project pages, provide contact options, and demonstrate frontend-backend engineering beyond a static website.
Solution
I built a component-based Astro frontend using centralised TypeScript data files, reusable layout and project components, a maintainable SCSS theme system, and a Flask API with SQLite persistence for project likes, contact messages, and engagement tracking.
Technologies Used
- Astro
- TypeScript
- SCSS
- JavaScript
- Flask
- SQLite
- REST API
- Component Architecture
- Theme System
Engineering Highlights
- Component-based Astro frontend with reusable layout, project, form, and theme components
- Centralised TypeScript data structures for profile, project, and skills content
- Responsive project card grid and dynamic project detail pages
- Theme system supporting dark, light, and glass visual modes
- SCSS architecture using separated base, component, theme, and variable partials
- Flask REST API for project likes, contact messages, and health checks
- SQLite-backed persistence for local engagement and contact data
- Frontend-backend separation using environment-based API configuration
- Maintainable folder structure designed for future extension and deployment
What I Learned
- Improved understanding of Astro component architecture and content-driven page generation
- Practised maintainable frontend engineering using reusable components and centralised data files
- Designed a scalable SCSS structure with theme tokens, component partials, and responsive layout rules
- Strengthened frontend-backend separation by connecting Astro to a Flask REST API
- Used SQLite to support lightweight persistence for portfolio engagement features
- Applied engineering discipline to make the portfolio easier to update, extend, and publish