→ Anonymous
→ Developer Portfolio About and Skills Sec...

Developer Portfolio About and Skills Section

This Example is contributed by Anonymous, on 28-Mar-2025. It is responsive.

About Section Profile Portfolio

<div class="portfolio-container">
  <div class="about-section">
    <h2>About Me</h2>
    <div class="about-content">
      <div class="profile-image">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Ramirez">
      </div>
      <div class="bio">
        <h3>Hey there! I'm <span class="highlight">Alex Ramirez</span></h3>
        <p class="job-title">Full Stack Developer</p>
        <p>I'm passionate about creating clean, efficient, and user-friendly web applications. With over 5 years of experience in the industry, I've worked on a diverse range of projects from e-commerce platforms to complex data visualization tools.</p>
        <p>When I'm not coding, you can find me hiking in the mountains, experimenting with new recipes, or contributing to open-source projects.</p>
        <div class="contact-info">
          <div class="info-item">
            <i class="fas fa-envelope"></i>
            <span>alex@example.com</span>
          </div>
          <div class="info-item">
            <i class="fas fa-phone"></i>
            <span>+1 (555) 123-4567</span>
          </div>
          <div class="info-item">
            <i class="fas fa-map-marker-alt"></i>
            <span>San Francisco, CA</span>
          </div>
        </div>
        <div class="social-links">
          <a href="#" class="social-link"><i class="fab fa-github"></i></a>
          <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
          <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
          <a href="#" class="social-link"><i class="fab fa-dribbble"></i></a>
        </div>
      </div>
    </div>
  </div>

<div class="skills-section">
    <h2>My Skills</h2>
    <div class="skills-content">
      <div class="skills-category">
        <h3>Frontend</h3>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">HTML/CSS</span>
            <span class="skill-percentage">95%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 95%"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">JavaScript</span>
            <span class="skill-percentage">90%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 90%"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">React</span>
            <span class="skill-percentage">85%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 85%"></div>
          </div>
        </div>
      </div>

<div class="skills-category">
        <h3>Backend</h3>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">Node.js</span>
            <span class="skill-percentage">80%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 80%"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">Python</span>
            <span class="skill-percentage">75%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 75%"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">PHP</span>
            <span class="skill-percentage">70%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 70%"></div>
          </div>
        </div>
      </div>

<div class="skills-category">
        <h3>Other</h3>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">UI/UX Design</span>
            <span class="skill-percentage">85%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 85%"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">Git/GitHub</span>
            <span class="skill-percentage">90%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 90%"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-info">
            <span class="skill-name">DevOps</span>
            <span class="skill-percentage">65%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 65%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Animated Skill Progress Bars
Visually represent your skills and expertise with these animated progress bars. Enhance your portfolio or resume with this dynamic and interactive component.

Author:
Sushil shahu

2 months ago
Skill Progress Bar
Showcase your skills with this interactive and animated skill progress bar. It features smooth animations and a clean, modern design, perfect for portfolios and resumes.

Author:
Amelia Chen

2 months ago
Skill Progress Bars

Author:
Amelia Clarke

2 months ago
Interactive Skill Graph with Animated Progress Bars
Visualize your skills with this interactive, animated skill graph component. Impress potential employers with a dynamic display of your expertise.

Author:
Amelia Clarke

2 months ago
Clean Hero Section

Author:
Anonymous

1 month ago
Personal Profile Card with Bio Introduction

Author:
Jordan McKenzie

2 months ago
Meet our Team section with Bio Cards
Showcase your team members with this elegant and responsive card-based layout. Each team card features a photo, name, position, and social media links with a smooth hover effect.

Author:
Alexandra Sinclair

1 month ago
Profile Card
A sleek and professional profile card for Farooq, featuring contact information, social media links, and a modern design that highlights professional accomplishments.

Author:
Anonymous

1 month ago
Professional One-Page Resume CV Template
A professional one-page resume template with a clean layout, designed to highlight your skills, experience, and education in a concise format for potential employers.

Author:
Alex Morgan

1 month ago
Modern User Profile Card with Animated Stats

Author:
Emma Thompson

2 months ago
Team Showcase Grid with Hover Effects

Author:
Alex Morgan

1 month ago
Team Section with Responsive Profile Cards
A responsive team section featuring profile cards with team member photos, names, roles, and social media links.

Author:
Aiden Mercer

1 month ago

Explore components by Tags

Didn't find component you were looking for?

Search from 500+ components