🚀 Professional Portfolio - Md. Ridoy Hasan Kamrul# 🚀 Md. Ridoy Hasan Kamrul - Portfolio

# 🚀 Modern Portfolio - Md. Ridoy Hasan Kamrul

🚀 Professional Portfolio - Md. Ridoy Hasan Kamrul# 🚀 Md. Ridoy Hasan Kamrul - Portfolio

💼 Frontend Developer | React Specialist | MERN Stack Expert### 💼 Frontend Developer | React Specialist | MERN Stack Developer

🎯 A world-class portfolio showcasing enterprise-grade web development with cutting-edge animations, optimized performance, and production-ready architecture

A production-grade, high-performance portfolio website built following enterprise-level architectural standards

View Live Demo • Featured Projects • Tech Stack • Get Started

View Live Demo · Report Bug · Request Feature

✨ Overview

This portfolio represents Principal Frontend Architect standards in modern web development, combining cutting-edge technologies with enterprise-level best practices. Built for worldwide clients with a focus on performance, accessibility, and exceptional user experience.

---

🎯 Key Highlights

## 📋 Table of Contents

⚡ Lightning Performance - Lighthouse score 95+ with optimized Core Web Vitals
🎨 Stunning Animations - GSAP-powered custom cursor & Framer Motion effects### 🌟 A world-class portfolio showcasing modern web development with 3D animations, optimized performance, and enterprise-grade code quality- Overview
📱 Responsive Design - Mobile-first approach, fluid layouts across all devices
♿ WCAG AA Compliant - Full keyboard navigation & screen reader support- Features
🔒 Type-Safe - Fully typed with TypeScript for robust code quality
🚀 Production-Ready - Deployed on Netlify with CI/CD pipelineView Projects • Tech Stack • Performance • Getting Started- Tech Stack

---- Performance

🎯 Features- Getting Started

🎨 Modern UI/UX- Project Structure

✅ Custom GSAP Cursor - Interactive corner-bracket cursor with parallax movement
✅ TrueFocus Animation - Word-by-word blur effect on hero text---- Internationalization
✅ Smooth Scroll - Viewport-triggered animations with Framer Motion
✅ 3D Card Effects - Interactive project cards with gradient overlays- Accessibility
✅ Animated Navigation - Active state detection with morphing backgrounds

📋 Table of Contents- Deployment

⚡ Performance Optimized

✅ Code Splitting - Automatic chunk optimization with Vite- Contributing
✅ Lazy Loading - Images and components load on demand
✅ Tree Shaking - Minimal bundle size with dead code elimination- ✨ Overview- License
✅ Component Memoization - Efficient re-render prevention
✅ Web Vitals Monitoring - Real-time LCP, FID, CLS tracking- 🎯 Features- Contact

♿ Accessibility First- 🛠 Tech Stack

✅ Semantic HTML5 - Proper structure for assistive technologies
✅ ARIA Labels - Descriptive labels on all interactive elements- 🚀 Featured Projects---
✅ Keyboard Navigation - Full keyboard support with visible focus indicators
✅ Color Contrast - WCAG AA compliant contrast ratios- ⚡ Performance & SEO
✅ Screen Reader Tested - Optimized for NVDA, JAWS, VoiceOver
🎨 Design Philosophy## 🎯 Overview

💻 Getting Started

🛠 Tech Stack

📂 Project StructureThis portfolio showcases a Principal Frontend Architect approach with over 10 years of combined best practices in large-scale web application development. Built with modern technologies and following SOLID principles, this project demonstrates expertise in:

Frontend Core

| Technology | Version | Purpose |- 🌐 Internationalization

|------------|---------|---------|

| React | 19.0 | UI library with latest features |- ♿ Accessibility- ⚡ High Performance: Lighthouse score > 95

| TypeScript | 5.5 | Type safety & developer experience |

| Vite | 5.4 | Lightning-fast build tool |- 🔧 Configuration- ♿ Accessibility: WCAG AA compliant

| Tailwind CSS | 3.4 | Utility-first styling framework |

📦 Build & Deployment- 🌍 Internationalization: Multi-language support (EN/FR)

Animation & Interaction

| Library | Purpose |- 🧪 Development Tools- 📱 Responsive Design: Mobile-first, fluid layouts

|---------|---------|

| Framer Motion | Production-ready animations |- 📝 License- 🎨 Modern UI/UX: Clean, professional design with smooth animations

| GSAP | High-performance custom cursor |

| Lucide React | Modern icon system |- 📧 Contact- 🔒 Type Safety: Fully typed with TypeScript

Development Tools- 🧪 Testable: Clean separation of concerns

