MyPortfolio

# MyPortfolio - Omar Hussien's Professional Portfolio

GitHub stars GitHub forks Repo Views
Pull Requests Contributors License
Last Commit Repo Size Top Language

MyPortfolio: منصة شخصية احترافية لعرض المهارات والمشاريع والخبرات مع تصميم عصري وتجربة مستخدم متقدمة. 💼
[Live Portfolio](https://omarsakr.vercel.app) • [Documentation](https://github.com/OmarrSakr/MyPortfolio/wiki) • [Report Issues](https://github.com/OmarrSakr/MyPortfolio/issues)


**`MyPortfolio`** is a modern, responsive personal portfolio website built with **`Next.js 14`**, **`TypeScript`**, and **`Tailwind CSS`**. It showcases professional experience, technical skills, and projects with smooth animations, interactive components, and a clean, intuitive design. The portfolio features dark/light theme support, contact form integration, and optimized performance. Portfolio Demo

## 📊 Project Stats - 🎯 **Sections**: 8 main sections (Header, About, Experience, Expertise, Qualification, Portfolio, Tools, Contact) - 📁 **Projects**: 10 completed projects with detailed documentation - 🛠️ **Technologies**: 26+ tools and frameworks showcased - ⭐ **Performance**: 85-95+ Google Lighthouse scores across projects - 🌐 **Visitors**: Repo Views

--- ## 🧑‍💻 Tech Stack

Next.js TypeScript React Tailwind CSS Framer Motion Shadcn/UI Radix UI EmailJS

--- ## 📷 Screenshots

📑 Table of Contents

🌐 Live Demo

Check out the live portfolio at 👉 MyPortfolio Live

🚀 Features

🧑‍💻 Technologies Used

Core Framework & Language

Styling & UI

Animation & Interaction

Forms & Communication

State Management & Utils

Development Tools

📦 Dependencies

{
  "@emailjs/browser": "^4.4.1",
  "@hookform/resolvers": "^3.3.4",
  "@radix-ui/react-*": "Latest versions",
  "framer-motion": "^11.18.2",
  "lucide-react": "^0.378.0",
  "next": "^15.5.3",
  "next-themes": "^0.3.0",
  "react": "^18.3.1",
  "tailwind-merge": "^2.3.0",
  "zod": "^3.23.6",
  "zustand": "^4.5.2"
}

📂 Project Structure

MyPortfolio/
├── app/                    # Next.js App Router (pages and layouts)
│   ├── (main)/            # Main route group
│   ├── download-cv/       # CV download page
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx          # Homepage
│   └── metadata.ts       # SEO metadata
├── components/            # Reusable UI components
│   ├── landing/          # Landing page sections
│   │   ├── about.tsx     # About section
│   │   ├── contact.tsx   # Contact form
│   │   ├── header.tsx    # Hero section
│   │   ├── experience.tsx # Skills & experience
│   │   ├── portfolio.tsx # Projects showcase
│   │   └── qualification.tsx # Education & certifications
│   ├── modals/           # Modal components
│   ├── ui/              # Shadcn/UI components
│   └── layout.client.tsx # Client-side layout wrapper
├── providers/            # Context providers
│   ├── theme-provider.tsx # Dark/light theme management
│   ├── toast-provider.tsx # Toast notifications
│   └── modal-provider.tsx # Modal state management
├── hooks/               # Custom React hooks
│   ├── use-scroll-position.tsx # Scroll tracking
│   ├── use-anchor.tsx   # Smooth scrolling
│   └── use-qualification-modal.tsx # Modal control
├── lib/                # Utility functions
│   ├── utils.ts        # Common utilities
│   ├── motion.ts       # Animation variants
│   └── menu-list.ts    # Navigation items
├── data/               # Static content
│   ├── information.ts  # Portfolio data
│   └── image-blur.ts   # Image placeholders
├── schemas/            # Data validation
│   └── index.ts       # Zod schemas
├── public/            # Static assets
│   ├── *.png         # Images and screenshots
│   ├── *.jpg         # Certificates and photos
│   └── favicon.ico   # Site favicon
├── .env.local         # Environment variables
├── next.config.mjs    # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json     # TypeScript config
├── package.json      # Dependencies
└── README.md         # Documentation

🔧 Installation

Prerequisites

Setup Instructions

  1. Clone the repository 
    git clone https://github.com/OmarrSakr/MyPortfolio.git
cd MyPortfolio
  2. Install dependencies 
    npm install
# or
yarn install
# or
pnpm install
  3. Environment Setup 
    cp .env.example .env.local

Configure environment variables:

# EmailJS Configuration (Required for contact form)
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id  
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key

# Google reCAPTCHA (Optional but recommended)
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_recaptcha_site_key
NEXT_PUBLIC_RECAPTCHA_SECRET_KEY=your_recaptcha_secret_key

# Site Configuration
NEXT_PUBLIC_SITE_URL=https://omarsakr.vercel.app
NEXT_PUBLIC_SITE_NAME="Portfolio - Omar Hussien"
  1. Run development server 
    npm run dev
# or
yarn dev  
# or
pnpm dev
  2. Open your browser Navigate to http://localhost:3000

📋 Build & Deployment

Production Build

npm run build
npm run start
  1. Push code to GitHub repository
  2. Connect repository to Vercel
  3. Configure environment variables in Vercel dashboard
  4. Deploy automatically on every push to main branch

Other Platforms

⚙️ Usage

Customizing Portfolio Content

All content is centralized in data/information.ts:

const portfolioData = {
  about: {
    name: 'Your Name',
    tagline: 'Your professional title',
    bio: 'Your biography...',
    email: 'your.email@example.com'
  },
  frontend: [
    { id: 1, title: 'React.js', proficiency: 'Advanced' },
    // Add your skills...
  ],
  projects: [
    {
      id: 1,
      title: 'Project Name',
      description: 'Project description...',
      technologies: ['React', 'Next.js'],
      demoUrl: 'https://demo.com',
      githubUrl: 'https://github.com/username/repo'
    }
    // Add your projects...
  ]
  // Update other sections...
}

Theme Customization

Modify theme colors in tailwind.config.ts:

module.exports = {
  theme: {
    extend: {
      colors: {
        // Custom color palette
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      }
    }
  }
}

Adding New Sections

  1. Create component in components/landing/
  2. Add to main page in app/page.tsx
  3. Update navigation in lib/menu-list.ts

🛠️ Challenges & Solutions

🎯 Header Section - Dynamic Hero Experience

📝 About Section - Professional Presentation

💼 Experience Section - Technical Skills Visualization

🎯 Expertise Section - Service Categories

🎓 Qualification Section - Education & Experience Timeline

🚀 Portfolio Section - Project Showcase System

🛠️ Tools Section - Technology Display

📧 Contact Section - Multi-Channel Communication

📌 Future Improvements

📢 Known Issues

🤝 Contributing

Contributions are welcome! Here’s how to get started:

Development Workflow

  1. Fork & Clone 
    git clone https://github.com/your-username/MyPortfolio.git
cd MyPortfolio
  2. Create Feature Branch 
    git checkout -b feature/your-feature-name
  3. Make Changes
    • Follow TypeScript best practices
    • Add proper type definitions
    • Test on multiple devices
    • Update documentation if needed
  4. Commit Changes 
    git add .
git commit -m "feat: add your feature description"
  5. Push & Pull Request 
    git push origin feature/your-feature-name

Contribution Guidelines

📪 Feedback

💡 Found a bug or have a suggestion? We’d love to hear from you!

GitHub Issues Email Me LinkedIn

📜 License

Licensed under the MIT License.
See the LICENSE file for details.

**⭐ If you found this portfolio inspiring, please give it a star! ⭐** *Built with ❤️ by Omar Hussien* [![Follow on GitHub](https://img.shields.io/github/followers/OmarrSakr?style=social)](https://github.com/OmarrSakr)
This site is open source. Improve this page.