Nakshatra Raghav

This repository contains the source code for my portfolio site, which serves as a showcase of my work and projects. The site is built using Next.js and utilizes MDX files for content management, effectively treating markdown files as the CMS. Content is parsed using Contentlayer along with multiple plugins to enhance functionality.

Installation

  1. Clone this repository to your local machine:
git clone https://github.com/nakshatraraghav/portfolio
  1. Navigate to the project directory
cd portfolio
  1. Install Dependencies
pnpm install
  1. Run the app
pnpm dev

Available Scripts

In the project directory, you can run the following scripts:

  • pnpm run dev: Runs the Next.js development server. Open http://localhost:3000 to view it in your browser.
  • pnpm run build: Builds the production-ready optimized version of the application.
  • pnpm start: Starts the Next.js production server.
  • pnpm run lint: Lints the project files using ESLint.

Dependencies

The project utilizes various dependencies including:

  • Tailwind CSS Typography: Adds typography plugins to Tailwind CSS.
  • Contentlayer: For parsing MDX files and managing content.
  • Framer Motion: For animations and transitions.
  • Geist: A UI component library for React.
  • Next.js: A React framework for building server-side rendered and static websites.
  • React and React-DOM: Core libraries for building UI components.
  • Remark GFM: Markdown parser with GitHub Flavored Markdown support.

... and others listed in the package.json file.

Dev Dependencies

  • ESLint: A pluggable JavaScript linter.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • TypeScript: A superset of JavaScript that adds static typing.

Additional Configuration

The pnpm section in package.json contains overrides for specific dependencies.

Usage

Content Management with MDX and Contentlayer

MDX

MDX is a format that lets you write JSX in your markdown documents. It allows for the seamless integration of React components within markdown files, providing rich content creation capabilities. In this project, MDX files are used to create content for various sections of the portfolio site, such as project descriptions, blog posts, and about me sections.

Contentlayer

Contentlayer is a tool that enables the use of markdown (MDX) files as a source of truth for content in Next.js projects. It allows you to define content schemas using a simple YAML syntax and automatically generates TypeScript types for your content. Contentlayer seamlessly integrates with Next.js, providing a streamlined workflow for managing content in your applications.

To use Contentlayer in this project, simply create MDX files in the content directory and define your content schemas in the contentlayer.config.ts file. Contentlayer will parse these files and make the content available in your Next.js components, allowing you to dynamically render content on your site.

License

This project is licensed under the MIT License - see the LICENSE file for details.