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

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

4 months ago

1.1k
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Author:
Bonimater

1 week ago

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

Author:
Freja Jensen

2 years ago

12.4k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

7 months ago

2.8k
Synth Mind
This is about page of an ai of Syntmind ai

Author:
ishimwe shadad

1 week ago

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

Author:
Abigail

2 years ago

9.6k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

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

4 days ago

11
Progress bar

Author:
Rajesh Maheshwari

3 months ago

562
Responsive Progress bars

Author:
Anum Shahana

5 months ago

753
Progress Bar
Simple Progress bar

Author:
anjali pandith

1 year ago

5.1k
Modern resume template
modern resume template with data

Author:
Amit Pachange

1 year ago

20.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components