🛰️ 3D Cyber-Core Developer Portfolio

A high-performance, responsive developer portfolio styled after a futuristic terminal console. It combines quantitative engineering themes and cybersecurity aesthetics, featuring an interactive 3D WebGL centerpiece and smooth animation flows.

Live Demo (Local): http://localhost:8000

---

🚀 Key Features

1. 3D Procedural Build Loader:
   • Geometries start empty and draw themselves line-by-line in 3D on load using custom vertex draw range interpolation.
   • Light warning nodes fade in dynamically using GPU-accelerated opacity updates (preventing shader recompilation lag).
   • Coordinated text transition compiling states (BOOT_UIO_OS -> SYSTEM -> SECURE_CORE -> DECRYPT_MATRIX -> SYSTEM.ONLINE).
   • Performance optimized via WebGL draw call throttling for a locked 60 FPS experience.
2. Abstract Cyber-Core centerpiece:
   • Nested wireframe icosahedrons rotating in opposite directions.
   • Core torus knot engine representing processing computations.
   • Subtle cursor parallax tracking (mouse tilt).
3. Network Packet Flow Field:
   • 200 glowing crimson particles drifting diagonally behind the centerpiece.
   • Utilizes custom wave offsets (phase/amplitude) and additive blending for bokeh depth.
4. Tactile 3D Glitch Stats:
   • Perfect square stat cards utilizing aspect-ratio: 1 / 1 in a responsive grid.
   • Stacked depth effect: hover pushes the main card down (translate(3px, 3px)) and compresses the back panel, mimicking a keypress.
   • Chromatic aberration outlines shift dynamically on hover to create a cyber glitch effect.
5. Secure Uplink Terminal:
   • Interactive CLI command-line simulation (help, about, projects, ping, clear, matrix).
   • Integrated wizard sequence to compile and dispatch secure message packets.

---

📽️ Video Demonstration

(Insert a short screen recording here showing the loading sequence and interactive elements)

Below is the placeholder to embed your loader clip. Name your recorded clip loading_demo.mp4 and save it in the root folder of this repository, then uncomment this line:

Alternatively, upload the clip directly to GitHub and link it in this markdown:

---

🛠️ Technology Stack

• Core Structure: Semantic HTML5 & Vanilla CSS3 Custom Styling
• 3D Render Engine: Three.js (r128) (WebGL Canvas)
• Animation Orchestrator: Anime.js (3.2.1)
• Icons: FontAwesome v6.4.0

---

☁️ How to Host on Render (Free Static Site)

Render makes hosting static HTML/CSS/JS sites incredibly simple. Follow these steps:

1. Push to GitHub:
   • Push your code to a public or private repository on GitHub (follow the instructions in the terminal guide below).
2. Log into Render:
   • Visit render.com and log in with your GitHub account.
3. Create a New Static Site:
   • Click the New + button in the dashboard and select Static Site.
4. Connect GitHub Repo:
   • Connect your GitHub account (if not already connected) and select this repository from the list.
5. Configure Build Settings:
   • Name: Choose a unique project name (e.g., ugochukwu-portfolio).
   • Branch: main
   • Build Command: (Leave completely blank since this is a static HTML site)
   • Publish Directory: . (or leave blank to publish the root directory)
6. Deploy:
   • Click Create Static Site. Render will automatically build the site and provide a free https://your-app-name.onrender.com URL within seconds!