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
- Next.js - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Framer Motion - Animations
- React Syntax Highlighter - Code highlighting
š¦ Getting Started
- Clone the repository
git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name
- Install dependencies
npm install
# or
yarn install
- Configure your website
Edit the configuration files in the
configs
directory:
main.ts
- Main configuration (name, email, etc.)skills.ts
- Your technical skillssocials.ts
- Social media linkslinks.ts
- Additional external links
- 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
- Styling: Modify the Tailwind configuration in
tailwind.config.js
- Components: Customize components in the
components
directory - 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.