A premium, high-performance portfolio website showcasing frontend development expertise and creative technology solutions. Built with modern web technologies and optimized for performance, accessibility, and user experience.
- Premium Design System - Industrial obsidian aesthetic with glassmorphism effects
- Interactive Case Studies - Detailed project showcase with live demos and GitHub links
- High Performance - 99+ Lighthouse scores, <1.2s LCP, 60 FPS animations
- Fully Responsive - Optimized for mobile, tablet, and desktop
- Contact Modal - Integrated glassmorphism contact system with email, WhatsApp, and LinkedIn
- SEO Optimized - Meta tags, schema markup, sitemap, robots.txt
- Google Analytics - Built-in tracking and conversion monitoring
- Accessible - WCAG AA compliant with keyboard navigation and screen reader support
- Smooth Animations - Scroll-based parallax effects and transitions using Framer Motion
- React 18 - UI framework
- TypeScript - Type safety
- Vite - Build tool & dev server
- Tailwind CSS - Utility-first styling
- Framer Motion - Advanced animations & scroll interactions
- Radix UI - Accessible component primitives
- Lucide React - Icon library
- Motion React - Animation library
- PostCSS - CSS preprocessing
- Figma - Design source
- Git - Version control
src/
├── app/
│ ├── components/
│ │ ├── IndustrialHero.tsx # Landing hero with watermark
│ │ ├── IndustrialProjects.tsx # Featured projects grid
│ │ ├── IndustrialProcess.tsx # Engineering process section
│ │ ├── IndustrialTestimonials.tsx # Technical benchmarks
│ │ ├── IndustrialAbout.tsx # Engineering philosophy
│ │ ├── IndustrialFooter.tsx # Contact CTA section
│ │ ├── ContactModal.tsx # Contact form modal
│ │ ├── PillNavigation.tsx # Floating navigation
│ │ ├── LaserLoader.tsx # Loading animation
│ │ └── ui/ # Radix UI components
│ ├── pages/
│ │ ├── Home.tsx # Main portfolio page
│ │ └── ProjectDetail.tsx # Individual project case studies
│ ├── routes.ts # React Router configuration
│ └── App.tsx # Root component
├── styles/
│ ├── index.css # Imports
│ ├── theme.css # Design tokens & custom CSS
│ ├── tailwind.css # Tailwind directives
│ └── fonts.css # Font definitions
└── main.tsx # Entry point
public/
├── robots.txt # SEO
├── sitemap.xml # SEO
├── veltrin.png # Project images
├── ember.png
├── scalenow.png
├── pulse.png
└── aurivane.png
- Node.js 16+
- npm or yarn
# Clone the repository
git clone https://github.com/mohammedshaibaaz/mohammedshaibaaz.github.io.git
cd mohammedshaibaaz.github.io
# Install dependencies
npm install
# Start development server
npm run devThe site will be available at http://localhost:5173
npm run build- Premium high-fidelity interface for luxury brand
- 99+ Lighthouse score, <1.2s LCP
- Live: https://veltrin-luxury-watch.netlify.app/
- GitHub: https://github.com/mohammedshaibaaz/veltrin-luxury-watch-website
- Atmospheric UX with organic textures
- 95+ Accessibility score, zero CLS
- Live: https://mohammedshaibaaz.github.io/ember-cafe/
- GitHub: https://github.com/mohammedshaibaaz/ember-cafe
- Conversion-focused, modular architecture
- 100/100 SEO score, <200ms TTFB
- Live: https://scale-now-digital.vercel.app/
- GitHub: https://github.com/mohammedshaibaaz/ScaleNow
- Performance-centric with functional clarity
- 100% data accuracy, 90+ best practices
- Live: https://pulse-strength-gym.vercel.app/
- GitHub: https://github.com/mohammedshaibaaz/pulse-strength-gym
- Sensorial design with scroll-based motion
- 60 FPS animations, 40% asset optimization
- Live: https://mohammedshaibaaz.github.io/aurivane-editorial-fragrance-site/
- GitHub: https://github.com/mohammedshaibaaz/aurivane-editorial-fragrance-site
- Lazy loading on images
- Optimized asset delivery
- Hardware-accelerated animations
- Critical CSS inline rendering
- WCAG AA compliant
- Keyboard navigation support
- Screen reader compatible
- Skip-to-content link
- Proper ARIA labels
- Color Palette: Obsidian black with white accents
- Typography: Instrument Serif for headers, Inter for body
- Spacing: 8px base unit system
- Border Radius: 12px - 24px
- Elevation: Glassmorphism with backdrop blur
- Scroll-triggered parallax effects
- Fine-tuned Framer Motion transitions
- Respects
prefers-reduced-motion - 200-600ms duration for optimal feel
- ✅ Google Analytics integration (ID: G-6ZG3MJT4GL)
- ✅ Meta tags and descriptions
- ✅ Open Graph for social sharing
- ✅ Schema.org structured data
- ✅ XML sitemap
- ✅ robots.txt configured
- ✅ Favicon support
Create a .env.local file if needed:
VITE_API_URL=your_api_endpointEdit vite.config.ts to customize Vite settings.
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS Safari 14+, Chrome Mobile)
Original Figma design: https://www.figma.com/design/SMbjWZzWaFAO12c9tVwOVF/mohammed-portfolio
- Email: mohdshabaaz1919@gmail.com
- GitHub: https://github.com/mohammedshaibaaz
- LinkedIn: https://www.linkedin.com/in/mohammed-shaibaaz-uddin
- Instagram: https://www.instagram.com/__mohd__shabaaz__/
- Portfolio: https://mohammedshaibaaz.github.io
This project is private and not licensed for public use. For inquiries about the code or design, contact via email above.
- Design inspiration from modern premium tech products
- UI components from Radix UI
- Icons from Lucide React
- Animation library: Framer Motion
- Styling framework: Tailwind CSS
Built with ❤️ by Mohammed Shaibaaz Uddin - Creative Technologist