diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 2eec375..a701306 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -2,7 +2,7 @@ name: Playwright Tests
 
 on:
   push:
-    branches: [ main ]
+    branches: [ main, test-build ]
   pull_request:
     branches: [ main ]
 
diff --git a/public/img/headshot.jpg b/public/img/headshot.jpg
new file mode 100644
index 0000000..afa0a64
Binary files /dev/null and b/public/img/headshot.jpg differ
diff --git a/public/style/style.css b/public/style/style.css
index 913ad24..39c3d87 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -5,23 +5,31 @@
    ================================================================ */
 :root {
   --font-body: 'Jost', sans-serif;
-  --font-section: 'Cormorant Garamond', serif;
+  --font-heading: 'Cormorant Garamond', serif;
   --font-mono: 'DM Mono', monospace;
 
   --coral: #FF644C;
-  --foam: #F1FAEE;
+  --foam: #f9faee;
   --background-shallows: #d1ece6;
   --shallows: #A8DADC;
   --open-ocean: #457B9D;
   --deep-sea: #1D3557;
+  --foam-soft: #f1faee6b;
+  --open-ocean-soft: #457b9d17;
+  --coral-soft: #ff644c1a;
+  --deep-sea-soft: #1d35571a;
 
   --page-gutter: 10rem;
-  --page-gap: 1rem;
+  --page-gap: 7rem;
+  --top-padding: 2.5rem;
+
+  --corner-rounding: 4px;
 }
 
 /* ================================================================
    CSS RESET
    ================================================================ */
