README.md

Personal Portfolio Website

A modern, responsive portfolio website built with Next.js and TypeScript

šŸš€ Features

  • Modern Stack: Built with Next.js and TypeScript
  • Fully Responsive: Works seamlessly on all devices and screen sizes
  • Dark Mode: Beautiful dark theme with particle effects
  • Dynamic Content: Easy content management through configuration files
  • Project Showcase: Integrated GitHub projects section
  • File Explorer: Browse and view project files with syntax highlighting
  • Markdown Support: Rich content rendering with math and code highlighting
  • SEO Optimized: Built-in meta tag generation and optimization

šŸ› ļø Tech Stack

šŸš¦ Getting Started

  1. Clone the repository
git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name
  1. Install dependencies
npm install
# or
yarn install
  1. Configure your website Edit the configuration files in the configs directory:
  • main.ts - Main configuration (name, email, etc.)
  • skills.ts - Your technical skills
  • socials.ts - Social media links
  • links.ts - Additional external links
  1. Start the development server
npm run dev
# or
yarn dev

Visit http://localhost:3000 to see your website.

šŸ“ Project Structure

ā”œā”€ā”€ app/                # Next.js app directory
ā”œā”€ā”€ components/         # React components
ā”œā”€ā”€ configs/           # Configuration files
ā”œā”€ā”€ content/           # Markdown content
ā”œā”€ā”€ interfaces/        # TypeScript interfaces
ā”œā”€ā”€ lib/              # Utility functions
ā””ā”€ā”€ public/           # Static assets

āš™ļø Configuration

The website is highly configurable through the configs directory:

// configs/main.ts
export const config: IConfig = {
  name: 'Your Name',
  email: 'your@email.com',
  location: 'Your Location',
  // ... other configurations
}

šŸ“ Content Management

Add your content in the content directory:

  • pages/ - Static pages (About, Contact, etc.)
  • posts/ - Blog posts (if enabled)
  • projects/ - Project descriptions

šŸŽØ Customization

  1. Styling: Modify the Tailwind configuration in tailwind.config.js
  2. Components: Customize components in the components directory
  3. Layout: Adjust the layout in components/Layout.tsx

[!IMPORTANT]
While you're free to use this project for your personal website, please maintain the attribution in the footer. You can modify the text but must keep the link to the original repository.

šŸ¤ Contributing

Contributions are welcome! Please feel free to submit a Pull Request.