Make hero section full-bleed across viewport

gitgutgit · claude · gitgutgit · commit 377dce6af581 · 2026-04-05T11:38:36.000-04:00
Move header outside container so the animated gradient spans the
full viewport width instead of being clipped at 1100px.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/index.html b/index.html
@@ -23,20 +23,22 @@
   </script>
 </head>
 <body>
-  <div class="wrap">
+  <header class="hero">
     <div class="container">
-      <header class="hero">
-        <span class="badge">Seeking Full-Time Opportunities</span>
-        <h1>Jeewon Kim</h1>
-        <p class="lead">CS @ Columbia (GPA 3.88 · May 2026). Full-stack developer focused on <strong>AI systems</strong>, <strong>distributed apps</strong>, and <strong>social impact</strong> products.<br>Previously at Generous Health and TVCF, and founder of Tchelp.org.</p>
-        <div class="actions">
-          <a class="btn primary" href="mailto:jk4864@columbia.edu">Email Me</a>
-          <a class="btn" href="https://github.com/gitgutgit" target="_blank" rel="noopener">GitHub</a>
-          <a class="btn" href="#projects">Featured Projects</a>
-          <a class="btn" href="#experience">Experience</a>
-        </div>
-      </header>
+      <span class="badge">Seeking Full-Time Opportunities</span>
+      <h1>Jeewon Kim</h1>
+      <p class="lead">CS @ Columbia (GPA 3.88 · May 2026). Full-stack developer focused on <strong>AI systems</strong>, <strong>distributed apps</strong>, and <strong>social impact</strong> products.<br>Previously at Generous Health and TVCF, and founder of Tchelp.org.</p>
+      <div class="actions">
+        <a class="btn primary" href="mailto:jk4864@columbia.edu">Email Me</a>
+        <a class="btn" href="https://github.com/gitgutgit" target="_blank" rel="noopener">GitHub</a>
+        <a class="btn" href="#projects">Featured Projects</a>
+        <a class="btn" href="#experience">Experience</a>
+      </div>
+    </div>
+  </header>
 
+  <div class="wrap">
+    <div class="container">
       <section id="projects" class="reveal">
         <h2 class="section-title">Featured Projects</h2>
         <div class="cards">
diff --git a/styles.css b/styles.css
@@ -50,6 +50,7 @@ header.hero {
   position: relative;
   padding: 80px 0 60px;
   overflow: hidden;
+  width: 100%;
 }
 header.hero::before {
   content: '';

Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,7 @@ header.hero {`
`50`	`50`	`position: relative;`
`51`	`51`	`padding: 80px 0 60px;`
`52`	`52`	`overflow: hidden;`
	`53`	`+ width: 100%;`
`53`	`54`	`}`
`54`	`55`	`header.hero::before {`
`55`	`56`	`content: '';`