Skip to content

Create responsive portfolio header with HTML and CSS #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 8 commits into from
Closed

Create responsive portfolio header with HTML and CSS #30

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7fb4f91
Initial plan
Copilot Nov 29, 2025
fc80075
Create responsive portfolio header with HTML and CSS
Copilot Nov 29, 2025
8c85c38
Replace text links with 5 social icons in header
Copilot Nov 29, 2025
18c581d
Update index.html
brianwalkerdev Nov 29, 2025
e310d70
Update index.html
brianwalkerdev Nov 29, 2025
9dfff69
Update assets/css/style.css
brianwalkerdev Nov 29, 2025
f210978
Update assets/css/style.css
brianwalkerdev Nov 30, 2025
a9eca30
Add light mode support for header and social icons
Copilot Nov 30, 2025
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 45 additions & 83 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
--text-secondary: #b0b0b0;
--border-color: #404040;

/* Header Colors */
--header-bg: #0f0f0f;
--header-text: #ffffff;
--header-border: rgba(255, 255, 255, 0.1);
Comment on lines +17 to +20
Copy link

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The header color variables (--header-bg, --header-text, --header-border) are only defined for dark mode but not for light mode. When users switch to light mode, the header will retain dark mode colors, creating an inconsistent appearance. Add these variables to the body.light-mode selector (around line 35) with appropriate light theme values:

