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.7k

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
tailwind one page resume cv template
tailwind one page resume cv template

Author:
Geoffrey Callaghan

1 year ago

4.8k
Gradient progress bar

Author:
Kofi Osei

2 years ago

14.7k
chat bar
live chat

Author:
gidy

3 months ago

573
Modern resume template
modern resume template with data

Author:
Nataraj Nataraj

1 month ago

94
Progress bar - Htmlwind
Simple progress bar

Author:
Htmlwind

3 months ago

243
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

12.8k
Progress Bar
Simple Progress bar

Author:
anjali pandith

1 year ago

5.5k
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

5 months ago

771
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

7 months ago

1.3k
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

3 years ago

10.4k
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

5 months ago

678

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components