https://github.com/shakilofficial/portfolio-client
🚀 This is the frontend of my personal portfolio website, built with Next.js (TypeScript), Tailwind CSS, Redux, Framer Motion, and Shadcn UI. It features dynamic animations, a blog section, a projects showcase, and an admin dashboard for content management.
https://github.com/shakilofficial/portfolio-client
app app-router-nextjs framework jwt-authentication nextjs15 react react-hook-form redux-toolkit shadcn-ui tailwindcss typescript
Last synced: 3 months ago
JSON representation
🚀 This is the frontend of my personal portfolio website, built with Next.js (TypeScript), Tailwind CSS, Redux, Framer Motion, and Shadcn UI. It features dynamic animations, a blog section, a projects showcase, and an admin dashboard for content management.
- Host: GitHub
- URL: https://github.com/shakilofficial/portfolio-client
- Owner: Shakilofficial
- Created: 2025-02-09T05:43:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-20T00:49:54.000Z (3 months ago)
- Last Synced: 2026-04-20T02:42:33.105Z (3 months ago)
- Topics: app, app-router-nextjs, framework, jwt-authentication, nextjs15, react, react-hook-form, redux-toolkit, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://shakil-tawny.vercel.app/
- Size: 11.1 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Portfolio Frontend (Next.js)
## 🌟 **Overview**
This is the **frontend** of my **portfolio website**, built using **Next.js (TypeScript)** with a sleek and responsive UI. The project utilizes **Tailwind CSS, Framer Motion, ShadcnUI, Redux, JWT, and NextAuth** for an optimized and interactive experience. The dashboard offers complete **CRUD** functionality and other powerful features.
---
## 🛠 **Tech Stack**
### **Frontend**
- **⚡ Next.js (TypeScript)** – SSR & SSG for better performance & SEO
- **🎨 Tailwind CSS** – Utility-first CSS framework for fast styling
- **🎭 Framer Motion** – Smooth animations & interactions
- **🛠 ShadcnUI** – Beautiful, accessible UI components
- **🗄 Redux** – State management for scalable applications
- **🔐 JWT & NextAuth** – Secure authentication & authorization
---
## 📌 **Features**
### 🔹 **Home Page** 🏠
- Showcases an interactive introduction & featured projects
- Uses **Framer Motion** for smooth animations
- **Responsive** layout for all screen sizes
### 🔹 **Projects Section** 📂
- Displays portfolio projects dynamically
- Filters projects by category & tech stack
- Integrated **dynamic routing** for individual project pages
### 🔹 **Blog Section** ✍️
- Fetches blog posts dynamically
### 🔹 **Contact Form** 📬
- Users can send messages directly via a contact form
- Integrated with **email services** for instant communication
### 🔹 **Dashboard** 🎛
- Secure **authentication (NextAuth, JWT)** 🔐
- **CRUD operations** for managing blog posts, projects & users 📝
- **Dark Mode** & customizable UI 🎨
- **Role-based access control (Admin/User)** 🔑
- Real-time updates with **Optimistic UI updates** 🚀
---
## 🏗 **Installation & Setup**
1️⃣ **Clone the Repository**
```bash
git clone https://github.com/Shakilofficial/portfolio-client.git
cd frontend
```
2️⃣ **Install Dependencies** 📦
```bash
npm install
# or
yarn install
```
3️⃣ **Set Up Environment Variables**
Create a `.env.local` file and add the following:
```env
NEXT_PUBLIC_API_URL=your_backend_api_url
NEXTAUTH_SECRET=your_secret_key
NEXTAUTH_URL=http://localhost:3000
```
4️⃣ **Run the Development Server** 🚀
```bash
npm run dev
# or
yarn dev
```
5️⃣ **Open in Browser** 🌍
Visit: [http://localhost:3000](http://localhost:3000)
---
## 📜 **Project Structure**
```
/frontend-portfolio
│── public/ # Static assets
│── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Next.js pages (home, blog, projects, dashboard)
│ ├── styles/ # Global styles
│ ├── store/ # Redux store & slices
│ ├── utils/ # Helper functions
│ └── hooks/ # Custom hooks
│── .env.local # Environment variables
│── next.config.js # Next.js configuration
│── tailwind.config.js # Tailwind configuration
│── package.json # Dependencies & scripts
```
---
## 🚀 **Future Enhancements**
- **📊 Analytics Integration** (Google Analytics)
- **🛒 E-commerce Features** (for product showcase)
- **📡 API Caching & Performance Optimization**
---
## 👥 Contributing
🔹 Fork the repository.
🔹 Create a new branch (`git checkout -b feature-branch`).
🔹 Commit your changes (`git commit -m 'Add new feature'`).
🔹 Push to the branch (`git push origin feature-branch`).
🔹 Create a **Pull Request**.
---
## 📞 Contact
📧 **Email**: [mrshakilhossain@outlook.com](mailto:mrshakilhossain@outlook.com)
🔗 **LinkedIn**: [LinkedIn Profile](https://www.linkedin.com/in/your-profile)
🌐 **Portfolio**: [Visit My Portfolio](https://shakilhossain-sigma.vercel.app)
📘 **Facebook**: [Facebook Profile](https://www.facebook.com/iamshakilhossain)
---
💖 _Don't forget to ⭐ this repo if you found it helpful!_
### 🚀 Made with ❤️ by [Md Shakil Hossain](https://github.com/Shakilofficial)