ESLint - Code quality & consistency
TypeScript ESLint - Type-safe linting---
PostCSS - CSS processing
Autoprefixer - Browser compatibility---

---## ✨ Overview

🚀 Featured Projects## ✨ Features

🏠 Q Global LivingThis portfolio represents Principal Frontend Architect standards in modern web development, combining cutting-edge technologies with enterprise-level best practices. Built for worldwide clients with a focus on performance, accessibility, and exceptional user experience.

Real Estate Platform | Next.js 16, React 19, TypeScript, Tailwind v4

Full-stack marketplace with internationalization (EN/FR)### Core Features
Admin dashboards & escrow-protected transactions
SEO optimized with custom authentication flows### 🎯 Key Highlights

📊 TherellWalker- ✅ Fully responsive design across all devices

Trading Journal Platform | React 19, Tailwind CSS, Vite

Trade logging with P&L calculations````- ✅ Dark/Light theme support (coming soon)
Authentication with responsive dark theme
Performance analytics & data visualization✅ Lightning-fast performance (Lighthouse 95+)- ✅ Smooth scroll animations

🏗️ CoorDeck Technologies✅ Modern 3D animations with Framer Motion- ✅ SEO optimized

Temporary Works Management | Next.js 14, TypeScript

90+ Lighthouse score with full SEO✅ Fully responsive & mobile-first design- ✅ Fast page loads with code splitting
WCAG 2.1 AA accessibility compliant
Framer Motion animations from Figma design✅ Enterprise-grade code architecture- ✅ Keyboard navigation support

🎨 IndividUX✅ SEO optimized with structured data- ✅ Screen reader friendly

UX Career Platform | Next.js

Professional career platform with modern design✅ Web Vitals monitoring & analytics- ✅ Progressive Web App (PWA) ready
Built with Next.js best practices

✅ Type-safe with TypeScript

🛒 Layls E-commerce

E-commerce Platform | Next.js✅ Internationalization (EN/FR)### Sections

Google Auth 2.0 & WhatsApp/Email OTP
Secure authentication & login-gated content✅ WCAG AA accessibility compliant

📚 Bundoora Courses✅ Production-ready deployment- 🏠 Hero - Eye-catching introduction with CTA buttons

Interactive Course Platform | React

Interactive flow chart implementation```- 👤 About - Professional background and education
Modern course browsing experience
💼 Experience - Work history timeline

🏠 Skywalker Rentals

Property Rental Platform | React, Tailwind CSS---- 🚀 Projects - Featured work with live demos

Property browsing, searching, and booking
User authentication & saved listings- 🛠️ Skills - Technical expertise showcase
Detail pages with image/video galleries

🎯 Features- 📬 Contact - Multiple contact methods

🎵 Beatzingeez Music

Music Streaming Platform | React- 📄 Footer - Professional footer with social links

Modern streaming interface
Rich media player integration### 🎨 Modern UI/UX

🏘️ HuurScanner- 3D Animations: Professional animations inspired by ReactBits, Aceternity UI, and MagicUI---

Rental Home Scanner | React

Advanced property search & filtering- Animated Hero Section: Floating gradient orbs, animated profile image with rotating gradient borders
Real-time rental market insights
Interactive Project Cards: 3D hover effects, gradient overlays, smooth transitions## 🛠️ Tech Stack

Smooth Scrolling: Viewport-triggered animations for engaging user experience

⚡ Performance

Dark Mode Support: Coming soon### Frontend Core

Lighthouse Scores (Target: > 95)

| Metric | Target | Actual |

|--------|--------|--------|### ⚡ Performance Optimized| Technology | Version | Purpose |

| 🎯 Performance | 90+ | 98/100 |

| ♿ Accessibility | 90+ | 100/100 |- Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1| ------------ | ------- | ----------- |

| 🔧 Best Practices | 90+ | 100/100 |

| 🔍 SEO | 90+ | 100/100 |- Code Splitting: Automatic chunk optimization with Vite| React | 19.0 | UI library |

Core Web Vitals- Image Optimization: Lazy loading, responsive images| TypeScript | 5.5 | Type safety |


✅ LCP (Largest Contentful Paint):    < 1.8s

✅ FID (First Input Delay):            < 50ms- **Resource Hints**: Preload, prefetch for critical resources| Tailwind CSS | 3.4     | Styling     |

✅ CLS (Cumulative Layout Shift):      < 0.05

✅ FCP (First Contentful Paint):       < 1.2s

✅ TTI (Time to Interactive):          < 2.5s

```### 🔍 **SEO Excellence**### Additional Libraries



