Portfolio card | Paper Rocket

Introduction

Your portfolio is your digital business card, and making it stand out is crucial for showcasing your skills effectively. In this blog post, we'll walk you through creating a stunning portfolio banner using HTML, CSS, and SVG graphics. This banner introduces "Praveen Kumar," a front-end web developer, but you can easily customize it to suit your own profile.

Here’s how we built it step by step!

Setting Up the Project

We created three main files for this project:

index.html - The HTML structure of the portfolio banner.
style.css - The CSS file for styling and animations.
image.png - A custom image used as part of the banner’s visual elements.

HTML: Building the Framework

The index.html file defines the basic structure:

SVG Background Shapes: These give the banner a modern and stylish look.
Text Content: Displays the developer’s name and role, alongside social media links.

Here’s the core HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="table">
    <div class="table-cell">
      <div class="container">
        <svg class="background-svg" width="400px" height="300px" viewBox="0 0 400 300">
          <g fill="#8B65E4">
            <path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z">
</path>
            <path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,
            277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z"></path>
            <path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,
            36.4302476 L399.8936,96.1889997 Z">
</path>
          </g>
        </svg>
        <div class="container-info">
          <h1>
            Hey! <br />I'm <span>Praveen Kumar</span>, 
            <span class="info">front-end web developer</span>
          </h1>
          <div class="box">
            <a class="box-item" href="https://www.linkedin.com" target="_blank">
            <i class="fa fa-linkedin"></i></a>
            <a class="box-item" href="https://www.instagram.com" target="_blank">
            <i class="fa fa-instagram"></i></a>
            <a class="box-item" href="https://x.com" target="_blank">
            <i class="fa fa-twitter"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS: Styling and Animations

The style.css file is where the magic happens. It defines the layout, colors, fonts, and animations for the banner.

Key Features of the CSS:

Dark Background: The banner uses a dark color palette (#080000f8) to enhance the focus on the foreground.
Typography: Fonts like Roboto ensure readability, while the text alignment and spacing add a professional touch.
Hover Effects: Social media icons fade when hovered, adding interactivity.
Subtle Animations: The SVG shapes rotate slightly to make the design feel alive.

Here’s a sample of the CSS code:

body {
  background-color: #080000f8;
  height: 100vh;
  overflow: hidden;
  text-align: center;
  font-family: "Roboto", sans-serif;
}

.container-info h1 {
  color: #fff;
  text-align: left;
  margin: 75px 37px;
  font-size: 24px;
  letter-spacing: 2px;
}

.box-item {
  color: #fff;
  font-size: 30px;
  padding-right: 20px;
  transition: all 0.3s;
}

.box-item:hover {
  opacity: 0.6;
}

@keyframes box {
  10% {
    transform: rotate(-2deg);
  }
  80% {
    transform: rotate(2deg);
  }
}

SVG: Adding Dynamic Shapes

SVG shapes are used to create abstract geometries in the background. This is a lightweight and scalable way to add style without using images.

For example:

html
<svg width="400px" height="300px" viewBox="0 0 400 300">
  <g fill="#8B65E4">
    <path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z"></path>
    <path d="M349.760339,49.1234675 L375.905579,
    277.733833 L199.999999,
    277.733834 L43.9648432,
    143.710938 L349.760339,
    49.1234675 Z"></path>
  </g>
</svg>

Final Touch: Interactive Links

The banner includes links to social media profiles with Font Awesome icons. Hover effects make them interactive and visually appealing.

html
<a class="box-item" href="https://www.linkedin.com" target="_blank">
  <i class="fa fa-linkedin"></i>
</a>

Conclusion

This dynamic portfolio banner is a great way to showcase your personal brand. With a combination of HTML, CSS, and SVG, you can create a professional and interactive web presence.

Whether you're a front-end developer or a designer, customizing this banner can highlight your skills and creativity.

Source code :git hub

Search This Blog

Craftycoder