Vuelancer
Posted on • Edited on
Minimal Portfolio Created Using HTML, Tailwind CSS & Deployed on Vercel
Just showcasing my current portfolio creating using html & tailwindcss.Like the post if you feel it deserves!
Portfolio link deployed on vercel
Checkout my youtube channel and give a follow if you like my content!
Repo
Preview
Code
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="monetization"content="$ilp.uphold.com/24HhrUGG7ekn"/><title>selvakumardhivakar</title><metaname="google-adsense-account"content="ca-pub-8400941299340017"><scriptsrc="https://cdn.tailwindcss.com"></script></head><bodyclass="bg-white"><divclass="bg-sky-50 py-8"><divclass="container mx-auto px-4 max-w-5xl"><headerclass="flex justify-between items-center mb-8 p-2 bg-green-50 rounded-lg shadow"><ahref="/"class="sm:text-xl text-md font-bold text-gray-800">Dhivakar</a><navclass="text-md flex space-x-4"><ahref="/"class="text-gray-700 hover:text-gray-900">Home</a><ahref="#about"class="text-gray-700 hover:text-gray-900">About</a><ahref="https://www.youtube.com/@vuelancer/videos"class="text-gray-700 hover:text-gray-900">Courses</a></nav></header><divclass="hero__content text-center mt-16"><h1class="text-4xl font-bold text-gray-800">Software Developer</h1><pclass="text-lg text-gray-600 mt-2"> Full-stack developer with 4+ years of actual experience</p></div></div></div><divclass="container mx-auto px-4 py-8 max-w-5xl"><ulclass="stats flex flex-wrap justify-center gap-4 mb-8"><liclass="text-center bg-red-50 p-4 rounded-lg shadow"><h2class="text-2xl font-bold">100+ followers</h2><pclass="text-gray-600">Youtube</p></li><liclass="text-center bg-green-50 p-4 rounded-lg shadow"><h2class="text-2xl font-bold">5000+ followers</h2><pclass="text-gray-600">Dev Community</p></li></ul><divclass="carousal-container max-w-lg mx-auto mt-8"><ulclass="carousal flex flex-wrap justify-center gap-8"><liclass="text-center bg-yellow-50 p-4 rounded-lg shadow"><blockquoteclass="text-gray-600"> Contributing to the online developer community through my YouTube channel, Vuelancer, where I provide tutorials and resources on full-stack development.</blockquote><citeclass="text-gray-500">Youtube</cite></li></ul></div><divclass="wrapper mx-auto max-w-2xl py-8 mt-8"><h3class="text-2xl font-bold text-gray-800 text-center"> Technical Stack</h3><ulclass="technologies flex flex-wrap justify-center gap-4 mt-4"><liclass="text-center bg-indigo-50 p-4 rounded-lg shadow flex flex-col items-center"><imgsrc="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/react-colored.svg"alt="React JS"class="size-10"/><pclass="text-gray-600">React JS</p></li><liclass="text-center bg-green-50 p-4 rounded-lg shadow flex flex-col items-center"><imgsrc="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/vuejs-colored.svg"alt="Vue JS"class="size-10"/><pclass="text-gray-600">Vue JS</p></li><liclass="text-center bg-emerald-50 p-4 rounded-lg shadow flex flex-col items-center"><imgsrc="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/nodejs-colored.svg"alt="Node JS"class="size-10"/><pclass="text-gray-600">NodeJS</p></li><liclass="text-center bg-teal-50 p-4 rounded-lg shadow flex flex-col items-center"><imgsrc="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/mongodb-colored.svg"alt="MongoDB"class="size-10"/><pclass="text-gray-600">MongoDB</p></li><liclass="text-center bg-sky-50 p-4 rounded-lg shadow flex flex-col items-center"><imgsrc="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/docker-colored.svg"alt="Docker"class="size-10"/><pclass="text-gray-600">Docker</p></li></ul></div><divclass="wrapper py-8"id="about"><h3class="text-2xl font-bold text-gray-800 text-center"> Social links</h3><ulclass="social-websites flex flex-wrap justify-center gap-4 mt-4"><liclass="text-center bg-white p-4 rounded-lg shadow-md flex flex-col items-center"><ahref="https://dev.to/vuelancer"><imgsrc="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/devdotto.svg"alt="DEV"class="size-10"/></a></li><liclass="text-center bg-white p-4 rounded-lg shadow-md flex flex-col items-center"><ahref="https://github.com/selvakumardhivakar"><imgsrc="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/github.svg"alt="GitHub"class="size-10"/></a></li><liclass="text-center bg-white p-4 rounded-lg shadow-md flex flex-col items-center"><ahref="https://x.com/vuelancer"><imgsrc="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/twitter.svg"alt="X"class="size-10"/></a></li></ul></div><divclass="wrapper py-8"id="projects"><h3class="text-2xl font-bold text-gray-800 text-center">Projects</h3><ulclass="flex flex-wrap justify-center gap-4 mt-4"><liclass="text-center bg-zinc-50 p-10 rounded-lg shadow"><ahref="/"class="text-gray-600"><h4class="text-md font-semibold text-gray-800 text-center"> Portfolio</h4><pclass="italic text-sm">Minimal and Clean Portfolio</p></a></li></ul></div></div></body></html>Few other blogs
Top comments(12)
Subscribe
I just wanted to take a moment to thank you for this excellent portfolio project! The way you’ve integrated Tailwind with HTML to create such a clean and simple portfolio is truly inspiring. Your clear explanation and well-organized code have made it easy to follow and implement.
This post is very helpful, and your work is appreciated! Looking forward to more amazing content from you.
Vuelancer•
150k+ views | Full-stack developer | 6+ years of experience | Youtube content creator
- Email
- LocationIndia
- EducationComputer Science and Engineering
- Pronounshe
- WorkFull-stack developer
- Joined
Thanks for the motivating comment bro.
Vuelancer•
150k+ views | Full-stack developer | 6+ years of experience | Youtube content creator
- Email
- LocationIndia
- EducationComputer Science and Engineering
- Pronounshe
- WorkFull-stack developer
- Joined
Do u have any blog or youtube video to learn what is twics?
twics.dev/
its a simple alternatives for tailwind play with a visual editor
Martin Baun•
Tech Lead and Founder Baunit.comLearn development, software, business, and process building!Checkout our tools below.Goleko.com | Duckist.com | VideoFeedbackr.com | ToolBun.com | ElegantDoc.com
- LocationSofia, Bulgaria
- WorkCTO -BaunIT
- Joined
Neat approaches! Thank you for sharing.
Vuelancer•
150k+ views | Full-stack developer | 6+ years of experience | Youtube content creator
- Email
- LocationIndia
- EducationComputer Science and Engineering
- Pronounshe
- WorkFull-stack developer
- Joined
Thanks for the comment
Comment deleted
Vuelancer•
150k+ views | Full-stack developer | 6+ years of experience | Youtube content creator
- Email
- LocationIndia
- EducationComputer Science and Engineering
- Pronounshe
- WorkFull-stack developer
- Joined
Thanks for the suggestion! I will add the contact section and favicon surely
Great work bro!
Vuelancer•
150k+ views | Full-stack developer | 6+ years of experience | Youtube content creator
- Email
- LocationIndia
- EducationComputer Science and Engineering
- Pronounshe
- WorkFull-stack developer
- Joined
thanks for the motivation bro!!!
For further actions, you may consider blocking this person and/orreporting abuse