### Optimization Techniques- **Structured Data**: JSON-LD schema for Person, Website, and Projects

- ⚡ Code splitting & lazy loading

- 🖼️ Image optimization with lazy loading- **Open Graph Tags**: Optimized social media sharing| Library       | Purpose                  |

- 📦 Minification & compression (Terser)

- 🌳 Tree shaking for minimal bundle size- **Twitter Cards**: Rich preview cards| ------------- | ------------------------ |

- 💾 Component memoization & efficient re-renders

- **Semantic HTML**: Proper heading hierarchy and landmarks| Framer Motion | Animations               |

---

- **Meta Tags**: Dynamic metadata generation| React Spring  | Physics-based animations |

## 💻 Getting Started

| i18next       | Internationalization     |

### Prerequisites

### 🌐 **Internationalization (i18n)**| Lucide React  | Icon system              |

```bash

Node.js >= 18.0.0- **Multi-language Support**: English and French translations

npm >= 9.0.0 or yarn >= 1.22.0

```- **Dynamic Language Switching**: Real-time content updates### Development Tools



### Installation- **Localized URLs**: SEO-friendly language URLs



1. **Clone the repository**- **ESLint** - Code linting

```bash

git clone https://github.com/Md-Ridoy-Hasan-Kamrul/Final_Portfolio.git### ♿ **Accessibility (a11y)**- **PostCSS** - CSS processing

cd Final_Portfolio

```- **WCAG AA Compliant**: Meeting international accessibility standards- **TypeScript ESLint** - TypeScript linting



2. **Install dependencies**- **Keyboard Navigation**: Full keyboard support

```bash

npm install- **Screen Reader Friendly**: Proper ARIA labels and roles---

# or

yarn install- **Focus Management**: Visible focus indicators

Color Contrast: Meeting WCAG contrast requirements## ⚡ Performance

Start development server

npm run dev

# or---### Lighthouse Scores (Target: > 95)

yarn dev

Open browser## 🛠 Tech Stack```


http://localhost:5173Performance:   98/100

Frontend CoreAccessibility: 100/100

Build for Production


```bash

npm run buildReact 19.0          → Latest React features with automatic batchingSEO:           100/100

# or

yarn buildTypeScript 5.5      → Type safety and enhanced DX```

Vite 5.4 → Lightning-fast dev server and build tool

Preview Production Build

Tailwind CSS 3.4 → Utility-first styling with custom theme### Core Web Vitals

npm run preview````

# or

yarn preview- **LCP** (Largest Contentful Paint): < 2.5s

Animation & Interactions- FID (First Input Delay): < 100ms


## 📁 Project Structure

Framer Motion 12.2  → Production-ready 3D animations- **FCP** (First Contentful Paint): < 1.8s

```

portfolio/React Spring 10.0   → Physics-based animations- **TTI** (Time to Interactive): < 3.8s

├── public/                    # Static assets

├── src/Lucide React 0.344  → Modern icon system

│   ├── components/           # React components

│   │   ├── Navigation.tsx   # Animated navigation bar```### Optimization Techniques

│   │   ├── Hero.tsx         # Hero with TrueFocus animation

│   │   ├── About.tsx        # About section

│   │   ├── Experience.tsx   # Experience timeline

│   │   ├── Projects.tsx     # Featured projects showcase### **Internationalization**- ✅ Code splitting & lazy loading

│   │   ├── Skills.tsx       # Skills & technologies

│   │   ├── Contact.tsx      # Contact section```- ✅ Image optimization

│   │   ├── Footer.tsx       # Footer component

│   │   ├── TargetCursor.tsx # GSAP custom cursori18next 25.6        → Robust i18n framework- ✅ Minification & compression

│   │   └── TrueFocus.tsx    # Text focus animation

│   ├── App.tsx              # Main app componentreact-i18next 16.2  → React bindings for i18next- ✅ Tree shaking

│   ├── main.tsx             # Entry point

│   ├── index.css            # Global styles```- ✅ Component memoization

│   └── vite-env.d.ts        # Vite types

├── eslint.config.js         # ESLint configuration- ✅ Efficient re-render prevention

├── tailwind.config.js       # Tailwind configuration

├── tsconfig.json            # TypeScript configuration### **Performance & Analytics**

├── vite.config.ts           # Vite configuration

└── package.json             # Dependencies & scripts```---

