Hello devs 👋,
I m writing this story to share my recent experiment with AI (Artificial Intelligence).
So for a long time I was thinking of creating my portfolio website as a developer to showcase my projects and skills. But unfortunately i was not expert in designing UI and tried few designs but didn’t like them much.
I wanted to do something not ordinary. i didn’t wanted to copy anyone’s design. So i thought of taking help of AI (Story begins here)
I started generating imges of portfolio designs but none of them were like actucal UI for website so i though AI is still not at that level to generate UI.
After some time i found out V0.dev by vercel. I thought of giving it a try so i was not expecting it to give me really good UI for the websites with the code itself.
The first version of V0.dev was able to generate the whole design only but recently they upgraded the version and now it’s generative AI with capacity to generate the code preview the design plus solve your doubts.
I started experimenting with the new version of v0.dev and i thought of giving it a try to generate my portfolio so i gave the following prompt.
A single page portfolio website for a developer which includes the following sections:
1. navbar with the name of dev(Nik) as logo and the other section hyperlink
2. hero section containing the intro of dev with animations ( left side text right side an svg of programmer with animations
3. skills section with skills showing in card carousal animation
4. Experience section (with timeline animation)
5. Projects section (Project cards)
6. Contact me
7. Footer with social media links to connect with me
And i got some shocking results
the first version of my portfolio
I was impressed by the results and it added some animations too. Then I wanted to experiment more so i gave prompts of adding designs and it started giving me shocking results. it was customizing the website the way I wanted it to be.
Second version of portfolio
But at this point I thought It’s normal AI can do it as it’s previous version of v0.dev was also giving me responsive UI.
Here comes the twist I asked it to add a 3d model of skill glob I want in my portfolio and as my surprise it did it so well and additionally it gave me the code of three.js and what dependencies it will require as well.
The first version of my skill glob
I was so shocked by the results it was giving me. then i asked more and more on improving my skills section.
I also got the code for the bird 3d model in my portfolio as well.
Then i started to ask suggestions what can i improve in it and it gave me following components with code
It gave me component for doing navigation using voice and it was working very well.
final version of my portfolio
And to my surprise even having 0 knowledge on three.js I created my portfolio with 3d elements. Some of the animations it added I also didn’t know how to add them.
By doing this experiment I get to know that you don’t need a frontend developer or UI developer. if you know how to get things done by AI.
Reference:
v0.dev link : https://v0.dev/chat
my portfolio link: https://nikunjnavdiya.co/
YouTube video how I made it: https://www.youtube.com/watch?app=desktop&v=KI8F1rCDi-E