Showcasing My Personal Portfolio
Introduction
Welcome to my personal portfolio — the one you’re viewing at https://marcusng.vercel.app/. This site is designed not only to showcase my experience and projects, but also to demonstrate my approach to modern web development: emphasis on performance, strong UX, clean architecture, and deploy-ready systems.
In this post you’ll find an overview of the technologies I used, why I chose them, what problems they solve, and how they come together to produce the result.
Technology Stack & Architecture
Here’s a breakdown of the main technologies powering the portfolio, and how they contribute.
Core Framework: Next.js
The site is built with Next.js — a React-based framework for building server-side rendered (SSR), statically generated, or hybrid web applications.
Type Safety & Modern JS: TypeScript + React
The codebase uses TypeScript (the languages breakdown shows ~94% TypeScript) in the GitHub repo. GitHub
React is the underlying library (you’ll see references to React in the skills section). Marcus Nguyen
Using TypeScript and React together helps enforce type-safety, makes refactoring easier, and improves developer experience. For a portfolio site, I want clear code, maintainability, and demonstration of professional-level tooling.
Styling and UI: Tailwind CSS & other UI tools
From the skills and site snapshot, I leverage Tailwind CSS for utility-first styling. Shadcn for components, Framer motion for some smooth animation.
CMS / Content Management: Sanity
I used Sanity (a headless CMS) to manage content for the site: blog posts, project entries, maybe images. This is a great choice for a portfolio, because it decouples content from code, allows easy editing, and integrates well with Next.js via APIs/SDKs.
Deployment Platform: Vercel
The site is deployed on Vercel (the creators of Next.js). This streamlines deployment (zero-config build/deploy pipelines), automatic CDN delivery, previews for pull requests, and fast performance globally. Marcus Nguyen
Developer Tooling & Infrastructure
I use a modern toolchain:
- GitHub for version control and repository hosting. GitHub
- Likely using CI/CD workflows (the repository has .github/workflows) to automate builds/deploys. GitHub
- ESLint/Prettier configured (eslint.config.mjs, .prettierrc). GitHub
- Tailwind config (tailwind.config.ts) & PostCSS config (postcss.config.mjs). GitHub
| Layer | Technology | Reason |
|---|---|---|
| Framework | Nextjs | SSR/SSG support |
| Language | Typescript | Type safety, maintainability |
| UI / styling | Tailwind CSS, ShadCN | Utility-first styling, good dev DX |
| Content / CMS | Sanity | Manage blog, projects content separately from code |
| Hosting / Deploy | Vercel | Simplified deployment, global delivery, preview pipelines |
| Dev Tools | GitHub, ESLint/Prettier, CI/CD | Professional workflow, code quality |
Why This Stack Matters for a Portfolio
For a personal portfolio site, it’s tempting to go with something minimal. But my choice reflects that I want to demonstrate professional-level skills:
- Using Next.js + TypeScript shows I’m up-to-date with modern web frameworks.
- Tailwind (and knowledge of MUI/Ant Design) signals flexibility in styling.
- Sanity integration shows I can architect content systems, not just pages.
- Vercel deployment shows I understand deployment pipelines.
- Proper tooling (linting, config files, workflows) shows discipline and a polished deliverable.
All of this comes together to give the viewer not just a “nice portfolio”, but one that reflects the kind of development work I bring to a team.
What I Learned / Future Improvements
Working on this site taught me a few things:
- Integrating a headless CMS (Sanity) with Next.js is very powerful for managing content outside of the codebase.
- Utility-first styling with Tailwind helps speed up styling without sacrificing readability.
- Using a polished deployment platform (Vercel) makes continuous delivery easy.
- Even a portfolio benefits from proper dev tooling (TypeScript, linting, CI/CD).
In the future, I’d like to: - Add more interactive features (e.g., animations, dark mode toggle) while ensuring performance doesn’t suffer.
- Explore Incremental Static Regeneration in Next.js for blog posts so content updates faster without full rebuilds.
- Improve accessibility further (e.g., ARIA, keyboard navigation).
- Add analytics/tracking for site usage (while respecting privacy).
Conclusion
This portfolio is more than a static set of pages — it’s a demonstration of my full-stack mindset: from architecture and tooling, through UI and styling, to deployment and content management.
By choosing Next.js, TypeScript, Tailwind CSS, Sanity and Vercel, I’ve built a site that is fast, modern, maintainable, and scalable — qualities I bring into every project I work on.