A modern, full-stack portfolio website built with React and Node.js, featuring a comprehensive dashboard for content management and analytics.

• index route / Website: https://nassim.online
• Contacts Links route : https://nassim.online/links
• All Projects route : https://nassim.online/cv
• cv route : https://nassim.online/cv
• dashboard route : https://nassim.online/admin/dashboard

Modern and responsive homepage with animated hero section

Comprehensive admin panel for content management

• Modern React Application with React 19
• Responsive Design with Tailwind CSS 4
• Type Animation Effects for dynamic text display
• Analytics Dashboard with Recharts
• Email Integration with EmailJS
• Toast Notifications using Sonner
• Image Compression for optimized loading
• Redux State Management

• RESTful API built with Express.js
• MongoDB Database with Mongoose ODM
• JWT Authentication for admin access
• CORS Support for cross-origin requests
• Environment Configuration with dotenv
• Password Encryption using bcryptjs

• Content Management System for:
  • Personal information
  • Projects portfolio
  • Work experiences
  • Education history
• Analytics Tracking with visitor statistics
• Secure Authentication system
• Real-time Data Updates

• React 19.1.0 - UI library
• Vite 6.3.5 - Build tool
• Tailwind CSS 4.1.8 - Styling
• React Router DOM 7.6.2 - Routing
• Redux Toolkit 2.8.2 - State management
• Recharts 3.1.0 - Charts and analytics
• Axios 1.10.0 - HTTP client
• EmailJS 4.4.1 - Email service

• Node.js - Runtime environment
• Express.js 5.1.0 - Web framework
• MongoDB with Mongoose 8.16.4 - Database
• JWT 9.0.2 - Authentication
• bcryptjs 3.0.2 - Password hashing
• CORS 2.8.5 - Cross-origin resource sharing

• Node.js (v16 or higher)
• MongoDB database
• npm or yarn package manager

git clone https://github.com/mziliNassim/my_portfolio.git
cd my_portfolio

1. Navigate to server directory:

cd server

2. Install dependencies:

npm install

3. Create .env file in the server directory:

PORT=3000
MONGODB_URI=your_mongodb_connection_string # or mongodb://localhost:27017/portfolio
JWT_SECRET=your_jwt_secret_key

4. Start the server:

# Development
npm run dev

# Production
npm start

1. Navigate to client directory:

cd client

2. Install dependencies:

npm install

3. Create .env file in the client directory:

# EmailJs
VITE_EMAILJS_SERVICE_ID=your_emailjs_service_id
VITE_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
VITE_EMAILJS_PUBLIC_KEY=your_emailjs_public_key


# Server
VITE_SERVER_URI=http://localhost:3000

# Envirement dev || prod
VITE_ENVIREMENT=dev

4. Start the development server:

npm run dev

portfolio/
├── client/                 # Frontend React application
│   ├── public/
│   ├── src/
│   │   ├── assests/        #
│   │   ├── components/     # Reusable components
│   │   │   ├── dashboard/  # Admin dashboard components
│   │   │   ├── layouts/    # Layout components
│   │   │   ├── portfolio/  # Portfolio page components
│   │   │   └── styles/     # Styled components
│   │   ├── features/       # Redux slices
│   │   ├── helper/         #
│   │   ├── pages/          # Main page components
│   │   ├── styles/         #
│   │   ├── utils/          #
│   │   ├── App.jsx         #
│   │   └── main.jsx        #
│   ├── .env
│   ├── .env.example
│   ├── .gitignore
│   ├── eslint.comfig.js
│   ├── index.js
│   ├── package-lock.json
│   ├── package.json
│   └── vite.config.js
├── server/                 # Backend Node.js application
│   ├── config/             # Database configuration
│   ├── controllers/        #
│   ├── middleware/         # Custom middleware
│   ├── models/             # Database models
│   ├── routes/             # API routes
│   ├── scripts/            #
│   ├── .env
│   ├── .env.example
│   ├── .gitignore
│   ├── index.js
│   ├── package-lock.json
│   ├── package.json
│   └── vercel.json         # Vercel deployment config
└── README.md               #

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

npm start        # Start production server
npm run dev      # Start development server with nodemon

The frontend is deployed on Netlify and accessible at https://nassim.online

The backend is configured for Vercel deployment using vercel.json https://my-portfolio-gold-psi-86.vercel.app

• Hero Section with animated introductions
• About personal information and skills
• Experience work history timeline
• Projects showcase with filtering
• Education academic background
• Contact form with email integration

• Authentication secure login system
• Content Management CRUD operations for all sections
• Analytics visitor tracking and statistics
• Real-time Updates instant content changes

• Visitor Statistics by device type
• Monthly Analytics with visual charts
• Real-time Data dashboard updates

The admin dashboard uses JWT-based authentication with:

• Secure token validation
• Protected routes
• Automatic token refresh
• Session management

The portfolio is fully responsive with:

• Mobile-first approach
• Tablet and desktop optimizations
• Touch-friendly interactions
• Cross-browser compatibility

• Modern UI/UX with clean design
• Smooth Animations and transitions
• Interactive Elements and hover effects
• Professional Typography and spacing

Emain - [email protected]

Nassim - https://nassim.online/links

Project Link: https://github.com/mziliNassim/my_portfolio

⭐ Star this repository if you found it helpful!