https://github.com/forquosh/portfolio-website
My personal portfolio website, built with Next.js.
https://github.com/forquosh/portfolio-website
blog mdx nextjs portfolio-website radix-ui reacthookform resend-email resend-email-api shadcn-ui sonner tailwindcss typescript vercel zod
Last synced: 6 months ago
JSON representation
My personal portfolio website, built with Next.js.
- Host: GitHub
- URL: https://github.com/forquosh/portfolio-website
- Owner: Forquosh
- Created: 2025-01-17T07:06:56.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-02-13T09:05:37.000Z (8 months ago)
- Last Synced: 2025-02-13T09:35:41.423Z (8 months ago)
- Topics: blog, mdx, nextjs, portfolio-website, radix-ui, reacthookform, resend-email, resend-email-api, shadcn-ui, sonner, tailwindcss, typescript, vercel, zod
- Language: TypeScript
- Homepage: https://www.forquosh.dev
- Size: 4.31 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal Portfolio Website
A modern, responsive portfolio website built with **Next.js 15**, **TypeScript** and **Tailwind CSS**. Features a clean and minimal design with dark/light mode support and **dynamic content management** through **MDX**. Deployed on **[Vercel](https://vercel.com)**.
## Features
- 🌓 Dark/Light mode support
- 📱 Fully responsive design
- 📝 MDX-based blog posts and projects
- 🔍 Search functionality for posts
- 📬 Contact form with email integration
- 🎨 Clean, minimal UI with Tailwind CSS
- ⚡ Fast page loads with Next.js App Router
## Tech Stack
- **Framework:** Next.js 15
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **Content:** MDX with gray-matter
- **Email:** Resend
- **UI Components:** Radix UI, Shadcn UI
- **Form Handling:** React Hook Form + Zod
- **Notifications:** Sonner
## Getting Started
1. Clone the repository
2. Install dependencies:
```bash
pnpm install
```
3. Create a `.env` file with required environment variables for managing emails and newsletter:
```bash
RESEND_API_KEY=your_resend_api_key
RESEND_AUDIENCE_ID=your_resend_audience_id
```
4. Run the development server:
```bash
pnpm dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser
## Project Structure
- `/src/app/*` - App router pages and layouts
- `/src/components/*` - React components
- `/src/content/*` - MDX content (posts and projects)
- `/src/lib/*` - Utility functions and type definitions
- `/src/emails/*` - Email templates
- `/public/*` - Static assets
## Content Management
Posts and projects are managed through MDX files in the `/src/content` directory. Each content piece includes frontmatter for metadata:
```yaml
---
author: Your Name
title: Post Title
date: YYYY-MM-DD
image: /images/posts/image.jpg
source: http://blabla
summary: Brief description
---
```
## License
MIT License