https://github.com/faisalhakimi22/my-portfolio
This repository contains the source code for FaisalHakimi-portfolio-main, a modern and responsive portfolio website designed to showcase my skills, projects, and professional background. Built with Next.js and styled with Tailwind CSS, this website serves as a personal brand hub, allowing visitors to explore my work and get in touch.
Science Score: 26.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
✓.zenodo.json file
Found .zenodo.json file -
○DOI references
-
○Academic publication links
-
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (9.9%) to scientific vocabulary
Repository
This repository contains the source code for FaisalHakimi-portfolio-main, a modern and responsive portfolio website designed to showcase my skills, projects, and professional background. Built with Next.js and styled with Tailwind CSS, this website serves as a personal brand hub, allowing visitors to explore my work and get in touch.
Basic Info
- Host: GitHub
- Owner: Faisalhakimi22
- Language: TypeScript
- Default Branch: main
- Homepage: https://hakimi-portfolio-0.vercel.app/#contact-me
- Size: 399 MB
Statistics
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
- Releases: 0
Metadata Files
README.md
🎯 Project Overview
Welcome to my cutting-edge portfolio featuring an immersive WebGL mountain background inspired by Mont-Fort's breathtaking terrain. This portfolio showcases advanced 3D graphics, interactive elements, and responsive design—all built with modern web technologies.
🌟 Key Highlights
- 🏔️ Immersive 3D Environment: Real-time WebGL mountain terrain with custom shaders
- 🎮 Interactive Controls: Mouse and scroll-based camera movement
- 📱 Responsive Design: Optimized performance across all devices
- ⚡ High Performance: Smart LOD system and automatic quality adjustment
- 🎨 Visual Effects: Cinematic lighting, post-processing, and atmospheric effects
🖼️ Screenshots
✨ Features
🏔️ WebGL Mountain Background
- Realistic Terrain: Mont-Fort inspired mountain landscape
- Custom Shaders: Vertex displacement and fragment materials
- Dynamic Lighting: Hemisphere and directional lighting setup
- Material Blending: Elevation-based snow, rock, and vegetation
🎮 Interactive Elements
- Mouse Tracking: Smooth camera following with velocity-based effects
- Scroll Animation: Progressive camera movement through terrain
- Touch Support: Full mobile and tablet interaction
- Performance Scaling: Automatic quality adjustment based on device
🎨 Advanced Graphics
- Post-Processing: Bloom, depth-of-field, vignette, chromatic aberration
- HDRI Environment: Realistic reflections and ambient lighting
- Animated Skybox: Rotating background with theme variations
- Fog System: Atmospheric perspective for depth
🔧 Technical Features
- GLTF Support: Custom 3D model loading with GLTFLoader
- Procedural Fallback: Automatic terrain generation if models fail
- Error Handling: Graceful degradation for unsupported browsers
- Loading States: Beautiful loading animations and progress tracking
🛠️ Technologies
Main Stack:
- Next.js for SSR and application structure
- React Three Fiber for 3D graphics
- Three.js for rendering
Additional Libraries:
- Drei for useful helpers
- Postprocessing for visual effects
- GSAP for smooth animations
- Leva for visual debugging controls
📦 Setup & Installation
Clone the repository:
bash git clone https://github.com/Faisalhakimi22/My-Portfolio.git cd My-PortfolioInstall dependencies:
bash npm installRun the development server:
bash npm run devOpen http://localhost:3000 to view it in the browser.
📤 Deployment
For deploying to Vercel, refer to the VERCEL_DEPLOYMENT_GUIDE.md in this repository.
🛠 Customization
For detailed customization, refer to WEBGL_SETUP_GUIDE.md. This includes:
- Swapping models
- Adjusting animation settings
- Modifying themes and colors
🌟 Contribution
Feel free to explore, open issues, or propose contributions to improve the project further!
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
Visit My Portfolio for a live demo.
Enjoy exploring my work and feel free to reach out for collaboration opportunities!
Owner
- Name: Faisal Hakimi
- Login: Faisalhakimi22
- Kind: user
- Location: Pakistan
- Website: https://medium.com/@faisalh5556
- Repositories: 1
- Profile: https://github.com/Faisalhakimi22
Computer Science | Aspiring Data Analyst | Ai Enthusiast | Machine Learning
GitHub Events
Total
- Watch event: 1
- Delete event: 1
- Push event: 184
- Create event: 1
Last Year
- Watch event: 1
- Delete event: 1
- Push event: 184
- Create event: 1
Dependencies
- 423 dependencies
- @types/node ^20 development
- @types/react ^18 development
- @types/react-dom ^18 development
- autoprefixer ^10.0.1 development
- eslint ^8 development
- eslint-config-next 14.0.4 development
- postcss ^8 development
- tailwindcss ^3.3.0 development
- typescript ^5 development
- @heroicons/react ^2.1.1
- @react-three/drei ^9.93.0
- @react-three/fiber ^8.15.13
- clsx ^2.1.0
- framer-motion ^10.17.12
- next 14.1.1
- react ^18
- react-dom ^18
- react-icons ^5.0.1
- react-intersection-observer ^9.5.3
- tailwind-merge ^2.2.0
- three ^0.160.0