Colophon
How I Built This Site
A short tour of the stack behind moaaz.be, what powers the pages, how the content is structured, and how it gets to the public internet.
This portfolio is a small content-driven app. The home page is a one-pager that previews the most important work; every project, hackathon, and tech-and-meet write-up has its own dedicated route so it can be linked, indexed, and shared on its own.
Framework & Styling
- Next.js 16↗App Router, React Server Components, static site generation for every page.
- React 19 + TypeScript↗Strictly typed components and content schema.
- Tailwind CSS v4↗Utility-first styling with CSS custom properties for light and dark themes.
- Motion↗Lightweight animation library used for the floating nav and scroll fades.
Content Pipeline
- MDX via next-mdx-remote↗Every blog post and project case study lives as an .mdx file in src/content/. Frontmatter drives the metadata, the body is rendered through a custom component map.
- gray-matter + remark/rehypegray-matter parses frontmatter; remark-gfm enables GitHub-flavoured markdown; rehype-slug and rehype-pretty-code handle anchors and syntax highlighting.
- sharp↗Image conversion and resizing, including DCRaw decoding for camera RAW files that get reprocessed into responsive JPEGs.
- lucide-react↗Icon set used throughout the navigation, cards, and metadata rows.
Hosting & Version Control
- Vercel↗Hosting and edge delivery. Every push to main is built, type-checked, and deployed automatically, preview URLs spin up for every branch.
- GitHub↗Source of truth for code and content. Version control lives at github.com/TwoEazy, issues and history travel with the codebase.
- Combell (domain)↗The moaaz.be domain was registered through Combell via the academic software programme.
How it's organised
src/content/posts/*.mdx: blog posts (projects, hackathons, tech-and-meet sessions, milestones).src/content/projects/*.mdx: project case studies linked to from the home page.src/data/*.ts: small typed data files for identity, languages, skills, and contact links.src/lib/content.ts: loader that reads MDX, parses frontmatter, computes reading time, and surfaces related posts.
Tooling principles
- Static by default. Every page is pre-rendered at build time, fast, cacheable, and cheap to host.
- Content as files. Posts are MDX, not a database editable in any text editor, diffable in Git, no CMS lock-in.
- Accessible defaults. Real headings, alt text on every image, focus rings, and reduced-motion respected.
Source code lives on GitHub: github.com/TwoEazy.
Deployed to Vercel on every push.