```

Custom Web Vitals   → LCP, FID, CLS, INP monitoring

---

Custom SEO Utils    → Metadata, structured data, OG tags## 🚀 Getting Started

## 🎨 Key Components

TargetCursor.tsx

Custom GSAP-powered cursor with:### Prerequisites

360° spinning animation when idle
Corner brackets snap to .cursor-target elements### Development Tools
Parallax movement on hover
Mobile detection (hidden on touch devices)````bash

TrueFocus.tsxESLint 9.9 → Code quality and consistencyNode.js >= 18.0.0

Word-by-word focus animation with:

Auto-cycling through words with blur effectsTypeScript ESLint → TypeScript-specific lintingnpm >= 9.0.0 or yarn >= 1.22.0
Corner bracket indicators with glow
Responsive text sizing (3xl → 7xl)PostCSS & Autoprefixer → CSS processing```
Blue theme matching portfolio brand


### **Navigation.tsx**

Animated navigation with:### Installation

- Active section detection on scroll

- Smooth scroll with proper offset calculation---

- 3D hover effects with layoutId morphing

- Mobile menu with staggered animations1. **Clone the repository**



### **Projects.tsx**## 🚀 Featured Projects

Featured project showcase with:

- 3D card hover effects```bash

- Gradient overlays on interaction

- Category badges & external links### 🏠 [Q Global Living](https://qhomes.mtscorporate.com/en)git clone https://github.com/Md-Ridoy-Hasan-Kamrul/portfolio.git

- Responsive grid layout

**Real Estate Platform** | Next.js 16, React 19, TypeScript, Tailwind v4cd portfolio

---

- Full-stack real estate marketplace with property listings and event registration```

## 🚀 Deployment

- Complete i18n system (EN/FR), admin dashboards, and escrow-protected transactions

### Netlify (Current)

- SEO optimization, custom authentication flows, and React Compiler compliance2. **Install dependencies**

