Just showcasing my current portfolio creating using html & tailwindcss.
Like the post if you feel it deserves!
Preview
Repo
Also, Check my youtube channel if you have time.
Another simple blog application using jstack(nextjs, neon, prisma, upstash)
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="monetization" content="$ilp.uphold.com/24HhrUGG7ekn" />
<title>selvakumardhivakar</title>
<meta name="google-adsense-account" content="ca-pub-8400941299340017">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white">
<div class="bg-sky-50 py-8">
<div class="container mx-auto px-4 max-w-5xl">
<header
class="flex justify-between items-center mb-8 p-2 bg-green-50 rounded-lg shadow"
>
<a href="/" class="sm:text-xl text-md font-bold text-gray-800"
>Dhivakar</a
>
<nav class="text-md flex space-x-4">
<a href="/" class="text-gray-700 hover:text-gray-900">Home</a>
<a href="#about" class="text-gray-700 hover:text-gray-900">About</a>
<a
href="https://www.youtube.com/@vuelancer/videos"
class="text-gray-700 hover:text-gray-900"
>Courses</a
>
</nav>
</header>
<div class="hero__content text-center mt-16">
<h1 class="text-4xl font-bold text-gray-800">Software Developer</h1>
<p class="text-lg text-gray-600 mt-2">
Full-stack developer with 4+ years of actual experience
</p>
</div>
</div>
</div>
<div class="container mx-auto px-4 py-8 max-w-5xl">
<ul class="stats flex flex-wrap justify-center gap-4 mb-8">
<li class="text-center bg-red-50 p-4 rounded-lg shadow">
<h2 class="text-2xl font-bold">100+ followers</h2>
<p class="text-gray-600">Youtube</p>
</li>
<li class="text-center bg-green-50 p-4 rounded-lg shadow">
<h2 class="text-2xl font-bold">5000+ followers</h2>
<p class="text-gray-600">Dev Community</p>
</li>
</ul>
<div class="carousal-container max-w-lg mx-auto mt-8">
<ul class="carousal flex flex-wrap justify-center gap-8">
<li class="text-center bg-yellow-50 p-4 rounded-lg shadow">
<blockquote class="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>
<cite class="text-gray-500">Youtube</cite>
</li>
</ul>
</div>
<div class="wrapper mx-auto max-w-2xl py-8 mt-8">
<h3 class="text-2xl font-bold text-gray-800 text-center">
Technical Stack
</h3>
<ul class="technologies flex flex-wrap justify-center gap-4 mt-4">
<li
class="text-center bg-indigo-50 p-4 rounded-lg shadow flex flex-col items-center"
>
<img
src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/react-colored.svg"
alt="React
JS"
class="size-10"
/>
<p class="text-gray-600">React JS</p>
</li>
<li
class="text-center bg-green-50 p-4 rounded-lg shadow flex flex-col items-center"
>
<img
src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/vuejs-colored.svg"
alt="Vue JS"
class="size-10"
/>
<p class="text-gray-600">Vue JS</p>
</li>
<li
class="text-center bg-emerald-50 p-4 rounded-lg shadow flex flex-col items-center"
>
<img
src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/nodejs-colored.svg"
alt="Node
JS"
class="size-10"
/>
<p class="text-gray-600">NodeJS</p>
</li>
<li
class="text-center bg-teal-50 p-4 rounded-lg shadow flex flex-col items-center"
>
<img
src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/mongodb-colored.svg"
alt="MongoDB"
class="size-10"
/>
<p class="text-gray-600">MongoDB</p>
</li>
<li
class="text-center bg-sky-50 p-4 rounded-lg shadow flex flex-col items-center"
>
<img
src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/docker-colored.svg"
alt="Docker"
class="size-10"
/>
<p class="text-gray-600">Docker</p>
</li>
</ul>
</div>
<div class="wrapper py-8" id="about">
<h3 class="text-2xl font-bold text-gray-800 text-center">
Social links
</h3>
<ul class="social-websites flex flex-wrap justify-center gap-4 mt-4">
<li
class="text-center bg-white p-4 rounded-lg shadow-md flex flex-col items-center"
>
<a href="https://dev.to/vuelancer"
><img
src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/devdotto.svg"
alt="DEV"
class="size-10"
/>
</a>
</li>
<li
class="text-center bg-white p-4 rounded-lg shadow-md flex flex-col items-center"
>
<a href="https://github.com/selvakumardhivakar"
><img
src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/github.svg"
alt="GitHub"
class="size-10"
/>
</a>
</li>
<li
class="text-center bg-white p-4 rounded-lg shadow-md flex flex-col items-center"
>
<a href="https://x.com/vuelancer"
><img
src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/twitter.svg"
alt="X"
class="size-10"
/>
</a>
</li>
</ul>
</div>
<div class="wrapper py-8" id="projects">
<h3 class="text-2xl font-bold text-gray-800 text-center">Projects</h3>
<ul class="flex flex-wrap justify-center gap-4 mt-4">
<li class="text-center bg-zinc-50 p-10 rounded-lg shadow">
<a href="/" class="text-gray-600">
<h4 class="text-md font-semibold text-gray-800 text-center">
Portfolio
</h4>
<p class="italic text-sm">Minimal and Clean Portfolio</p>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Top comments (10)
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.
Thanks for the motivating comment bro.
Neat approaches! Thank you for sharing.
Thanks for the comment
That's a clean looking portfolio page
I put it into twics tool to make it editable quickly
Do u have any blog or youtube video to learn what is twics?
Great work! I think adding a favicon and a contact section would give your project a more professional touch.
Thanks for the suggestion! I will add the contact section and favicon surely
Great work bro!
thanks for the motivation bro!!!