Alissa Nguyen's Website is a personal portfolio and blog template built on Remix (Remix Run) with React and TypeScript, styled with TailwindCSS, and powered by Contentful as its headless CMS. It is designed to serve as both a portfolio showcase and a writing platform, with the repository publicly available on GitHub (45 stars). The project, created by Alissa Nguyen, was inspired by Kent C. Dodds' personal site.
What is Alissa Nguyen's Website?
Alissa Nguyen's Website is a developer portfolio and blog template that takes content from Contentful (a headless CMS) and renders it as a modern web application using Remix and React. The site runs on Vercel for deployment, with domain management handled through Cloudflare, Namecheap, and Netlify. Its core function is to present a developer's projects and written articles in a single, cohesive personal site.
Key Features
- Remix + TypeScript — The application is built with the Remix framework (remix-run) using React and TypeScript, providing server-side rendering and file-based routing.
- TailwindCSS — Styling is done with the utility-first TailwindCSS framework, allowing rapid custom design without leaving markup.
- Contentful CMS — All content is managed through Contentful, so blog posts and portfolio items can be updated without touching code.
- Vercel Deployment — The site is configured for one-click deployment on Vercel, with continuous integration from the repository.
- Animation libraries — Uses Framer Motion and AnimeJS for animations, plus React Intersection Observer to trigger animations when elements scroll into view.
- useTypewriterHook — Includes a custom NPM package created by the author for typewriter text effects.
- Code highlighting — Prism React Renderer is used to display syntax-highlighted code snippets in blog posts.
- Email automation — SendGrid is integrated for automatic email sending (e.g., contact forms).
- Icons — Hero Icons and React Icons provide SVG and PNG icons throughout the interface.
Who is it for?
- Developers seeking a clean, personal portfolio to showcase their projects and technical writing.
- Tech writers who want a CMS-driven blog with code snippets, using Contentful to manage posts.
- Remix learners looking at a real-world example of a Remix application with TypeScript and Tailwind.
- Design-minded individuals who want animation-rich interactions (Framer Motion, AnimeJS) on their personal site.
What can you do with it?
- Showcase your work: Feature your projects and open-source contributions with descriptions and links from Contentful.
- Publish tutorials and articles: Write markdown or rich-text posts in Contentful, rendered with Prism code highlighting.
- Customize the design: Use TailwindCSS to restyle the entire site, and swap icons with Hero Icons or React Icons.
- Deploy and manage your domain: Push to GitHub and deploy automatically on Vercel; manage DNS with Cloudflare or Namecheap.
How does the site work?
Content is authored and stored in Contentful, then queried by the Remix loaders at request time. The Remix server renders pages server-side, combining the content with Tailwind-styled React components. Animations (Framer Motion, AnimeJS) are triggered by React Intersection Observer on scroll, and the site is deployed to Vercel, which handles build and hosting.
