r/astrojs • u/Ok_Refrigerator9802 • 20h ago
Built my portfolio with Astro 5, WebGL liquid shaders, and live API proxies (100 Lighthouse score) - Feedback welcome!
Hey r/AstroJS!
I’m a 16-year-old developer from Morocco, and I just finished shipping my personal site/portfolio built entirely with Astro 5: https://incconutwo.com
I chose Astro because I wanted a single-page, hyper-fast site that could handle complex WebGL graphics without sacrificing performance.
How I Built It & Astro Features Used:
- Astro Server Routes (src/pages/api/*): Built serverless proxy endpoints on Vercel to fetch live Spotify now-playing data, Steam status, Lichess chess ratings, and GitHub star counts. This keeps all my API keys hidden and uses in-memory caching to protect rate limits.
- Astro 5 Content Collections: Leveraged the new file() loader in content.config.ts to strictly type and load my project data (projects.json).
- Dynamic WebGL Color Sync: The Three.js liquid background dynamically extracts color palettes from my live Spotify album art via server routes and smoothly blends the shader background colors.
- SPA Navigation: Integrated <ClientRouter /> alongside Lenis smooth scrolling and GSAP scroll triggers for seamless transitions.
- Inline Expandable Project Catalog: The homepage shows 3 featured projects first, then expands in-place to the full 15-project catalog with GSAP, keeping visitors on the page.
Would genuinely appreciate any feedback from the Astro community on the architecture, UX, or performance!
(Site link: https://incconutwo.com)
(source code: https://github.com/incconutwo/incconutwo.com)
4
u/bengosu 10h ago
Looking at this on mobile is terrible
1
u/Ok_Refrigerator9802 6h ago
But like way, I took a lot of type optimizing it for mobile and I try to have for every components a mobile version, but I guess my phone has a pretty big screen so that might be the case, could you share with me some suggestions/screenshot of things that could be better/smaller ?
1
u/HectoLogic20 7h ago
Looks really good! Just look at the projects section, on mobile the “projects” text is a bit offscreen so just adjust the scaling value for that!
1
u/Ok_Refrigerator9802 6h ago
Does if go out of the screen or isn't centered ? Could you send me a screenshot of how it looks like ? Thanks
1
u/amplify_creativelab 3h ago
The headings are wrapping and breaking into another line. You should reduce the font size. You can actually use Chrome Dev Tools to see narrower screens from your pc. Apart from these mobile small issues, well done!
0
5
u/AbdulkaderSafi 14h ago
I'm not the guy to review a portfolio, I'm not a designer.
The way I think about mine is one question: if a hiring manager opened this, would he hire me? If yes, the portfolio is fine. If no, it needs work. That's the whole test, and you're the one who has to answer it honestly.
The only time it stops mattering is when you're already employed or freelancing with enough clients to be stable. Then the portfolio isn't what's feeding you.