https://github.com/mubasshir14/portfolio-client
I'm an aspiring Full Stack Developer specializing in the MERN stack (React.js, Next.js, Node.js, PostgreSQL, Prisma ORM). I build real-world projects with clean, efficient code, focusing on modern UI/UX and robust backend solutions. Proficient in JavaScript, Python, and Java
https://github.com/mubasshir14/portfolio-client
date-fns dompurify framer-motion html-to-text nextjs primeicons primereact quill-editor redux typescript
Last synced: about 1 month ago
JSON representation
I'm an aspiring Full Stack Developer specializing in the MERN stack (React.js, Next.js, Node.js, PostgreSQL, Prisma ORM). I build real-world projects with clean, efficient code, focusing on modern UI/UX and robust backend solutions. Proficient in JavaScript, Python, and Java
- Host: GitHub
- URL: https://github.com/mubasshir14/portfolio-client
- Owner: Mubasshir14
- Created: 2025-05-18T17:25:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-12T09:38:21.000Z (about 1 year ago)
- Last Synced: 2025-06-20T04:02:12.509Z (12 months ago)
- Topics: date-fns, dompurify, framer-motion, html-to-text, nextjs, primeicons, primereact, quill-editor, redux, typescript
- Language: TypeScript
- Homepage: https://developer-portfolio-eta-two.vercel.app/
- Size: 26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portfolio and Blog Website - Frontend
## 🌍 Live Link
🔗 [Website](https://developer-portfolio-eta-two.vercel.app)
## Description
This is a personal portfolio and blog website built with Next.js and TypeScript. It features project showcases, blog management, authentication, and a user-friendly dashboard.
## Features of This Project
- **Home Page:** Portfolio introduction, skills, projects, and resume download.
- **Projects:** List with detailed project pages.
- **Blog:** Fetches and displays blog posts dynamically.
- **Contact:** Form to submit messages.
- **Dark Mode:** User preference toggle.
- **SEO Optimization:** SSR & SSG implemented for better performance.
## Tech Stack
- **Next.js (React Framework)** for building the frontend.
- **TypeScript** for strong typing and better developer experience.
- **Tailwind CSS & DaisyUI** for styling.
- **MongoDB** for data storage and management.
- **NextAuth** for authentication.
- **Framer Motion** for animations.
## Prerequisites
Ensure you have the following installed:
- **npm** or **yarn**
## Installation
1. **Clone the repository:**
```bash
git clone
cd
```
2. **Install dependencies:**
```bash
npm install
```
3. **Create a `.env` file** in the root directory and configure your environment variables:
```bash
GITHUB_ID=
GITHUB_SECRET=
GOOGLE_ID=
GOOGLE_SECRET=
NEXTAUTH_SECRET=
NEXTAUTH_URL=https:
BACKEND_URL=https:
```
## Scripts
- **Start Development Server:**
```bash
npm run dev
```
- **Build for Production:**
```bash
npm run build
```
- **Start Production Server:**
```bash
npm run start
```
## Folder Structure
```bash
PERSONAL-PORTFOLIO/
│── .next/
│── .vercel/
│── node_modules/
│── public/
│── src/
│ ├── app/
│ │ ├── api/
│ │ ├── blogs/
│ │ ├── contact/
│ │ ├── dashboard/
│ │ ├── login/
│ │ ├── projects/
│ │ ├── register/
│ │ ├── error.tsx
│ │ ├── favicon.png
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ ├── loading.tsx
│ │ ├── not-found.tsx
│ │ ├── page.tsx
│ ├── assets/
│ ├── components/
│ ├── lib/
│ │ ├── utils.ts
│ ├── utils/
│── .env
│── .gitignore
│── eslint.config.mjs
│── next-env.d.ts
│── next.config.ts
```
```
```