Mini Project – Portfolio Layout

Build a professional developer portfolio using CSS Grid, Flexbox, and responsive design techniques.

Portfolio websites showcase your best work to potential clients and employers. A well-designed portfolio combines clean layouts, smooth animations, and thoughtful typography to tell your professional story. The WanderLust team wants to create a developer portfolio section featuring team member profiles, their specialties, and recent projects. Professional portfolios follow specific patterns that work across industries. Header navigation keeps visitors oriented, hero sections grab attention immediately, project galleries showcase your work, and contact forms enable business inquiries. Each section requires different CSS techniques — Grid for overall layout, Flexbox for component alignment, and responsive design for mobile compatibility.

Planning the Portfolio Structure

Portfolio layouts typically use a vertical flow with distinct sections. Think of each section as a chapter in your professional story — header introduces you, hero section hooks visitors, projects demonstrate skills, about section builds trust, and footer provides contact information.

Header Section
Logo, navigation menu, contact button

Hero Section
Name, title, brief description, photo

Projects Gallery
Featured work with images, descriptions

Footer Section
Social links, email, additional info

Modern portfolios use CSS Grid for page-level structure and Flexbox for component-level alignment. Grid creates consistent spacing and responsive behavior, while Flexbox handles navigation menus, project cards, and content positioning within sections.

Building the Header Navigation

Portfolio headers establish professional credibility immediately. Navigation menus help visitors find specific information quickly, while contact buttons create clear paths for business inquiries.

<!-- WanderLust team member portfolio header -->
<style>
.portfolio-header {
  display: flex; /* Arrange logo and nav horizontally */
  justify-content: space-between; /* Logo left, nav right */
  align-items: center; /* Vertical alignment */
  padding: 20px 40px; /* Breathing room */
  background: #fff; /* Clean white background */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle depth */
}

.logo {
  font-size: 24px; /* Prominent but not overwhelming */
  font-weight: 700; /* Bold brand presence */
  color: #0ea5e9; /* WanderLust brand blue */
}

.nav-menu {
  display: flex; /* Horizontal menu items */
  gap: 32px; /* Space between menu items */
  list-style: none; /* Remove bullet points */
  margin: 0; /* Reset default margins */
  padding: 0; /* Reset default padding */
}

.nav-link {
  color: #0f172a; /* Dark text for readability */
  text-decoration: none; /* Clean, no underlines */
  font-weight: 500; /* Medium weight */
  transition: color 0.3s ease; /* Smooth hover effect */
}

.nav-link:hover {
  color: #0ea5e9; /* Brand blue on hover */
}

.contact-btn {
  background: #f97316; /* Orange call-to-action */
  color: white; /* White text for contrast */
  padding: 12px 24px; /* Generous click area */
  border-radius: 8px; /* Rounded modern look */
  text-decoration: none; /* No underlines */
  font-weight: 600; /* Semi-bold for emphasis */
  transition: background 0.3s ease; /* Smooth hover */
}

.contact-btn:hover {
  background: #ea580c; /* Darker orange on hover */
}
</style>

<header class="portfolio-header">
  <div class="logo">Sarah Chen</div>
  <nav>
    <ul class="nav-menu">
      <li><a href="#work" class="nav-link">Work</a></li>
      <li><a href="#about" class="nav-link">About</a></li>
      <li><a href="#experience" class="nav-link">Experience</a></li>
    </ul>
  </nav>
  <a href="#contact" class="contact-btn">Contact Me</a>
</header>

What just happened?

Flexbox arranged header elements horizontally with justify-content: space-between creating even spacing. The box-shadow adds professional depth while transitions create smooth hover effects. Try changing gap values to see spacing adjustments.

Creating the Hero Section

Hero sections introduce visitors to your professional identity. Effective heroes combine compelling headlines, brief descriptions, and visual elements that establish credibility and encourage further exploration.

<!-- WanderLust developer hero section -->
<style>
.hero-section {
  display: grid; /* Two-column layout */
  grid-template-columns: 1fr 300px; /* Text content + photo */
  gap: 60px; /* Space between columns */
  padding: 80px 40px; /* Generous vertical spacing */
  max-width: 1200px; /* Prevent overly wide content */
  margin: 0 auto; /* Center the section */
  align-items: center; /* Vertical alignment */
}

.hero-content h1 {
  font-size: 48px; /* Large, attention-grabbing */
  font-weight: 900; /* Extra bold for impact */
  color: #0f172a; /* Dark, readable text */
  margin: 0 0 16px 0; /* Space below heading */
  line-height: 1.1; /* Tight line spacing */
}

.hero-subtitle {
  font-size: 24px; /* Secondary headline size */
  color: #0ea5e9; /* Brand blue accent */
  font-weight: 600; /* Semi-bold emphasis */
  margin: 0 0 24px 0; /* Space below subtitle */
}

