Portfolio card | live online

 

Crafting a Stunning Portfolio Card with HTML, CSS, and GSAP Animation


When it comes to showcasing your skills and personality as a web developer, a visually appealing portfolio card can make all the difference. Today, I’m excited to share a project that demonstrates how design, animation, and interactivity can create an unforgettable first impression. Let’s dive into the creation of this dynamic portfolio card featuring Praveen Kumar G, a frontend developer.

The Concept

The portfolio card was designed with three goals in mind:

  1. Aesthetic Simplicity: Minimalistic yet modern design using clean lines, subtle colors, and polished typography.
  2. Interactivity: Hover and animation effects that engage users and add a personal touch.
  3. Professional Showcase: Highlighting key professional links and a warm introduction to the developer.

HTML Structure

The HTML code provides the foundation of this portfolio card. The structure is straightforward, consisting of:

  • A container for centering the card.
  • A card-header showcasing an avatar, name, and role.
  • A card-footer with buttons linking to professional social media profiles.

The header features a dynamic online indicator, which adds a touch of liveliness and gives the card a real-time vibe. Social media links, such as LinkedIn, GitHub, and Twitter, are integrated with their respective icons for instant recognition.

HTML Snippet:

html
<div class="card">
  <div class="card-header">
    <div class="avatar">
      <div class="user-online-indicator"></div>
      <img src="your-profile-image-url.jpg" alt="user-image" />
    </div>
    <div class="profile-name"><h1>Praveen Kumar G</h1></div>
    <div class="profile-role">Frontend Developer</div>
  </div>
  <div class="card-footer">
    <div class="social-buttons">
      <!-- Social Media Buttons -->
      <a href="your-linkedin-url" target="_blank">
<button><i class="fab fa-linkedin"></i></button></a>
      <!-- Add more buttons as needed -->
    </div>
  </div>
</div>

Styling with CSS

Using CSS, the card transforms into a visually appealing component. Key design elements include:

  • Color Palette: A combination of light and dark themes for contrast and elegance.
  • Typography: The Poppins font provides a clean, professional look.
  • Hover Effects: Buttons pulse and glow on hover, thanks to gradients and scale transitions.
  • Responsive Design: The card is fully scalable and centers perfectly on any screen.


CSS Highlights:

.card {
  width: 360px;
  background-color: #fff;
  border-radius: 10px;
  padding: 25px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.social-buttons button:hover {
  transform: scale(1.1);
  background-color: #000;
  color: #fff;
}

Animations with GSAP

What truly sets this portfolio card apart is the seamless animations powered by GSAP (GreenSock Animation Platform). These animations breathe life into the card:

  • Bounce Effect: The card slides in from the left with a bounce.
  • Elastic Avatar: The avatar pops into view with an elastic animation.
  • Pulse Indicator: The online indicator subtly pulses continuously.
  • Spin and Scale: Social media icons rotate and grow during their appearance.


GSAP Animation Code:


tl.from(".card", {
  opacity: 0,
  x: -50,
  ease: "bounce.out",
  duration: 1.5,
});
tl.from(".avatar img", {
  opacity: 0,
  scale: 0,
  ease: "elastic.out(1, 0.5)",
  duration: 1.2,
});

Why This Design Stands Out

  1. Dynamic Personality: The card’s animations and hover effects make it interactive and memorable.
  2. Professional Appeal: The combination of typography, layout, and colors ensures a professional yet friendly impression.
  3. Call-to-Action: Social media buttons encourage visitors to connect, view projects, and learn more.

DEMO : Profile Card  

Popular posts from this blog

Road for developers

Image
             ROAD MAP FOR WEB DEVELOPER 1. Fundamentals (Frontend Basics) HTML : Learn the basics of structuring content with HTML5 . Key concepts: Tags, attributes, forms, semantic HTML, media elements. CSS : Styling web pages using CSS3 . Key concepts: Flexbox, Grid layout, animations, responsive design, media queries. JavaScript : Adding interactivity to web pages. Key concepts: DOM manipulation, events, ES6+ features (arrow functions, promises, etc.). 2. Version Control (Git & GitHub) Learn Git for version control and GitHub for collaborating and hosting code. Key concepts: Commit, push, pull, merge, branches, pull requests. 3. Frontend Libraries & Frameworks CSS Frameworks : For quick styling and responsive design. Examples: Bootstrap , Tailwind CSS . JavaScript Frameworks/Libraries : For building dynamic user interfaces. Examples: React , Vue , Angular . 4. Responsive Web Design Learn how to make web pages look good on all devices (mobi...
Read more

Oops Concepts

Image
             Oops Key Words OOPS   Key words & Definitions In Object-Oriented Programming (OOP) , various keywords and concepts define how objects and classes interact. Below is a comprehensive list: 1. Class A class is like a blueprint for creating objects. 📌 Example: A Car class can define attributes like color, brand, speed and methods like start() and stop() . 2. Object An object is an instance of a class. 📌 Example: A BMW Car object is created from the Car class and has specific properties like black color and 220 km/h max speed . 3. Encapsulation Encapsulation hides the internal details of an object and only exposes necessary parts. 📌 Example: A bank account class hides the balance variable , allowing access only through deposit() and withdraw() methods. 4. Inheritance A child class can inherit properties from a parent class . 📌 Example: A Bird class has a function called fly() . A Parrot class in...
Read more