Alissanguyen Dot Dev

screenshot of Alissanguyen Dot Dev
react
remix
tailwind
headless-ui
contentful

Alissanguyen Dot Dev

New version of my postfolio website, this time with gsap for animations

Overview:

Alissa Nguyen's website is a personal portfolio website where she showcases her work and publishes her writings. The website has a homepage and a blog section, providing visitors with a preview of the content available. Nguyen has utilized various technologies to build her website, including Remix, React, and TailwindCSS. Additionally, she has incorporated React Intersection Observer for animations when elements are in the viewport. Nguyen has also developed a custom typewriter hook using an NPM package. The website is deployed through Vercel and utilizes domain management services from Cloudflare and Namecheap. Content management is handled by Contentful, and several UI and animation libraries, such as Reach, AnimeJS, Framer Motion, and Hero Icons and React Icons, are employed. Nguyen credits Kent C. Dodds as a primary inspiration for her website.

Features:

  • Homepage with a preview of Alissa Nguyen's work
  • Blog section with a preview of articles
  • Built with Remix, React, and TailwindCSS
  • React Intersection Observer for animations
  • Custom typewriter hook developed by Nguyen
  • Deployed through Vercel
  • Domain management through Cloudflare and Namecheap
  • Content management via Contentful
  • Utilizes UI and animation libraries like Reach, AnimeJS, Framer Motion, Hero Icons, and React Icons
  • Inspired by Kent C. Dodds

Installation:

To install and use Alissa Nguyen's website theme, follow these steps:

  1. Clone the repository: git clone https://www.github.com/author/theme-name.git
  2. Install the required dependencies: npm install
  3. Set up your configuration file with appropriate credentials and settings.
  4. Customize the content to fit your needs.
  5. Run the development server: npm run dev
  6. Access the website in your browser at http://localhost:3000

Summary:

Alissa Nguyen's website is a personal portfolio and writing platform that showcases her work. Built using technologies like Remix, React, and TailwindCSS, it offers features such as a homepage with a preview of her projects and a blog section with article previews. The website utilizes various tools and libraries for animations, code snippets, and UI components. Nguyen's custom typewriter hook and inspirations from Kent C. Dodds add a personal touch to the website. With the provided installation guide, users can customize and deploy their own versions of the theme.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

remix
Remix

Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

headless-ui
Headless UI

Headless UI is a set of completely unstyled, fully accessible UI components for React, Vue, and Alpine.js that empower developers to build their own fully accessible custom UI components. Headless UI allows developers to focus on building accessible and highly functional user interfaces, without the need to worry about styling or layout.

contentful
Contentful

Contentful is a headless content management system (CMS) that provides a flexible and scalable platform for creating, managing, and delivering digital content across multiple channels and devices.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

framer-motion
Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

vercel
Vercel

Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.