Next Gen Portfolio
A sleek, design-engineered portfolio and blog built with Next.js, the Once UI design system, and multi-token custom theming.
4 images • Use arrows or dots to navigate
Description
oshingel.netlify.app is a clean, modern developer portfolio and digital showcase built with Next.js, TypeScript, and the Once UI design system. Deployed globally on Vercel Edge, the platform prioritizes craftsmanship, typography, and micro-interactions to create a focused reading and browsing experience.
Design System & Theming Architecture
The interface is constructed entirely with Once UI modular components and SCSS modules, utilizing a unified token design system for spacing, surfaces, and typography. The application features a persistent theme controller supporting system preference detection as well as custom token overrides (brand, accent, surface translucency, and contrast styling) without client-side layout shifts.
Key Highlights
Once UI Design System: Composed of custom-engineered flex columns, responsive layouts, code blocks with syntax highlighting, and interactive feedback toasts.
Contextual Header & Clock: A fixed translucent navigation pill displaying real-time Asia/Manila timezone telemetry and quick section toggles.
Playful Micro-Interactions: Integrated interactive elements such as subtle background dot-grids, smooth page reveal animations, and the nostalgic Oneko desktop pet widget.
Responsive Edge Deployment: Built and optimized for instant loading on Netlify Edge with automated asset preloading and font optimization.
Features
Once UI Design Engine
Component architecture built on the Once UI design system, enforcing tokenized typography, elevation, and component spacing.
Multi-Token Theme Controller
Dynamic theme engine supporting system auto-detection and custom palette attributes (brand cyan, accent red, translucent surfaces).
Real-Time Manila Timezone Indicator
Rich media cards and interactive code blocks with live tabbed previews, language badges, and copy-to-clipboard actions.
Tech Stack
0 comments
Sign in to join the conversation. Rest assured, your information is secure. See my privacy policy for more.
No comments yet. Be the first to share your thoughts.