Repository navigation
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
================================================================================
AKASH JADON PORTFOLIO - 4K 3D PREMIUM PORTFOLIO WEBSITE
================================================================================
A production-grade, static portfolio website featuring:
- Three.js WebGL 3D renderer with premium lighting and materials
- Physics-based animations with realistic motion
- Dark luxury theme with deep sapphire/royal violet accent
- Glassmorphism UI components
- Offline support via Service Worker
- Reduced motion accessibility
- Mobile responsive design
================================================================================
FILE STRUCTURE (Flat - All files in root)
================================================================================
index.html - Main HTML entry point with semantic structure
main.js - Three.js scene, animations, and interactivity
styles.css - Dark luxury theme with glassmorphism
portfolio.json - CV data extracted and structured
sw.js - Service Worker for offline caching
Akash_CV.pdf - CV PDF (downloadable)
ScreenRecording.mp4 - Portfolio showcase video
hero_4k.jpg - Hero background texture (4K fallback)
og_hero.jpg - Social media preview image
three.module.js - Three.js ESM module (to be added)
rapier_bg.wasm - Rapier physics WASM (optional)
ktx2decoder.js - KTX2 texture decoder (optional)
hero_scene.glb - 3D hero model (optional, generated procedurally)
hero_4k.ktx2 - KTX2 compressed texture (optional)
================================================================================
LOCAL DEVELOPMENT
================================================================================
Since this site uses ES modules and WebGL, it requires a local server
to function properly (file:// protocol blocks certain features).
Option 1: Python (recommended)
python3 -m http.server 8000
Then open: http://localhost:8000
Option 2: Node.js
npx serve .
Option 3: PHP
php -S localhost:8000
Option 4: VS Code Live Server extension
================================================================================
DEPLOYMENT
================================================================================
This is a static website that can be deployed to any static hosting:
- Netlify: Drag and drop the folder
- Vercel: vercel --prod
- GitHub Pages: Push to gh-pages branch
- AWS S3 + CloudFront
- Any web server (nginx, Apache)
================================================================================
CUSTOMIZATION
================================================================================
1. Update CV:
- Replace 'Akash_CV.pdf' with your CV
- Update 'portfolio.json' with your information
2. Update Video:
- Replace 'ScreenRecording.mp4' with your showcase video
- Or remove the video element from index.html
3. Update 3D Scene:
- The hero object is generated procedurally in main.js
- Modify createHeroObject() to change the 3D model
- Or replace 'hero_scene.glb' and load it in the scene
4. Update Colors:
- Edit CSS custom properties in styles.css :root
- Main accent color: --color-accent (default: #6366f1)
5. Update Content:
- Edit 'portfolio.json' for all text content
- Or modify HTML directly in index.html
================================================================================
ASSET REPLACEMENT NOTES
================================================================================
Hero Model (hero_scene.glb):
- Keep origin at (0, 0, 0)
- Recommended scale: 1 unit = ~1 meter
- The scene will auto-generate a fallback if GLB is missing
Textures (hero_4k.ktx2, hero_4k.jpg):
- 4K resolution recommended (3840x2160)
- JPG for fallback, KTX2 for compressed delivery
- Dark, abstract backgrounds work best
Video (ScreenRecording.mp4):
- Keep under 10MB for fast loading
- 16:9 aspect ratio recommended
- Muted autoplay for best UX
================================================================================
BROWSER SUPPORT
================================================================================
Modern browsers with WebGL support:
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
Fallback behavior:
- Static gradient background if WebGL fails
- Reduced motion support for accessibility
- Mobile-optimized layouts
================================================================================
PERFORMANCE NOTES
================================================================================
- Lazy loading for heavy assets
- Texture fallbacks (2K, 1K) for mobile
- Pause rendering when tab is hidden
- Service Worker caching for offline use
- GPU-accelerated animations only
================================================================================
ACCESSIBILITY
================================================================================
- Semantic HTML5 elements
- ARIA labels on interactive elements
- Keyboard navigation support
- Reduced motion toggle
- Focus indicators
- Screen reader compatible
================================================================================
TROUBLESHOOTING
================================================================================
Issue: Black screen / WebGL not working
Solution: Check browser WebGL support at webglreport.com
Issue: WASM files not loading
Solution: Ensure proper MIME type (.wasm = application/wasm)
Issue: Video not autoplaying
Solution: Browsers require muted videos for autoplay
Issue: Fonts not loading
Solution: Check internet connection (Google Fonts CDN)
================================================================================
LICENSE
================================================================================
This portfolio template is created for Akash Jadon.
Feel free to modify and use for personal portfolios.
Three.js is licensed under MIT License.
================================================================================
CONTACT
================================================================================
Akash Jadon
Email: aakashjadon04@outlook.com
Phone: +91 7668758238
Location: Agra, India
LinkedIn: (26) Akash jadon | LinkedIn
================================================================================