+
 * {
   margin: 0;
   padding: 0;
@@ -37,127 +45,261 @@ body {
   color: var(--deep-sea);
 }
 
-/* ================================================================
-   BASE ELEMENTS
-   ================================================================ */
-
 h1 {
   font-family: var(--font-mono);
-  font-size: 1rem;
-  font-weight: 400;
+  font-weight: 500;
+  font-size: small;
   text-transform: uppercase;
   color: var(--coral);
-  margin-top: 5rem;
-  margin-bottom: 2.5rem;
+  font-weight: 600;
 }
 
 h2 {
-  font-family: var(--font-section);
-  font-size: 2.5rem;
+  font-family: var(--font-heading);
   font-weight: 400;
-  color: var(--deep-sea);
+  font-size: xx-large;
+  padding-bottom: 1rem;
 }
 
-h3 {
-  font-family: var(--font-section);
-  font-size: 2.5rem;
-  font-weight: 400;
+em {
   color: var(--open-ocean);
   font-style: italic;
 }
 
 p {
   font-family: var(--font-body);
-  color: var(--deep-sea);
-}
-
-a {
-  font-family: var(--font-mono);
-  font-size: 1rem;
   font-weight: 400;
-  text-transform: uppercase;
-  color: var(--deep-sea);
+  font-size: large;
+  text-align: justify;
 }
 
-/* ================================================================
-   LAYOUT LANDMARKS
-   ================================================================ */
-header {
-  /* Page header */
-  box-shadow: 0 0.35rem 0.85rem rgba(29, 53, 87, 0.18);
+hr {
+  border: 0;
+  border-top: 1px solid var(--shallows); /* Customize color and thickness */
+  width: 100%;
+  margin-top: 1.5rem;
 }
 
 main {
-  /* Main content area */
+  padding: 0 var(--page-gutter) 0;
 }
 
-footer {
-  /* Page footer */
-  min-height: 20rem;
+.page__grid {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+  grid-column: 1 / 11;
+  column-gap: 1rem;
 }
 
-/* ================================================================
-   HEADER COMPONENT
-   ================================================================ */
-.header {
-  /* Header wrapper */
-  margin: 0 var(--page-gutter);
-  display: flex;
-  align-items: center;
+.page__grid-spread {
+  grid-column: 1 / 11;
 }
 
-.header-logo {
-  flex: 1;
-  text-align: left;
-  justify-content: left;
+.page__grid-left {
+  grid-column: 1 / 6;
 }
 
-.header h2 {
-  /* Site title/logo */
-  flex: 1;
-  font-style: italic;
-  justify-content: right;
+.page__grid-right {
+  grid-column: 7 / 11;
+}
+
+.about,
+.writing,
+.design {
+  height: 950px;
+  width: 100%;
+  padding-top: var(--page-gap);
+}
+
+.about.page__grid,
+.writing.page__grid,
+.design.page__grid {
+  align-content: start;
+  row-gap: 2rem;
+}
+
+.about.page__grid > h1,
+.writing.page__grid > h1,
+.design.page__grid > h1 {
+  grid-column: 1 / -1;
+  width: max-content;
+  white-space: nowrap;
 }
 
 /* ================================================================
-   NAVIGATION COMPONENT
+   HEADER & NAVIGATION
    ================================================================ */
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: var(--foam);
+}
+
+.header-component{
+  width: 100%;
+  padding: 1rem var(--page-gutter);
+  box-shadow: 0 2px 8px rgba(29, 53, 87, 0.25);
+  border-bottom: 1px solid var(--shallows);
+}
+
+/* .logo {
+  
+} */
+
 .nav {
-  /* Navigation container */
   display: flex;
-  flex: 1;
+  justify-content: flex-end;
   align-items: center;
-  justify-content: left;
-  height: 5rem;
+  gap: 1rem;
 }
 
-nav ul {
-  /* Navigation list */
-  display: flex;
+.nav__link {
+  position: relative;
+  display: inline-flex;
   align-items: center;
-  justify-content: flex-start;
-  gap: 1.5rem;
-  margin: 0;
-  height: 100%;
-  list-style: none;
-  padding-left: 0;
+  justify-content: center;
+  min-height: 2rem;
+  padding: 0.2rem 0.25rem;
+  font-family: var(--font-mono);
+  font-size: medium;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  color: var(--deep-sea);
+  transition: color 180ms ease, transform 180ms ease;
+  animation: nav-link-in 380ms ease both;
 }
 
-nav li {
-  /* Navigation items */
-  display: flex;
+.nav__link:nth-of-type(2) {
+  animation-delay: 35ms;
+}
+
+.nav__link:nth-of-type(3) {
+  animation-delay: 70ms;
+}
+
+.nav__link:nth-of-type(4) {
+  animation-delay: 105ms;
+}
+
+.nav__link:nth-of-type(5) {
+  animation-delay: 140ms;
+}
+
+.nav__link::after {
+  content: "";
+  position: absolute;
+  inset: -0.15rem -0.3rem;
+  border-radius: var(--corner-rounding);
+  background-color: var(--open-ocean-soft);
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 180ms ease;
+}
+
+.nav__link:hover,
+.nav__link:focus-visible {
+  color: var(--coral);
+  transform: translateY(-1px);
+}
+
+.nav__link:hover::after,
+.nav__link:focus-visible::after,
+.nav__link.is-active::after {
+  opacity: 1;
+}
+
+.nav__link.is-active {
+  color: var(--coral);
+}
+
+.nav__link:focus-visible {
+  outline: 2px solid var(--open-ocean);
+  outline-offset: 2px;
+}
+
+.nav__theme-toggle {
+  display: inline-flex;
+  position: relative;
   align-items: center;
-  height: 100%;
+  justify-content: center;
+  width: 1.25rem;
+  min-height: 2rem;
+  padding: 0.2rem 0.25rem;
+  font-family: var(--font-mono);
+  font-size: large;
+  text-transform: uppercase;
+  color: var(--deep-sea);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 180ms ease, transform 180ms ease;
 }
 
-nav a {
-  /* Navigation links */
-  text-decoration: none;
+.nav__theme-toggle::after {
+  content: "";
+  position: absolute;
+  inset: -0.15rem -0.3rem;
+  border-radius: var(--corner-rounding);
+  background-color: var(--open-ocean-soft);
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 180ms ease;
+}
+
+.nav__theme-toggle:hover,
+.nav__theme-toggle:focus-visible {
+  color: var(--coral);
+  transform: translateY(-1px);
+}
+
+.nav__theme-toggle:hover::after,
+.nav__theme-toggle:focus-visible::after {
+  opacity: 1;
+}
+
+.nav__theme-toggle:focus-visible {
+  outline: 2px solid var(--open-ocean);
+  outline-offset: 2px;
+}
+
+.nav__burger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+  gap: 0.35rem;
+}
+
+.nav__burger-line {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: var(--deep-sea);
+  transition: all 300ms ease;
+  transform-origin: center;
+}
+
+.nav__burger.is-open .nav__burger-line:nth-child(1) {
+  transform: rotate(45deg) translateY(10px);
 }
 
-nav a:hover,
-nav a:focus {
-  /* Navigation link states */
+.nav__burger.is-open .nav__burger-line:nth-child(2) {
+  opacity: 0;
+}
+
+.nav__burger.is-open .nav__burger-line:nth-child(3) {
+  transform: rotate(-45deg) translateY(-10px);
 }
 
 /* ================================================================
@@ -165,284 +307,1236 @@ nav a:focus {
    ================================================================ */
 
 .hero {
-  /* Hero content wrapper */
-  display: block;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  padding-top: 4.5rem;
+}
+
+.hero__information {
+  padding-top: calc(var(--top-padding) * 0.75);
+  padding-right: 1rem;
 }
 
-.hero-info {
-  /* Hero text content */
-  grid-column: 1 / span 5;
+.hero__information h2 {
+  font-size: 5rem;
+  padding-top: var(--top-padding);
 }
 
-.hero-text {
-  /* Hero text block */
+.hero__buttons {
+  padding-top: var(--top-padding);
+  display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  gap: var(--top-padding);
+}
+
+.hero__buttons a {
+  text-decoration: none;
 }
 
-.hero-text h2,
-.hero-text h3 {
-  /* Hero text block headings */
-  font-size: 6rem;
+.hero__buttons h1 {
+  color: var(--foam);
 }
 
-.hero-info-links {
-  /* Hero call-to-action links */
+.hero__buttons em {
+  color: var(--coral);
+  font-style: italic;
+  text-transform: lowercase;
+  text-decoration: underline;
+}
+
+.hero__headshot {
+  position: relative;
+  overflow: hidden;
+  background-image: url(../img/headshot.jpg);
+  height: 35rem;
+  background-size: cover;
+  background-position: -4.5rem;
+  border-radius: 4px;
+  transition: transform 180ms ease, box-shadow 180ms ease;
+  box-shadow: 0 4px 12px rgba(29, 53, 87, 0.12);
+}
+
+.hero__headshot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: linear-gradient(
+    115deg,
+    rgba(241, 250, 238, 0) 30%,
+    var(--foam-soft) 50%,
+    rgba(241, 250, 238, 0) 70%
+  );
+  background-size: 260% 100%;
+  background-position: 140% 0;
+  background-repeat: no-repeat;
+  opacity: 0.85;
+}
+
+.hero__headshot:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 18px rgba(29, 53, 87, 0.18);
 }
 
-.hero-image {
-  /* Hero image area */
-  grid-column: 7 / span 4;
-  justify-self: end;
+.hero__headshot:hover::after {
+  animation: hero-headshot-sheen 700ms ease-out 1;
+}
+
+.hero__headshot:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 8px rgba(29, 53, 87, 0.14);
+}
+
+.about__education,
+.about__experience,
+.writing__featured,
+.writing__selecteds,
+.design__portfolio {
+  gap: 0.75rem;
 }
 
 /* ================================================================
    ABOUT SECTION
    ================================================================ */
-section#about {
-  /* About section */
+
+.about__education,
+.about__experience {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-section#about.about {
-  /* About with class */
+.about__education > h2,
+.about__experience > h2,
+.writing__featured > h2,
+.writing__selecteds > h2,
+.design__portfolio > h2 {
+  padding-bottom: 0;
 }
 
-section#about .page-box {
-  align-items: start;
+.about__accordion {
+  --accordion-row-size: 5.25rem;
+  --accordion-max-visible: 4;
+  position: relative;
+  height: calc(var(--accordion-row-size) * var(--accordion-max-visible));
+  background: var(--foam);
+  border-radius: var(--corner-rounding);
+  border-top: 1px solid var(--shallows);
+  overflow: hidden;
+  width: 100%;
 }
 
-section#about > .page-box > h1 {
-  grid-column: 1 / -1;
+.about__accordion-scroll {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
 }
 
-.artist-statement {
-  /* Artist statement article */
-  grid-column: 1 / -1;
+.about__accordion-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.about__accordion-item {
+  border-bottom: 1px solid var(--shallows);
+  padding: 1rem 0;
+}
+
+.about__accordion-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.about__accordion-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.about__accordion-title {
+  font-family: var(--font-heading);
+  font-size: 1.1rem;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--deep-sea);
+}
+
+.about__accordion-subtitle {
+  font-family: var(--font-heading);
+  font-size: 0.95rem;
+  font-style: italic;
+  color: var(--deep-sea);
+}
+
+.about__accordion-toggle {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 1.25rem;
+  color: var(--coral);
+}
+
+.about__accordion-body {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 220ms ease;
 }
 
-.education {
-  /* Education article */
-  grid-column: 1 / span 5;
+.about__accordion-body.is-open {
+  max-height: 12rem;
 }
 
-.about-box {
-  /* About content wrapper */
+.about__accordion-body p {
+  margin-top: 0.65rem;
+  font-size: 1rem;
+  line-height: 1.6;
+  text-align: left;
 }
 
-.experience {
-  /* Experience article */
-  grid-column: 7 / span 4;
+.about__accordion-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3.5rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, rgba(241, 250, 238, 0), var(--foam));
 }
 
 /* ================================================================
-   WRITING/POETRY SECTION
+   WRITING SECTION
    ================================================================ */
-section#writing {
-  /* Writing section */
+
+.writing {
+  position: relative;
+  z-index: 0;
 }
 
-section#writing.poetry {
-  /* Poetry with class */
+.writing::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--page-gutter) * -1);
+  right: calc(var(--page-gutter) * -1);
   background-color: var(--background-shallows);
+  z-index: -1;
 }
 
-section#writing .page-box {
-  align-items: start;
+.writing__featured,
+.writing__selecteds {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-section#writing > .page-box > .page-info {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: repeat(10, minmax(0, 1fr));
-  column-gap: var(--page-gap);
-  row-gap: 2rem;
-  width: 100%;
+.writing__list {
+  --list-row-size: 8.5rem;
+  --list-max-visible: 4;
+  position: relative;
+  /* height: calc(var(--list-row-size) * var(--list-max-visible)); */
+  background: var(--background-shallows);
+  border-radius: var(--corner-rounding);
+  border-top: 1px solid var(--shallows);
+  overflow: hidden;
 }
 
-section#writing > .page-box > .page-info > h1 {
-  grid-column: 1 / -1;
+.writing__list-scroll {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
 }
 
-.publications {
-  /* Publications article */
-  grid-column: 1 / span 5;
+.writing__list-scroll::-webkit-scrollbar {
+  display: none;
 }
 
-.selecteds {
-  /* Selected works article */
-  grid-column: 7 / span 4;
+.writing__list-item {
+  display: block;
+  width: 100%;
+  border-bottom: 1px solid var(--shallows);
+  padding: 1rem 0;
 }
 
-.poetry .page-box {
-  /* Poetry content wrapper */
+.writing__list-item-featured {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
-.page-info {
-  /* Page info container */
+.writing__list-content {
+  flex: 1;
+  min-width: 0;
 }
 
-/* ================================================================
-   DESIGN SECTION
-   ================================================================ */
-section#design {
-  /* Design section */
+.writing__list-item-link {
+  text-decoration: none;
+  color: inherit;
+  transition: background-color 160ms ease;
 }
 
-section#design.design {
-  /* Design with class */
+.writing__list-item-link:hover {
+  background: var(--foam);
 }
 
-section#design .page-box {
-  align-items: start;
+.writing__list-title {
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.25;
+  margin: 0;
+  color: var(--deep-sea);
 }
 
-section#design > .page-box > h1 {
-  grid-column: 1 / -1;
+.writing__list-sub {
+  font-family: var(--font-heading);
+  font-size: 0.95rem;
+  font-style: italic;
+  margin: 0.15rem 0 0.35rem;
+  color: var(--deep-sea);
 }
 
-.design .page-box {
-  /* Design content wrapper */
+.writing__list-body {
+  font-size: 0.95rem;
+  line-height: 1.55;
+  margin: 0;
+  text-align: left;
 }
 
-.design-grid {
-  /* Design grid article */
-  grid-column: 1 / -1;
+.writing__list-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-/* ================================================================
-   FOOTER COMPONENT
-   ================================================================ */
-footer {
-  /* Footer landmark */
-  background-color: var(--background-shallows);
+.writing__buy-link {
+  display: inline-grid;
+  place-items: center;
+  width: 8rem;
+  height: 3rem;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-family: var(--font-mono);
+  font-size: small;
+  letter-spacing: 0.03em;
+  color: var(--foam);
 }
 
-#contact {
-  /* Contact/footer section */
+.writing__list-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3.5rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, rgba(241, 250, 238, 0), var(--background-shallows));
 }
 
-.footer {
-  /* Footer wrapper */
-  margin: 2.5rem var(--page-gutter);
+/* ================================================================
+   DESIGN SECTION
+   ================================================================ */
+
+.design__projects {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
-.footer-box {
-  /* Footer content container */
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  column-gap: var(--page-gap);
-  row-gap: 2rem;
-  align-items: start;
+.design__portfolio {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  min-height: 0;
 }
 
-.footer-info {
-  /* Footer text info */
-  margin-top: 5rem
+.design__portfolio hr {
+  margin-top: 0;
 }
 
-.footer-info h2 {
-  /* Footer heading */
+.design__filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-.footer-info p {
-  /* Footer description */
+.design__filter {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 0.45rem 0.95rem;
+  border: 1px solid var(--deep-sea);
+  background: transparent;
+  color: var(--deep-sea);
+  cursor: pointer;
+  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
 }
 
-.footer-links {
-  /* Footer links container */
-  display: contents;
+.design__filter.is-active {
+  font-weight: 500;
 }
 
-.footer-navigation {
-  /* Footer navigation article */
+.design__filter--all.is-active {
+  background: var(--deep-sea);
+  border-color: var(--deep-sea);
+  color: var(--foam);
 }
 
-.footer-contact {
-  /* Footer contact article */
+.design__filter--web.is-active {
+  background: var(--open-ocean-soft);
+  border-color: var(--open-ocean);
+  color: var(--open-ocean);
 }
 
-/* ================================================================
-   UTILITY & LAYOUT CLASSES
-   ================================================================ */
-.page-box {
-  /* General page content wrapper */
-  height: 100vh;
-  width: 100%;
-  padding: var(--page-gutter);
-  display: grid;
-  grid-template-columns: repeat(10, minmax(0, 1fr));
-  column-gap: var(--page-gap);
-  row-gap: 2rem;
+.design__filter--software.is-active {
+  background: var(--coral-soft);
+  border-color: var(--coral);
+  color: var(--coral);
 }
 
-/* ================================================================
-   RESPONSIVE BREAKPOINTS (media queries)
-   ================================================================ */
-@media (max-width: 768px) {
-  /* Tablet and smaller */
+.design__filter--collab.is-active {
+  background: var(--deep-sea-soft);
+  border-color: var(--deep-sea);
+  color: var(--deep-sea);
+}
 
-  .header,
-  .footer {
-    margin-left: 2rem;
-    margin-right: 2rem;
-  }
+.design__grid-shell {
+  --design-row-size: 16rem;
+  --design-row-gap: 0.8rem;
+  position: relative;
+  height: calc((var(--design-row-size) * 2) + var(--design-row-gap));
+  overflow: hidden;
+}
 
-  .page-box {
-    height: auto;
-    padding: 2rem;
-    grid-template-columns: 1fr;
-    column-gap: 0;
-  }
+.design__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-auto-rows: minmax(var(--design-row-size), auto);
+  gap: var(--design-row-gap);
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  align-content: start;
+  padding-right: 0.25rem;
+  padding-bottom: 3.5rem;
+  scrollbar-width: none;
+}
 
-  .hero-info,
-  .hero-image,
-  .artist-statement,
-  .education,
-  .experience,
-  section#writing > .page-box > .page-info,
-  .design-grid,
-  section#about > .page-box > h1,
-  section#writing > .page-box > .page-info > h1,
-  section#design > .page-box > h1 {
-    grid-column: 1 / -1;
-  }
+.design__grid::-webkit-scrollbar {
+  display: none;
+}
 
-  section#writing > .page-box > .page-info {
-    grid-template-columns: 1fr;
-  }
+.design__grid-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3.5rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--foam));
+}
 
-  .publications,
-  .selecteds {
-    grid-column: 1 / -1;
-  }
+.design__card {
+  border: 1px solid var(--shallows);
+  background: var(--foam);
+  transition: opacity 160ms ease;
+  min-height: var(--design-row-size);
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
 
-  .hero-image {
-    justify-self: start;
-  }
+.design__card:hover {
+  opacity: 0.9;
+}
 
-  .footer-box {
-    grid-template-columns: 1fr;
-  }
+.design__thumb {
+  width: 100%;
+  height: 8rem;
+  position: relative;
+  overflow: hidden;
+}
 
-  .footer-info,
-  .footer-navigation,
-  .footer-contact {
-    grid-column: 1 / -1;
-  }
+.design__thumb-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-@media (max-width: 480px) {
-  /* Mobile devices */
+.design__thumb--web {
+  background: var(--open-ocean);
+}
 
-  .header,
-  .footer {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
+.design__thumb--software {
+  background: var(--coral);
+}
 
-  .page-box {
-    padding: 1rem;
-  }
+.design__thumb--collab {
+  background: var(--deep-sea);
 }
 
+.design__badge {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  z-index: 1;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 0.25rem 0.5rem;
+  background: var(--foam);
+  border: 1px solid;
+}
+
+.design__badge--web {
+  color: var(--open-ocean);
+  border-color: var(--open-ocean);
+}
+
+.design__badge--software {
+  color: var(--coral);
+  border-color: var(--coral);
+}
+
+.design__badge--collab {
+  color: var(--deep-sea);
+  border-color: var(--deep-sea);
+}
+
+.design__info {
+  border-top: 1px solid var(--shallows);
+  padding: 0.75rem 1rem 1rem;
+  flex: 1;
+  overflow: visible;
+}
+
+.design__title {
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  line-height: 1.2;
+  color: var(--deep-sea);
+  margin: 0;
+}
+
+.design__context {
+  font-family: var(--font-heading);
+  font-size: 0.9rem;
+  font-style: italic;
+  color: var(--deep-sea);
+  margin: 0.15rem 0 0.45rem;
+}
+
+.design__body {
+  font-size: 0.9rem;
+  line-height: 1.55;
+  text-align: left;
+  margin: 0;
+}
+
+@media (max-width: 1024px) {
+  :root {
+    --page-gutter: 4rem;
+    --page-gap: 5rem;
+  }
+
+  .hero {
+    height: auto;
+    padding-top: 4rem;
+    padding-bottom: 2rem;
+  }
+
+  .hero.page__grid {
+    row-gap: 1.5rem;
+  }
+
+  .hero__information {
+    padding-right: 0;
+  }
+
+  .hero__headshot {
+    height: 35rem;
+    background-position: center 18%;
+  }
+
+  .page__grid {
+    column-gap: 0;
+  }
+
+  .page__grid-left,
+  .page__grid-right,
+  .page__grid-spread {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  .about.page__grid {
+    row-gap: 1.25rem;
+  }
+
+  .about.page__grid > h1,
+  .writing.page__grid > h1,
+  .design.page__grid > h1 {
+    width: auto;
+  }
+
+  .about__accordion {
+    height: auto;
+    overflow: visible;
+  }
+
+  .about__accordion-fade {
+    display: none;
+  }
+
+  .about,
+  .writing,
+  .design {
+    height: auto;
+    min-height: 0;
+    padding-bottom: var(--page-gap);
+  }
+
+  .footer-component {
+    height: auto;
+    padding-bottom: var(--page-gap);
+    display: grid;
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+    row-gap: 2rem;
+  }
+
+  .footer-statement {
+    grid-column: 1 / -1;
+    order: 2;
+  }
+
+  .footer-contact {
+    grid-column: 1 / -1;
+    order: 1;
+  }
+
+  .nav {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    row-gap: 0.5rem;
+  }
+
+  .footer-contact {
+    grid-column: 1 / -1;
+  }
+
+  .footer-contact h1 {
+    font-size: 1.1rem;
+  }
+
+  .design__grid-shell {
+    --design-row-size: 18rem;
+  }
+
+  .design__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1450px) and (min-width: 1025px) {
+  .hero {
+    height: auto;
+    padding-top: 4rem;
+    padding-bottom: 2rem;
+  }
+
+  .hero.page__grid {
+    grid-template-columns: 1fr;
+    row-gap: 1.25rem;
+  }
+
+  .hero__information,
+  .hero__headshot {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  .hero__information {
+    padding-right: 0;
+    padding-top: 1.5rem;
+  }
+
+  .hero__information h2 {
+    padding-top: 1rem;
+  }
+
+  .hero__buttons {
+    padding-top: 1rem;
+    flex-wrap: nowrap;
+  }
+
+  .hero__headshot {
+    height: clamp(18rem, 42vw, 35rem);
+    background-position: center 20%;
+  }
+
+  .about,
+  .writing,
+  .design {
+    height: auto;
+    min-height: 0;
+    padding-bottom: var(--page-gap);
+  }
+
+  .footer-component {
+    height: auto;
+    padding-bottom: var(--page-gap);
+  }
+}
+
+@media (max-width: 620px) {
+  :root {
+    --page-gutter: 2rem;
+    --page-gap: 4rem;
+  }
+
+  .nav {
+    position: relative;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 1rem;
+  }
+
+  .nav__link {
+    display: none;
+    order: 10;
+    width: 100%;
+    padding: 0.75rem 0;
+    text-align: right;
+    animation: none;
+    border-bottom: 1px solid var(--shallows);
+  }
+
+  .nav__link.is-visible {
+    display: inline-flex;
+  }
+
+  .nav__burger {
+    display: flex;
+    order: 5;
+  }
+
+  .nav__theme-toggle {
+    order: 6;
+  }
+
+  .hero {
+    padding-top: 3.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .hero.page__grid {
+    row-gap: 1rem;
+  }
+
+  .hero__information {
+    padding-top: 1.5rem;
+  }
+
+  .hero__information h2 {
+    font-size: 3.25rem;
+    padding-top: 1.5rem;
+  }
+
+  .hero__buttons {
+    flex-wrap: nowrap;
+    gap: 0.75rem;
+  }
+
+  .hero__headshot {
+    height: 20rem;
+  }
+
+  .footer-statement h2 {
+    font-size: 2.75rem;
+  }
+
+  .footer-contact h1 {
+    font-size: 1.1rem;
+  }
+
+  .footer-component {
+    height: auto;
+    padding-bottom: var(--page-gap);
+    display: grid;
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+    row-gap: 1.5rem;
+  }
+
+  .footer-statement {
+    grid-column: 1 / -1;
+    order: 2;
+  }
+
+  .footer-contact {
+    grid-column: 1 / -1;
+    order: 1;
+  }
+
+  .design__grid-shell {
+    --design-row-size: 20rem;
+  }
+
+  .design__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ================================================================
+   FOOTER COMPONENTS
+   ================================================================ */
+
+.footer-component{
+  width: 100%;
+  height: auto;
+  padding: var(--top-padding) var(--page-gutter);
+  background-color: var(--background-shallows);
+}
+
+.footer-statement h2 {
+  font-size: 4rem;
+}
+
+.footer-contact {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.footer-contact h1 {
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.footer-socials {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.footer-social-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-mono);
+  font-size: medium;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--deep-sea);
+  position: relative;
+  transition: color 180ms ease;
+  padding-bottom: 0.25rem;
+  border-bottom: 2px solid transparent;
+  transition: border-color 180ms ease, color 180ms ease;
+}
+
+.footer-social-link:hover {
+  color: var(--coral);
+  border-bottom-color: var(--coral);
+}
+
+.footer-social-link:focus-visible {
+  outline: 2px solid var(--open-ocean);
+  outline-offset: 2px;
+}
+
+.footer-social-icon {
+  width: 1.1rem;
+  height: 1.1rem;
+  flex: 0 0 auto;
+  fill: var(--coral);
+}
+
+
+
+
+/* ================================================================
+   BUTTON COMPONENTS
+   ================================================================ */
+
+.button__orange {
+  display: grid;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--coral);
+  background-image:
+    linear-gradient(
+      115deg,
+      rgba(241, 250, 238, 0) 30%,
+      var(--foam-soft) 50%,
+      rgba(241, 250, 238, 0) 70%
+    ),
+    linear-gradient(var(--coral), var(--coral));
+  background-size: 260% 100%, 100% 100%;
+  background-position: 140% 0, 0 0;
+  background-repeat: no-repeat;
+  border-radius: 4px;
+  height: 3rem;
+  width: 8rem;
+  place-items: center;
+  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+  box-shadow: 0 0 0 rgba(29, 53, 87, 0);
+}
+
+.button__orange:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 18px rgba(29, 53, 87, 0.18);
+  animation: orange-bg-sheen 700ms ease-out 1;
+}
+
+.button__orange:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 8px rgba(29, 53, 87, 0.14);
+}
+
+.button__orange:focus-visible {
+  outline: 2px solid var(--deep-sea);
+  outline-offset: 2px;
+}
+
+.button__invisible {
+  display: grid;
+  border-radius: 4px;
+  height: 3rem;
+  width: 8.5rem;
+  place-items: center;
+}
+
+.button__invisible > * {
+  color: var(--coral);
+}
+
+.button__invisible:hover > * {
+  background-image: linear-gradient(
+    110deg,
+    var(--coral) 28%,
+    var(--foam-soft) 50%,
+    var(--coral) 72%
+  );
+  background-size: 320% 100%;
+  background-position: 120% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  filter: brightness(1.2);
+  animation: invisible-text-sheen 700ms ease-out 1;
+}
+
+@keyframes invisible-text-sheen {
+  0% {
+    background-position: 120% 0;
+  }
+
+  100% {
+    background-position: -120% 0;
+  }
+}
+
+@keyframes orange-bg-sheen {
+  0% {
+    background-position: 140% 0, 0 0;
+  }
+
+  100% {
+    background-position: -140% 0, 0 0;
+  }
+}
+
+@keyframes hero-headshot-sheen {
+  0% {
+    background-position: 140% 0;
+  }
+
+  100% {
+    background-position: -140% 0;
+  }
+}
+
+@keyframes nav-link-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.35rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav__link {
+    animation: none;
+    transition: none;
+  }
+
+  .nav__link:hover,
+  .nav__link:focus-visible {
+    transform: none;
+  }
+
+  .nav__link::before,
+  .nav__link::after {
+    transition: none;
+  }
+
+  .button__orange {
+    transition: none;
+  }
+
+  .hero__headshot {
+    transition: none;
+  }
+
+  .button__orange:hover,
+  .button__orange:active {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .hero__headshot:hover,
+  .hero__headshot:active {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .button__invisible:hover > * {
+    animation: none;
+  }
+
+  .hero__headshot:hover::after {
+    animation: none;
+  }
+
+  .writing__list-item,
+  .design__card {
+    transition: none;
+  }
+
+  .about__accordion-body {
+    transition: none;
+  }
+}
+
+/* ================================================================
+   DARK MODE
+   ================================================================ */
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+[data-theme="dark"] body {
+  background-color: var(--deep-sea);
+  color: var(--foam);
+}
+
+[data-theme="dark"] h2 {
+  color: var(--foam);
+}
+
+[data-theme="dark"] h2 em {
+  color: var(--shallows);
+}
+
+[data-theme="dark"] p {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .header-component {
+  background-color: var(--deep-sea);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  border-bottom-color: var(--shallows);
+}
+
+[data-theme="dark"] .nav__link {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .nav__link:hover,
+[data-theme="dark"] .nav__link:focus-visible,
+[data-theme="dark"] .nav__link.is-active {
+  color: var(--coral);
+}
+
+[data-theme="dark"] .nav__link::after {
+  background-color: rgba(168, 218, 220, 0.3);
+}
+
+[data-theme="dark"] .nav__burger-line {
+  background-color: var(--foam);
+}
+
+[data-theme="dark"] .nav__theme-toggle {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .nav__theme-toggle::after {
+  background-color: rgba(168, 218, 220, 0.3);
+}
+
+[data-theme="dark"] .nav__theme-toggle:hover,
+[data-theme="dark"] .nav__theme-toggle:focus-visible {
+  color: var(--coral);
+}
+
+[data-theme="dark"] .nav__theme-toggle:focus-visible {
+  outline-color: var(--shallows);
+}
+
+[data-theme="dark"] .writing::before {
+  background-color: var(--open-ocean);
+}
+
+[data-theme="dark"] .button__orange {
+  background-color: var(--coral);
+}
+
+[data-theme="dark"] .button__orange h1,
+[data-theme="dark"] .button__orange::after {
+  color: var(--deep-sea);
+}
+
+[data-theme="dark"] .button__invisible > * {
+  color: var(--coral);
+}
+
+[data-theme="dark"] .about__accordion {
+  background: var(--deep-sea);
+  border-top-color: var(--shallows);
+}
+
+[data-theme="dark"] .about__accordion-item {
+  border-bottom-color: var(--shallows);
+}
+
+[data-theme="dark"] .about__accordion-title {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .about__accordion-subtitle {
+  color: var(--shallows);
+}
+
+[data-theme="dark"] .about__accordion-fade {
+  background: linear-gradient(to bottom, rgba(29, 53, 87, 0), var(--deep-sea));
+}
+
+[data-theme="dark"] .writing__list {
+  background: var(--open-ocean);
+  border-top-color: var(--shallows);
+}
+
+[data-theme="dark"] .writing__list-item {
+  border-bottom-color: var(--shallows);
+}
+
+[data-theme="dark"] .writing__list-item-link:hover {
+  background: var(--deep-sea);
+}
+
+[data-theme="dark"] .writing__list-title {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .writing__list-sub {
+  color: var(--shallows);
+}
+
+[data-theme="dark"] .writing__list-body {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .writing__list-fade {
+  background: linear-gradient(to bottom, rgba(241, 250, 238, 0), var(--open-ocean));
+}
+
+[data-theme="dark"] .design__card {
+  background: var(--deep-sea);
+  border-color: var(--shallows);
+}
+
+[data-theme="dark"] .design__info {
+  border-top-color: var(--shallows);
+}
+
+[data-theme="dark"] .design__title {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .design__context {
+  color: var(--shallows);
+}
+
+[data-theme="dark"] .design__body {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .design__filter {
+  border-color: var(--foam);
+  color: var(--foam);
+}
+
+[data-theme="dark"] .design__grid-fade {
+  background: linear-gradient(to bottom, transparent, var(--deep-sea));
+}
+
+[data-theme="dark"] .footer-component {
+  background-color: var(--open-ocean);
+}
+
+[data-theme="dark"] .footer-statement h2 {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .footer-contact {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .footer-contact h1 {
+  color: var(--coral);
+}
+
+[data-theme="dark"] .footer-social-link {
+  color: var(--foam);
+}
+
+[data-theme="dark"] .footer-social-link:hover {
+  color: var(--coral);
+  border-bottom-color: var(--coral);
+}
+
+[data-theme="dark"] .hero__headshot {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .hero__headshot:hover {
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
+}
 
+[data-theme="dark"] .hero__headshot:active {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+}
\ No newline at end of file
diff --git a/src/components/About.astro b/src/components/About.astro
new file mode 100644
index 0000000..1faa6f6
--- /dev/null
+++ b/src/components/About.astro
@@ -0,0 +1,20 @@
+---
+import Education from "./Education.astro";
+import Experience from "./Experience.astro";
+---
+
+<div class="about__spread page__grid-spread">
+    <article class="about__spread-statement page__grid-spread">
+        <h2>the poet<br/><em>& the web designer</em></h2>
+        <p>As a creative mind and a poet first and foremost, I look to merge the power of web design and game development to build better tools for writers and creative visionaries like myself. At the forefront of my studies is my dedication to poetry, and I explore the depths of the medium every day to better my skills. In my most recent work, I have spent countless hours and lines attempting to address the unexpected divinity found in ordinary moments of discomfort, pain, or sorrow, and the sort of visceral eroticism achieved when the body is transformed into the means to an end.</p>
+    </article>
+    <hr/>
+</div>
+
+<div class="about__education page__grid-left">
+    <Education />
+</div>
+
+<div class="about__experience page__grid-right">
+    <Experience />
+</div>
\ No newline at end of file
diff --git a/src/components/Accordion.jsx b/src/components/Accordion.jsx
new file mode 100644
index 0000000..0eb8e79
--- /dev/null
+++ b/src/components/Accordion.jsx
@@ -0,0 +1,58 @@
+import { useId, useState } from "react";
+
+/**
+ * @typedef {Object} AccordionItem
+ * @property {string} title
+ * @property {string} subtitle
+ * @property {string} body
+ */
+
+/**
+ * @param {{ items?: AccordionItem[], maxVisible?: number }} props
+ */
+export default function Accordion(props) {
+	const { items = [], maxVisible = 4 } = props;
+
+	const [openIndex, setOpenIndex] = useState(null);
+	const idPrefix = useId();
+
+	function handleToggle(index) {
+		setOpenIndex((current) => (current === index ? null : index));
+	}
+
+	return (
+		<div className="about__accordion" role="list" style={{ "--accordion-max-visible": maxVisible }}>
+			<div className="about__accordion-scroll">
+				{items.map((item, index) => {
+					const isOpen = openIndex === index;
+					const panelId = `${idPrefix}-panel-${index}`;
+
+					return (
+						<article className="about__accordion-item" role="listitem" key={item.title}>
+							<button
+								type="button"
+								className="about__accordion-header"
+								onClick={() => handleToggle(index)}
+								aria-expanded={isOpen}
+								aria-controls={panelId}
+							>
+								<span className="about__accordion-text">
+									<span className="about__accordion-title">{item.title}</span>
+									<span className="about__accordion-subtitle">{item.subtitle}</span>
+								</span>
+								<span className="about__accordion-toggle" aria-hidden="true">
+									{isOpen ? "-" : "+"}
+								</span>
+							</button>
+
+							<div id={panelId} className={`about__accordion-body${isOpen ? " is-open" : ""}`}>
+								<p>{item.body}</p>
+							</div>
+						</article>
+					);
+				})}
+			</div>
+			<div className="about__accordion-fade" aria-hidden="true" />
+		</div>
+	);
+}
diff --git a/src/components/Design.astro b/src/components/Design.astro
new file mode 100644
index 0000000..64f290e
--- /dev/null
+++ b/src/components/Design.astro
@@ -0,0 +1,7 @@
+---
+import DesignProjects from "./DesignProjects.astro";
+---
+
+<div class="design__projects page__grid-spread">
+    <DesignProjects />
+</div>
\ No newline at end of file
diff --git a/src/components/DesignGrid.jsx b/src/components/DesignGrid.jsx
new file mode 100644
index 0000000..8046c92
--- /dev/null
+++ b/src/components/DesignGrid.jsx
@@ -0,0 +1,83 @@
+import { useMemo, useState } from "react";
+
+/**
+ * @typedef {Object} DesignFilter
+ * @property {string} key
+ * @property {string} label
+ */
+
+/**
+ * @typedef {Object} DesignProject
+ * @property {string} title
+ * @property {string} context
+ * @property {string} body
+ * @property {string} category
+ * @property {string} [image]
+ */
+
+/**
+ * @param {{ filters?: DesignFilter[], projects?: DesignProject[] }} props
+ */
+export default function DesignGrid({ filters = [], projects = [] }) {
+  const [activeFilter, setActiveFilter] = useState("all");
+
+  const visibleProjects = useMemo(() => {
+    if (activeFilter === "all") {
+      return projects;
+    }
+
+    return projects.filter((project) => project.category === activeFilter);
+  }, [activeFilter, projects]);
+
+  return (
+    <div className="design__portfolio">
+      <h2>web design<br /><em>& other development projects</em></h2>
+      <hr />
+
+      <div className="design__filters" role="tablist" aria-label="Project category filters">
+        {filters.map((filter) => (
+          <button
+            type="button"
+            key={filter.key}
+            className={`design__filter design__filter--${filter.key}${activeFilter === filter.key ? " is-active" : ""}`}
+            onClick={() => setActiveFilter(filter.key)}
+            role="tab"
+            aria-selected={activeFilter === filter.key}
+          >
+            {filter.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="design__grid-shell">
+        <div className="design__grid" role="list">
+          {visibleProjects.map((project) => (
+            <article className="design__card" role="listitem" key={`${project.title}-${project.context}`}>
+              <div className={`design__thumb design__thumb--${project.category}`}>
+                {project.image ? (
+                  <img
+                    className="design__thumb-image"
+                    src={project.image}
+                    alt={`${project.title} project preview`}
+                    loading="lazy"
+                  />
+                ) : null}
+                <span className={`design__badge design__badge--${project.category}`}>
+                  {project.category.toUpperCase()}
+                </span>
+              </div>
+
+              <div className="design__info">
+                <p className="design__title">{project.title}</p>
+                <p className="design__context">{project.context}</p>
+                <p className="design__body">{project.body}</p>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        <div className="design__grid-fade" aria-hidden="true" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DesignProjects.astro b/src/components/DesignProjects.astro
new file mode 100644
index 0000000..c6b4831
--- /dev/null
+++ b/src/components/DesignProjects.astro
@@ -0,0 +1,25 @@
+---
+import DesignGrid from "./DesignGrid.jsx";
+
+const filters = /** @type {any} */ ([
+  { key: "all", label: "ALL" },
+  { key: "web", label: "WEB DESIGN" },
+  { key: "software", label: "SOFTWARE" },
+  { key: "collab", label: "COLLAB" },
+]);
+
+const projects = /** @type {any} */ ([
+  {
+    title: "OWaylords",
+    context: "Text-RPG Server Management Discord Bot",
+    body: "A Discord bot designed to handle the creation, management, and development of RPG-style Discord servers - Inspired by a lifetime of text roleplay.",
+    category: "software",
+  },
+]);
+---
+
+<DesignGrid
+  client:load
+  filters={/** @type {any} */ (filters)}
+  projects={/** @type {any} */ (projects)}
+/>
diff --git a/src/components/Education.astro b/src/components/Education.astro
new file mode 100644
index 0000000..3ef826e
--- /dev/null
+++ b/src/components/Education.astro
@@ -0,0 +1,24 @@
+---
+import Accordion from "./Accordion.jsx";
+
+const educationItems = /** @type {any} */ ([
+	{
+		title: "B.S. in Software Engineering & Creative Writing",
+		subtitle: "Allegheny College | 2028 (in progress)",
+		body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
+	},
+    {
+		title: "Dual Enrolment",
+		subtitle: "Gannon University | 2022-2024",
+		body: "Completed 3 courses in English Creative Writing as well as upper-level French.",
+	},
+    {
+		title: "High School Diploma",
+		subtitle: "Northwest Pennsylvania Collegiate Academy | 2024",
+		body: "Graduated sixth in my class with a GPA of 3.99. I also took 12 AP courses and served on the boards of several clubs.",
+	},
+]);
+---
+
+<h2>education<br/><em>& certification</em></h2>
+<Accordion client:load items={educationItems} />
diff --git a/src/components/Experience.astro b/src/components/Experience.astro
new file mode 100644
index 0000000..d078e93
--- /dev/null
+++ b/src/components/Experience.astro
@@ -0,0 +1,39 @@
+---
+import Accordion from "./Accordion.jsx";
+
+const experienceItems = /** @type {any} */ ([
+	{
+		title: "Software Applications & Web Design Research",
+		subtitle: "Allegheny College CIS | 2026",
+		body: "To be continued...",
+	},
+    {
+		title: "Poetry Workshop",
+		subtitle: "Paris, France | 2026",
+		body: "To be continued...",
+	},
+	{
+		title: "Lead Teaching Assistant",
+		subtitle: "Allegheny College CIS | 2025-present",
+		body: "Lecture, lead discussions, and facilitate hands-on activities to strengthen student understanding of foundational computer science concepts.",
+	},
+	{
+		title: "Community Media Coordinator",
+		subtitle: "Allegheny College English | 2025-present",
+		body: "Manage marketing efforts for departmental initiatives, crafting engaging written and visual content to promote programs and community involvement.",
+	},
+	{
+		title: "Warehouse Logistics Intern",
+		subtitle: "Logistics Plus Inc. | 2025",
+		body: "Logged and maintained thousands of inventory units, developed warehouse assembly line logistics, and ensured quality of order shipments.",
+	},
+    {
+		title: "In-Store Software UI/UX Tester",
+		subtitle: "Dick's Sporting Goods | 2023-2025",
+		body: "Tested new online ordering systems, identifying and reporting software bugs directly to the corporate development team.",
+	},
+]);
+---
+
+<h2>honors<br/><em>& experience</em></h2>
+<Accordion client:load items={experienceItems} />
diff --git a/src/components/Featureds.astro b/src/components/Featureds.astro
new file mode 100644
index 0000000..8c6264d
--- /dev/null
+++ b/src/components/Featureds.astro
@@ -0,0 +1,30 @@
+---
+import ScrollableList from "./ScrollableList.jsx";
+
+const featuredItems = /** @type {any} */ ([
+	{
+		title: "To the Butcher",
+		subtitle: "Folio, Spring 2026",
+		body: "Receive me—carcass...",
+		actionHref: "https://www.foliomagazine.org/folio-49/project-four-l3zw3-dk9py-xcmem-llk7k-cnfna-rppxe-2y4kl-hrs5c-cyfzw",
+		actionLabel: "read me",
+	},
+	{
+		title: "Birdwatching North of the Bathroom, Haulover Nude Beach",
+		subtitle: "Avalon, Spring 2026",
+		body: "I have dropped my towel and speedo...",
+		actionHref: "https://sites.google.com/a/su.edu/avalon/spring-2026/poetry/bird-watching-north-of-the-bathroom?authuser=0",
+		actionLabel: "read me",
+	},
+	{
+		title: "The Doctor Says It'll Pass Given Time",
+		subtitle: "Avalon, Spring 2026",
+		body: "There’s a pit in my stomach...",
+		actionHref: "https://sites.google.com/a/su.edu/avalon/spring-2026/poetry/the-doctor-says-itll-pass-given-time?authuser=0",
+		actionLabel: "read me",
+	},
+]);
+---
+
+<h2>featured<br/><em>publications</em></h2>
+<ScrollableList client:load items={featuredItems} withBuyButton={true} />
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index b32aea7..301614d 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,22 +1,38 @@
 ---
 ---
 
-<div id="contact" class="footer">
-    <div class="footer-box">
-        <div class="footer-info">
-            <h2>dylan</h2>
-            <h3>delong-headley</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </div>
-        <div class="footer-links">
-            <article class="footer-navigation">
-                <h1>Navigation</h1>
-
-            </article>
-            <article class="footer-contact">
-                <h1>Contact Me</h1>
-                
-            </article>
+<footer id="contact" class="footer-component page__grid">
+    <div class="footer-statement page__grid-left">
+        <h2>dylan<br/><em>delong-headley</em></h2>
+        <p>Software Engineering and Creating Writing double major at Allegheny College.</p>
+    </div>
+    <div class="footer-contact page__grid-right">
+        <h1>connect with me</h1>
+        <div class="footer-socials">
+            <a href="https://discord.com" target="_blank" rel="noopener noreferrer" class="footer-social-link" aria-label="Discord">
+                <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                    <path d="M26.413,6.536c-1.971-.902-4.052-1.543-6.189-1.904-.292,.523-.557,1.061-.793,1.612-2.277-.343-4.592-.343-6.869,0-.236-.551-.5-1.089-.793-1.612-2.139,.365-4.221,1.006-6.194,1.909C1.658,12.336,.596,17.987,1.127,23.558h0c2.294,1.695,4.861,2.984,7.591,3.811,.615-.827,1.158-1.704,1.626-2.622-.888-.332-1.744-.741-2.56-1.222,.215-.156,.425-.316,.628-.472,4.806,2.26,10.37,2.26,15.177,0,.205,.168,.415,.328,.628,.472-.817,.483-1.676,.892-2.565,1.225,.467,.918,1.011,1.794,1.626,2.619,2.732-.824,5.301-2.112,7.596-3.808h0c.623-6.461-1.064-12.06-4.46-17.025Zm-15.396,13.596c-1.479,0-2.702-1.343-2.702-2.994s1.18-3.006,2.697-3.006,2.73,1.354,2.704,3.006-1.192,2.994-2.699,2.994Zm9.967,0c-1.482,0-2.699-1.343-2.699-2.994s1.18-3.006,2.699-3.006,2.723,1.354,2.697,3.006-1.189,2.994-2.697,2.994Z"></path>
+                </svg>
+                jeudoll
+            </a>
+            <a href="https://github.com/dheadley06" target="_blank" rel="noopener noreferrer" class="footer-social-link" aria-label="GitHub">
+                <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                    <path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z"></path>
+                </svg>
+                dheadley06
+            </a>
+            <a href="www.linkedin.com/in/dylan-delong-headley-aa1608372" target="_blank" rel="noopener noreferrer" class="footer-social-link" aria-label="LinkedIn">
+                <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                    <path d="M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z" fill-rule="evenodd"></path>
+                </svg>
+                Dylan DeLong-Headley
+            </a>
+            <a href="https://www.instagram.com/dylanheadley06/" target="_blank" rel="noopener noreferrer" class="footer-social-link" aria-label="Instagram">
+                <svg class="footer-social-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                    <path d="M10.202,2.098c-1.49,.07-2.507,.308-3.396,.657-.92,.359-1.7,.84-2.477,1.619-.776,.779-1.254,1.56-1.61,2.481-.345,.891-.578,1.909-.644,3.4-.066,1.49-.08,1.97-.073,5.771s.024,4.278,.096,5.772c.071,1.489,.308,2.506,.657,3.396,.359,.92,.84,1.7,1.619,2.477,.779,.776,1.559,1.253,2.483,1.61,.89,.344,1.909,.579,3.399,.644,1.49,.065,1.97,.08,5.771,.073,3.801-.007,4.279-.024,5.773-.095s2.505-.309,3.395-.657c.92-.36,1.701-.84,2.477-1.62s1.254-1.561,1.609-2.483c.345-.89,.579-1.909,.644-3.398,.065-1.494,.081-1.971,.073-5.773s-.024-4.278-.095-5.771-.308-2.507-.657-3.397c-.36-.92-.84-1.7-1.619-2.477s-1.561-1.254-2.483-1.609c-.891-.345-1.909-.58-3.399-.644s-1.97-.081-5.772-.074-4.278,.024-5.771,.096m.164,25.309c-1.365-.059-2.106-.286-2.6-.476-.654-.252-1.12-.557-1.612-1.044s-.795-.955-1.05-1.608c-.192-.494-.423-1.234-.487-2.599-.069-1.475-.084-1.918-.092-5.656s.006-4.18,.071-5.656c.058-1.364,.286-2.106,.476-2.6,.252-.655,.556-1.12,1.044-1.612s.955-.795,1.608-1.05c.493-.193,1.234-.422,2.598-.487,1.476-.07,1.919-.084,5.656-.092,3.737-.008,4.181,.006,5.658,.071,1.364,.059,2.106,.285,2.599,.476,.654,.252,1.12,.555,1.612,1.044s.795,.954,1.051,1.609c.193,.492,.422,1.232,.486,2.597,.07,1.476,.086,1.919,.093,5.656,.007,3.737-.006,4.181-.071,5.656-.06,1.365-.286,2.106-.476,2.601-.252,.654-.556,1.12-1.045,1.612s-.955,.795-1.608,1.05c-.493,.192-1.234,.422-2.597,.487-1.476,.069-1.919,.084-5.657,.092s-4.18-.007-5.656-.071M21.779,8.517c.002,.928,.755,1.679,1.683,1.677s1.679-.755,1.677-1.683c-.002-.928-.755-1.679-1.683-1.677,0,0,0,0,0,0-.928,.002-1.678,.755-1.677,1.683m-12.967,7.496c.008,3.97,3.232,7.182,7.202,7.174s7.183-3.232,7.176-7.202c-.008-3.97-3.233-7.183-7.203-7.175s-7.182,3.233-7.174,7.203m2.522-.005c-.005-2.577,2.08-4.671,4.658-4.676,2.577-.005,4.671,2.08,4.676,4.658,.005,2.577-2.08,4.671-4.658,4.676-2.577,.005-4.671-2.079-4.676-4.656h0"></path>
+                </svg>
+                dylanheadley06
+            </a>
         </div>
     </div>
-</div>
\ No newline at end of file
+</footer>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index d997d10..bc6d9c1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,12 +1,5 @@
 ---
-import Navigation from "./Navigation.astro";
+import HeaderNav from "./HeaderNav.jsx";
 ---
 
-<div class="header">
-    <div class="header-logo">
-        <h2>under construction</h2>
-    </div>
-    <div class="header-nav">
-        <Navigation />
-    </div>
-</div>
\ No newline at end of file
+<HeaderNav client:load />
diff --git a/src/components/HeaderNav.jsx b/src/components/HeaderNav.jsx
new file mode 100644
index 0000000..81ac077
--- /dev/null
+++ b/src/components/HeaderNav.jsx
@@ -0,0 +1,109 @@
+import { useEffect, useState } from "react";
+import ThemeToggle from "./ThemeToggle.jsx";
+
+const sections = ["home", "about", "writing", "design", "contact"];
+
+export default function HeaderNav() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState("home");
+
+  useEffect(() => {
+    const updateActiveSection = () => {
+      const header = document.querySelector("header");
+      const headerHeight = header ? header.getBoundingClientRect().height : 0;
+      const scrollMarker = window.scrollY + headerHeight + 24;
+
+      let nextActiveSection = sections[0];
+
+      sections.forEach((sectionId) => {
+        const element = document.getElementById(sectionId);
+
+        if (element && element.offsetTop <= scrollMarker) {
+          nextActiveSection = sectionId;
+        }
+      });
+
+      setActiveSection(nextActiveSection);
+    };
+
+    window.addEventListener("scroll", updateActiveSection, { passive: true });
+    window.addEventListener("resize", updateActiveSection);
+    window.addEventListener("hashchange", updateActiveSection);
+
+    updateActiveSection();
+
+    return () => {
+      window.removeEventListener("scroll", updateActiveSection);
+      window.removeEventListener("resize", updateActiveSection);
+      window.removeEventListener("hashchange", updateActiveSection);
+    };
+  }, []);
+
+  const closeMenu = () => {
+    setIsMenuOpen(false);
+  };
+
+  return (
+    <div className="header-component page__grid">
+      <nav className="nav page__grid-right">
+        <a
+          className={`nav__link${activeSection === "home" ? " is-active" : ""}${isMenuOpen ? " is-visible" : ""}`}
+          href="#home"
+          data-section="home"
+          aria-current={activeSection === "home" ? "location" : undefined}
+          onClick={closeMenu}
+        >
+          Home
+        </a>
+        <a
+          className={`nav__link${activeSection === "about" ? " is-active" : ""}${isMenuOpen ? " is-visible" : ""}`}
+          href="#about"
+          data-section="about"
+          aria-current={activeSection === "about" ? "location" : undefined}
+          onClick={closeMenu}
+        >
+          About
+        </a>
+        <a
+          className={`nav__link${activeSection === "writing" ? " is-active" : ""}${isMenuOpen ? " is-visible" : ""}`}
+          href="#writing"
+          data-section="writing"
+          aria-current={activeSection === "writing" ? "location" : undefined}
+          onClick={closeMenu}
+        >
+          Writing
+        </a>
+        <a
+          className={`nav__link${activeSection === "design" ? " is-active" : ""}${isMenuOpen ? " is-visible" : ""}`}
+          href="#design"
+          data-section="design"
+          aria-current={activeSection === "design" ? "location" : undefined}
+          onClick={closeMenu}
+        >
+          Design
+        </a>
+        <a
+          className={`nav__link${activeSection === "contact" ? " is-active" : ""}${isMenuOpen ? " is-visible" : ""}`}
+          href="#contact"
+          data-section="contact"
+          aria-current={activeSection === "contact" ? "location" : undefined}
+          onClick={closeMenu}
+        >
+          Contact
+        </a>
+        <ThemeToggle />
+        <button
+          className={`nav__burger${isMenuOpen ? " is-open" : ""}`}
+          aria-label="Toggle menu"
+          aria-expanded={isMenuOpen}
+          type="button"
+          onClick={() => setIsMenuOpen((previous) => !previous)}
+        >
+          <span className="nav__burger-line"></span>
+          <span className="nav__burger-line"></span>
+          <span className="nav__burger-line"></span>
+        </button>
+      </nav>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
new file mode 100644
index 0000000..deeac18
--- /dev/null
+++ b/src/components/Hero.astro
@@ -0,0 +1,19 @@
+---
+import OrangeButton from "./OrangeButton.astro"
+import InvisibleButton from "./InvisibleButton.astro"
+---
+
+
+<article class="hero__information page__grid-left">
+    <h1>Poet & Web Designer</h1>
+    <h2>dylan<br/><em>delong-headley</em></h2>
+    <p>I'm a double major in Software Engineering and Creating Writing at Allegheny College focused on web design and poetry. Click below to read my recent publications, or see what development projects I've been up to!</p>
+    <div class="hero__buttons" aria-label="Go to writing section">
+        <a href = #writing><OrangeButton><h1>Read my Poetry</h1></OrangeButton></a>
+        <a href = #design><InvisibleButton><h1><em>View my designs →</em></h1></InvisibleButton></a>
+    </div>
+</article>
+
+<div class="hero__headshot page__grid-right" role="img" aria-label="headshot image">
+
+</div>
\ No newline at end of file
diff --git a/src/components/InvisibleButton.astro b/src/components/InvisibleButton.astro
new file mode 100644
index 0000000..0c1db8b
--- /dev/null
+++ b/src/components/InvisibleButton.astro
@@ -0,0 +1,6 @@
+---
+---
+
+<div class="button__invisible">
+    <slot />
+</div>
\ No newline at end of file
diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
deleted file mode 100644
index d57e798..0000000
--- a/src/components/Navigation.astro
+++ /dev/null
@@ -1,22 +0,0 @@
----
----
-
-<nav id="menu" class="nav" aria-label="Page Links">
-        <ul>
-            <li>
-                <a href = "#home">Home</a>
-            </li>
-            <li>
-                <a href = "#about">About Me</a>
-            </li>
-            <li>
-                <a href = "#writing">Writing</a>
-            </li>
-            <li>
-                <a href = "#design">Design</a>
-            </li>
-            <li>
-                <a href = "#contact">Contact</a>
-            </li>
-        </ul>
-</nav>
diff --git a/src/components/OrangeButton.astro b/src/components/OrangeButton.astro
new file mode 100644
index 0000000..b3aab6f
--- /dev/null
+++ b/src/components/OrangeButton.astro
@@ -0,0 +1,6 @@
+---
+---
+
+<div class="button__orange">
+    <slot />
+</div>
\ No newline at end of file
diff --git a/src/components/ScrollableList.jsx b/src/components/ScrollableList.jsx
new file mode 100644
index 0000000..2ba3e83
--- /dev/null
+++ b/src/components/ScrollableList.jsx
@@ -0,0 +1,50 @@
+/**
+ * @typedef {Object} ListItem
+ * @property {string} title
+ * @property {string} subtitle
+ * @property {string} body
+ * @property {string} [href]
+ * @property {string} [actionHref]
+ * @property {string} [actionLabel]
+ */
+
+/**
+ * @param {{ items?: ListItem[], withBuyButton?: boolean }} props
+ */
+export default function ScrollableList(props) {
+  const { items = [], withBuyButton = false } = props;
+
+  return (
+    <div className="writing__list" role="list">
+      <div className="writing__list-scroll">
+        {items.map((item) => {
+          if (withBuyButton) {
+            return (
+              <article className="writing__list-item writing__list-item-featured" role="listitem" key={`${item.title}-${item.subtitle}`}>
+                <div className="writing__list-content">
+                  <p className="writing__list-title">{item.title}</p>
+                  <p className="writing__list-sub">{item.subtitle}</p>
+                  <p className="writing__list-body">{item.body}</p>
+                </div>
+                <div className="writing__list-actions">
+                  <a className="button__orange writing__buy-link" href={item.actionHref || "#"}>
+                    {item.actionLabel || "buy me"}
+                  </a>
+                </div>
+              </article>
+            );
+          }
+
+          return (
+            <a className="writing__list-item writing__list-item-link" role="listitem" href={item.href || "#"} key={`${item.title}-${item.subtitle}`}>
+              <p className="writing__list-title">{item.title}</p>
+              <p className="writing__list-sub">{item.subtitle}</p>
+              <p className="writing__list-body">{item.body}</p>
+            </a>
+          );
+        })}
+      </div>
+      <div className="writing__list-fade" aria-hidden="true" />
+    </div>
+  );
+}
diff --git a/src/components/Selections.astro b/src/components/Selections.astro
new file mode 100644
index 0000000..dc9ae4f
--- /dev/null
+++ b/src/components/Selections.astro
@@ -0,0 +1,33 @@
+---
+import ScrollableList from "./ScrollableList.jsx";
+
+const selectionItems = /** @type {any} */ ([
+	{
+		title: "Coming soon!",
+		subtitle: "under construction",
+		body: "",
+		href: "#",
+	},
+	{
+		title: "Coming soon!",
+		subtitle: "under construction",
+		body: "",
+		href: "#",
+	},
+	{
+		title: "Coming soon!",
+		subtitle: "under construction",
+		body: "",
+		href: "#",
+	},
+	{
+		title: "Coming soon!",
+		subtitle: "under construction",
+		body: "",
+		href: "#",
+	},
+]);
+---
+
+<h2>selected<br/><em>poems & essays</em></h2>
+<ScrollableList client:load items={selectionItems} />
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..97ad690
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+
+export default function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+  }, [isDark]);
+
+  function handleClick() {
+    setIsDark((prev) => !prev);
+  }
+
+  return (
+    <button
+      type="button"
+      className="nav__theme-toggle"
+      aria-label="Toggle dark mode"
+      aria-pressed={isDark}
+      onClick={handleClick}
+    >
+      {isDark ? "☾" : "☀"}
+    </button>
+  );
+}
diff --git a/src/components/Writing.astro b/src/components/Writing.astro
new file mode 100644
index 0000000..e43cd50
--- /dev/null
+++ b/src/components/Writing.astro
@@ -0,0 +1,12 @@
+---
+import Featureds from "./Featureds.astro";
+import Selections from "./Selections.astro";
+---
+
+<div class="writing__featured page__grid-left">
+    <Featureds />
+</div>
+
+<div class="writing__selecteds page__grid-right">
+    <Selections />
+</div>
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6e70328..b71ca42 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,4 +1,3 @@
-
 ---
 const { pageTitle } = Astro.props;
 
@@ -16,7 +15,7 @@ import Footer from '../components/Footer.astro';
 		<title>{pageTitle}</title>
 	</head>
 	<body>
-		<header>
+        <header>
 			<Header />
 		</header>
 		<main>
@@ -26,4 +25,4 @@ import Footer from '../components/Footer.astro';
 			<Footer />
 		</footer>
 	</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cfea9e6..9056d30 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,74 +2,33 @@
 const pageTitle = "Home";
 
 import BaseLayout from "../layouts/BaseLayout.astro";
+import About from "../components/About.astro";
+import Design from "../components/Design.astro";
+import Hero from "../components/Hero.astro";
+import Writing from "../components/Writing.astro";
 ---
 
 <BaseLayout pageTitle = {pageTitle}>
-    <section id="home" class="hero">
-        <div class="page-box">
-            <div class="hero-info">
-                <h1>Poet & Web Designer</h1>
-                <div class="hero-text">
-                    <h2>dylan</h2>
-                    <h3>delong-headley</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
-                </div>
-                <div class="hero-info-links">
 
-                </div>
-            </div>
-            <div class="hero-image">
-                <img class="hero-image" src="img/picture_placeholder.png" height=636 width=447 alt="Profile photo">
-            </div>
-        </div>
-    </section>
-
-    <section id="about" class="about">
-        <div class="page-box">
-            <h1>About the Artist</h1>
-            <article class="artist-statement">
-                <h2>the poet</h2>
-                <h3>& the web designer</h3>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-            </article>
-            <article class="education">
-                <h2>education</h2>
-
-            </article>
-            <article class="experience">
-                <h2>experience</h2>
-
-            </article>
-        </div>
+    <section id="home" class="hero page__grid">
+        <Hero />
     </section>
     
-    <section id="writing" class="poetry">
-        <div class="page-box">
-            <div class="page-info">
-                <h1>Poetry</h1>
-                <article class="publications">
-                    <h2>poetry</h2>
-                    <h3>publications</h3>
-
-                </article>
-                <article class="selecteds">
-                    <h2>selected</h2>
-                    <h3>poems & essays</h3>
-
-                </article>
-            </div>
-        </div>
-    </section>
-    
-    <section id="design" class="design">
-        <div class="page-box">
-            <h1>Design</h1>
-            <article class="design-grid">
-                <h2>web design</h2>
-                <h3>& other development projects</h3>
-
-            </article>
-        </div>
+    <section class="protfolio-info">
+        <section id="about" class="about page__grid">
+            <h1>01 • About</h1>
+            <About />
+        </section>
+
+        <section id="writing" class="writing page__grid">
+            <h1>02 • Writing</h1>
+            <Writing />
+        </section>
+
+        <section id="design" class="design page__grid">
+            <h1>03 • Design</h1>
+            <Design />
+        </section>
     </section>
 
 </BaseLayout>
\ No newline at end of file
diff --git a/src/portfolio_grid.html b/src/portfolio_grid.html
new file mode 100644
index 0000000..0e47056
--- /dev/null
+++ b/src/portfolio_grid.html
@@ -0,0 +1,80 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #f0efe6; }
+  .pg-wrap { background: #f0efe6; padding: 2rem 1.5rem 3rem; font-family: Georgia, serif; }
+  h1 { font-size: 36px; font-weight: 400; color: #1e3248; line-height: 1.1; margin-bottom: 4px; }
+  .pg-sub { font-style: italic; font-size: 28px; color: #4a7a90; margin-bottom: 1.2rem; }
+  .pg-divider { border: none; border-top: 0.5px solid #b0b8a8; margin-bottom: 1.2rem; }
+  .pg-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; }
+  .pg-filter { font-family: sans-serif; font-size: 12px; letter-spacing: 0.08em; padding: 6px 16px; border: 1.5px solid #1e3248; background: none; cursor: pointer; color: #1e3248; transition: background 0.15s, color 0.15s; }
+  .pg-filter.active-all { background: #1e3248; color: #f0efe6; }
+  .pg-filter.active-web { background: none; border-color: #3d7a9a; color: #3d7a9a; }
+  .pg-filter.active-software { background: none; border-color: #e05a38; color: #e05a38; }
+  .pg-filter.active-collab { background: none; border-color: #1e3248; color: #1e3248; font-weight: 500; }
+  .pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+  .pg-card { border: 1.5px solid #c8cfc0; background: #f8f7f0; cursor: pointer; transition: opacity 0.2s; }
+  .pg-card.hidden { display: none; }
+  .pg-card:hover { opacity: 0.88; }
+  .pg-thumb { width: 100%; height: 160px; position: relative; }
+  .pg-badge { position: absolute; top: 12px; left: 12px; font-family: sans-serif; font-size: 11px; letter-spacing: 0.1em; padding: 4px 10px; background: #f8f7f0; }
+  .badge-web { color: #3d7a9a; border: 1.5px solid #3d7a9a; }
+  .badge-software { color: #e05a38; border: 1.5px solid #e05a38; }
+  .badge-collab { color: #1e3248; border: 1.5px solid #1e3248; }
+  .thumb-web { background: #3d7a9a; }
+  .thumb-software { background: #e05a38; }
+  .thumb-collab { background: #1e3248; }
+  .pg-info { padding: 0.75rem 1rem 1rem; border-top: 1.5px solid #c8cfc0; }
+  .pg-title { font-size: 20px; font-weight: 400; color: #1e3248; margin-bottom: 2px; }
+  .pg-loc { font-style: italic; font-size: 13px; color: #4a7a90; margin-bottom: 8px; }
+  .pg-body { font-family: sans-serif; font-size: 13px; color: #2a3a30; line-height: 1.6; }
+  @media (max-width: 600px) { .pg-grid { grid-template-columns: 1fr; } }
+</style>
+
+<div class="pg-wrap">
+  <h1>web design</h1>
+  <p class="pg-sub">& other development projects</p>
+  <hr class="pg-divider">
+  <div class="pg-filters">
+    <button class="pg-filter active-all" onclick="filter('all', this)">ALL</button>
+    <button class="pg-filter" onclick="filter('web', this)">WEB DESIGN</button>
+    <button class="pg-filter" onclick="filter('software', this)">SOFTWARE</button>
+    <button class="pg-filter" onclick="filter('collab', this)">COLLAB</button>
+  </div>
+  <div class="pg-grid" id="grid">
+    <div class="pg-card" data-cat="web">
+      <div class="pg-thumb thumb-web"><span class="pg-badge badge-web">WEB DESIGN</span></div>
+      <div class="pg-info"><p class="pg-title">Title</p><p class="pg-loc">Location/Context</p><p class="pg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+    </div>
+    <div class="pg-card" data-cat="software">
+      <div class="pg-thumb thumb-software"><span class="pg-badge badge-software">SOFTWARE</span></div>
+      <div class="pg-info"><p class="pg-title">Title</p><p class="pg-loc">Location/Context</p><p class="pg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+    </div>
+    <div class="pg-card" data-cat="software">
+      <div class="pg-thumb thumb-software"><span class="pg-badge badge-software">SOFTWARE</span></div>
+      <div class="pg-info"><p class="pg-title">Title</p><p class="pg-loc">Location/Context</p><p class="pg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+    </div>
+    <div class="pg-card" data-cat="web">
+      <div class="pg-thumb thumb-web"><span class="pg-badge badge-web">WEB DESIGN</span></div>
+      <div class="pg-info"><p class="pg-title">Title</p><p class="pg-loc">Location/Context</p><p class="pg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+    </div>
+    <div class="pg-card" data-cat="web">
+      <div class="pg-thumb thumb-web"><span class="pg-badge badge-web">WEB DESIGN</span></div>
+      <div class="pg-info"><p class="pg-title">Title</p><p class="pg-loc">Location/Context</p><p class="pg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+    </div>
+    <div class="pg-card" data-cat="collab">
+      <div class="pg-thumb thumb-collab"><span class="pg-badge badge-collab">COLLAB</span></div>
+      <div class="pg-info"><p class="pg-title">Title</p><p class="pg-loc">Location/Context</p><p class="pg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
+    </div>
+  </div>
+</div>
+
+<script>
+const filterMap = { all: 'active-all', web: 'active-web', software: 'active-software', collab: 'active-collab' };
+function filter(cat, btn) {
+  document.querySelectorAll('.pg-filter').forEach(b => b.className = 'pg-filter');
+  btn.classList.add(filterMap[cat]);
+  document.querySelectorAll('.pg-card').forEach(card => {
+    card.classList.toggle('hidden', cat !== 'all' && card.dataset.cat !== cat);
+  });
+}
+</script>