body.light-mode { /* existing properties */ --header-bg: #ffffff; --header-text: #1a1a1a; --header-border: rgba(0, 0, 0, 0.1); }
Copilot uses AI. Check for mistakes.
Copy link
Owner

@brianwalkerdev brianwalkerdev Nov 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot apply changes based on this feedback
Copy link
Contributor Author

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already applied in a9eca30. Added light mode header color variables:

  • --header-bg: #ffffff
  • --header-text: #1a1a1a
  • --header-border: rgba(0, 0, 0, 0.1)

/* Green Theme (Default) */
--accent-color: #10b981;
--accent-hover: #059669;
Expand Down Expand Up @@ -140,55 +145,36 @@ body {

/* Header */
.header {
background-color: var(--bg-secondary);
padding: 30px 0;
border-bottom: 1px solid var(--border-color);
background-color: var(--header-bg);
padding: 24px 0;
border-bottom: 1px solid var(--header-border);
}

.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
gap: 24px;
}

.header-main {
.header-left {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}

.header-identity {
display: flex;
align-items: center;
gap: 20px;
gap: 16px;
}

.header-logo {
height: 70px;
height: 40px;
width: auto;
border-radius: 8px;
object-fit: contain;
transition: var(--transition);
}
Comment on lines 172 to 181
Copy link

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logo has lost its interactive hover effect and transition. The original code included transition: var(--transition) and a hover scale effect that provided visual feedback. Consider restoring these for better user experience:

.header-logo { transition: var(--transition); } .header-logo:hover { transform: scale(1.05); }
Copilot uses AI. Check for mistakes.
Copy link
Owner

@brianwalkerdev brianwalkerdev Nov 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot apply changes based on this feedback
Copy link
Contributor Author

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already applied in a9eca30. The logo now has transition: var(--transition) and a hover effect with transform: scale(1.05).

.header-logo:hover {
transform: scale(1.05);
}

.header-text h1 {
.header-name {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
}

.subtitle {
font-family: var(--font-heading);
color: var(--text-secondary);
font-size: 1.1rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--header-text);
letter-spacing: -0.01em;
}

/* Social Links in Header */
Expand All @@ -204,10 +190,10 @@ body {
justify-content: center;
width: 34px;
height: 34px;
background: var(--bg-card);
border: 1px solid var(--border-color);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
Comment on lines +204 to +205
Copy link

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The social link buttons use hardcoded rgba(255, 255, 255, 0.1) for background and rgba(255, 255, 255, 0.2) for border, which will look incorrect in light mode (white buttons on white background). These values should be updated to use CSS variables or adjusted for light mode. Consider using theme-aware values or adding light mode overrides:

body.light-mode .social-links a { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); }
Copilot uses AI. Check for mistakes.
Copy link
Owner

@brianwalkerdev brianwalkerdev Nov 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot apply changes based on this feedback
Copy link
Contributor Author

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in a9eca30. Added light mode support for:

  • Header color variables (--header-bg, --header-text, --header-border)
  • Social icon buttons with appropriate contrast (rgba(0, 0, 0, 0.05) background, rgba(0, 0, 0, 0.1) border)
  • Restored logo hover effect with transition

Light mode header
border-radius: 50%;
color: var(--text-primary);
color: var(--header-text);
font-size: 1rem;
transition: var(--transition);
text-decoration: none;
Expand All @@ -217,14 +203,20 @@ body {
.social-links a:focus {
background: var(--accent-color);
border-color: var(--accent-color);
color: var(--text-primary);
color: var(--header-text);
transform: scale(1.1);
}

.header-controls {
/* Theme Controls Container */
.theme-controls-container {
background-color: var(--bg-secondary);
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
}

.theme-controls-container .container {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}

/* Theme Toggle Slider */
Expand Down Expand Up @@ -840,56 +832,26 @@ body.light-mode .theme-toggle-icon--dark {
}

/* Responsive Design */
@media (max-width: 768px) {

/* Header responsive - 600px breakpoint as specified */
@media (max-width: 600px) {
.header-inner {
flex-direction: column;
align-items: flex-start;
}

.header-main {
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}

.header-identity {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}

.header-logo {
height: 60px;
align-items: center;
gap: 16px;
}

.header-text h1 {
font-size: 2rem;
.header-left {
justify-content: center;
}

.social-links {
overflow-x: auto;
width: 100%;
padding-bottom: 5px;
position: relative;
justify-content: center;
flex-wrap: wrap;
}
}

.social-links::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
pointer-events: none;
background: linear-gradient(to left, var(--bg-primary) 70%, transparent 100%);
z-index: 1;
}

.header-controls {
align-self: flex-end;
}

@media (max-width: 768px) {
.footer-inner {
flex-direction: column;
text-align: left;
Expand Down Expand Up @@ -934,12 +896,12 @@ body.light-mode .theme-toggle-icon--dark {
}

@media (max-width: 480px) {
.header-text h1 {
font-size: 1.5rem;
.header-logo {
height: 32px;
}

.header-logo {
height: 50px;
.header-name {
font-size: 1.1rem;
}

.project-links {
Expand Down
80 changes: 39 additions & 41 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,52 +100,50 @@
<header class="header">
<div class="container">
<div class="header-inner">
<div class="header-main">
<div class="header-identity">
<img src="assets/img/brianwalkerdev-transparent-logo.png" alt="Brian Walker - bw. logo" class="header-logo">
<div class="header-text">
<h1>Brian Walker</h1>
<p class="subtitle">Portfolio Hub</p>
</div>
</div>
<nav class="social-links" aria-label="Social media">
<a href="https://github.com/brianwalkerdev" target="_blank" rel="noopener noreferrer" aria-label="GitHub @brianwalkerdev">
<i class="fab fa-github"></i>
</a>
<a href="https://x.com/brianwalkerdev" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter) @brianwalkerdev">
<i class="fab fa-x-twitter"></i>
</a>
<a href="https://www.linkedin.com/in/brianwalkerdev" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn - Brian Walker">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://www.youtube.com/@BrianWalkerDev" target="_blank" rel="noopener noreferrer" aria-label="YouTube @BrianWalkerDev">
<i class="fab fa-youtube"></i>
</a>
<a href="https://www.facebook.com/BWalkerDev" target="_blank" rel="noopener noreferrer" aria-label="Facebook @BWalkerDev">
<i class="fab fa-facebook"></i>
</a>
</nav>
</div>
<div class="header-controls">
<!-- Theme Toggle -->
<button
id="theme-toggle"
class="theme-toggle"
type="button"
aria-label="Toggle light and dark mode"
aria-pressed="false"
>
<span class="theme-toggle-track">
<span class="theme-toggle-thumb"></span>
<span class="theme-toggle-icon theme-toggle-icon--light" aria-hidden="true">☀️</span>
<span class="theme-toggle-icon theme-toggle-icon--dark" aria-hidden="true">🌙</span>
</span>
</button>
<div class="header-left">
<img src="assets/img/brianwalkerdev Transparent symbol.png" alt="Brian Walker Developer Logo" class="header-logo">
Copy link

Copilot AI Nov 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inconsistent capitalization in the filename. The filename uses lowercase 'brianwalkerdev' followed by uppercase 'Transparent'. Consider using consistent casing throughout the filename.

Suggested change
<img src="assets/img/brianwalkerdev Transparent symbol.png" alt="Brian Walker Developer Logo" class="header-logo">
<img src="assets/img/brianwalkerdev-transparent-symbol.png" alt="Brian Walker Developer Logo" class="header-logo">
Copilot uses AI. Check for mistakes.
<span class="header-name">Brian Walker</span>
</div>
<nav class="social-links" aria-label="Social media">
<a href="https://github.com/brianwalkerdev" target="_blank" rel="noopener noreferrer" aria-label="GitHub @brianwalkerdev">
<i class="fab fa-github"></i>
</a>
<a href="https://x.com/brianwalkerdev" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter) @brianwalkerdev">
<i class="fab fa-x-twitter"></i>
</a>
<a href="https://www.linkedin.com/in/brianwalkerdev" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn - Brian Walker">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://www.youtube.com/@BrianWalkerDev" target="_blank" rel="noopener noreferrer" aria-label="YouTube @BrianWalkerDev">
<i class="fab fa-youtube"></i>
</a>
<a href="https://www.facebook.com/BWalkerDev" target="_blank" rel="noopener noreferrer" aria-label="Facebook @BWalkerDev">
<i class="fab fa-facebook"></i>
</a>
</nav>
</div>
</div>
</header>

<!-- Theme Toggle (moved outside header for cleaner layout) -->
<div class="theme-controls-container">
<div class="container">
<button
id="theme-toggle"
class="theme-toggle"
type="button"
aria-label="Toggle light and dark mode"
aria-pressed="false"
>
<span class="theme-toggle-track">
<span class="theme-toggle-thumb"></span>
<span class="theme-toggle-icon theme-toggle-icon--light" aria-hidden="true">☀️</span>
<span class="theme-toggle-icon theme-toggle-icon--dark" aria-hidden="true">🌙</span>
</span>
</button>
</div>
</div>

<!-- Skip to main content link for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>

Expand Down