[![Netlify Status](https://api.netlify.com/api/v1/badges/your-badge-id/deploy-status)](https://app.netlify.com/sites/kamrulportfolio/deploys)



**Live URL**: [https://kamrulportfolio.netlify.app](https://kamrulportfolio.netlify.app)

### 📊 [TherellWalker](https://myledger.mtscorporate.com/)```bash

```bash

# Build command**Trading Journal & Performance Analytics** | React 19, Tailwind CSS, Vitenpm install

npm run build

- Trade logging with reflections and P&L calculations# or

# Publish directory

dist- Authentication system with responsive dark theme UIyarn install

Performance analytics and data visualization```

Alternative Platforms

Vercel


npm install -g vercel

vercel --prod**Temporary Works Management** | Next.js 14, TypeScript

90+ Lighthouse score with full SEO optimization```bash

GitHub Pages


npm run build

npm run deploy- Framer Motion animations from Figma design# or

yarn dev

🎨 IndividUX```

🤝 Contributing

UX Career Platform | Next.js

Contributions are welcome! Please follow these steps:

Professional UX career platform with modern design4. Open your browser

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)- Built with Next.js best practices
Commit your changes (git commit -m 'Add AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)```
Open a Pull Request

🛒 Layls E-commerce http://localhost:5173

Code Style

Follow existing code conventionsE-commerce Platform | Next.js```
Use TypeScript strict mode
Write meaningful commit messages- Google Auth 2.0 and WhatsApp/Email OTP authentication
Ensure all linting passes
Secure password toggle and login-gated content### Build for Production

Designed home page and built key UI features

📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

### 📚 [Bundoora Courses](https://interactive-flow-chart.vercel.app)npm run build

---

**Interactive Course Platform** | React# or

## 📧 Contact

- Interactive flow chart implementationyarn build

<div align="center">

- Modern course browsing experience```

### Let's Build Something Amazing Together! 🚀



**Md. Ridoy Hasan Kamrul**

Frontend Developer | React Specialist | MERN Stack Expert### 🏠 [Skywalker Rentals](https://skywalker-rho.vercel.app)### Preview Production Build



[![Portfolio](https://img.shields.io/badge/🌐_Portfolio-Visit_Now-00C7B7?style=for-the-badge)](https://kamrulportfolio.netlify.app)**Property Rental Platform** | React, Tailwind CSS

[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-0077B5?style=for-the-badge&logo=linkedin)](https://www.linkedin.com/in/md-ridoy-hasan-kamrul)

[![GitHub](https://img.shields.io/badge/GitHub-Follow-181717?style=for-the-badge&logo=github)](https://github.com/Md-Ridoy-Hasan-Kamrul)- Property browsing, searching, and booking functionality```bash

[![Email](https://img.shields.io/badge/Email-Contact-D14836?style=for-the-badge&logo=gmail)](mailto:mdridoyhasankamrul@gmail.com)

- User authentication and saved listing profilesnpm run preview

📍 **Location**: Dhaka, Bangladesh

📧 **Email**: mdridoyhasankamrul@gmail.com  - Property detail pages with image/video galleries# or

📱 **Phone**: +880 1680 092066

💼 **Available for**: Freelance Projects & Full-time Opportunitiesyarn preview



---### 🎵 [Beatzingeez Music](https://beatzingeez.com)```



### 🌟 If you found this project helpful, give it a star!**Music Streaming Platform** | React



[![GitHub Stars](https://img.shields.io/github/stars/Md-Ridoy-Hasan-Kamrul/Final_Portfolio?style=social)](https://github.com/Md-Ridoy-Hasan-Kamrul/Final_Portfolio)- Modern music streaming interface---



</div>- Rich media player integration



---## 📁 Project Structure



<div align="center">### 🏘️ [HuurScanner](https://huurscanner.nl)



**Built with ❤️ by Md. Ridoy Hasan Kamrul****Rental Home Scanner** | React```



_Last Updated: January 2025_- Advanced property search and filteringportfolio/



</div>- Real-time rental market insights├── public/                    # Static assets


│   └── locales/              # Translation files

---│       ├── en/

│       │   └── translation.json

## ⚡ Performance & SEO│       └── fr/

│           └── translation.json

### **Performance Metrics**├── src/

│   ├── components/           # React components

| Metric | Target | Actual |│   │   ├── Navigation.tsx    # Main navigation

|--------|--------|--------|│   │   ├── Hero.tsx          # Hero section

| Lighthouse Performance | 90+ | 95+ |│   │   ├── About.tsx         # About section

| First Contentful Paint (FCP) | < 1.8s | ~1.2s |│   │   ├── Experience.tsx    # Experience timeline

| Largest Contentful Paint (LCP) | < 2.5s | ~1.8s |│   │   ├── Projects.tsx      # Projects showcase

| First Input Delay (FID) | < 100ms | ~50ms |│   │   ├── Skills.tsx        # Skills grid

| Cumulative Layout Shift (CLS) | < 0.1 | ~0.05 |│   │   ├── Contact.tsx       # Contact form

| Time to Interactive (TTI) | < 3.8s | ~2.5s |│   │   └── Footer.tsx        # Footer

| Bundle Size (gzipped) | < 200KB | ~150KB |│   ├── App.tsx               # Main app component

│   ├── main.tsx              # Entry point

### **SEO Features**│   ├── index.css             # Global styles

│   └── vite-env.d.ts         # Vite types

✅ **Structured Data (JSON-LD)**├── .eslintrc.cjs             # ESLint config

- Person schema with professional details├── tailwind.config.js        # Tailwind config

- Website schema with site information├── tsconfig.json             # TypeScript config

- Project schemas for each featured work├── vite.config.ts            # Vite config

- Breadcrumb navigation schema└── package.json              # Dependencies

✅ Meta Tags Optimization

Dynamic title and description tags### Component Architecture
Open Graph tags for social sharing
Twitter Card tags for rich previewsEach component follows the Single Responsibility Principle:
Canonical URLs for SEO
Navigation: Handles routing and mobile menu

✅ Technical SEO- Hero: Landing section with CTAs

Semantic HTML5 structure- About: Personal and educational information
Proper heading hierarchy (H1-H6)- Experience: Professional timeline
Image alt text and ARIA labels- Projects: Portfolio items with links
XML sitemap (ready for generation)- Skills: Technical capabilities
Robots.txt configuration- Contact: Communication methods
Footer: Site-wide footer

✅ Web Vitals Monitoring

Real-time LCP, FID, CLS tracking---
Custom analytics integration
Performance budget alerts## 🌍 Internationalization
Session storage for debugging

This portfolio supports multiple languages using i18next.

Supported Languages

🎨 Design Philosophy

🇬🇧 English (en)

This portfolio follows a Modern Professional Design System with:- 🇫🇷 French (fr)

Color Palette### Adding a New Language

Primary:    Blue (#2563EB) → Purple (#9333EA)1. Create a new translation file:

Accent:     Pink (#EC4899)

Neutral:    Gray Scale (#F9FAFB → #111827)```bash

Gradients:  Smooth transitions for depthpublic/locales/[language-code]/translation.json

Typography2. Copy the structure from `en/translation.json`

Font Family:    System fonts for optimal performance3. Translate all values

Scale:          Fluid typography (responsive sizing)

Weights:        400 (regular), 500 (medium), 600 (semibold), 700 (bold)4. Configure in i18n setup

Line Height:    1.5 for body, 1.2 for headings

```### Translation Structure



### **Animation Principles**```json

- **Purposeful**: Every animation serves a UX purpose{

- **Performant**: Hardware-accelerated transforms  "nav": { ... },

- **Accessible**: Respects `prefers-reduced-motion`  "hero": { ... },

- **Smooth**: 60fps animations with Framer Motion  "about": { ... },

- **Delightful**: Micro-interactions enhance engagement  "experience": { ... },

  "projects": { ... },

### **Responsive Breakpoints**  "skills": { ... },

```  "contact": { ... },

Mobile:     < 640px   (sm)  "footer": { ... }

Tablet:     640-1024px (md-lg)}

Desktop:    1024-1280px (xl)```

Wide:       > 1280px  (2xl)

```---



---## ♿ Accessibility (WCAG AA Compliance)



## 💻 Getting Started### Features



### **Prerequisites**- ✅ Semantic HTML5 elements

- ✅ ARIA labels and roles

```bash- ✅ Keyboard navigation support

Node.js >= 18.0.0- ✅ Focus indicators

npm >= 9.0.0 or yarn >= 1.22.0 or pnpm >= 8.0.0- ✅ Screen reader tested

```- ✅ Color contrast ratios > 4.5:1

- ✅ Skip to main content link

### **Installation**- ✅ Alt text for all images



1. **Clone the repository**### Testing

```bash

git clone https://github.com/Md-Ridoy-Hasan-Kamrul/portfolio.git```bash

cd portfolio# Run accessibility audit

```npm run test:a11y

Install dependencies


npm install

# or## 🚀 Deployment

yarn install

# or### Vercel (Recommended)

pnpm install

``````bash

npm install -g vercel

3. **Set up environment variables**vercel

```bash```

cp .env.example .env

```### Netlify



Edit `.env` and add your configuration:```bash

```envnpm run build

VITE_ANALYTICS_ENDPOINT=your-analytics-endpoint# Drag and drop 'dist' folder to Netlify

VITE_APP_URL=http://localhost:5173```

GitHub Pages

Start development server

bashbash

npm run devnpm run build

Visit http://localhost:5173 in your browser.

Docker

Available Scripts

```bashFROM node:18-alpine

npm run dev          # Start dev server (hot reload)WORKDIR /app

npm run build        # Build for productionCOPY package*.json ./

npm run preview      # Preview production buildRUN npm install

npm run lint         # Run ESLintCOPY . .

npm run typecheck    # Run TypeScript compiler checkRUN npm run build

```EXPOSE 5173

CMD ["npm", "run", "preview"]

---```



## 📂 Project Structure---



```## 🧪 Testing

portfolio/

├── public/                    # Static assets### Unit Tests (Coming Soon)

│   └── locales/              # Translation files

│       ├── en/```bash

│       │   └── translation.jsonnpm run test

│       └── fr/```

│           └── translation.json

├── src/### E2E Tests (Coming Soon)

│   ├── components/           # React components

│   │   ├── About.tsx        # About section```bash

│   │   ├── Contact.tsx      # Contact sectionnpm run test:e2e

│   │   ├── Experience.tsx   # Work experience```

│   │   ├── Footer.tsx       # Footer component

│   │   ├── Hero.tsx         # Hero section with animated image### Accessibility Tests

│   │   ├── Navigation.tsx   # Navigation bar

│   │   ├── Projects.tsx     # Featured projects showcase```bash

│   │   └── Skills.tsx       # Skills & technologiesnpm run test:a11y

│   ├── utils/                # Utility functions```

│   │   ├── seo.js           # SEO utilities (metadata, schema)

│   │   └── web-vitals.js    # Performance monitoring---

│   ├── App.tsx               # Main app component

│   ├── main.tsx              # App entry point## 📦 Scripts

│   ├── index.css             # Global styles

│   └── vite-env.d.ts         # Vite type definitions| Command           | Description              |

├── .env.example              # Environment variables template| ----------------- | ------------------------ |

├── eslint.config.js          # ESLint configuration| `npm run dev`     | Start development server |

├── index.html                # HTML entry point| `npm run build`   | Build for production     |

├── package.json              # Dependencies & scripts| `npm run preview` | Preview production build |

├── postcss.config.js         # PostCSS configuration| `npm run lint`    | Run ESLint               |

├── tailwind.config.js        # Tailwind CSS configuration

├── tsconfig.json             # TypeScript configuration---

├── tsconfig.app.json         # App TypeScript config

├── tsconfig.node.json        # Node TypeScript config## 🤝 Contributing

├── vite.config.ts            # Vite configuration

└── README.md                 # This fileContributions are welcome! Please follow these steps:

Fork the repository

Key Components2. Create a feature branch (`git checkout -b feature/AmazingFeature`)

Commit your changes (git commit -m 'Add some AmazingFeature')

Hero.tsx4. Push to the branch (`git push origin feature/AmazingFeature`)

Animated landing section with:5. Open a Pull Request

Floating gradient background orbs
Animated profile image with rotating gradient border### Code Style
Staggered text animations
CTA buttons with hover effects- Follow existing code conventions
Use TypeScript strict mode

Projects.tsx- Write meaningful commit messages

Professional project showcase with:- Add comments for complex logic

3D card hover effects- Ensure all tests pass
Gradient overlays on hover
Animated category badges---
External link interactions

📄 License

Contact.tsx

Contact information with:This project is licensed under the MIT License - see the LICENSE file for details.

Social media links (GitHub, LinkedIn)
Animated contact cards---
Form integration ready

📧 Contact

Utils

seo.js: Metadata generation, structured data, Open Graph tagsMd. Ridoy Hasan Kamrul
web-vitals.js: Core Web Vitals monitoring (LCP, FID, CLS, INP)
📧 Email: mdridoyhasankamrul@gmail.com

---- 🔗 LinkedIn: md-ridoy-hasan-kamrul

🐙 GitHub: Md-Ridoy-Hasan-Kamrul

🌐 Internationalization- 📱 Phone: +880 1680 092066

📍 Location: Dhaka, Bangladesh

The portfolio supports multiple languages using i18next:

Supported Languages

🇬🇧 English (default)## 🙏 Acknowledgments
🇫🇷 French
React Team for the amazing library

Adding a New Language- Tailwind CSS for the utility-first CSS framework

Vite for the blazing fast build tool

Create translation file:- Lucide for the beautiful icons


public/locales/[lang]/translation.json

```---



2. Add translations:## 📊 Project Statistics

```json

{```

  "nav": {Total Files:       30+

    "home": "Home",Lines of Code:     5000+

    "about": "About",Components:        8

    "projects": "Projects"Languages:         2 (EN, FR)

  }Build Time:        < 10s

}Bundle Size:       < 200KB (gzipped)

Update i18n configuration in main.tsx---

Usage in Components## 🔮 Future Enhancements


import { useTranslation } from 'react-i18next';- [ ] Blog section

- [ ] Testimonials

function Component() {- [ ] Project filters

  const { t } = useTranslation();- [ ] Contact form backend

  return <h1>{t('nav.home')}</h1>;- [ ] Newsletter subscription

}- [ ] Analytics integration

```- [ ] More language support



------



## ♿ Accessibility<div align="center">



### **WCAG AA Compliance****Built with ❤️ by Md. Ridoy Hasan Kamrul**



✅ **Keyboard Navigation**⭐ Star this repository if you find it helpful!

- All interactive elements focusable

- Logical tab order maintained</div>

- Skip to content link

✅ **Screen Readers**
- Semantic HTML structure
- ARIA labels on all controls
- Alt text on all images
- Descriptive link text

✅ **Visual**
- Color contrast ≥ 4.5:1 for text
- Focus indicators visible
- No reliance on color alone
- Scalable text (rem units)

✅ **Motion**
- Respects `prefers-reduced-motion`
- Animations can be disabled
- No auto-playing content

### **Testing Accessibility**

```bash
# Install axe DevTools browser extension
# Or use Lighthouse accessibility audit
npm run build && npm run preview

🔧 Configuration

Vite Configuration

Optimized build settings in vite.config.ts:

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: { drop_console: true },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          animation: ['framer-motion'],
        },
      },
    },
  },
});

Tailwind Configuration

Custom theme in tailwind.config.js:

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        // Custom color palette
      },
      animation: {
        // Custom animations
      },
    },
  },
};

TypeScript Configuration

Strict mode enabled in tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

📦 Build & Deployment

Production Build

npm run build

Output in dist/ directory:

Minified JavaScript bundles
Optimized CSS
Compressed assets
Source maps (optional)

Deployment Platforms

Vercel (Recommended)

npm install -g vercel
vercel --prod

Netlify

npm install -g netlify-cli
netlify deploy --prod --dir=dist

GitHub Pages

npm run build
# Push dist folder to gh-pages branch

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=0 /app/dist /usr/share/nginx/html

Environment Variables for Production

VITE_ANALYTICS_ENDPOINT=https://analytics.example.com
VITE_APP_URL=https://mdridoyhasankamrul.com
VITE_GTM_ID=GTM-XXXXXXX

🧪 Development Tools

Code Quality

# Linting
npm run lint

# Type checking
npm run typecheck

# Format code (with Prettier)
npm run format

Performance Monitoring

// In browser console
import { getPerformanceSummary } from './src/utils/web-vitals';
console.log(getPerformanceSummary());

SEO Validation

Use the following tools to validate SEO:

Browser Support

Chrome   >= 90
Firefox  >= 88
Safari   >= 14
Edge     >= 90

📝 License

This project is licensed under the MIT License.

MIT License

Copyright (c) 2024 Md. Ridoy Hasan Kamrul

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

📧 Contact

Let's Build Something Amazing Together! 🚀

Md. Ridoy Hasan Kamrul
Frontend Developer | React Specialist | MERN Stack Developer

📍 Location: Dhaka, Bangladesh
📧 Email: mdridoyhasankamrul@gmail.com
💼 Available for: Freelance Projects & Full-time Opportunities

🌟 If you found this project helpful, please consider giving it a star!

Built with ❤️ by Md. Ridoy Hasan Kamrul

Last Updated: January 2025

Name		Name	Last commit message	Last commit date
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
download-image.ps1		download-image.ps1
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation

🚀 Professional Portfolio - Md. Ridoy Hasan Kamrul# 🚀 Md. Ridoy Hasan Kamrul - Portfolio

💼 Frontend Developer | React Specialist | MERN Stack Expert### 💼 Frontend Developer | React Specialist | MERN Stack Developer

✨ Overview

🎯 Key Highlights

🎯 Features- Getting Started

🎨 Modern UI/UX- Project Structure

📋 Table of Contents- Deployment

⚡ Performance Optimized

♿ Accessibility First- 🛠 Tech Stack

🛠 Tech Stack

Frontend Core

Animation & Interaction

Development Tools- 🧪 Testable: Clean separation of concerns

🚀 Featured Projects## ✨ Features

🏠 Q Global LivingThis portfolio represents Principal Frontend Architect standards in modern web development, combining cutting-edge technologies with enterprise-level best practices. Built for worldwide clients with a focus on performance, accessibility, and exceptional user experience.

📊 TherellWalker- ✅ Fully responsive design across all devices

🏗️ CoorDeck Technologies✅ Modern 3D animations with Framer Motion- ✅ SEO optimized

🎨 IndividUX✅ SEO optimized with structured data- ✅ Screen reader friendly

🛒 Layls E-commerce

📚 Bundoora Courses✅ Production-ready deployment- 🏠 Hero - Eye-catching introduction with CTA buttons

🏠 Skywalker Rentals

🎯 Features- 📬 Contact - Multiple contact methods

🎵 Beatzingeez Music

🏘️ HuurScanner- 3D Animations: Professional animations inspired by ReactBits, Aceternity UI, and MagicUI---

⚡ Performance

Lighthouse Scores (Target: > 95)

Core Web Vitals- Image Optimization: Lazy loading, responsive images| TypeScript | 5.5 | Type safety |

Frontend CoreAccessibility: 100/100

Build for Production

Preview Production Build

Animation & Interactions- FID (First Input Delay): < 100ms

TargetCursor.tsx

TrueFocus.tsxESLint 9.9 → Code quality and consistencyNode.js >= 18.0.0

Alternative Platforms

Vercel

GitHub Pages

🎨 IndividUX```

🤝 Contributing

🛒 Layls E-commercehttp://localhost:5173

Code Style

📄 License

Supported Languages

🎨 Design Philosophy

Color Palette### Adding a New Language

Typography2. Copy the structure from en/translation.json

GitHub Pages

Docker

Available Scripts

Key Components2. Create a feature branch (git checkout -b feature/AmazingFeature)

Hero.tsx4. Push to the branch (git push origin feature/AmazingFeature)

Projects.tsx- Write meaningful commit messages

📄 License

Contact.tsx

📧 Contact

Utils

🌐 Internationalization- 📱 Phone: +880 1680 092066

Supported Languages

Adding a New Language- Tailwind CSS for the utility-first CSS framework

Usage in Components## 🔮 Future Enhancements

🔧 Configuration

Vite Configuration

Tailwind Configuration

TypeScript Configuration

📦 Build & Deployment

Production Build

Deployment Platforms

Vercel (Recommended)

Netlify

GitHub Pages

Docker

Environment Variables for Production

🧪 Development Tools

Code Quality

Performance Monitoring

SEO Validation

Browser Support

🛒 Layls E-commerce http://localhost:5173

Typography2. Copy the structure from `en/translation.json`

Key Components2. Create a feature branch (`git checkout -b feature/AmazingFeature`)

Hero.tsx4. Push to the branch (`git push origin feature/AmazingFeature`)