#My first dev

I’ve built some personal websites before but never taken on a challenge of this magnitude. It went live today; a one page app for exploring my fledgling record label’s catalogue; integrating Bandcamp but giving it a more ‘crate digging’ feel using three.js for the album navigation. It’s 4,500 lines of code, a dozen modules of JavaScript. It took a week. I worked alone with only Claude.ai as a coding partner. I must say it’s a remarkable tool but not without its foibles.
Anyway I’d love you guys to visit my site and tell me what you think. I did save the code publicly to GitHub if you want to root about in it. But here’s the site: Not the Final Vinyl

Claude wanted me to add a few things:

Technical Deep Dive

Check out the code: NotTheFinalVinyl on GitHub
Live site: notthefinalvinyl.net

The Architecture ?️

Built around a custom vinyl record interaction system using Three.js, with about 4,500 lines of vanilla JavaScript split across 12 key modules:

// Example from VinylManager.js - Physics-based vinyl sliding
const animate = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const elapsed = (timestamp - startTime) / this.slideOutDuration;

    if (elapsed < 1) {
        // Custom easing function for natural vinyl movement
        const progress = t < 0.5
            ? 4 * t * t * t
            : 1 - Math.pow(-2 * t + 2, 3) / 2;

        album.setVinylPosition(this.slideDistance * progress);
        requestAnimationFrame(animate);
    }
}

Core Components ?

• SceneManager: Three.js setup and WebGL handling
• VinylManager: Record animations and state
• EventHandler: Touch/mouse/keyboard interactions
• InfoDisplay: Bandcamp integration and UI
• Albums: 3D vinyl mesh and texture management

Technical Challenges Solved ?

1. Performance

   • Texture preloading
   • Efficient animation system
   • Smart render ordering for overlapping vinyls

2. Mobile Support

   • Touch gestures
   • Dynamic viewport scaling
   • Mobile GPU optimizations

3. Integration

   • Bandcamp iframe embedding
   • Facebook browser detection
   • State management between components

Learning Points ?

As my first major JavaScript project, I learned:

• WebGL/Three.js fundamentals
• Complex animation timing
• State management patterns
• Performance optimization
• Mobile-first development

Future Plans ?

• Adding vinyl reflection effects
• More interactive behaviors
• Performance enhancements
• Better mobile experience

Looking for Feedback On:

1. Code organization
2. Three.js best practices
3. Performance optimizations
4. Mobile UX improvements

The GitHub Journey

Still learning Git workflows - the repo reflects my learning process! Feel free to explore and suggest improvements. I'm particularly interested in feedback on:

• Project structure
• Documentation
• Git best practices
• Testing approaches

threejs #webgl #javascript #frontend #webdev #showdev #animation #ux

``

The above is the detailed content of #My first dev. For more information, please follow other related articles on the PHP Chinese website!