How This Site Was Made
A behind-the-scenes look at the technologies, design decisions, and development process of botond.eu
Tech Stack
This site is built with modern web technologies, focusing on performance, maintainability, and developer experience.
Next.js
LearningReact framework for server-rendered applications
React
LearningJavaScript library for building user interfaces
TypeScript
MasteredTyped superset of JavaScript
Tailwind CSS
MasteredUtility-first CSS framework
Lucide Icons
MasteredBeautiful & consistent icons
Development Environment
VS Code
Primary code editor
GitHub
Version control and CI/CD
Design Philosophy
The design of this site is inspired by vinyl records and music, with a dark theme that emphasizes content and creates a modern, immersive experience.
Color Palette
Primary Yellow
Secondary Blue
Accent Red
Typography
Space Grotesk
Display / Headings
Inter
Body Text
Inspiration
• Vinyl records and music
• Neon lights and cyberpunk aesthetics
• Modern portfolio trends
• Dark mode interfaces
Key Features
Responsive Design
The site adapts seamlessly to all screen sizes, from mobile to desktop.
Animated UI
Smooth animations and transitions enhance the user experience.
Dark Mode
The site uses a dark theme for reduced eye strain and modern aesthetics.
Static Generation
Pages are generated at build time for optimal performance.
Performance & Accessibility
This site is built with performance and accessibility in mind, ensuring a fast and inclusive experience for all users.
Performance Optimizations
- Static site generation for fast page loads
- Optimized images and assets
- Minimal JavaScript for core functionality
- Code splitting and lazy loading
- CSS optimizations with Tailwind
Accessibility Features
- Semantic HTML structure
- Sufficient color contrast
- Keyboard navigation support
- Screen reader friendly content
- Responsive design for all devices