This portfolio was built in just one week outside of my regular work hours. For some, it might not seem particularly impressive—but for me, who had never built a website or even put one online before, it was a major achievement! 😎
I had to learn a lot more than just coding: from acquiring a domain and implementing SEO, to setting up an online database and integrating Google Analytics. There were many details to master in order to get the site live. I knew I could have managed it all without AI, but using these tools made the work much easier and the implementation process significantly faster. Without the crucial help of our latest AI friends (can we call them that already? 🤖), it would have taken me much longer to make this a reality.
Can You Build a Next.js Portfolio Without Knowing How to Code?
Even though the internet is flooded with posts claiming that anyone can use AI to build a website in just a few simple steps, let me tell you: yes, it’s possible—but only if you have at least a basic understanding of what you’re doing. Just like you wouldn’t drive without a license, relying solely on AI without grasping the fundamentals might leave you with a simple to-do list instead of a fully functional portfolio 🤪.
This isn’t just true for programming. Whenever you ask an AI for help, you need to have a minimal understanding of the subject to guide it in the right direction. Even beginners should definitely leverage these tools, but make sure to learn the basics first so you can interpret and effectively use the AI’s output.
My Experience
FrontEnd Development
Although FrontEnd has never been my main focus, it’s where I leaned most on AI assistance to structure and design my portfolio. Here’s how I tackled it:
v0 🚀
The very first tool I used was v0.dev. It’s a paid service that offers a few free queries per day.
With v0, I always had a solid starting point for my pages.
The process was simple: provide some examples via screenshots and specific prompts detailing which elements you want recreated.
Being clear and detailed was key since you only have a limited number of daily queries!
Pros:
🟢 Excellent reproduction of what’s provided via screenshots
🟢 Well-structured component code
🟢 Smooth animations in the components
🟢 Responsive design for both desktop and mobile
Cons:
🔴 It’s a paid tool, offering only a few free queries per day
And when I ran out of free queries? That’s when Claude.AI stepped in. 👀
Claude.AI 🤖 :
In my opinion, Claude.AI isn’t as imaginative when it comes to crafting visually striking components—it tends to produce designs that feel a bit lifeless, and it often takes a few tries to get a result you love.
However, it’s still a great tool—especially since there’s no daily query limit! Once I exhausted my free queries on v0.dev, I used Claude.AI to refine specific components based on that initial foundation.
Pros:
🟢 Free to use
🟢 Accepts screenshot inputs
🟢 Excellent for fine-tuning component details
Cons:
🔴 Struggles with complex component designs
🔴 Limited in delivering advanced visual implementations
But let’s not forget—a website isn’t just about FrontEnd, right? 😁
BackEnd Development
For the backEnd, I turned to several tools for different tasks:
- Cursor: An AI Code Editor (a paid tool, but its trial offers plenty of free queries).
- DeepSeek: When ChatGPT didn’t yet have robust search and reasoning features, DeepSeek was invaluable.
- ChatGPT: Great for quick, basic questions.
- GitHub Copilot: A VSCode extension that I transitioned to after using Cursor for a while.
Cursor 🔥
Cursor is a powerhouse that completely changed my perspective on using AI for programming. It can implement virtually anything you imagine with Next.js.
But remember: it won’t help if you don’t at least have a basic idea of what you’re asking for 😜.
At the start of the project, I gave Cursor a brief explanation of my vision and the types of pages I wanted for my portfolio.
In just seconds, it generated all the necessary routes:
- /
- /work
- /blog
- /contact
- /about-me
It’s amazing how Cursor creates, edits, and even deletes files with just a few commands—talk about efficiency! 🤯
Pros:
🟢 Rapid implementation
🟢 Structured page creation
🟢 Supports screenshot inputs for FrontEnd development
Cons:
🔴 Sometimes overcomplicates tasks, leading to confusing code
🔴 Can lose context and duplicate code if not carefully monitored
As the project progressed, Cursor started to lose its edge (and my free quota eventually ran out 🤭). That’s when I gave GitHub Copilot a try.
GitHub Copilot 💡
GitHub Copilot offers several features similar to Cursor, but I found the Claude 3.5 model within it to be the most precise and straightforward.
Unlike Cursor, Copilot isn’t as autonomous when creating or modifying files.
With Cursor, you simply give a command and it generates code automatically.
With Copilot, you need to** review and accept changes manually**, ensuring you always know exactly what’s being modified—definitely a plus to avoid a code mess!
Pros:
🟢 Free to use
🟢 Delivers precise, assertive code
🟢 Manual review process keeps you in control
Cons:
🔴 So far, I haven’t encountered any major issues!
In Conclusion
That wraps up my experiment of building a website with the help of today’s AI tools.
These tools are here to assist us in our journey as developers.
If you’re worried that AI might replace your job, it’s likely because you haven’t yet learned how to use it to your advantage! 😁
Once you start leveraging these tools, you’ll see that they’re not here to replace you—they’re here to help make your work easier.
If you’re not familiar with these tools yet, now is the perfect time to dive in and start experimenting. Who knows? You might just build your own portfolio in no time! 🚀
Happy coding! 👨🏼💻
