Yvette

it's very good

This tailwind example is contributed by Umutoniwase Yvette, on 24-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Umutoniwase Yvette

277

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <h1>Umutoniwase yvette</h1>
    <p>Web Developer</p>
  </header>
  <style>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  color: #333;
}

header {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 40px 0;
}

section {
  padding: 30px;
  max-width: 800px;
  margin: auto;
}

h2 {
  border-bottom: 2px solid #3498db;
  padding-bottom: 5px;
}

.skills ul {
  list-style: none;
  padding: 0;
}

.skills li {
  background-color: #3498db;
  color: white;
  display: inline-block;
  padding: 10px 15px;
  margin: 5px;
  border-radius: 5px;
}

.project-card {
  background-color: white;
  padding: 20px;
  margin: 15px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

footer {
  text-align: center;
  padding: 15px;
  background-color: #2c3e50;
  color: white;
}
</style>

<section class="about">
    <h2>About Me</h2>
    <p>I am a passionate web developer with a love for building beautiful and functional websites using HTML, CSS, and JavaScript.</p>
  </section>

<section class="skills">
    <h2>Skills</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>React</li>
      <li>Node.js</li>
    </ul>
  </section>

<section class="projects">
    <h2>Projects</h2>
    <div class="project-card">
      <h3>Project One</h3>
      <p>A responsive website for a small business.</p>
    </div>
    <div class="project-card">
      <h3>Project Two</h3>
      <p>A portfolio lets people know your expertise, which is why every developer should have one.</p>
    </div>
  </section>

<section class="contact">
    <h2>Contact Me</h2>
    <p>Email: umutoniwase yvette92@gmail.com</p>
  </section>

</body>
</html>

Related Examples

Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

3 months ago

614
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

626
Header

Author:
Morris Muriuki Muthigani

1 month ago

343
Brutalist Hero

Author:
threehymns

9 months ago

2k
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

3 months ago

101
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Author:
Mike Varen

1 year ago

3.9k
Navbar
Navbar

Author:
TakaMorY

4 weeks ago

86
Responsive Header
Beautiful responsive header component

Author:
Rajesh Maheshwari

6 months ago

1.3k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

3 months ago

435
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

9 months ago

3.4k
Navbar
E-commerce Navbar

Author:
Aman kumar

1 year ago

4.2k
Active Beauty Main Page

Author:
Maxim

5 months ago

875

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components