Skip to content

mscbuild/3D-graphics

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌐 Building Digital Dreams

Website Status Author Website Status Repo Size Code Style Latest Release

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

Screenshots

Portfolio work Neon absctraction crypto 3D-graphics

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

Releases

No releases published

Packages

 
 
 

Contributors

Languages