Home
$@(\/)(\/)Y
Portfolio About & Skills

Portfolio About & Skills

This tailwind example is contributed by $@(\/)(\/)Y, on 14-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are about me,CV template

Progress Bar About us Resume template

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

1.6k

Fork Fullscreen

<div class="w-full min-h-screen flex items-center bg-gray-100 dark:bg-black">
  <div class="w-full lg:w-[80%] mx-auto px-4 sm:px-10 lg:px-0 flex flex-col gap-4 pt-10 pb-20 dark:text-white">
    
    <div class="flex flex-col gap-2 mb-2 md:mb-4">
      <h2 class="text-4xl font-serif font-semibold">About Me</h2>
      <span class="w-16 h-[4px] bg-rose-500 rounded"></span>
      <span class="w-8 h-[4px] bg-rose-500 rounded"></span>
    </div>

<h4 class="capitalize text-xl font-semibold">I'm samuel abera and i'm
      <span class="text-rose-500">web developer</span>
    </h4>
    <p class="">I am a dedicated and innovative FullStack Developer passionate about creating impactful digital
      experiences. With a keen eye for detail and a commitment to excellence, I specialize in designing and developing
      solutions that combine creativity with functionality.</p>

<div class="w-full flex flex-col lg:flex-row gap-6 sm:gap-4 lg:gap-6 justify-between">
      
      <div class="w-full flex flex-col items-stretch gap-4">
        
        <div class="flex flex-col sm:flex-row gap-2 md:gap-6 items-center justify-between font-serif">
          
          <ul class="w-full text-gray-900 dark:text-gray-200">
            <li class="py-2 border-b border-gray-200 dark:border-gray-600"><span class="font-bold">Birthday :</span> 21
              feb 1997</li>
            <li class="py-2 border-b border-gray-200 dark:border-gray-600"><span class="font-bold">Website :</span>
              https://website.com</li>
            <li class="py-2 border-b border-gray-200 dark:border-gray-600"><span class="font-bold">Degree :</span> Bsc.
              Computer Science</li>
            <li class="py-2 border-b border-gray-200 dark:border-gray-600"><span class="font-bold">Location :</span>
              Addis Ababa, Ethiopia</li>
          </ul>
          
          <ul class="w-full text-gray-900 dark:text-gray-200 font-serif">
            <li class="py-2 border-b border-gray-200 dark:border-gray-600"><span class="font-bold">Email :</span>
              samuelabera87@gmail.com
            </li>
            <li class="py-2 border-b border-gray-200 dark:border-gray-600"><span class="font-bold">Phone No :</span>
              +2519134***30</li>
            <li class="py-2 border-b border-gray-200 dark:border-gray-600"><span class="font-bold">Employment :</span>
              Remote</li>
            <li class="py-2 border-b border-gray-200 dark:border-gray-600"><span class="font-bold">Freelance :</span>
              Available</li>
          </ul>
        </div>
        
        <div class="flex gap-4 justify-center sm:justify-start">
          <button class="px-4 sm:px-6 py-2 bg-rose-600 rounded-full text-white font-bold">Download CV</button>
          <button class="px-4 sm:px-6 py-2 bg-rose-600 rounded-full text-white font-bold">Hire me</button>
        </div>
      </div>
      
      <div class="w-full flex flex-col gap-2">
        
        <div class="flex flex-col gap-2">
          <div class="w-full flex justify-between font-semibold">
            <span>WordPress</span>
            <span>92 %</span>
          </div>
          
          <div class="w-full bg-gray-300 rounded-full">
            <div class="w-[92%] h-2 bg-rose-500 rounded-full"></div>
          </div>
        </div>

<div class="flex flex-col gap-2">
          <div class="w-full flex justify-between font-semibold">
            <span>HTML/CSS/Javascript</span>
            <span>90 %</span>
          </div>
          
          <div class="w-full bg-gray-300 rounded-full">
            <div class="w-[90%] h-2 bg-rose-500 rounded-full"></div>
          </div>
        </div>

<div class="flex flex-col gap-2">
          <div class="w-full flex justify-between font-semibold">
            <span>PHP/Laravel</span>
            <span>80 %</span>
          </div>
          
          <div class="w-full bg-gray-300 rounded-full">
            <div class="w-[80%] h-2 bg-rose-500 rounded-full"></div>
          </div>
        </div>

<div class="flex flex-col gap-2">
          <div class="w-full flex justify-between font-semibold">
            <span>Vue/Nuxt</span>
            <span>85 %</span>
          </div>
          
          <div class="w-full bg-gray-300 rounded-full">
            <div class="w-[85%] h-2 bg-rose-500 rounded-full"></div>
          </div>
        </div>

<div class="flex flex-col gap-2">
          <div class="w-full flex justify-between font-semibold">
            <span>Nestjs</span>
            <span>70 %</span>
          </div>
          
          <div class="w-full bg-gray-300 rounded-full">
            <div class="w-[70%] h-2 bg-rose-500 rounded-full"></div>
          </div>
        </div>

</div>
    </div>
  </div>
</div>

Related Examples

Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

7 months ago

1.5k
Article progress bar with tailwind only
On javascript needed

Author:
Samuel Dawson

2 years ago

9.4k
cards
html , css ,

Author:
Hacker Development

3 months ago

475
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

1 year ago

2.6k
Hero

Author:
Hasan AlDoy (McDoy)

7 months ago

1.2k
Abous Us
About us section with statastics and CTA buttons

Author:
Rajesh Maheshwari

6 months ago

663
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

7.5k
Progress bar

Author:
Rajesh Maheshwari

6 months ago

783
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

3 months ago

452
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

3 months ago

228
About Us

Author:
KULDEEP

2 months ago

364
User about me / introduction card
About me card with an image and a short introduction

Author:
Abigail

2 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components