A highly polished, Bento-grid inspired portfolio built with a focus on UX, performance, and modern CSS techniques.
This project was built to explore Glassmorphism and Bento Grid layouts. The goal was to create a digital business card that feels "alive" through subtle animations and custom interactions.
- Dynamic UI: Vanilla JavaScript fetches real-time repository data from GitHub.
- Custom Cursor Engine: A high-performance trailing cursor that reacts to clicks and hover states.
- Secure Contacts: Base64 encoded email strings to prevent automated bot scraping.
- Responsive Engine: A mobile-first CSS architecture that scales perfectly from small phones to ultrawide monitors.
.
├── 📄 index.html # Main Entry Point
├── 📄 404.html # Custom Error Page with Root-Relative Assets
├── 🖼️ favicon.svg # Favicon for the website
├── 🖼️ preview.png # Preview picture for socials when sending
├── 📄 style.css # Bento Grid & Animation Logic
└── 📄 script.js # GitHub Fetching & Cursor Logic
🚀 Advanced Features
View GitHub Fetching Logic
The portfolio uses an asynchronous fetcher to pull repository data. It includes safety checks to ensure the script doesn't crash on pages (like 404.html) where the project container is missing.View Custom Cursor Interaction
The cursor uses theWeb Animations API (animate method) for the outer ring, which provides hardware-accelerated movement for a butter-smooth 60fps experience. 📸 Desktop View
☕ Support My Journey If you like my work, feel free to support me! Every coffee fuels more code and learning.
Click here to support on Ko-Fi
yuwixx • 2025 • @yuw1xx