I recently launched my personal portfolio and wanted to share it with the community. My main goal was to integrate a highly interactive, WebGL-driven experience using Three.js without sacrificing Core Web Vitals or page speed.
Update:
Thanks for checking it out! I’ve recently tuned the performance across the portfolio:
Optimized WebGL canvas rendering & shader overhead for lighter GPU usage.
Refined mobile responsiveness and touch-inertia scrolling.
Improved overall asset delivery and layout stability.
Check out the updated version at https://nbk.com.np/ — any feedback on FPS or shader rendering is always appreciated!
The website is now updated with the real projects images instead of dummy one. If you like it, please don’t forget it to let me know. Any feedbacks, suggestions are warmly welcome.
It looks very impressive. It will definitely attract some people and repel others. The trick is to attract those, who you would love to work with.
Now, from artistic point of view I prefer to not comment, because I’m a fan of minimalism, this is an opposite visual style. Most likely your portfolio is developed for mobiles (or for touch screens). When I tried it with a mouse, it is too long (I had to scroll 115 times to reach the end – yes, I tried and counted them).
When I shrink the screen width, the visuals do not behave well with each other. First image shows content scrolled behind the “opening book” (which I accidentally scrolled into an empty state):
There are many minor issues, but you might ignore them. Here are a few of them: (1) mismatching styles of opening and closing quotes; (2) the “g” in figs looks truncated from below; (3) the background dots pattern interferes visually with the dots of the project pages; (4) too many font styles in close proximity (4 styles in the snapshot); (5) the popup card start to flicker continuously when the mouse cursor is in a sweet spot near the bottom (marked in yellow cross); (6) some sentences look strange, e.g. you say “most projects” (plural), but “who built it” (singular), then “the person” (singular), but “with them” (plural) - note I’m not native English speaker, so I might be wrong.
Also, tried to visit one of the projects (Shruti’s SOPA), because the description says “handcrafted soap label” but the snapshot is about “yoga and dance”. So when I decided to see which one is correct (or maybe both are), I followed the link “Visit website” but it loops back to your portfolio.
In some places you say your experience is 8 years, in other places it is 9+ years.
Do not worry about my comments, I have specifically put my critic hat. Making a site is यो त गद्दा पिट्नु जस्तै हो। (अर्थ: तपाईंले यसलाई जतिसुकै पिटे पनि, त्यहाँ सधैं धेरै हुनेछ)
Hi @PavelBoytchev, thank you again for putting on your critic hat! Counting all 115 scrolls is incredible dedication. Since the site is still in its initial phase of development, some of the project cards and images were running on dummy content - I’ve now updated those with the real project details and live links and unified the experience metric to 8+ years across the board.
I also just pushed a major patch addressing everything you caught, plus a full responsive pass:
Scroll & Navigation (No More 115 Scrolls): Retuned Lenis (wheelMultiplier: 1.25, lerp: 0.095) for desktop mice and wired PageUp, PageDown, Home, End, and Spacebar directly into lenis.scrollTo() for quick section jumping.
Viewport Resize & 3D Sync: Added a missing onResize() handler to the Three.js dot-grid scene to update projection matrices/bounds, and attached a ResizeObserver + debounced ScrollTrigger.refresh() to the 3D “opening book” doors so DOM content no longer bleeds behind the canvas.
UI & Micro-Fixes:
Truncated “g”: Added 0.18em bottom padding/negative margin compensation to the split-text line wrappers so descenders (g, y, p, q) aren’t clipped by overflow: hidden.
Hover Flicker: Moved the :hover listener to a static parent wrapper and removed the vertical translateY shift on the curved slider items to stop the boundary mouseenter/mouseleave loop.
Quotes & Dots Clash: Cleaned up the mismatched blockquotes and redesigned the pagination dots into frosted-glass expanding capsules (backdrop-filter: blur(20px)) so they stand apart from the 3D background dot matrix.
Arc Card CTAs: Fixed a W3C setPointerCapture issue on the draggable arc cards so inner buttons and links remain immediately clickable, and rolled out a redesigned /approach/ page with interactive detail modals. How I Work | Nirajan Khadka, Web Engineer
Mobile & Tablet Responsiveness: Scaled the 3D curved hero, spiral helix, and horizontal arc radii for smaller viewports (<480px) and added a thumb-friendly floating bottom nav pill on mobile.
I’m still refining things and will keep posting updates here as the project evolves.
Just to clarify, for some time there is a massive tendency for having long pages, as even babies nowadays are born with a page swiping reflex. But for old guys like me, scrolling via a mouse is tiring and slow. All one-page sites are like this for me, without exception.
The best UI I’ve experienced is having bullets (usually 5 to 10) at the left or right to scroll directly to some section. Some call it scrollspy (or vertical dot navigation menu). I found this image (see the vertical circles at the right):
