This portfolio site is itself a project worth tracking. It started as a standard Astro starter template and has been progressively customized to serve as both a professional portfolio and a personal project tracker.
Goals
- Zero maintenance overhead — content is plain markdown files, no CMS or database
- Fast by default — Astro’s island architecture means zero JavaScript shipped unless needed
- Self-documenting — the projects section tracks its own development in real time
Stack Decisions
Astro was chosen over Next.js or Gatsby because the site is primarily static content — no user authentication, no dynamic data fetching at runtime. Astro’s content collections provide type-safe frontmatter without requiring a headless CMS.
GitHub Pages + Actions for hosting and CI/CD keeps the entire stack free and the deploy pipeline in the same place as the source code.
Projects System Design
The most interesting part of this site is the custom projects system that replaced the default blog. Each project is a markdown file with structured frontmatter for tasks, milestones, and metadata. A separate project-updates collection handles devlog entries, linked to projects by ID.
This gives a clean separation: structured data in frontmatter, prose in the markdown body, and chronological updates as separate files.
Tasks
- Improve mobile layout and responsiveness medium
- Add dark mode toggle low
- Set up Astro project and deploy pipeline high
- Build homepage with experience and skills high
- Replace blog with projects section high
- Add project detail pages with tasks and devlog high
- Add category tag filtering to projects overview medium
Milestones
- Initial deploy with homepage
- Projects section live
- Content fully populated
Dev Log
Projects section launched — blog replaced
Replaced the default Astro blog template with a full projects tracking system: tasks, milestones, devlog entries, tag filtering, and progress bars.
The new projects section is live. This replaces the default Astro blog template that shipped with the starter, which was filled with placeholder Lorem Ipsum posts.
What Was Built
The system uses two Astro content collections:
projects— one markdown file per project with structured frontmatter for tasks, milestones, tech stack, and linksproject-updates— separate markdown files for devlog entries, linked to their parent project by ID
Progress bars are calculated automatically from the task list (done / total), so they always stay in sync without manual updates.
Features
- Status badges — Active, Completed, Paused, Planning with distinct colors
- Progress bars — auto-calculated from tasks
- Task list — with status icons and priority levels (High / Medium / Low)
- Milestone timeline — key dates with completion checkmarks
- Devlog — this entry, for instance
- Tag filtering — client-side JavaScript filters the card grid by category
- GitHub / Demo links — shown on both cards and detail pages
Design Approach
Everything is plain CSS using the site’s existing --accent and gray CSS variables. No external component library or additional npm packages. The tag filter uses a small inline <script> that toggles a .hidden class — about 20 lines of vanilla JS.