Portfolio Project

Overview

This project is a portfolio website template showcasing skills, projects, and experience. It is built using modern web technologies and follows best practices for performance and accessibility.

✨ Features

• Responsive Design: Optimized for various screen sizes and devices.
• Interactive Animations: Smooth and engaging animations using Framer Motion.
• SEO Optimized: Built with best practices for search engine optimization.
• Fast Performance: Optimized for fast loading times and performance.
• Accessible: Follows accessibility best practices to ensure a great experience for all users.

🛠️ Tech Stack

• Frontend Framework: Next.js 15
• UI Library: React 19
• Type Safety: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Code Quality: ESLint & Prettier

📁 Project Structure

/the-portfolio
├── .next/
│   ├── cache/
│   ├── server/
│   └── static/
├── public/
├── src/
│   ├── app/
│   ├── components/
│   ├── utils/
│   └── dummy.json
├── .eslintrc.json
├── .env
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.ts
└── tsconfig.json

Project Details

Technologies Used

• Next.js: A React framework for server-side rendering and static site generation.
• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.

Key Files and Directories

• app: Contains the main application components.
• components: Contains reusable UI components.
• utils: Contains utility functions.
• src/dummy.json: Contains dummy data for the portfolio.

Configuration Files

• tailwind.config.ts: Tailwind CSS configuration.
• tsconfig.json: TypeScript configuration.
• next.config.mjs: Next.js configuration.

🚀 Getting Started

Prerequisites

• Node.js 18+ installed
• pnpm or npm package manager
• Git

Installation Steps

1. Clone the repository:

   git clone https://github.com/tehseen01/the-portfolio.git

2. Navigate to the project directory:

   cd the-portfolio

3. Install the dependencies:

   npm install

4. Start the development server:

   npm start

5. Open http://localhost:3000 in your browser

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Code Style Guidelines

• Follow the ESLint configuration
• Write meaningful commit messages
• Add appropriate documentation
• Ensure all tests pass

📝 License

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

📞 Contact

For questions or feedback, reach out through:

• Email: [email protected]
• Twitter: @tehseen_type
• LinkedIn: Mohd Tehseen

---

Built with ❤️ by [Mohd Tehseen]