#My first dev

#showdev #webdev #javascript

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 💪

Performance
- Texture preloading
- Efficient animation system
- Smart render ordering for overlapping vinyls
Mobile Support
- Touch gestures
- Dynamic viewport scaling
- Mobile GPU optimizations
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:

Code organization
Three.js best practices
Performance optimizations
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: