TASNIM CHAOUCH

Next.js Portfolio

A modern, responsive personal portfolio built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion.

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: React Icons
• Typing Effect: react-type-animation

Features

• Modern Design: Beautiful gradient effects and smooth animations
• Fully Responsive: Mobile-first design that works on all devices
• Type-Safe: Built with TypeScript for better development experience
• Performance Optimized: Leverages Next.js 14 App Router for optimal performance
• Interactive Animations: Scroll-based animations using Framer Motion
• Component-Based: Modular, reusable React components
• Impressive Tech Stack Display: Showcasing modern technologies:
  • Frontend: React.js, Next.js, Vue.js, TypeScript, Tailwind CSS
  • Backend: Node.js, Python, Django, GraphQL, REST APIs
  • Cloud & DevOps: AWS, Azure, Docker, Kubernetes, CI/CD
  • Database: MongoDB, PostgreSQL, Prisma

Project Structure

portfolio/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Home page
│   └── globals.css         # Global styles
├── components/
│   ├── Navbar.tsx          # Navigation component
│   ├── Hero.tsx            # Hero section with typing animation
│   ├── About.tsx           # About section
│   ├── Skills.tsx          # Skills with progress bars
│   ├── Projects.tsx        # Featured projects
│   ├── Contact.tsx         # Contact form
│   └── Footer.tsx          # Footer component
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.js
└── postcss.config.js

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn/pnpm

Installation

1. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   

2. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   

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

Customization

Update Personal Information

1. Edit component files in the components/ directory
2. Replace “Your Name” with your actual name
3. Update email, phone, and location in About.tsx and Contact.tsx
4. Add your social media links in Hero.tsx and Footer.tsx

Modify Skills

Edit the skillCategories array in components/Skills.tsx to match your expertise

Add Your Projects

Edit the projects array in components/Projects.tsx with your actual projects

Change Color Scheme

Modify the color values in tailwind.config.ts:

colors: {
  primary: { DEFAULT: '#6366f1', ... },
  secondary: { DEFAULT: '#8b5cf6', ... },
  accent: { DEFAULT: '#ec4899', ... },
}

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository on Vercel
3. Deploy with one click

Other Platforms

You can also deploy to:

• Netlify
• AWS Amplify
• Railway
• Any platform that supports Next.js

Build for Production

npm run build
npm run start

Code Quality

Run ESLint:

npm run lint

License

Free to use for personal and commercial projects.

---

Built with Next.js and TypeScript