Build a Consulting Portfolio Website
Build a live consulting case study portfolio site with GitHub Pages.
Introduction
30 Second Summary
When a potential client lands on your website, you have seconds to prove you deliver results. The fastest way to build that trust is showing structured case studies with real metrics.
In this project, you will build a professional consulting portfolio website that showcases your case studies using the Challenge-Solution-Results framework. You will deploy it live on GitHub Pages so anyone can visit your portfolio from a real URL.
What You'll Build
A multi-page consulting portfolio website built with HTML and CSS, featuring a homepage with your value proposition, a portfolio grid with metric-forward case study cards, and detailed case study pages following an industry-standard storytelling structure.
By the end of this project, you'll have:
- A responsive homepage with your consulting positioning, expertise areas, and a professional contact section.
- A portfolio grid page displaying case study cards that surface headline metrics like "+30% Efficiency" at a glance.
- Two detailed case study pages following the Challenge-Solution-Results framework that top consulting firms use.
- A live deployed site on GitHub Pages with your own URL that you can share with clients or employers.
- Secret Mission: Add CSS animations and a dark mode toggle to give your portfolio a polished, modern feel.
Are there any prerequisites?
None. This project includes full setup instructions for every tool you need, including VS Code, Git, and GitHub. No prior coding experience is required.
Build the Homepage
Every consulting portfolio starts with a strong homepage. Your homepage needs to communicate who you are, what you do, and why a potential client should keep reading.
In this step, you'll create the project folder structure, write the full homepage HTML with semantic sections, and style it with CSS to look clean and professional.
In this step, get ready to:
- Create the project folder structure with your HTML file, CSS file, and case studies directory.
- Build the homepage HTML with a hero section, highlights, about section, and contact CTA.
- Style everything with CSS using a professional colour palette and responsive layout.
Create the project folder structure
Before writing any code, you need a clean folder structure. Your project will have an index.html for the homepage, a css/ folder for stylesheets, and a case-studies/ folder for your case study pages later.
- Open VS Code by pressing Cmd+Space (macOS) or the Windows key (Windows), typing VS Code, and pressing Enter.
- Open the integrated terminal by pressing Ctrl+` (Windows) or Cmd+` (macOS).
- Move to your Desktop by running this command:
cd ~/Desktop- Create your project folder and move into it by running these commands:
mkdir consulting-portfolio
cd consulting-portfolio- Create the folder structure and files by running these commands:
mkdir css case-studies
touch index.html css/styles.css- Confirm the files exist by running:
lsYou should see case-studies, css, and index.html in the output.
Don't see all three items?
Make sure you ran cd consulting-portfolio before creating the subfolders. If ls shows nothing, you may still be in the Desktop directory.
On Windows without Git Bash, use mkdir css and mkdir case-studies separately, and echo.> index.html instead of touch.
Help me figure out why my files aren't showing up
- Now open this project folder in VS Code by clicking File in the top menu bar.
- Click Open Folder.
- Navigate to your Desktop, select the consulting-portfolio folder, and click Open.
You should see the consulting-portfolio folder name in the VS Code Explorer sidebar on the left, with your files and folders listed beneath it.
Write the homepage HTML
Your homepage uses semantic HTML elements to give the page meaningful structure. A <header> holds the navigation, <main> holds the page content, and <footer> closes the page.
- In the Explorer sidebar, click index.html to open it in the editor.
- Copy the following HTML skeleton into the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name | Strategy Consultant</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav class="nav-container">
<a href="index.html" class="nav-logo">YourName</a>
<ul class="nav-links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="portfolio.html">Case Studies</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- Content sections go here -->
</main>
<footer>
<p>© 2026 YourName Consulting. All rights reserved.</p>
</footer>
</body>
</html>What does this code do?
- The <meta name="viewport"> tag ensures the page scales properly on mobile devices.
- The <link rel="stylesheet"> connects your HTML to the CSS file you'll write later in this step.
- The <nav> element contains four links for navigating between pages and sections.
- The class="active" on the Home link will let you style the current page's link differently later.
Now you'll add the content sections inside <main>. The hero section is the first thing visitors see, communicating your value proposition and expertise areas.
- In index.html, find the line that says <!-- Content sections go here --> and replace it with the following hero and highlights sections:
<section class="hero">
<h1>Driving Measurable Business Outcomes</h1>
<p class="tagline">Strategy consultant helping mid-market companies unlock growth through operational excellence and digital transformation.</p>
<div class="expertise-areas">
<span class="expertise-tag">Operations Strategy</span>
<span class="expertise-tag">Digital Transformation</span>
<span class="expertise-tag">Process Optimization</span>
<span class="expertise-tag">Growth Strategy</span>
</div>
<a href="portfolio.html" class="cta-button">View Case Studies</a>
</section>
<section class="highlights">
<div class="highlight-card">
<span class="highlight-number">12+</span>
<span class="highlight-label">Engagements Delivered</span>
</div>
<div class="highlight-card">
<span class="highlight-number">$4.2M</span>
<span class="highlight-label">Client Value Created</span>
</div>
<div class="highlight-card">
<span class="highlight-number">6</span>
<span class="highlight-label">Industries Served</span>
</div>
</section>What does this code do?
- The .hero section leads with a results-focused headline and a tagline that positions your consulting niche.
- The .expertise-tag spans act as visual pills showing your areas of expertise at a glance.
- The .highlights section displays three headline metrics that build credibility before the visitor scrolls further.
- Directly below the highlights section you just added, paste the about and contact sections:
<section id="about" class="about-section">
<h2>About</h2>
<p>With over 5 years of experience in management consulting, I specialize in helping mid-market companies solve complex operational challenges. My approach combines rigorous data analysis with practical, implementable solutions that drive measurable results.</p>
<p>Previously at a top-tier consulting firm, I now work independently with companies in manufacturing, healthcare, technology, and professional services.</p>
<div class="expertise-list">
<h3>Functional Areas</h3>
<ul>
<li>Operational efficiency and process redesign</li>
<li>Digital transformation and technology strategy</li>
<li>Revenue growth and market expansion</li>
<li>Organizational design and change management</li>
</ul>
</div>
</section>
<section id="contact" class="contact-section">
<h2>Let's Work Together</h2>
<p>Ready to drive measurable outcomes for your business?</p>
<div class="contact-links">
<a href="mailto:your.email@example.com" class="cta-button">Get in Touch</a>
<a href="https://linkedin.com/in/yourprofile" class="cta-button cta-secondary">LinkedIn</a>
</div>
</section>What does this code do?
- The id="about" and id="contact" attributes let the nav links scroll directly to these sections when clicked.
- The about section establishes your background and lists your functional expertise areas.
- The contact section uses two CTA buttons. The secondary button has a .cta-secondary class you'll style as an outlined button later.
- Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
- Open the file in your browser by right-clicking index.html in the Explorer sidebar and selecting Reveal in Finder (macOS) or Reveal in File Explorer (Windows), then double-click the file.
You should see all your text content in the browser. It will look unstyled with default fonts and no layout. That is expected.
Seeing a blank page?
Check that your <main> tag is not accidentally empty. The hero, highlights, about, and contact sections should all be between <main> and </main>.
Also verify you saved the file. Unsaved changes show a dot on the file tab in VS Code.
Help me debug my blank page
Style the homepage with CSS
Your HTML has all the content, but it needs CSS to look professional. You'll start with design tokens (CSS variables) that define your colour palette and spacing, then style each section.
- In the Explorer sidebar, expand the css folder and click styles.css to open it.
- Add the CSS variables and base reset styles by pasting this code:
/* ===== CSS Variables ===== */
:root {
--color-primary: #1a365d;
--color-primary-light: #2c5282;
--color-accent: #2b6cb0;
--color-text: #2d3748;
--color-text-light: #718096;
--color-bg: #ffffff;
--color-bg-alt: #f7fafc;
--color-border: #e2e8f0;
--color-card-bg: #ffffff;
--font-heading: 'Georgia', serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--max-width: 1100px;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
}
/* ===== Reset and Base ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.7;
font-size: 16px;
}
h1, h2, h3 {
font-family: var(--font-heading);
color: var(--color-primary);
line-height: 1.3;
}
h1 {
font-size: 2.25rem;
margin-bottom: var(--spacing-md);
}
h2 {
font-size: 1.75rem;
margin-bottom: var(--spacing-md);
}
h3 {
font-size: 1.25rem;
margin-bottom: var(--spacing-sm);
}
p {
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
li {
margin-bottom: var(--spacing-sm);
}What does this code do?
- The :root block defines CSS variables for colours, fonts, spacing, and layout. Changing a variable here updates it everywhere on the site.
- The reset (* { margin: 0; padding: 0; }) removes default browser spacing so you have full control over layout.
- Base styles set the font family, text colour, and line height for the entire page. Headings use Georgia (serif) to contrast with the sans-serif body text.
- Save styles.css and refresh your browser.
You should see your text now uses a clean sans-serif font with dark navy headings. The page still has no layout structure yet.
- Below the base styles, add the navigation, hero, and button styles:
/* ===== Navigation ===== */
header {
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
}
.nav-container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-md) var(--spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: bold;
color: var(--color-primary);
}
.nav-logo:hover {
text-decoration: none;
}
.nav-links {
list-style: none;
display: flex;
gap: var(--spacing-lg);
padding-left: 0;
margin-bottom: 0;
}
.nav-links a {
color: var(--color-text-light);
font-size: 0.95rem;
}
.nav-links a.active,
.nav-links a:hover {
color: var(--color-primary);
text-decoration: none;
}
/* ===== Hero Section ===== */
.hero {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
}
.tagline {
font-size: 1.2rem;
color: var(--color-text-light);
max-width: 700px;
margin: 0 auto var(--spacing-lg);
}
.expertise-areas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.expertise-tag {
background-color: var(--color-bg-alt);
border: 1px solid var(--color-border);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
color: var(--color-text-light);
}
/* ===== CTA Button ===== */
.cta-button {
display: inline-block;
background-color: var(--color-accent);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: var(--color-primary-light);
text-decoration: none;
}
.cta-secondary {
background-color: transparent;
color: var(--color-accent);
border: 2px solid var(--color-accent);
}
.cta-secondary:hover {
background-color: var(--color-accent);
color: #ffffff;
}What does this code do?
- The nav uses Flexbox (display: flex) to place the logo on the left and links on the right. position: sticky keeps the nav visible as the visitor scrolls.
- The hero section centers all text and constrains its width with max-width so it doesn't stretch across ultra-wide screens.
- The .expertise-tag uses a pill shape (border-radius: 20px) to visually separate each area of expertise.
- The CTA button has a smooth colour transition on hover. The .cta-secondary variant uses a transparent background with an outline instead.
- Save styles.css and refresh your browser.
You should see a sticky nav bar at the top with your name on the left and links on the right. The hero section is centered with a blue "View Case Studies" button and rounded expertise tags.
- Below the CTA button styles, add the remaining section styles and responsive rules:
/* ===== Highlights Section ===== */
.highlights {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
text-align: center;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.highlight-card {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.highlight-number {
font-family: var(--font-heading);
font-size: 2.5rem;
color: var(--color-primary);
font-weight: bold;
}
.highlight-label {
font-size: 0.9rem;
color: var(--color-text-light);
}
/* ===== About Section ===== */
.about-section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
.expertise-list {
margin-top: var(--spacing-lg);
}
.expertise-list h3 {
color: var(--color-text);
}
/* ===== Contact Section ===== */
.contact-section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
background-color: var(--color-bg-alt);
border-radius: 8px;
margin-bottom: var(--spacing-xl);
}
.contact-links {
display: flex;
gap: var(--spacing-md);
justify-content: center;
margin-top: var(--spacing-lg);
}
/* ===== Footer ===== */
footer {
text-align: center;
padding: var(--spacing-lg);
border-top: 1px solid var(--color-border);
color: var(--color-text-light);
font-size: 0.85rem;
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
h1 {
font-size: 1.75rem;
}
.nav-container {
flex-direction: column;
gap: var(--spacing-md);
}
.nav-links {
gap: var(--spacing-md);
}
.highlights {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.contact-links {
flex-direction: column;
align-items: center;
}
}What does this code do?
- The highlights section uses CSS Grid (grid-template-columns: repeat(3, 1fr)) to display three metric cards in equal columns.
- The contact section has a light grey background (var(--color-bg-alt)) to visually separate it from the rest of the page.
- The @media query at the bottom makes the layout responsive. On screens narrower than 768px, the grid collapses to a single column and the nav stacks vertically.
- Save styles.css and refresh your browser.
Your homepage now looks professional. You should see the three highlight metrics displayed in a row, the about section with a clean layout, and the contact section with a subtle grey background and two buttons side by side.
Styles not showing up?
Make sure the <link> tag in your index.html points to css/styles.css (not styles.css without the folder). The path must match your folder structure exactly.
Also check for typos in class names. If your HTML says class="hero" but your CSS targets .Hero, it will not match because CSS class names are case-sensitive.
Help me figure out why my styles aren't loading
What is responsive design?
Responsive design means your website adapts its layout to different screen sizes. The @media (max-width: 768px) rule applies only when the browser window is narrower than 768 pixels (roughly tablet-width and below).
You can test this by resizing your browser window. Watch the highlights grid collapse from three columns to one as the window gets narrower.
✔️ Awesome, I've got everything!
Great. Double check you have saved both index.html and css/styles.css.
ⓧ I'd like to double check the full code
Here is the complete index.html at this point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name | Strategy Consultant</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav class="nav-container">
<a href="index.html" class="nav-logo">YourName</a>
<ul class="nav-links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="portfolio.html">Case Studies</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>Driving Measurable Business Outcomes</h1>
<p class="tagline">Strategy consultant helping mid-market companies unlock growth through operational excellence and digital transformation.</p>
<div class="expertise-areas">
<span class="expertise-tag">Operations Strategy</span>
<span class="expertise-tag">Digital Transformation</span>
<span class="expertise-tag">Process Optimization</span>
<span class="expertise-tag">Growth Strategy</span>
</div>
<a href="portfolio.html" class="cta-button">View Case Studies</a>
</section>
<section class="highlights">
<div class="highlight-card">
<span class="highlight-number">12+</span>
<span class="highlight-label">Engagements Delivered</span>
</div>
<div class="highlight-card">
<span class="highlight-number">$4.2M</span>
<span class="highlight-label">Client Value Created</span>
</div>
<div class="highlight-card">
<span class="highlight-number">6</span>
<span class="highlight-label">Industries Served</span>
</div>
</section>
<section id="about" class="about-section">
<h2>About</h2>
<p>With over 5 years of experience in management consulting, I specialize in helping mid-market companies solve complex operational challenges. My approach combines rigorous data analysis with practical, implementable solutions that drive measurable results.</p>
<p>Previously at a top-tier consulting firm, I now work independently with companies in manufacturing, healthcare, technology, and professional services.</p>
<div class="expertise-list">
<h3>Functional Areas</h3>
<ul>
<li>Operational efficiency and process redesign</li>
<li>Digital transformation and technology strategy</li>
<li>Revenue growth and market expansion</li>
<li>Organizational design and change management</li>
</ul>
</div>
</section>
<section id="contact" class="contact-section">
<h2>Let's Work Together</h2>
<p>Ready to drive measurable outcomes for your business?</p>
<div class="contact-links">
<a href="mailto:your.email@example.com" class="cta-button">Get in Touch</a>
<a href="https://linkedin.com/in/yourprofile" class="cta-button cta-secondary">LinkedIn</a>
</div>
</section>
</main>
<footer>
<p>© 2026 YourName Consulting. All rights reserved.</p>
</footer>
</body>
</html>And here is the complete css/styles.css:
/* ===== CSS Variables ===== */
:root {
--color-primary: #1a365d;
--color-primary-light: #2c5282;
--color-accent: #2b6cb0;
--color-text: #2d3748;
--color-text-light: #718096;
--color-bg: #ffffff;
--color-bg-alt: #f7fafc;
--color-border: #e2e8f0;
--color-card-bg: #ffffff;
--font-heading: 'Georgia', serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--max-width: 1100px;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
}
/* ===== Reset and Base ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.7;
font-size: 16px;
}
h1, h2, h3 {
font-family: var(--font-heading);
color: var(--color-primary);
line-height: 1.3;
}
h1 {
font-size: 2.25rem;
margin-bottom: var(--spacing-md);
}
h2 {
font-size: 1.75rem;
margin-bottom: var(--spacing-md);
}
h3 {
font-size: 1.25rem;
margin-bottom: var(--spacing-sm);
}
p {
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
li {
margin-bottom: var(--spacing-sm);
}
/* ===== Navigation ===== */
header {
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
}
.nav-container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-md) var(--spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: bold;
color: var(--color-primary);
}
.nav-logo:hover {
text-decoration: none;
}
.nav-links {
list-style: none;
display: flex;
gap: var(--spacing-lg);
padding-left: 0;
margin-bottom: 0;
}
.nav-links a {
color: var(--color-text-light);
font-size: 0.95rem;
}
.nav-links a.active,
.nav-links a:hover {
color: var(--color-primary);
text-decoration: none;
}
/* ===== Hero Section ===== */
.hero {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
}
.tagline {
font-size: 1.2rem;
color: var(--color-text-light);
max-width: 700px;
margin: 0 auto var(--spacing-lg);
}
.expertise-areas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.expertise-tag {
background-color: var(--color-bg-alt);
border: 1px solid var(--color-border);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
color: var(--color-text-light);
}
/* ===== CTA Button ===== */
.cta-button {
display: inline-block;
background-color: var(--color-accent);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: var(--color-primary-light);
text-decoration: none;
}
.cta-secondary {
background-color: transparent;
color: var(--color-accent);
border: 2px solid var(--color-accent);
}
.cta-secondary:hover {
background-color: var(--color-accent);
color: #ffffff;
}
/* ===== Highlights Section ===== */
.highlights {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
text-align: center;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.highlight-card {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.highlight-number {
font-family: var(--font-heading);
font-size: 2.5rem;
color: var(--color-primary);
font-weight: bold;
}
.highlight-label {
font-size: 0.9rem;
color: var(--color-text-light);
}
/* ===== About Section ===== */
.about-section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
.expertise-list {
margin-top: var(--spacing-lg);
}
.expertise-list h3 {
color: var(--color-text);
}
/* ===== Contact Section ===== */
.contact-section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
background-color: var(--color-bg-alt);
border-radius: 8px;
margin-bottom: var(--spacing-xl);
}
.contact-links {
display: flex;
gap: var(--spacing-md);
justify-content: center;
margin-top: var(--spacing-lg);
}
/* ===== Footer ===== */
footer {
text-align: center;
padding: var(--spacing-lg);
border-top: 1px solid var(--color-border);
color: var(--color-text-light);
font-size: 0.85rem;
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
h1 {
font-size: 1.75rem;
}
.nav-container {
flex-direction: column;
gap: var(--spacing-md);
}
.nav-links {
gap: var(--spacing-md);
}
.highlights {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.contact-links {
flex-direction: column;
align-items: center;
}
}Your homepage is complete with a professional layout, clean typography, and responsive design. Next up, you'll build the portfolio grid page to showcase your case study cards with headline metrics.
Create the Portfolio Grid Page
Your homepage is live with a clear consulting positioning and highlights section. Now you need a dedicated page where visitors can browse your case studies at a glance.
A portfolio grid surfaces the most important detail first: the measurable result. Visitors scanning your grid should immediately see metrics like "+30% Efficiency" or "$1.8M Saved" without needing to click through. In this step, you will build that grid page using CSS Grid for a responsive two-column layout.
In this step, get ready to:
- Build a portfolio page with case study cards that display headline metrics.
- Style the cards with CSS Grid for a responsive layout.
- Connect the homepage and portfolio page with working navigation.
Build portfolio.html with case study cards
Each card in the portfolio grid is an anchor element that wraps the card content. This means the entire card is clickable, linking directly to the full case study page.
- In VS Code, create a new file called portfolio.html in the root of your consulting-portfolio folder (the same level as index.html).
- Copy the following code into portfolio.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case Studies | YourName Consulting</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav class="nav-container">
<a href="index.html" class="nav-logo">YourName</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html" class="active">Case Studies</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- Page heading and description -->
<section class="portfolio-header">
<h1>Case Studies</h1>
<p>Real results from real engagements. Each case study follows the Challenge-Solution-Results framework to show exactly how I helped clients achieve measurable outcomes.</p>
</section>
<!-- Two-column grid of case study cards -->
<section class="portfolio-grid">
<a href="case-studies/case-study-1.html" class="case-study-card">
<span class="card-metric">+30% Efficiency</span>
<h3>Operational Transformation for a Healthcare Provider</h3>
<p>Redesigned patient intake and scheduling processes to reduce wait times and improve staff utilization.</p>
<div class="card-tags">
<span>Healthcare</span>
<span>Operations</span>
<span>12 weeks</span>
</div>
</a>
<a href="case-studies/case-study-2.html" class="case-study-card">
<span class="card-metric">$1.8M Saved</span>
<h3>Supply Chain Optimization for a Manufacturing Firm</h3>
<p>Identified and eliminated bottlenecks in procurement and logistics to reduce costs and improve delivery timelines.</p>
<div class="card-tags">
<span>Manufacturing</span>
<span>Supply Chain</span>
<span>16 weeks</span>
</div>
</a>
</section>
<!-- Call to action linking back to contact -->
<section class="portfolio-cta">
<p>See results like these for your business?</p>
<a href="index.html#contact" class="cta-button">Let's Talk</a>
</section>
</main>
<footer>
<p>© 2026 YourName Consulting. All rights reserved.</p>
</footer>
</body>
</html>What does this code do?
This page has three main sections:
- portfolio-header displays the page title and a description of the Challenge-Solution-Results framework.
- portfolio-grid contains two cards, each wrapped in an <a> tag so the entire card is clickable. Each card shows a headline metric (like "+30% Efficiency"), a title, a short description, and category tags.
- portfolio-cta gives visitors a clear next step to get in touch.
Why lead with metrics on the cards?
Prospects scanning a portfolio page decide in seconds whether to click deeper. Surfacing the key result upfront (like "$1.8M Saved") immediately signals that your work drives measurable outcomes. The full story lives on the case study page itself.
- Save portfolio.html.
File not appearing in VS Code?
Make sure you created the file at the top level of your consulting-portfolio folder, not inside the css/ or case-studies/ folders. You should see portfolio.html at the same level as index.html in the Explorer sidebar.
Help me figure out where my portfolio.html file ended up.
Style the portfolio grid with CSS
The HTML structure is in place, but it needs styling to display as a proper two-column grid. You will use CSS Grid to arrange the cards side by side on desktop and stack them on mobile.
- Open css/styles.css.
- Find the .contact-links rule near the bottom of your file (just above the footer rule).
- Add the following portfolio styles between .contact-links and footer:
/* ===== Portfolio Grid ===== */
.portfolio-header {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}
.portfolio-grid {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--spacing-lg) var(--spacing-xl);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.case-study-card {
display: block;
background-color: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: var(--spacing-lg);
transition: box-shadow 0.2s ease, transform 0.2s ease;
color: var(--color-text);
}
.case-study-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
text-decoration: none;
}
.card-metric {
display: inline-block;
background-color: var(--color-primary);
color: #ffffff;
padding: 0.3rem 0.8rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.card-tags {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
flex-wrap: wrap;
}
.card-tags span {
background-color: var(--color-bg-alt);
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.8rem;
color: var(--color-text-light);
}
.portfolio-cta {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
text-align: center;
}What does this CSS do?
- grid-template-columns: repeat(2, 1fr) creates a two-column grid where each card takes equal width.
- transition: box-shadow 0.2s ease, transform 0.2s ease on .case-study-card makes the hover effect animate smoothly instead of snapping.
- .card-metric uses a dark background with white text to make the headline number stand out immediately.
- .card-tags uses Flexbox with flex-wrap: wrap so tags flow onto a new line if they run out of space.
Now you need to make the grid collapse to a single column on smaller screens.
- Scroll down to the @media (max-width: 768px) block at the bottom of your file.
- Find this line inside the media query:
.highlights { grid-template-columns: 1fr; gap: var(--spacing-md); }- Add this new rule directly below it:
.portfolio-grid { grid-template-columns: 1fr; }What does this responsive rule do?
On screens narrower than 768px (most phones and small tablets), the grid switches from two columns to one. Each card takes the full width, making them easy to read without horizontal scrolling.
- Save css/styles.css.
- Open portfolio.html in your browser by right-clicking the file in VS Code's Explorer sidebar and selecting Open with Live Server (if you have the extension) or by double-clicking the file in Finder/File Explorer.
- You should see two case study cards side by side, each showing a dark metric badge at the top, a title, a short description, and grey tags at the bottom.
Cards stacking vertically instead of side by side?
Check that your .portfolio-grid rule includes display: grid and grid-template-columns: repeat(2, 1fr). If either is missing, the grid will not activate and cards will stack in a single column.
Also make sure your new portfolio styles are placed above the @media block, not inside it. Styles inside the media query only apply on small screens.
Help me debug why my portfolio cards are not showing in two columns.
Verify navigation between pages
Both pages now exist. The homepage already links to the portfolio page, and the portfolio page links back to the homepage. Time to confirm everything connects.
- On your portfolio page in the browser, click Home in the navigation bar.
- You should land on your homepage (index.html).
- On the homepage, click Case Studies in the nav bar.
- You should return to the portfolio grid page.
- Click About in the portfolio page nav.
- You should jump to the About section on the homepage. The link uses index.html#about to navigate to a different page AND scroll to that section.
Why do the portfolio nav links use index.html#about instead of just #about?
When you are on portfolio.html, a link to #about would look for an element with id="about" on the current page. Since the About section lives in index.html, you need the full path index.html#about to first navigate to the homepage, then scroll to that section.
About or Contact links not scrolling to the right section?
Make sure the href in your portfolio page nav links includes the filename: index.html#about and index.html#contact. Check that index.html still has id="about" and id="contact" on those sections.
Help me fix my navigation links between pages.
✔️ Awesome, I've got everything!
Great. Double check you have saved both portfolio.html and css/styles.css.
ⓧ I'd like to double check the full code
Here is the complete portfolio.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case Studies | YourName Consulting</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav class="nav-container">
<a href="index.html" class="nav-logo">YourName</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html" class="active">Case Studies</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="portfolio-header">
<h1>Case Studies</h1>
<p>Real results from real engagements. Each case study follows the Challenge-Solution-Results framework to show exactly how I helped clients achieve measurable outcomes.</p>
</section>
<section class="portfolio-grid">
<a href="case-studies/case-study-1.html" class="case-study-card">
<span class="card-metric">+30% Efficiency</span>
<h3>Operational Transformation for a Healthcare Provider</h3>
<p>Redesigned patient intake and scheduling processes to reduce wait times and improve staff utilization.</p>
<div class="card-tags">
<span>Healthcare</span>
<span>Operations</span>
<span>12 weeks</span>
</div>
</a>
<a href="case-studies/case-study-2.html" class="case-study-card">
<span class="card-metric">$1.8M Saved</span>
<h3>Supply Chain Optimization for a Manufacturing Firm</h3>
<p>Identified and eliminated bottlenecks in procurement and logistics to reduce costs and improve delivery timelines.</p>
<div class="card-tags">
<span>Manufacturing</span>
<span>Supply Chain</span>
<span>16 weeks</span>
</div>
</a>
</section>
<section class="portfolio-cta">
<p>See results like these for your business?</p>
<a href="index.html#contact" class="cta-button">Let's Talk</a>
</section>
</main>
<footer>
<p>© 2026 YourName Consulting. All rights reserved.</p>
</footer>
</body>
</html>And here is the complete css/styles.css file:
/* ===== CSS Variables ===== */
:root {
--color-primary: #1a365d;
--color-primary-light: #2c5282;
--color-accent: #2b6cb0;
--color-text: #2d3748;
--color-text-light: #718096;
--color-bg: #ffffff;
--color-bg-alt: #f7fafc;
--color-border: #e2e8f0;
--color-card-bg: #ffffff;
--font-heading: 'Georgia', serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--max-width: 1100px;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
}
/* ===== Reset and Base ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.7;
font-size: 16px;
}
h1, h2, h3 {
font-family: var(--font-heading);
color: var(--color-primary);
line-height: 1.3;
}
h1 {
font-size: 2.25rem;
margin-bottom: var(--spacing-md);
}
h2 {
font-size: 1.75rem;
margin-bottom: var(--spacing-md);
}
h3 {
font-size: 1.25rem;
margin-bottom: var(--spacing-sm);
}
p {
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
li {
margin-bottom: var(--spacing-sm);
}
/* ===== Navigation ===== */
header {
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
}
.nav-container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-md) var(--spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: bold;
color: var(--color-primary);
}
.nav-logo:hover {
text-decoration: none;
}
.nav-links {
list-style: none;
display: flex;
gap: var(--spacing-lg);
padding-left: 0;
margin-bottom: 0;
}
.nav-links a {
color: var(--color-text-light);
font-size: 0.95rem;
}
.nav-links a.active,
.nav-links a:hover {
color: var(--color-primary);
text-decoration: none;
}
/* ===== Hero Section ===== */
.hero {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
}
.tagline {
font-size: 1.2rem;
color: var(--color-text-light);
max-width: 700px;
margin: 0 auto var(--spacing-lg);
}
.expertise-areas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.expertise-tag {
background-color: var(--color-bg-alt);
border: 1px solid var(--color-border);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
color: var(--color-text-light);
}
/* ===== CTA Button ===== */
.cta-button {
display: inline-block;
background-color: var(--color-accent);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: var(--color-primary-light);
text-decoration: none;
}
.cta-secondary {
background-color: transparent;
color: var(--color-accent);
border: 2px solid var(--color-accent);
}
.cta-secondary:hover {
background-color: var(--color-accent);
color: #ffffff;
}
/* ===== Highlights Section ===== */
.highlights {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
text-align: center;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.highlight-card {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.highlight-number {
font-family: var(--font-heading);
font-size: 2.5rem;
color: var(--color-primary);
font-weight: bold;
}
.highlight-label {
font-size: 0.9rem;
color: var(--color-text-light);
}
/* ===== About Section ===== */
.about-section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
.expertise-list {
margin-top: var(--spacing-lg);
}
.expertise-list h3 {
color: var(--color-text);
}
/* ===== Contact Section ===== */
.contact-section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
background-color: var(--color-bg-alt);
border-radius: 8px;
margin-bottom: var(--spacing-xl);
}
.contact-links {
display: flex;
gap: var(--spacing-md);
justify-content: center;
margin-top: var(--spacing-lg);
}
/* ===== Portfolio Grid ===== */
.portfolio-header {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}
.portfolio-grid {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--spacing-lg) var(--spacing-xl);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.case-study-card {
display: block;
background-color: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: var(--spacing-lg);
transition: box-shadow 0.2s ease, transform 0.2s ease;
color: var(--color-text);
}
.case-study-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
text-decoration: none;
}
.card-metric {
display: inline-block;
background-color: var(--color-primary);
color: #ffffff;
padding: 0.3rem 0.8rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.card-tags {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
flex-wrap: wrap;
}
.card-tags span {
background-color: var(--color-bg-alt);
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.8rem;
color: var(--color-text-light);
}
.portfolio-cta {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
text-align: center;
}
/* ===== Footer ===== */
footer {
text-align: center;
padding: var(--spacing-lg);
border-top: 1px solid var(--color-border);
color: var(--color-text-light);
font-size: 0.85rem;
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
h1 {
font-size: 1.75rem;
}
.nav-container {
flex-direction: column;
gap: var(--spacing-md);
}
.nav-links {
gap: var(--spacing-md);
}
.highlights {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.contact-links {
flex-direction: column;
align-items: center;
}
}Your portfolio grid is looking sharp. Next up, you will write the detailed case study pages that these cards link to, following the Challenge-Solution-Results framework.
Write Your First Case Study Page
Your portfolio grid is live with cards that link to case study pages. Now you need to create those pages.
A strong consulting case study follows the Challenge-Solution-Results framework. It leads with a measurable result in the headline, provides context through a snapshot box, then walks the reader through what went wrong, what you did about it, and what changed.
In this step, get ready to:
- Create the case study HTML page with a results-first headline and snapshot box.
- Write the Challenge, Solution, and Results sections with real metrics.
- Add a client testimonial and call-to-action at the bottom of the page.
Create the case study page structure
The case study page lives inside the case-studies/ folder you created earlier. Because it is one level deeper than your other pages, all file paths need to use ../ to go up a directory.
- In the VS Code Explorer sidebar, right-click on the case-studies folder.
- Select New File and name it case-study-1.html.
- Paste the following code into the new file to set up the page structure, navigation, headline, and snapshot box:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthcare Operational Transformation | YourName Consulting</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../index.html" class="nav-logo">YourName</a>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../portfolio.html" class="active">Case Studies</a></li>
<li><a href="../index.html#about">About</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="case-study-page">
<article>
<h1>30% Efficiency Gain in 12 Weeks: Healthcare Provider Operational Transformation</h1>
<div class="snapshot-box">
<div class="snapshot-item">
<strong>Industry</strong>
<span>Healthcare</span>
</div>
<div class="snapshot-item">
<strong>Company Size</strong>
<span>200+ employees</span>
</div>
<div class="snapshot-item">
<strong>Services</strong>
<span>Process Redesign, Change Management</span>
</div>
<div class="snapshot-item">
<strong>Timeline</strong>
<span>12 weeks</span>
</div>
</div>What does this code do?
The headline leads with a measurable result ("30% Efficiency Gain in 12 Weeks") so a scanning visitor immediately sees the impact before reading the full story.
The .snapshot-box gives readers a quick overview of the engagement (industry, company size, services, timeline) without reading the full narrative. All paths use ../ because this file is inside the case-studies/ subdirectory.
You will not see a change in the browser yet. The next two chunks complete the page content.
Write the Challenge, Solution, and Results sections
Each case study section serves a specific role. The Challenge establishes the stakes, the Solution shows your methodology, and the Results quantify the impact.
- In case-study-1.html, directly below the closing </div> of the snapshot-box, paste the three case study sections:
<section class="case-section">
<h2>The Challenge</h2>
<p>A regional healthcare provider with 3 clinic locations was experiencing severe operational bottlenecks. Patient wait times averaged 45 minutes, staff utilization was below 60%, and the scheduling system created gaps that wasted clinical capacity.</p>
<p>The cost of inaction was clear: patient satisfaction scores had dropped 22% in 6 months, and two experienced physicians were considering leaving due to frustration with workflow inefficiencies. Without intervention, the organization risked losing both patients and top talent.</p>
</section>
<section class="case-section">
<h2>The Solution</h2>
<p>I conducted a 2-week diagnostic across all three locations, mapping every patient touchpoint from scheduling through discharge. The analysis revealed three root causes: a manual scheduling system that could not optimize for provider specialization, redundant intake paperwork completed at every visit, and no standardized handoff protocol between front desk and clinical staff.</p>
<p>My approach focused on three workstreams:</p>
<ul>
<li><strong>Scheduling redesign:</strong> Implemented block scheduling aligned to provider specializations with automated buffer times for complex cases.</li>
<li><strong>Intake digitization:</strong> Introduced a pre-visit digital form that reduced in-clinic paperwork by 80%.</li>
<li><strong>Handoff protocol:</strong> Created a standardized communication workflow with clear responsibility assignments at each transition point.</li>
</ul>
</section>
<section class="case-section">
<h2>The Results</h2>
<div class="results-metrics">
<div class="metric">
<span class="metric-number">30%</span>
<span class="metric-label">Improvement in staff utilization</span>
</div>
<div class="metric">
<span class="metric-number">45 → 12 min</span>
<span class="metric-label">Average patient wait time</span>
</div>
<div class="metric">
<span class="metric-number">+18 pts</span>
<span class="metric-label">Patient satisfaction score increase</span>
</div>
</div>
<p>Within 12 weeks, the provider saw measurable improvements across all three target KPIs. Both physicians chose to stay, and the clinic reported a 15% increase in patient volume within the following quarter due to improved capacity and word-of-mouth referrals.</p>
</section>What does each section accomplish?
- The Challenge names the specific problem AND the stakes (patient satisfaction dropping, physicians leaving). This creates urgency for the reader.
- The Solution shows your methodology (diagnostic, root-cause analysis) then breaks the approach into named workstreams. This proves you have a repeatable process.
- The Results uses a metrics grid with large numbers so a scanning reader absorbs the impact instantly, followed by a paragraph giving context to those numbers.
You will not see a styled page yet. The next chunk closes the HTML and then you will add the CSS.
Add the testimonial and call-to-action
A client quote reinforces the results with a human voice. The CTA at the bottom converts a convinced reader into a lead.
- Below the last </section> you just pasted, add the testimonial, CTA, navigation links, and closing tags:
<blockquote class="testimonial">
<p>"The transformation was remarkable. Our team went from feeling overwhelmed to feeling empowered. The new processes just make sense, and our patients notice the difference immediately."</p>
<cite>- Operations Director, Regional Healthcare Provider</cite>
</blockquote>
<div class="case-study-cta">
<p>Facing similar operational challenges?</p>
<a href="../index.html#contact" class="cta-button">Let's Discuss Your Situation</a>
</div>
<div class="case-study-nav">
<a href="../portfolio.html">← Back to All Case Studies</a>
<a href="case-study-2.html">Next Case Study →</a>
</div>
</article>
</main>
<footer>
<p>© 2026 YourName Consulting. All rights reserved.</p>
</footer>
</body>
</html>What does this code do?
- The <blockquote> with class testimonial adds a styled client quote. The <cite> element credits the source without naming the person directly (common in consulting to protect client confidentiality).
- The .case-study-nav div provides navigation links so visitors can move between case studies or back to the portfolio grid.
- Save case-study-1.html.
Now add the CSS that styles this page. The case study page needs a narrower max-width for readability, plus styles for the snapshot box, metrics grid, and testimonial.
- Open css/styles.css.
- Find the /* ===== Footer ===== */ comment. Paste the following CSS directly above that comment to add the case study page styles:
/* ===== Case Study Page ===== */
.case-study-page {
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
.snapshot-box {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
background-color: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
.snapshot-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.snapshot-item strong {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-light);
}
.case-section {
margin: var(--spacing-xl) 0;
}
.results-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
text-align: center;
}
.metric {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: var(--spacing-md);
background-color: var(--color-bg-alt);
border-radius: 8px;
}
.metric-number {
font-family: var(--font-heading);
font-size: 1.75rem;
color: var(--color-primary);
font-weight: bold;
}
.metric-label {
font-size: 0.85rem;
color: var(--color-text-light);
}
/* ===== Testimonial ===== */
.testimonial {
border-left: 4px solid var(--color-accent);
padding: var(--spacing-lg);
margin: var(--spacing-xl) 0;
background-color: var(--color-bg-alt);
border-radius: 0 8px 8px 0;
font-style: italic;
}
.testimonial cite {
display: block;
margin-top: var(--spacing-md);
font-style: normal;
font-weight: 600;
color: var(--color-text-light);
font-size: 0.9rem;
}
/* ===== Case Study CTA and Nav ===== */
.case-study-cta {
text-align: center;
padding: var(--spacing-xl) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--spacing-xl);
}
.case-study-nav {
display: flex;
justify-content: space-between;
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-border);
}What do these styles do?
- .case-study-page sets a narrower 800px max-width so long paragraphs stay comfortable to read.
- .snapshot-box uses CSS Grid with 2 columns so the four items display in a neat 2x2 layout.
- .results-metrics arranges the three metric cards in a 3-column grid with centered text so numbers stand out at a glance.
- .testimonial uses a left border accent and italic text to visually distinguish the client quote from the rest of the content.
Now add the responsive rules for mobile devices. These go inside the existing @media (max-width: 768px) block at the bottom of your stylesheet.
- Scroll to the bottom of css/styles.css and find the @media (max-width: 768px) block.
- Inside that block, below the existing .contact-links rule, add these responsive styles:
.snapshot-box {
grid-template-columns: 1fr;
}
.results-metrics {
grid-template-columns: 1fr;
}
.case-study-nav {
flex-direction: column;
gap: var(--spacing-md);
text-align: center;
}- Save css/styles.css.
- Open case-studies/case-study-1.html in your browser (right-click the file in VS Code and select Open with Live Server, or double-click the file in your file explorer).
- You should see the full case study page with a headline, a 2x2 snapshot box, three content sections, a metrics grid with large numbers, a blue-bordered testimonial quote, and navigation links at the bottom.
Page looks unstyled or broken?
- Check that the <link> tag in the <head> uses ../css/styles.css (with the ../ prefix). Without that prefix, the browser cannot find the stylesheet from inside the case-studies/ folder.
- Make sure the new CSS styles are placed above the footer section comment, not accidentally inside another rule block.
- Confirm the responsive rules are inside the @media block's curly braces, not after the closing brace.
Still stuck? Ask for help.
✔️ Awesome, I've got everything!
Great. Double check you have saved both case-study-1.html and css/styles.css.
ⓧ I'd like to double check the full code
Here is the complete case-studies/case-study-1.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthcare Operational Transformation | YourName Consulting</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../index.html" class="nav-logo">YourName</a>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../portfolio.html" class="active">Case Studies</a></li>
<li><a href="../index.html#about">About</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="case-study-page">
<article>
<h1>30% Efficiency Gain in 12 Weeks: Healthcare Provider Operational Transformation</h1>
<div class="snapshot-box">
<div class="snapshot-item">
<strong>Industry</strong>
<span>Healthcare</span>
</div>
<div class="snapshot-item">
<strong>Company Size</strong>
<span>200+ employees</span>
</div>
<div class="snapshot-item">
<strong>Services</strong>
<span>Process Redesign, Change Management</span>
</div>
<div class="snapshot-item">
<strong>Timeline</strong>
<span>12 weeks</span>
</div>
</div>
<section class="case-section">
<h2>The Challenge</h2>
<p>A regional healthcare provider with 3 clinic locations was experiencing severe operational bottlenecks. Patient wait times averaged 45 minutes, staff utilization was below 60%, and the scheduling system created gaps that wasted clinical capacity.</p>
<p>The cost of inaction was clear: patient satisfaction scores had dropped 22% in 6 months, and two experienced physicians were considering leaving due to frustration with workflow inefficiencies. Without intervention, the organization risked losing both patients and top talent.</p>
</section>
<section class="case-section">
<h2>The Solution</h2>
<p>I conducted a 2-week diagnostic across all three locations, mapping every patient touchpoint from scheduling through discharge. The analysis revealed three root causes: a manual scheduling system that could not optimize for provider specialization, redundant intake paperwork completed at every visit, and no standardized handoff protocol between front desk and clinical staff.</p>
<p>My approach focused on three workstreams:</p>
<ul>
<li><strong>Scheduling redesign:</strong> Implemented block scheduling aligned to provider specializations with automated buffer times for complex cases.</li>
<li><strong>Intake digitization:</strong> Introduced a pre-visit digital form that reduced in-clinic paperwork by 80%.</li>
<li><strong>Handoff protocol:</strong> Created a standardized communication workflow with clear responsibility assignments at each transition point.</li>
</ul>
</section>
<section class="case-section">
<h2>The Results</h2>
<div class="results-metrics">
<div class="metric">
<span class="metric-number">30%</span>
<span class="metric-label">Improvement in staff utilization</span>
</div>
<div class="metric">
<span class="metric-number">45 → 12 min</span>
<span class="metric-label">Average patient wait time</span>
</div>
<div class="metric">
<span class="metric-number">+18 pts</span>
<span class="metric-label">Patient satisfaction score increase</span>
</div>
</div>
<p>Within 12 weeks, the provider saw measurable improvements across all three target KPIs. Both physicians chose to stay, and the clinic reported a 15% increase in patient volume within the following quarter due to improved capacity and word-of-mouth referrals.</p>
</section>
<blockquote class="testimonial">
<p>"The transformation was remarkable. Our team went from feeling overwhelmed to feeling empowered. The new processes just make sense, and our patients notice the difference immediately."</p>
<cite>- Operations Director, Regional Healthcare Provider</cite>
</blockquote>
<div class="case-study-cta">
<p>Facing similar operational challenges?</p>
<a href="../index.html#contact" class="cta-button">Let's Discuss Your Situation</a>
</div>
<div class="case-study-nav">
<a href="../portfolio.html">← Back to All Case Studies</a>
<a href="case-study-2.html">Next Case Study →</a>
</div>
</article>
</main>
<footer>
<p>© 2026 YourName Consulting. All rights reserved.</p>
</footer>
</body>
</html>And here is the full css/styles.css file including all styles from previous steps plus the new case study styles:
/* ===== CSS Variables ===== */
:root {
--color-primary: #1a365d;
--color-primary-light: #2c5282;
--color-accent: #2b6cb0;
--color-text: #2d3748;
--color-text-light: #718096;
--color-bg: #ffffff;
--color-bg-alt: #f7fafc;
--color-border: #e2e8f0;
--color-card-bg: #ffffff;
--font-heading: 'Georgia', serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--max-width: 1100px;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
}
/* ===== Reset and Base ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.7;
font-size: 16px;
}
h1, h2, h3 {
font-family: var(--font-heading);
color: var(--color-primary);
line-height: 1.3;
}
h1 {
font-size: 2.25rem;
margin-bottom: var(--spacing-md);
}
h2 {
font-size: 1.75rem;
margin-bottom: var(--spacing-md);
}
h3 {
font-size: 1.25rem;
margin-bottom: var(--spacing-sm);
}
p {
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
li {
margin-bottom: var(--spacing-sm);
}
/* ===== Navigation ===== */
header {
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
}
.nav-container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-md) var(--spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: bold;
color: var(--color-primary);
}
.nav-logo:hover {
text-decoration: none;
}
.nav-links {
list-style: none;
display: flex;
gap: var(--spacing-lg);
padding-left: 0;
margin-bottom: 0;
}
.nav-links a {
color: var(--color-text-light);
font-size: 0.95rem;
}
.nav-links a.active,
.nav-links a:hover {
color: var(--color-primary);
text-decoration: none;
}
/* ===== Hero Section ===== */
.hero {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
}
.tagline {
font-size: 1.2rem;
color: var(--color-text-light);
max-width: 700px;
margin: 0 auto var(--spacing-lg);
}
.expertise-areas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.expertise-tag {
background-color: var(--color-bg-alt);
border: 1px solid var(--color-border);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
color: var(--color-text-light);
}
/* ===== CTA Button ===== */
.cta-button {
display: inline-block;
background-color: var(--color-accent);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: var(--color-primary-light);
text-decoration: none;
}
.cta-secondary {
background-color: transparent;
color: var(--color-accent);
border: 2px solid var(--color-accent);
}
.cta-secondary:hover {
background-color: var(--color-accent);
color: #ffffff;
}
/* ===== Highlights Section ===== */
.highlights {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
text-align: center;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.highlight-card {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.highlight-number {
font-family: var(--font-heading);
font-size: 2.5rem;
color: var(--color-primary);
font-weight: bold;
}
.highlight-label {
font-size: 0.9rem;
color: var(--color-text-light);
}
/* ===== About Section ===== */
.about-section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
.expertise-list {
margin-top: var(--spacing-lg);
}
.expertise-list h3 {
color: var(--color-text);
}
/* ===== Contact Section ===== */
.contact-section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
text-align: center;
background-color: var(--color-bg-alt);
border-radius: 8px;
margin-bottom: var(--spacing-xl);
}
.contact-links {
display: flex;
gap: var(--spacing-md);
justify-content: center;
margin-top: var(--spacing-lg);
}
/* ===== Portfolio Grid ===== */
.portfolio-header {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}
.portfolio-grid {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--spacing-lg) var(--spacing-xl);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.case-study-card {
display: block;
background-color: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: var(--spacing-lg);
transition: box-shadow 0.2s ease, transform 0.2s ease;
color: var(--color-text);
}
.case-study-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
text-decoration: none;
}
.card-metric {
display: inline-block;
background-color: var(--color-primary);
color: #ffffff;
padding: 0.3rem 0.8rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.card-tags {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
flex-wrap: wrap;
}
.card-tags span {
background-color: var(--color-bg-alt);
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.8rem;
color: var(--color-text-light);
}
.portfolio-cta {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
text-align: center;
}
/* ===== Case Study Page ===== */
.case-study-page {
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
.snapshot-box {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
background-color: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
.snapshot-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.snapshot-item strong {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-light);
}
.case-section {
margin: var(--spacing-xl) 0;
}
.results-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
text-align: center;
}
.metric {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: var(--spacing-md);
background-color: var(--color-bg-alt);
border-radius: 8px;
}
.metric-number {
font-family: var(--font-heading);
font-size: 1.75rem;
color: var(--color-primary);
font-weight: bold;
}
.metric-label {
font-size: 0.85rem;
color: var(--color-text-light);
}
/* ===== Testimonial ===== */
.testimonial {
border-left: 4px solid var(--color-accent);
padding: var(--spacing-lg);
margin: var(--spacing-xl) 0;
background-color: var(--color-bg-alt);
border-radius: 0 8px 8px 0;
font-style: italic;
}
.testimonial cite {
display: block;
margin-top: var(--spacing-md);
font-style: normal;
font-weight: 600;
color: var(--color-text-light);
font-size: 0.9rem;
}
/* ===== Case Study CTA and Nav ===== */
.case-study-cta {
text-align: center;
padding: var(--spacing-xl) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--spacing-xl);
}
.case-study-nav {
display: flex;
justify-content: space-between;
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-border);
}
/* ===== Footer ===== */
footer {
text-align: center;
padding: var(--spacing-lg);
border-top: 1px solid var(--color-border);
color: var(--color-text-light);
font-size: 0.85rem;
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
h1 {
font-size: 1.75rem;
}
.nav-container {
flex-direction: column;
gap: var(--spacing-md);
}
.nav-links {
gap: var(--spacing-md);
}
.highlights {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.snapshot-box {
grid-template-columns: 1fr;
}
.results-metrics {
grid-template-columns: 1fr;
}
.contact-links {
flex-direction: column;
align-items: center;
}
.case-study-nav {
flex-direction: column;
gap: var(--spacing-md);
text-align: center;
}
}Why lead with results in the headline?
Prospects scanning your portfolio grid have limited time. A headline like "30% Efficiency Gain in 12 Weeks" tells them the outcome before they commit to reading the full story.
This results-first pattern is the highest-converting structure for consulting case studies because it mirrors how buyers evaluate: outcome first, then approach.
Your first case study is complete. Next up, you will create a second case study in a different industry to show your range, then connect all the pages together.
Write Your Second Case Study and Connect Everything
You have one case study live and looking great. A single case study shows depth, but two shows range.
In this step, you will create a second case study in a completely different industry (manufacturing instead of healthcare). You will also verify that all your pages connect through consistent navigation, giving visitors a seamless browsing experience.
In this step, get ready to:
- Create a second case study page in a different industry vertical.
- Verify internal navigation connects all five pages.
- Confirm the About section and contact CTA are complete.
Create the second case study page
Your second case study covers supply chain optimization for a manufacturing firm. Using a different industry demonstrates versatility to potential clients scanning your portfolio.
- In VS Code, create a new file called case-study-2.html inside your case-studies folder.
- Add the page structure, navigation, headline, and snapshot box by pasting this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supply Chain Optimization | YourName Consulting</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../index.html" class="nav-logo">YourName</a>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../portfolio.html" class="active">Case Studies</a></li>
<li><a href="../index.html#about">About</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="case-study-page">
<article>
<h1>$1.8M Annual Savings: Supply Chain Optimization for a Manufacturing Firm</h1>
<div class="snapshot-box">
<div class="snapshot-item">
<strong>Industry</strong>
<span>Manufacturing</span>
</div>
<div class="snapshot-item">
<strong>Company Size</strong>
<span>500+ employees</span>
</div>
<div class="snapshot-item">
<strong>Services</strong>
<span>Supply Chain Strategy, Cost Reduction</span>
</div>
<div class="snapshot-item">
<strong>Timeline</strong>
<span>16 weeks</span>
</div>
</div>What does this code do?
The structure mirrors your first case study but with manufacturing-specific details. The snapshot-box gives visitors a quick-glance overview: Manufacturing industry, 500+ employees, 16-week engagement.
Notice the ../ prefix on all links. Since this file lives inside the case-studies/ folder, it needs to go up one level to reach index.html, portfolio.html, and the css/ folder.
- Below the snapshot box, add The Challenge section by pasting this code:
<section class="case-section">
<h2>The Challenge</h2>
<p>A mid-market manufacturing firm producing industrial components was facing escalating supply chain costs. Procurement spending had increased 28% year-over-year without a corresponding increase in output. Delivery lead times to customers had stretched from 2 weeks to 5 weeks, putting key accounts at risk.</p>
<p>The leadership team suspected inefficiencies but lacked visibility into where exactly value was being lost. Three previous internal improvement initiatives had failed to produce lasting results because they addressed symptoms rather than root causes.</p>
</section>What makes a strong Challenge section?
The Challenge section establishes stakes. It names the specific problem (28% cost increase, lead times tripling) and the cost of inaction (key accounts at risk). The second paragraph shows why this time is different from previous failed attempts.
Quantified problems are more compelling than vague ones. A reader can immediately picture "28% increase" but not "costs went up."
- Below The Challenge section, add The Solution section by pasting this code:
<section class="case-section">
<h2>The Solution</h2>
<p>I began with a comprehensive spend analysis covering 18 months of procurement data, logistics costs, and inventory holding expenses. This revealed that 40% of cost overruns came from just two sources: emergency expedited shipping (caused by poor demand forecasting) and excess safety stock across 200+ SKUs.</p>
<p>The engagement delivered three interconnected solutions:</p>
<ul>
<li><strong>Demand forecasting model:</strong> Built a straightforward forecasting approach using 3 years of historical order data, reducing forecast error from 35% to 12%.</li>
<li><strong>Inventory rationalization:</strong> Conducted an ABC analysis to right-size safety stock levels, freeing up $800K in working capital tied to slow-moving inventory.</li>
<li><strong>Supplier consolidation:</strong> Reduced the supplier base from 47 to 28 vendors, negotiating volume discounts and establishing service-level agreements with penalties for late delivery.</li>
</ul>
</section>What does The Solution section accomplish?
The Solution section shows your methodology. It starts with the diagnostic approach (spend analysis) and then breaks the work into three named workstreams. Each workstream names the technique and its specific impact.
Using bold text on each workstream name makes the page scannable. A busy decision-maker can read just the bold labels and get the core message.
- Below The Solution section, add The Results section, testimonial, CTA, navigation, and closing tags by pasting this code:
<section class="case-section">
<h2>The Results</h2>
<div class="results-metrics">
<div class="metric">
<span class="metric-number">$1.8M</span>
<span class="metric-label">Annual cost savings</span>
</div>
<div class="metric">
<span class="metric-number">5 → 2.5 weeks</span>
<span class="metric-label">Customer delivery lead time</span>
</div>
<div class="metric">
<span class="metric-number">$800K</span>
<span class="metric-label">Working capital freed</span>
</div>
</div>
<p>The combined impact of all three workstreams delivered $1.8M in annualized savings within the first year. Customer delivery times improved by 50%, and the freed working capital was reinvested into a new product line that generated $2.1M in revenue in its first year.</p>
</section>
<blockquote class="testimonial">
<p>"We had tried to fix our supply chain three times before. The difference this time was the diagnostic rigor. Instead of guessing, we had data showing exactly where the problems were and a clear plan to address each one."</p>
<cite>- VP of Operations, Industrial Manufacturing Firm</cite>
</blockquote>
<div class="case-study-cta">
<p>Looking to reduce costs and improve delivery performance?</p>
<a href="../index.html#contact" class="cta-button">Let's Discuss Your Situation</a>
</div>
<div class="case-study-nav">
<a href="case-study-1.html">← Previous Case Study</a>
<a href="../portfolio.html">All Case Studies →</a>
</div>
</article>
</main>
<footer>
<p>© 2026 YourName Consulting. All rights reserved.</p>
</footer>
</body>
</html>What does this code do?
The results-metrics grid displays three key outcomes in a visually scannable format. The testimonial blockquote adds social proof from the VP of Operations.
The case-study-nav links to case-study-1.html (previous) and back to ../portfolio.html (all case studies). This creates a loop so visitors never hit a dead end.
- Save case-study-2.html.
- Open case-study-2.html directly in your browser (right-click the file in VS Code's Explorer sidebar and select Reveal in Finder on macOS or Reveal in File Explorer on Windows, then double-click the file).
- You should see a page with a results-first headline ("$1.8M Annual Savings"), a snapshot box with 4 metadata items, three clearly labeled sections (Challenge, Solution, Results), a metrics grid, a testimonial quote with a blue left border, and navigation links at the bottom.
Page looks unstyled or broken?
Check that the stylesheet link says ../css/styles.css (two dots, then forward slash). If you wrote css/styles.css without the ../ prefix, the browser cannot find the CSS file from inside the case-studies/ folder.
Also confirm that case-study-2.html is saved inside the case-studies folder, not the root project folder.
help me debug why my case study page has no styling
✔️ Awesome, I've got everything!
Great. Make sure you have saved case-study-2.html before moving on.
ⓧ I'd like to double check the full code
Here is the complete case-study-2.html file. Compare yours against it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supply Chain Optimization | YourName Consulting</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../index.html" class="nav-logo">YourName</a>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../portfolio.html" class="active">Case Studies</a></li>
<li><a href="../index.html#about">About</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="case-study-page">
<article>
<h1>$1.8M Annual Savings: Supply Chain Optimization for a Manufacturing Firm</h1>
<div class="snapshot-box">
<div class="snapshot-item">
<strong>Industry</strong>
<span>Manufacturing</span>
</div>
<div class="snapshot-item">
<strong>Company Size</strong>
<span>500+ employees</span>
</div>
<div class="snapshot-item">
<strong>Services</strong>
<span>Supply Chain Strategy, Cost Reduction</span>
</div>
<div class="snapshot-item">
<strong>Timeline</strong>
<span>16 weeks</span>
</div>
</div>
<section class="case-section">
<h2>The Challenge</h2>
<p>A mid-market manufacturing firm producing industrial components was facing escalating supply chain costs. Procurement spending had increased 28% year-over-year without a corresponding increase in output. Delivery lead times to customers had stretched from 2 weeks to 5 weeks, putting key accounts at risk.</p>
<p>The leadership team suspected inefficiencies but lacked visibility into where exactly value was being lost. Three previous internal improvement initiatives had failed to produce lasting results because they addressed symptoms rather than root causes.</p>
</section>
<section class="case-section">
<h2>The Solution</h2>
<p>I began with a comprehensive spend analysis covering 18 months of procurement data, logistics costs, and inventory holding expenses. This revealed that 40% of cost overruns came from just two sources: emergency expedited shipping (caused by poor demand forecasting) and excess safety stock across 200+ SKUs.</p>
<p>The engagement delivered three interconnected solutions:</p>
<ul>
<li><strong>Demand forecasting model:</strong> Built a straightforward forecasting approach using 3 years of historical order data, reducing forecast error from 35% to 12%.</li>
<li><strong>Inventory rationalization:</strong> Conducted an ABC analysis to right-size safety stock levels, freeing up $800K in working capital tied to slow-moving inventory.</li>
<li><strong>Supplier consolidation:</strong> Reduced the supplier base from 47 to 28 vendors, negotiating volume discounts and establishing service-level agreements with penalties for late delivery.</li>
</ul>
</section>
<section class="case-section">
<h2>The Results</h2>
<div class="results-metrics">
<div class="metric">
<span class="metric-number">$1.8M</span>
<span class="metric-label">Annual cost savings</span>
</div>
<div class="metric">
<span class="metric-number">5 → 2.5 weeks</span>
<span class="metric-label">Customer delivery lead time</span>
</div>
<div class="metric">
<span class="metric-number">$800K</span>
<span class="metric-label">Working capital freed</span>
</div>
</div>
<p>The combined impact of all three workstreams delivered $1.8M in annualized savings within the first year. Customer delivery times improved by 50%, and the freed working capital was reinvested into a new product line that generated $2.1M in revenue in its first year.</p>
</section>
<blockquote class="testimonial">
<p>"We had tried to fix our supply chain three times before. The difference this time was the diagnostic rigor. Instead of guessing, we had data showing exactly where the problems were and a clear plan to address each one."</p>
<cite>- VP of Operations, Industrial Manufacturing Firm</cite>
</blockquote>
<div class="case-study-cta">
<p>Looking to reduce costs and improve delivery performance?</p>
<a href="../index.html#contact" class="cta-button">Let's Discuss Your Situation</a>
</div>
<div class="case-study-nav">
<a href="case-study-1.html">← Previous Case Study</a>
<a href="../portfolio.html">All Case Studies →</a>
</div>
</article>
</main>
<footer>
<p>© 2026 YourName Consulting. All rights reserved.</p>
</footer>
</body>
</html>Verify internal navigation between all pages
Your site now has five HTML files. Every page should connect to every other page without dead ends.
- Open portfolio.html in your browser.
- Click the Supply Chain Optimization card. It should open case-study-2.html.
- On the case study page, click Previous Case Study at the bottom. It should open the healthcare case study.
- On the healthcare case study, click Next Case Study at the bottom. It should take you back to the supply chain case study.
- Click Home in the top navigation. It should load your homepage.
Why does navigation matter for a portfolio?
Visitors rarely land on your homepage first. A potential client might find a case study through a search engine or shared link. Consistent navigation on every page means they can always explore the rest of your work, no matter where they enter.
A link goes to a blank page or shows "file not found"?
Check that the file names in your href attributes exactly match the actual file names on disk. File names are case-sensitive on most systems.
For links inside the case-studies/ folder pointing to root-level files, make sure you include the ../ prefix (e.g. ../portfolio.html).
help me fix broken links between my portfolio pages
Confirm the About section and contact CTA
Your homepage already includes an About section and a Contact section from the earlier step. Let's verify they display correctly and have the right content.
- Open index.html in your browser.
- Scroll down past the highlights section. You should see an About heading followed by two paragraphs about your consulting background and a Functional Areas list with four bullet points.
- Below the About section, you should see a Let's Work Together heading with two buttons: Get in Touch (email link) and LinkedIn (outlined secondary button).
- Click the About link in the top navigation. The page should scroll smoothly down to the About section.
Why anchor links in the nav?
The #about and #contact links in your navigation use anchor targets. When clicked from the homepage, they scroll to the matching id attribute on that section. When clicked from other pages (like portfolio.html), the link format index.html#about loads the homepage and then scrolls to the section.
Your portfolio is now complete with two case studies, consistent navigation, and a clear path from any page to your contact information. Next up, you will push everything to GitHub and deploy your live site.
Deploy to GitHub Pages
Your portfolio is complete. Every page is styled, linked, and ready for the world to see.
The final step is getting your site live on the internet. You will use Git to track your project files, push them to GitHub, and turn on GitHub Pages to serve your site at a public URL.
In this step, get ready to:
- Initialize a Git repository and commit all your project files.
- Push your code to your GitHub repository.
- Enable GitHub Pages and visit your live portfolio site.
Initialize your Git repository and make your first commit
Git tracks changes to your files over time. Initializing a repository tells Git to start watching your project folder.
- Open the integrated terminal in VS Code by pressing Ctrl+` (macOS and Windows).
- Make sure your terminal is inside the consulting-portfolio folder. If it is not, navigate there by running:
cd ~/Desktop/consulting-portfolio- Initialize the repository, stage all your files, and create your first commit by running these commands:
git init
git add .
git commit -m "Initial commit"What do these commands do?
- git init creates a hidden .git folder that turns your project directory into a Git repository.
- git add . stages every file in the folder, telling Git you want to include them in the next commit.
- git commit -m "Initial commit" saves a snapshot of all staged files with a descriptive message.
- Confirm your commit was created by running:
git log --onelineYou should see one line showing a short commit hash followed by Initial commit.
Seeing an error about identity?
If Git says it needs your name and email, run the two config commands from Step 1 again (git config --global user.name and git config --global user.email), then retry the commit command.
help me fix a Git identity error when committing
Push your code to GitHub
Your commit only exists on your computer right now. Pushing sends it to your GitHub repository so others can see it and GitHub Pages can serve it.
- Connect your local repository to GitHub and push your code by running these commands:
git remote add origin https://github.com/[[GITHUB_USERNAME="your-github-username"]]/consulting-portfolio.git
git branch -M main
git push -u origin mainWhat do these commands do?
- git remote add origin links your local repository to the GitHub repository you created earlier. The URL tells Git where to send your files.
- git branch -M main renames your current branch to main. This ensures your branch name matches what GitHub expects.
- git push -u origin main uploads all your committed files to the main branch on GitHub.
What is the sign-in popup?
When you push for the first time, Git opens a browser window asking you to sign in to GitHub. This is normal. Sign in with your GitHub account and authorize the request.
Once you authenticate, your credentials are stored so you will not be prompted again on future pushes.
- Open your repository page on GitHub at https://github.com/ followed by your username and /consulting-portfolio.
- You should see all your files listed: index.html, portfolio.html, the css/ folder, and the case-studies/ folder.
Push failed or permission denied?
- Double check the URL matches your GitHub username exactly. A typo in the username causes a "repository not found" error.
- Make sure you signed into the correct GitHub account in the browser popup.
- If you see an error about the remote already existing, run git remote remove origin and then re-run the git remote add origin command with the correct URL.
help me fix a git push error to GitHub
Enable GitHub Pages and visit your live site
GitHub Pages serves your repository files as a live website. Since your project uses plain HTML and CSS, no build step is needed.
- On your repository page on GitHub, click the Settings tab near the top of the page.
- In the left sidebar, click Pages.
- Under Build and deployment, find the Source dropdown and select Deploy from a branch.
- In the Branch dropdown that appears below, select main.
- Keep the folder set to / (root).
- Click Save.
How long until my site is live?
It can take up to 10 minutes for GitHub Pages to publish your site after you save the settings. You can refresh the Pages settings page to check for a green banner showing your live URL.
- Wait a minute or two, then visit your live site at:
https://[[GITHUB_USERNAME="your-github-username"]].github.io/consulting-portfolio- Click through to the portfolio page and both case study pages to confirm all links and styles load correctly.
Seeing a 404 page?
- Make sure you selected the main branch and / (root) folder in the Pages settings. If the branch dropdown still shows None, your changes were not saved.
- GitHub Pages looks for an index.html file in the root of the repository. Confirm index.html appears at the top level on your GitHub repository page (not inside a subfolder).
- If you just enabled Pages, wait a few more minutes and refresh. It can take up to 10 minutes.
help me troubleshoot my GitHub Pages 404 error
Secret mission
Add Animations and Dark Mode
A polished portfolio stands out from the crowd. Add smooth CSS animations and a dark mode toggle to demonstrate your attention to detail and modern web development skills.
Clean Up Your Resources
Clean Up Your Resources
This project runs entirely locally and on GitHub Pages, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.
Resources you used:
- Local project folder (consulting-portfolio on your Desktop).
- GitHub repository (consulting-portfolio).
- GitHub Pages site (hosted from your repository).
Keep everything running
No action needed. Choose this if you're still actively building or want your portfolio to remain live.
- Your GitHub Pages site stays live at your URL for free.
- Your local files remain on your Desktop for future edits.
- VS Code and Git remain installed on your machine for other projects.
Pause - I'll come back to this later
Take your site offline while keeping all your files intact. You can republish anytime.
- Go to your repository on GitHub.
- Click Settings.
- Scroll down to the Pages section in the left sidebar.
- Under Build and deployment, change the source to None to unpublish your site.
- Your repository and local files stay intact. To republish later, set the source back to your main branch.
Delete - I don't want to use this again
Remove all project resources and start fresh. This permanently deletes your site and code.
- Delete your local project folder. On macOS or Linux, run:
rm -rf ~/Desktop/consulting-portfolio- On Windows, run:
rmdir /s /q %USERPROFILE%\Desktop\consulting-portfolio- Delete the GitHub repository (this also removes your GitHub Pages site).
- Go to your consulting-portfolio repository on GitHub.
- Click Settings.
- Scroll to the bottom of the page to the Danger Zone section.
- Click Delete this repository and follow the confirmation prompts.
Nice Work!
Nice Work!
You just shipped a professional consulting portfolio website. It's live on GitHub Pages with your own URL, showcasing your consulting expertise through structured case studies.
You've learned how to:
- Built and deployed a live portfolio website on GitHub Pages using HTML, CSS, and Git.
- Created a responsive portfolio grid with metric-forward case study cards using CSS Grid and Flexbox.
- Written 2 detailed case studies following the Challenge-Solution-Results framework that top consulting firms use to showcase measurable client outcomes.
- Added CSS animations and a dark mode toggle with localStorage persistence for a polished, modern feel.
Ready to quiz yourself?