.hero-description {
  font-size: 18px; /* Larger than body text */
  color: #64748b; /* Muted gray for balance */
  line-height: 1.6; /* Comfortable reading */
  margin: 0 0 32px 0; /* Space below paragraph */
}

.hero-buttons {
  display: flex; /* Horizontal button layout */
  gap: 16px; /* Space between buttons */
}

.btn-primary {
  background: #0ea5e9; /* Primary brand color */
  color: white; /* High contrast text */
  padding: 16px 32px; /* Generous click area */
  border-radius: 8px; /* Rounded corners */
  text-decoration: none; /* No underlines */
  font-weight: 600; /* Semi-bold text */
  transition: all 0.3s ease; /* Smooth interactions */
}

.btn-secondary {
  background: transparent; /* Transparent background */
  color: #0f172a; /* Dark text */
  border: 2px solid #e2e8f0; /* Subtle border */
  padding: 14px 32px; /* Slightly smaller padding */
  border-radius: 8px; /* Matching corners */
  text-decoration: none; /* Clean appearance */
  font-weight: 600; /* Consistent weight */
  transition: all 0.3s ease; /* Smooth hover */
}

.btn-secondary:hover {
  border-color: #0ea5e9; /* Blue border on hover */
  color: #0ea5e9; /* Matching text color */
}

.hero-photo {
  width: 300px; /* Fixed width */
  height: 300px; /* Square aspect ratio */
  background: #e2e8f0; /* Placeholder background */
  border-radius: 16px; /* Rounded photo frame */
  display: flex; /* Center placeholder text */
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  color: #64748b; /* Muted placeholder text */
  font-size: 16px; /* Readable size */
}
</style>

<section class="hero-section">
  <div class="hero-content">
    <h1>Frontend Developer & UI Designer</h1>
    <p class="hero-subtitle">Creating beautiful, functional web experiences</p>
    <p class="hero-description">I specialize in React, CSS animations, and user interface design. Currently building travel booking experiences at WanderLust, helping millions of users discover their next adventure.</p>
    <div class="hero-buttons">
      <a href="#projects" class="btn-primary">View My Work</a>
      <a href="#contact" class="btn-secondary">Get In Touch</a>
    </div>
  </div>
  <div class="hero-photo">Professional Photo</div>
</section>

What just happened?

CSS Grid created the two-column layout with grid-template-columns: 1fr 300px giving flexible space to content and fixed width to the photo. Typography hierarchy guides attention from headline to description to call-to-action buttons.

Building the Projects Gallery

Project galleries showcase your work through visual cards containing screenshots, descriptions, and technology details. Effective galleries use consistent card layouts, clear categorization, and easy-to-scan information hierarchy.

<!-- WanderLust project showcase grid -->
<style>
.projects-section {
  padding: 80px 40px; /* Generous section spacing */
  max-width: 1200px; /* Prevent excessive width */
  margin: 0 auto; /* Center the section */
  background: #f8fafc; /* Subtle background color */
}

.section-title {
  text-align: center; /* Centered heading */
  font-size: 36px; /* Large, prominent size */
  font-weight: 800; /* Bold for emphasis */
  color: #0f172a; /* Dark, readable text */
  margin: 0 0 16px 0; /* Space below title */
}

.section-subtitle {
  text-align: center; /* Centered description */
  font-size: 18px; /* Larger than body text */
  color: #64748b; /* Muted gray color */
  margin: 0 0 60px 0; /* Large space before content */
  max-width: 600px; /* Limit line length */
  margin-left: auto; /* Center with max-width */
  margin-right: auto; /* Center with max-width */
}

.projects-grid {
  display: grid; /* Grid layout for cards */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive columns */
  gap: 32px; /* Space between project cards */
}

.project-card {
  background: white; /* Clean white background */
  border-radius: 16px; /* Rounded card corners */
  overflow: hidden; /* Clean image edges */
  box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Subtle depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover */
}

.project-card:hover {
  transform: translateY(-8px); /* Lift card on hover */
  box-shadow: 0 12px 40px rgba(0,0,0,0.15); /* Deeper shadow */
}

.project-image {
  width: 100%; /* Full card width */
  height: 200px; /* Fixed height */
  background: #e2e8f0; /* Placeholder background */
  display: flex; /* Center placeholder text */
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  color: #64748b; /* Muted text color */
  font-size: 14px; /* Small placeholder text */
}

.project-content {
  padding: 24px; /* Interior card spacing */
}

.project-title {
  font-size: 20px; /* Prominent card title */
  font-weight: 700; /* Bold for hierarchy */
  color: #0f172a; /* Dark, readable text */
  margin: 0 0 12px 0; /* Space below title */
}

.project-description {
  color: #64748b; /* Muted description text */
  line-height: 1.5; /* Comfortable reading */
  margin: 0 0 16px 0; /* Space below description */
  font-size: 15px; /* Slightly smaller than body */
}

