[mit]: http://www.opensource.org/licenses/mit-license.php
[repo]: https://github.com/mscbuild/3D-graphics/
[demo]: https://mscbuild.github.io/3D-graphics/
# 🌐 Building Digital Dreams
[](https://mscbuild.github.io/3D-graphics/)
[](https://mscbuild.github.io/)
[](https://mscbuild.github.io/3D-graphics/)
[](https://github.com/mscbuild/3D-graphics/)
**Captivating web applications using modern technologies, 3D graphics and creative code.**
Here I present an elegant, captivating interface where luminous forms dance in the darkness, reflecting the spirit of creative exploration.
Each section unfolds purposefully—impressive depth, carefully curated showcases, vibrant indicators of expertise, and a constant call to interaction.
The design pulsates with modern elegance, combining transparency, glow, and movement to tell a story of vision and precision.
Each component is designed to respond intuitively to user presence, with fluid animations and a responsive layout that enhances engagement.
The interface harmonizes sleek navigation with an evolving backdrop of interactive geometry, creating a sense of depth and innovation
##### [ View Live Preview][demo]
## Screenshots
## Technologies Used:
# 🎨 Frontend Core
**HTML5**
- Semantic structure for accessibility and SEO
**CSS3**
- Custom properties (CSS variables)
- Flexbox & Grid layouts
- Responsive design with media queries
- Glassmorphism + neon visual effects
# ⚡ JavaScript (ES6+)
- DOM manipulation
- Event handling
- Animations & UI interactions
- Form handling logic
# 🧊 Three.js (WebGL)
- 3D rendering engine for background animation
**Features used:**
- Scene, Camera, Renderer
- Mesh (Icosahedron geometry)
- Particle system (BufferGeometry)
- Fog effects
- Mouse-based parallax interaction
# 🔤 Typography
- Google Fonts: Space Grotesk
- Modern, geometric, tech-oriented aesthetic
# 🎯 Key Features
**1. 🧠 Interactive 3D Background**
- Built using Three.js
- Rotating wireframe icosahedron
- Animated particle field
- Mouse-based parallax movement
- Fog for depth perception
# 2. 🎨 Modern UI Design
- Neon gradients (purple, cyan, pink)
- Glassmorphism cards
- Smooth hover animations
- Gradient text effects
# 3. 📱 Fully Responsive Layout
- Desktop-first design
- Mobile adjustments:
- Smaller typography
- Hidden navigation links
- Centered hero content
# 4. 🧩 Component-Based Sections
**🔹 Navigation**
- Fixed navbar
- Scroll-based blur effect
- Smooth anchor navigation
**🔹 Hero Section**
- Main branding message
- Call-to-action buttons
- 3D animated background
**🔹 Tech Stack**
- Tag-style display of technologies
- Hover glow interactions
**🔹 Projects Grid**
- Card-based layout
- Image zoom on hover
- Project descriptions + links
**🔹 Footer**
- Minimal copyright
# UI Patterns
- **Glassmorphism**
- Transparent backgrounds
- Soft borders
- **Neon Glow Effects**
- Box shadows
- Text shadows
- **Gradient Highlights**
- Text & buttons
# Summary
**This portfolio demonstrates:**
- Strong frontend fundamentals
- Creative use of WebGL & Three.js
- Modern UI/UX design trends
- Clean, modular JavaScript architecture
Powered by @mscbuild