SAM GEYER PORTFOLIO 2024 ↓

A brutalist portfolio site featuring ascii art, infinite scroll contact banner, and an interactive 3D head scan.

TECH STACK

• HTML + CSS
• JavaScript (Vanilla)
• Three.js (3D rendering)
• GLTFLoader (3D model loading)
• OrbitControls (3D interaction)

KEY FEATURES

ASCII ART HEADER

• Monospaced font typography
• Minimal, high-contrast design

3D HEAD SCAN

• Interactive 3D model created using Polycam
• Auto-rotation with pause on interaction
• Orbit controls for user manipulation
• Custom positioning and camera angles
• Click to trigger site-wide color inversion

INFINITE SCROLL CONTACT BANNER

• Seamless infinite scroll animation
• Monospaced typography
• No JavaScript needed for animation

ANIMATIONS

• Smooth 3D model auto-rotation
• Color inversion on model click
• Infinite scroll contact banner
• Hover state interactions

RESPONSIVE DESIGN

• Mobile-friendly layout
• Responsive 3D viewer
• Adaptive typography
• Maintained brutalist aesthetic across devices

INSTALLATION & DEVELOPMENT

1. Clone repo
2. Add your 3D model to /model/3dscan.glb
3. Open index.html in browser
4. Edit CSS for style adjustments
5. Modify model.js for 3D viewer changes
6. Note: you may have to adjust the initial camera position and scaling in model.js

LEARNING OUTCOMES

• Three.js implementation
• 3D model integration
• Custom animation timing
• Brutalist design principles
• CSS animation techniques
• Performance optimization

CREDITS

• 3D scan created with Polycam
• Three.js for 3D rendering
• Inspired by my friend Lachies sites: https://lachie.co/

---