.project-tags {
  display: flex; /* Horizontal tag layout */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 8px; /* Space between tags */
  margin: 0 0 20px 0; /* Space below tags */
}

.project-tag {
  background: #eff6ff; /* Light blue background */
  color: #0369a1; /* Blue text */
  padding: 4px 12px; /* Compact tag padding */
  border-radius: 20px; /* Pill-shaped tags */
  font-size: 12px; /* Small tag text */
  font-weight: 600; /* Semi-bold tags */
}

.project-link {
  color: #0ea5e9; /* Brand blue color */
  text-decoration: none; /* No underlines */
  font-weight: 600; /* Semi-bold link */
  font-size: 14px; /* Compact link text */
  transition: color 0.3s ease; /* Smooth hover */
}

.project-link:hover {
  color: #0284c7; /* Darker blue on hover */
}
</style>

<section class="projects-section">
  <h2 class="section-title">Featured Projects</h2>
  <p class="section-subtitle">Recent work showcasing frontend development, user experience design, and creative problem-solving</p>
  
  <div class="projects-grid">
    <div class="project-card">
      <div class="project-image">WanderLust Booking Flow</div>
      <div class="project-content">
        <h3 class="project-title">Travel Booking Interface</h3>
        <p class="project-description">Redesigned the complete booking experience with improved user flows, mobile optimization, and accessibility features.</p>
        <div class="project-tags">
          <span class="project-tag">React</span>
          <span class="project-tag">CSS Grid</span>
          <span class="project-tag">Figma</span>
        </div>
        <a href="#" class="project-link">View Project →</a>
      </div>
    </div>
    
    <div class="project-card">
      <div class="project-image">Destination Gallery</div>
      <div class="project-content">
        <h3 class="project-title">Interactive Photo Gallery</h3>
        <p class="project-description">Built a responsive image gallery with filtering, lazy loading, and smooth animations for destination browsing.</p>
        <div class="project-tags">
          <span class="project-tag">JavaScript</span>
          <span class="project-tag">CSS Animations</span>
          <span class="project-tag">Performance</span>
        </div>
        <a href="#" class="project-link">View Project →</a>
      </div>
    </div>
  </div>
</section>

What just happened?

The responsive grid uses auto-fit and minmax(350px, 1fr) to create flexible columns that adapt to screen size. Hover effects with transform: translateY(-8px) create engaging interactions when users explore projects.

Making It Mobile-Responsive

Professional portfolios must work perfectly across all devices. Mobile responsiveness requires careful consideration of navigation patterns, typography scaling, and touch-friendly interactions. Most portfolio visitors browse on mobile devices, making responsive design crucial for professional success.

/* WanderLust portfolio responsive breakpoints */
@media (max-width: 768px) {
  .portfolio-header {
    flex-direction: column; /* Stack logo and nav */
    gap: 20px; /* Space between stacked items */
    padding: 20px; /* Reduced padding for mobile */
  }
  
  .nav-menu {
    flex-direction: column; /* Vertical navigation */
    gap: 16px; /* Closer spacing for mobile */
    text-align: center; /* Center menu items */
  }
  
  .hero-section {
    grid-template-columns: 1fr; /* Single column layout */
    gap: 40px; /* Reduced gap for mobile */
    padding: 40px 20px; /* Less padding on mobile */
    text-align: center; /* Center all content */
  }
  
  .hero-content h1 {
    font-size: 32px; /* Smaller heading on mobile */
  }
  
  .hero-subtitle {
    font-size: 20px; /* Smaller subtitle */
  }
  
  .hero-buttons {
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons */
  }
  
  .hero-photo {
    order: -1; /* Move photo above text */
    margin: 0 auto; /* Center the photo */
  }
  
  .projects-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 24px; /* Reduced gap */
  }
  
  .projects-section {
    padding: 40px 20px; /* Less section padding */
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 28px; /* Even smaller on tiny screens */
  }
  
  .btn-primary, .btn-secondary {
    width: 100%; /* Full-width buttons */
    text-align: center; /* Center button text */
  }
  
  .project-content {
    padding: 20px; /* Reduced card padding */
  }
}

What just happened?

Media queries restructure layouts for smaller screens using flex-direction: column and grid-template-columns: 1fr. The order: -1 property moves the photo above text content on mobile for better visual hierarchy.

Portfolio Best Practices

Load quickly with optimized images, include clear contact information, showcase 3-6 best projects instead of everything, write compelling project descriptions focusing on problems solved, and test thoroughly on mobile devices where most visitors will browse your work.

Professional portfolios combine strategic layout, compelling content, and smooth user experience. The WanderLust team can adapt these techniques for team member profiles, creating cohesive personal brands that align with company values while showcasing individual expertise and personality.

Quiz

Up Next: Mini Project – Responsive Website

Build a complete responsive website that adapts beautifully across all devices using advanced Grid layouts, Flexbox patterns, and mobile-first design principles.

← Previous Course Index Next →