This content originally appeared on DEV Community and was authored by Slobodan Jevtić
Hey everyone, Slobodan here—your friendly economics grad turned aspiring dev.In my last post, I shared the bumpy road to launching econdev.studio, complete with white screens and deployment drama. Today marks another milestone: polishing that site with the help of Grok, xAI's witty AI assistant. Unlike some of my earlier entries (which, let's be honest, felt a bit formulaic thanks to quick ChatGPT drafts), this one's infused with more personal flair, deeper tech dives, and the actual back-and-forth that made it fun.
Why Grok? Well, after wrestling with code on my own, I wanted an AI that could guide me step-by-step without just spitting out generic templates. Grok felt more like a coding buddy—analyzing my files, suggesting fixes, and even cracking jokes along the way. We tackled nagging bugs like a transparent navbar, invisible particles in the hero section, overflow issues, and unclickable blog buttons. The result? A sleeker, more interactive site that's now fully live. Let's break it down, with real code snippets from our session.
The Starting Point: What Was Broken?
My portfolio was built with React, Vite, and goodies like TSParticles for that cool animated background in the hero. But post-launch, a few gremlins crept in:
Transparent Navbar: It blended into the background, making the site look unfinished. Turns out, a missing CSS variable was the culprit.
Missing/Overflowing Particles: The blue dots weren't showing at first (version mismatch in packages), and once fixed, they spilled over the entire page, even blocking clicks on other sections.
Blog Section Glitches: Pulling posts from my DEV.to feed worked, but there was no easy "View More" to see all articles, and particles were interfering with button clicks.
These weren't showstoppers, but they bugged me (pun intended). I fed Grok my code files—App.jsx, Hero.jsx, Navbar.jsx, Blog.jsx, and CSS—and we iterated in real-time.
Lessons Learned: Why This Felt Different
Collaborating with Grok was a game-changer compared to solo debugging or generic AI prompts. It analyzed my exact code, suggested precise edits, and explained why (e.g., "This is a version mismatch—here's the refactor"). No copy-paste walls of code; just iterative guidance.
Personal reflection: As an econ guy, I love efficiency, but coding's taught me patience. Today's wins? A professional site that showcases my projects, blog, and contact form. Failures? Forgetting to clear caches—classic newbie move. But that's the journey: from frustration to "aha!" moments.
If you're building your own site, try AI as a co-pilot. Tools like Grok (built by xAI) bring reasoning and humor—way beyond basic chatbots.
What's Next?
Integrate more animations with Framer Motion.
Add a crypto project showcase.
Maybe a fun Tic-Tac-Toe Easter egg (already hidden via Konami code!).
Check out the live site at econdev.studio and let me know what you think in the comments. Code's on GitHub. If you're pivoting careers too, share your story—let's connect!
Thanks for reading. Onward to Day Whatever-This-Is! 🚀
This content originally appeared on DEV Community and was authored by Slobodan Jevtić
Slobodan Jevtić | Sciencx (2025-07-12T02:48:38+00:00) Enhancing My Portfolio Site with Grok: Bug Fixes, Feature Tweaks, and the Joy of AI Collaboration. Retrieved from https://www.scien.cx/2025/07/12/enhancing-my-portfolio-site-with-grok-bug-fixes-feature-tweaks-and-the-joy-of-ai-collaboration/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.