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

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

1 year ago

2.3k
Social Proof
Composant de preuve sociale👌

Author:
Ousmane CISSE

4 months ago

362
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

1 year ago

2.1k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

4 months ago

738
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

4.9k
loader
loader

Author:
Ganesh Salunke

2 weeks ago

21
Progress Bar
Simple Progress bar

Author:
anjali pandith

2 years ago

5.8k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

9 months ago

932
About me section with image

Author:
Kofi Osei

2 years ago

24.9k
About our apps UI Components
A visual collection of our most recent works - each piece crafted with intention, emotion and style.

Author:
Alif Bima Pradana

3 weeks ago

165
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

945
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components