https://github.com/codewithshabbir/portfolio-next-js
A clean, responsive personal portfolio website built with Next.js, TypeScript, Tailwind CSS, and AOS animations. Showcasing my projects, skills, and experience in web development.
https://github.com/codewithshabbir/portfolio-next-js
myportfolio nextjs-template portfolio portfolio-page portfolio-site portfolio-template portfolio-website portfolios tailwandcss typescript
Last synced: 2 months ago
JSON representation
A clean, responsive personal portfolio website built with Next.js, TypeScript, Tailwind CSS, and AOS animations. Showcasing my projects, skills, and experience in web development.
- Host: GitHub
- URL: https://github.com/codewithshabbir/portfolio-next-js
- Owner: codewithshabbir
- Created: 2024-11-09T21:28:13.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-11T11:06:05.000Z (6 months ago)
- Last Synced: 2024-11-11T11:35:24.778Z (6 months ago)
- Topics: myportfolio, nextjs-template, portfolio, portfolio-page, portfolio-site, portfolio-template, portfolio-website, portfolios, tailwandcss, typescript
- Language: TypeScript
- Homepage: https://codewithshabbir.vercel.app/
- Size: 5.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal Portfolio - Code with Shabbir 🌐
Welcome to the repository for my personal portfolio website, live at [codewithshabbir.vercel.app](https://codewithshabbir.vercel.app/). This project showcases my skills, projects, and professional experience in web development.
> **Note:** This is a personal project and is not intended for public or commercial use.
---
## 🔒 Usage Restrictions
This project is solely for my personal portfolio. **Unauthorized use, copying, or redistribution of any part of this project is strictly prohibited.**
## 🚀 Features
- **Responsive Design:** Built to deliver a seamless experience across all devices.
- **Interactive Animations:** Utilizes AOS (Animate on Scroll) to enhance user engagement with smooth animations.
- **Organized Projects Section:** Projects are neatly categorized, allowing visitors to navigate through my work easily.
- **Modern UI/UX:** A focus on clean design and intuitive navigation.
## 🛠️ Technology Stack
- **Frontend:** HTML, CSS, TypeScript
- **Framework:** Next.js
- **Styling:** Tailwind CSS and custom CSS
- **Animation Library:** AOS (Animate on Scroll)
- **Hosting:** Vercel
- **Fonts:** 'Lufga' font family
## 📂 Project Structure
```
├── components # Reusable components used across pages
├── public # Static assets (images, fonts, etc.)
├── styles # Global and modular CSS files
└── pages # All Next.js pages (homepage, projects, contact)
```
## 🔧 Setup Instructions
1. **Clone the Repository:**
```bash
git clone https://github.com/yourusername/portfolio.git
cd portfolio
```
2. **Install Dependencies:**
```bash
npm install
```
3. **Run the Development Server:**
```bash
npm run dev
```
Visit [http://localhost:3000](http://localhost:3000) to view the site.
4. **Build the Project:**
```bash
npm run build
```
5. **Start the Production Server:**
```bash
npm start
```
## 📁 Folder & Code Organization
- **Components Folder:** Contains reusable components such as header, footer, project cards, etc.
- **Pages Folder:** Organized for different sections of the portfolio (home, projects, about, contact).
- **Styles Folder:** Uses Tailwind CSS alongside modular CSS for specific styling needs.
## 📝 License
This project is **not licensed for public use**. All rights reserved by the author, [Muhammad Shabbir](https://www.linkedin.com/in/codewithshabbir/) . Unauthorized use or redistribution of this project is prohibited.