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

Portfolio About & Skills

This tailwind example is contributed by $@(\/)(\/)¥, 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

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

Author $@(\/)(\/)¥

2.1k

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

9 months ago

1.8k
Social Proof
Composant de preuve sociale👌

Author:
Ousmane CISSE

2 weeks ago

104
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

227
Progress Bar
Simple Progress bar

Author:
anjali pandith

1 year ago

5.6k
about us simple

Author:
QQ-VVN

5 months ago

507
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

5 months ago

466
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

2 years ago

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

7 months ago

893
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

5.2k
Social Media
Social Media button vertical dark style

Author:
sina

1 month ago

163
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.8k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components