Third iteration of my personal site/portfolio built with Gatsby and Tailwind CSS. Content is authored in MDX (Git-based workflow), compiled through Gatsby’s GraphQL data layer, and deployed as a static, PWA-ready site on Firebase Hosting.
- Static-first architecture — pre-rendered at build time with client-side routing for instant transitions.
- MDX content system — posts/pages live in Git as Markdown files; React components can be used directly in content.
- Image pipeline — responsive images via Sharp (WebP) created at build time, lazy-loading, and LQIP placeholders.
- Performance guardrails — code-splitting, inlined critical CSS, and route prefetching.
- CI/CD — GitHub Actions builds on push; production deploys to Firebase’s global edge.
- Design & DX — Tailwind utility classes, sensible defaults, and a small, composable component set.
- Fast page loads with SPA-smooth navigation (100% score on Lighthouse).
- Maintainable content workflow via PR reviews in Git.
- Zero-ops hosting and predictable releases.
To get the website up and running locally, first clone the repo
$ git clone [email protected]:mohatt/website.gitInstall dependencies
$ pnpm install$ pnpm start # Start dev server at localhost:8000
$ pnpm lint # Lint all source code files
$ pnpm lint:js # Lint JS sources
$ pnpm lint:css # Lint CSS sources
$ pnpm format # Format all source code files$ pnpm clean # (Optional) Clear gatsby cache before build
$ pnpm build # Generate a fully static production build of the website
$ pnpm serve # Preview the site as it will appear once deployedThe website is currently hosted at Firebase Hosting.
- Staging
- Domain: mohatt-staging.web.app
- Branch: development
- Production
- Domain: mohatt.web.app
- Branch: production
The deployment workflow is fully managed by git and works as follows:
- Direct branch commits or PR merges are built then deployed directly to the branch live channel
- Pull requests are built then deployed to a unique sub-channel under the target branch channel (e.g.
some-feature.mohatt.web.app)
For more information, check out .github/workflows directory.
