MyNewPortfolio

🚀 LAMARI MOHAMED - Software Engineer Portfolio

    *A modern, responsive portfolio showcasing full-stack development expertise with cutting-edge technologies*

---

✨ Features

🎨 Modern Design

• Glassmorphic UI with backdrop blur effects
• Neon accent colors and chrome metallic themes
• Responsive design optimized for all devices
• Smooth animations powered by GSAP
• Dark theme with futuristic aesthetics

🚀 Performance Optimized

• Locomotive Scroll for smooth scrolling
• GSAP animations with performance optimization
• Image optimization and lazy loading
• CSS animations with hardware acceleration
• Mobile-first responsive design

📱 Cross-Platform

• iPhone optimized with device-specific breakpoints
• iPad responsive layouts
• Desktop enhanced experiences
• Touch-friendly mobile interactions

---

🛠️ Tech Stack

Frontend Development

• React 18 with modern hooks and patterns
• TypeScript for type-safe development
• Tailwind CSS for utility-first styling
• GSAP for advanced animations
• Locomotive Scroll for smooth scrolling

Backend & Database

• Node.js runtime environment
• Python/PHP for backend services
• PostgreSQL relational database
• MongoDB NoSQL database

DevOps & Tools

• Docker containerization
• AWS cloud infrastructure
• Git version control
• Vercel deployment platform

---

🎯 Skills & Expertise

Frontend Development (60-80%)

• React/Next.js ecosystem mastery
• TypeScript development
• Progressive JavaScript frameworks
• Advanced CSS/SCSS styling

Backend Development (45-70%)

• Node.js server development
• Python/PHP web automation
• Database management (SQL & NoSQL)
• API development and integration

Tools & Technologies (50-80%)

• Containerization with Docker
• Cloud infrastructure (AWS)
• Version control and collaboration
• Advanced animations and interactions

---

🚀 Getting Started

Prerequisites

Node.js 18.0+
npm 9.0+ or yarn 1.22+
Git

Installation

# Clone the repository
git clone https://github.com/Lamarimohamed/MyNewPortfolio.git

# Navigate to project directory
cd MyNewPortfolio

# Install dependencies
npm install

# Start development server
npm run dev

Build & Deploy

# Build for production
npm run build

# Start production server
npm start

# Deploy to Vercel
vercel --prod

---

📁 Project Structure

MyNewPortfolio/
├── src/
│   ├── components/
│   │   ├── HeroSection.tsx          # Landing section
│   │   ├── AboutSection.tsx         # About & skills
│   │   ├── SkillsSection.tsx        # Technical skills
│   │   ├── ProjectsSection.tsx      # Portfolio projects
│   │   ├── TimelineSection.tsx      # Experience timeline
│   │   ├── ContactSection.tsx       # Contact form
│   │   └── LoadingScreen.tsx        # Loading animation
│   ├── styles/
│   │   └── index.css                # Global styles & animations
│   ├── utils/
│   └── App.tsx                      # Main application
├── public/                           # Static assets
├── vercel.json                       # Vercel configuration
└── package.json                      # Dependencies & scripts

---

🎨 Design System

Color Palette

• Background: Dark gradient (220 15% 3%)
• Primary: Neon Blue (210 100% 65%)
• Accent: Neon Purple (270 100% 75%)
• Chrome: Metallic grays (210 20% 15%)

Typography

• Font Family: Inter (300-800 weights)
• Headings: Bold with glow effects
• Body: Clean, readable text
• Accents: Neon color highlights

Components

• Glass Cards: Backdrop blur with borders
• Neon Buttons: Gradient backgrounds with glow
• Chrome Elements: Metallic finish components
• Skill Bars: Animated progress indicators

---

📱 Responsive Breakpoints

Mobile First Design

• Small Mobile: ≤480px
• Medium Mobile: 481px - 767px
• iPhone SE: 375px - 413px
• iPhone XR: 414px - 427px
• iPhone 14 Pro Max: 428px - 430px

Tablet & Desktop

• iPad: 768px - 1023px
• Desktop: ≥1024px

---

🚀 Deployment

Vercel (Recommended)

# Connect to Vercel
vercel

# Deploy automatically on git push
git push origin main

Environment Variables

# Add to .env.local
REACT_APP_API_URL=your-api-url
REACT_APP_CONTACT_EMAIL=your-email

---

🔧 Customization

Skills & Percentages

Edit src/components/SkillsSection.tsx:

const skillCategories = [
  {
    title: 'Your Category',
    skills: [
      { name: 'Skill Name', level: 85, description: 'Description' }
    ]
  }
];

Timeline Events

Edit src/components/TimelineSection.tsx:

const timelineData = [
  {
    year: '2024',
    title: 'Your Achievement',
    description: 'Description here'
  }
];

Styling

Modify src/index.css for:

• Color schemes
• Animations
• Responsive breakpoints
• Component styles

---

📈 Performance Metrics

• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
• First Contentful Paint: <1.5s
• Largest Contentful Paint: <2.5s
• Cumulative Layout Shift: <0.1
• First Input Delay: <100ms

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

**Made with ❤️ by [LAMARI MOHAMED](https://github.com/Lamarimohamed)** *Building the future, one line of code at a time* 🚀