MY PORTFOLIO PROJECT

How I built this website.

This is where I share my projects and the work behind them. I use Astro, React and TypeScript for the website, GitLab for my code and release workflow, and AWS for delivery through my own domain.

My Rosary Guide runs on the same hosting setup. It brings together English and Tagalog prayers, Scripture and an interactive rosary.

What I use on the frontend

I use Astro to build the portfolio as static HTML. That keeps the page readable without JavaScript. For features that need interaction, such as the Rosary Guide’s prayer navigation and saved progress, I use React.

TypeScript helps me catch type errors before a release. Vite handles the build, and I use Yarn with a lockfile to keep dependency versions consistent.

How I host it

GitLab Pages

I publish the static files here and keep my source repository private.

AWS CloudFront

I use CloudFront to serve the website through a CDN. My deployment pipeline refreshes the cache and checks the published files.

AWS Certificate Manager

I use managed certificates for HTTPS on my custom domains.

CloudFront Functions

I use a function to route the portfolio and Rosary Guide, and redirect the root domain to HTTPS www while keeping the path and query string.

Namecheap

I manage my domain and DNS here, pointing the website’s hosts to CloudFront.

How I release changes

I use GitLab CI/CD to run type checks, tests, a build and a dependency audit. I review changes in a merge request before bringing them into main.

When I’m ready to publish, I merge main into my protected production branch. The pipeline checks that commit, publishes the files to GitLab Pages, refreshes CloudFront’s cache and checks the public website.

I record file checksums with each release so I can compare what I built with what is live. I also check the affected pages on desktop and mobile.

How I handle AWS access

I use GitLab OIDC and an AWS IAM role to give the release pipeline temporary access. I don’t store permanent AWS keys in CI. The role is restricted to this project’s production release workflow and the CloudFront operations it needs.

Keeping recovery and costs manageable

I keep the previous accepted release and its checksums so I can restore those files if needed. I’ve tested that rollback process.

Static hosting lets me run this website without maintaining an application server. I check hosting coverage and CI usage before releases, and use budget alerts to keep track of costs.

What I’m working on next

I’m also working on a separate Laravel and React foundation for future projects. It currently runs locally; I’ll add those projects here when they’re ready to share.