This is a personal portfolio website built with Next.js, TypeScript, and Tailwind CSS. It uses MDX for content management and is deployed on Vercel.

• Framework: Built with Next.js for a fast and optimized web experience.
• Styling: Styled with Tailwind CSS for a modern and responsive design.
• Content: Content is managed with MDX, allowing for the use of React components in Markdown.
• Email: Uses React Email and Resend for the contact form.
• Rate Limiting: Implements rate limiting with Upstash Redis to prevent abuse.
• Analytics: Integrated with Vercel Analytics to track website traffic.
• Linting and Formatting: Uses Biome for linting and formatting to maintain code quality.

To get a local copy up and running, follow these simple steps.

• Node.js (v18 or later)
• pnpm

1. Clone the repo

   git clone https://github.com/MarwanShehata/portfolio.git

2. Install NPM packages

   pnpm install

3. Start the development server

   pnpm dev

Open http://localhost:3000 with your browser to see the result.

• Next.js - React framework for production
• TypeScript - Static type checker for JavaScript
• Tailwind CSS - Utility-first CSS framework
• MDX - Markdown for the component era
• React Email - Build and send emails with React
• Resend - Email for developers
• Upstash Redis - Serverless Redis database
• Biome - Linter, formatter, and more for web projects
• Vercel - Platform for deploying and hosting web applications

/
├── app/              # Main application code
├── components/       # Reusable React components
├── content/          # MDX content for pages and blog posts
├── hooks/            # Custom React hooks
├── lib/              # Utility functions and libraries
├── public/           # Static assets
├── .gitignore        # Files to be ignored by Git
├── biome.json        # Biome configuration
├── next.config.ts    # Next.js configuration
├── package.json      # Project dependencies and scripts
├── postcss.config.mjs# PostCSS configuration
├── README.md         # This file
└── tsconfig.json     # TypeScript configuration

This portfolio uses content-collections to manage content. The content is written in MDX and is located in the content directory.

• Blog Posts: content/blog/*.mdx
• Pages: content/pages/*.mdx

Each MDX file contains frontmatter at the top, which is used to provide metadata for the content. For example, a blog post might have the following frontmatter:

---
title: A Blog Post
description: This is a short summary/description.
date: 04-20-2025
---

## Contact

Marwan Shehata - [@MarwanShehata](https://twitter.com/MarwanShehata) - [email protected]

LinkedIn: [https://www.linkedin.com/in/marwanshehata/](https://www.linkedin.com/in/marwanshehata/)