Skip to content
akashjadon04Public

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

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

================================================================================

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages