/BlurryFace

My portfolio website built using Next.js, Tailwind CSS, Contentlayer and deployed to Vercel

Primary LanguageTypeScriptMIT LicenseMIT

Portfolio Website

This repository contains the codebase for my personal portfolio website built using Next.js, Tailwind CSS, Contentlayer and deployed to Vercel. The website is divided into three primary sections - Home, Projects, and Contact Me.

Screenshot (417)

Technology Stack

  • Next.js: A production-ready, versatile framework for building applications in React. It provides out-of-the-box support for server-side rendering, which helps improve SEO performance.
  • Tailwind CSS: A utility-first CSS framework packed with classes like flex, pt-4, text-center, and more that can be combined to create unique designs directly within your markup.
  • Contentlayer: A modern, headless CMS (Content Management System) built on top of Next.js. Contentlayer allows content to be stored in a Git repo using the MDX format, providing an all-in-one solution for data sourcing, transformation, and more.

Website Structure

Home Page

The homepage is the first page visitors see when they arrive at the website. It features a brief introduction about me and quick navigation links to other sections of the website. Dominating the landing page is an artistically rendered portrait of me, donning a black hoodie. This captivating piece, created by a talented artist, lends a personalized yet creative touch to the page.

Projects Page

The projects page showcases all of my past and current projects. Each project has its own dedicated .mdx file where details about the project are stored, such as its name, a brief description, and a link to the project's GitHub repository.

Contact Page

The contact page contains my professional contact information, including social media handles and my email address.

Key Features

  1. Responsive Design: The website is fully responsive, ensuring a high-quality user experience on all devices.
  2. Dynamic Content: The website uses Contentlayer to source its content dynamically from .mdx files. This means the content on the website can be easily updated by simply modifying the corresponding .mdx files.
  3. Performance Optimized: Next.js's server-side rendering feature ensures fast page load times and a smooth browsing experience.

Feel free to explore the code and leave any feedback or questions.