DEV Community

Cover image for Minimal Portfolio Created Using HTML, Tailwind CSS & Deployed on Vercel
Vuelancer
Vuelancer

Posted on • Updated 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

Image description

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>

Enter fullscreen mode Exit fullscreen mode

Few other blogs

Top comments (12)

Collapse
 
harihargithub profile image
harihargithub

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.

Collapse
 
vuelancer profile image
Vuelancer

Thanks for the motivating comment bro.

Collapse
 
sai_dheeraj_8f134bae3079f profile image
sai dheeraj


That's a clean looking portfolio page
I put it into twics tool to make it editable quickly

Collapse
 
vuelancer profile image
Vuelancer

Do u have any blog or youtube video to learn what is twics?

Collapse
 
sai_dheeraj_8f134bae3079f profile image
sai dheeraj

twics.dev/
its a simple alternatives for tailwind play with a visual editor

Collapse
 
martinbaun profile image
Martin Baun

Neat approaches! Thank you for sharing.

Collapse
 
vuelancer profile image
Vuelancer

Thanks for the comment

Collapse
 
dhruv_gupta_75ebbe4103299 profile image
Dhruv Gupta

Great work bro!

Collapse
 
vuelancer profile image
Vuelancer

thanks for the motivation bro!!!

Collapse
 
mohamad_abdeljalil_b0241a profile image
Mohamad Abdeljalil

Thanks man it's so clean and cool!

Collapse
 
zalazarmartin profile image
Martin Zalazar

Great work! I think adding a favicon and a contact section would give your project a more professional touch.

Collapse
 
vuelancer profile image
Vuelancer

Thanks for the suggestion! I will add the contact section and favicon surely