VuelancerJust 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>
