Responsive Portfolio Profile Card

This Responsive Portfolio Profile Card packs a full personal website’s functionality into a single, elegant component. Designed to mimic a native mobile app interface, it features a sticky bottom navigation bar that toggles between “About,” “Experience,” and “Contact” sections. The standout feature is the smooth, animated transition of the card’s dimensions and header layout as users switch contexts.

Core Technique: Attribute-Based State Management

The component uses a simple but powerful pattern: styling based on a data attribute (data-state) on the parent container. This allows CSS to handle all the heavy lifting for layout changes.

1. Dynamic Height Transition

Instead of relying on JavaScript to calculate pixel heights, the CSS pre-defines the dimensions for each state. When the data-state changes, the transition property animates the height automatically.

/* Base card style */
.card {
  transition: 0.3s; /* Smooths all property changes */
}

/* State-specific overrides */
.card[data-state="#about"] {
  height: 450px;
}
.card[data-state="#experience"] {
  height: 550px;
}

2. Header Reconfiguration

When navigating away from the main “About” tab (which acts as the home state), the header elements (avatar, name, title) shrink and move to the side to make room for content. This is achieved by checking the .is-active class on the card, which acts as a global modifier.

.card.is-active {
  .card-header {
    height: 80px; /* Shrinks header height */
  }

  .card-avatar {
    transform: none;
    left: 20px; /* Moves avatar to left corner */
    width: 50px; /* Shrinks size */
    bottom: 10px;
  }
}

Browser Support

The component uses standard CSS features like Flexbox and Transitions, ensuring excellent compatibility.

Key Technologies:

• SCSS Nesting: Keeps styles organized.
• CSS Transitions: For smooth resizing and movement.
• Flexbox: For layout alignment.