From a03dc1e149f923f54fa43b53c8d4cbaf8aa3d930 Mon Sep 17 00:00:00 2001 From: Tien DeLong-Headley Date: Tue, 31 Mar 2026 21:53:02 -0400 Subject: [PATCH 1/2] add: website organization unstyled --- public/style/style.css | 277 ++++++++++++++++++++++++++++++++ src/components/AboutBio.astro | 104 ------------ src/components/Footer.astro | 24 ++- src/components/Header.astro | 48 +----- src/components/LinkButton.astro | 0 src/components/Nav.astro | 38 ----- src/components/Navigation.astro | 23 +++ src/layouts/BaseLayout.astro | 10 +- src/pages/about.astro | 12 -- src/pages/design.astro | 21 --- src/pages/index.astro | 69 +++++++- src/pages/writing.astro | 15 -- src/style/style.css | 66 -------- 13 files changed, 393 insertions(+), 314 deletions(-) create mode 100644 public/style/style.css delete mode 100644 src/components/AboutBio.astro create mode 100644 src/components/LinkButton.astro delete mode 100644 src/components/Nav.astro create mode 100644 src/components/Navigation.astro delete mode 100644 src/pages/about.astro delete mode 100644 src/pages/design.astro delete mode 100644 src/pages/writing.astro delete mode 100644 src/style/style.css diff --git a/public/style/style.css b/public/style/style.css new file mode 100644 index 0000000..7e93493 --- /dev/null +++ b/public/style/style.css @@ -0,0 +1,277 @@ +/* ================================================================ + ROOT & CUSTOM PROPERTIES + ================================================================ */ +:root { + /* Define your color palette, spacing, typography here */ +} + +/* ================================================================ + CSS RESET + ================================================================ */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + /* Base typography and layout */ +} + +/* ================================================================ + BASE ELEMENTS + ================================================================ */ +h1, +h2, +h3 { + /* Heading styles */ +} + +h1 { + /* Primary headings */ +} + +h2 { + /* Section headings */ +} + +h3 { + /* Subheadings */ +} + +p { + /* Paragraph styles */ +} + +a { + /* Link styles */ +} + +/* ================================================================ + LAYOUT LANDMARKS + ================================================================ */ +header { + /* Page header */ +} + +main { + /* Main content area */ +} + +footer { + /* Page footer */ +} + +/* ================================================================ + HEADER COMPONENT + ================================================================ */ +.header { + /* Header wrapper */ +} + +.header h2 { + /* Site title/logo */ +} + +/* ================================================================ + NAVIGATION COMPONENT + ================================================================ */ +nav { + /* Navigation container */ +} + +nav#menu { + /* Primary navigation */ +} + +nav.nav { + /* Navigation styling */ +} + +nav ul { + /* Navigation list */ +} + +nav li { + /* Navigation items */ +} + +nav a { + /* Navigation links */ +} + +nav a:hover, +nav a:focus { + /* Navigation link states */ +} + +/* ================================================================ + HERO SECTION + ================================================================ */ +section#home { + /* Hero section container */ +} + +section#home.hero { + /* Hero with class */ +} + +.hero .page-box { + /* Hero content wrapper */ +} + +.hero-info { + /* Hero text content */ +} + +.hero-text { + /* Hero text block */ +} + +.hero-info-links { + /* Hero call-to-action links */ +} + +.hero-image { + /* Hero image area */ +} + +/* ================================================================ + ABOUT SECTION + ================================================================ */ +section#about { + /* About section */ +} + +section#about.about { + /* About with class */ +} + +.about-box { + /* About content wrapper */ +} + +.artist-statement { + /* Artist statement article */ +} + +.education { + /* Education article */ +} + +.experience { + /* Experience article */ +} + +/* ================================================================ + WRITING/POETRY SECTION + ================================================================ */ +section#writing { + /* Writing section */ +} + +section#writing.poetry { + /* Poetry with class */ +} + +.poetry .page-box { + /* Poetry content wrapper */ +} + +.page-info { + /* Page info container */ +} + +.publications { + /* Publications article */ +} + +.selecteds { + /* Selected works article */ +} + +/* ================================================================ + DESIGN SECTION + ================================================================ */ +section#design { + /* Design section */ +} + +section#design.design { + /* Design with class */ +} + +.design .page-box { + /* Design content wrapper */ +} + +.design-grid { + /* Design grid article */ +} + +/* ================================================================ + FOOTER COMPONENT + ================================================================ */ +footer { + /* Footer landmark */ +} + +#contact { + /* Contact/footer section */ +} + +.footer { + /* Footer wrapper */ +} + +.footer-box { + /* Footer content container */ +} + +.footer-info { + /* Footer text info */ +} + +.footer-info h2 { + /* Footer heading */ +} + +.footer-info p { + /* Footer description */ +} + +.footer-links { + /* Footer links container */ +} + +.footer-navigation { + /* Footer navigation article */ +} + +.footer-contact { + /* Footer contact article */ +} + +/* ================================================================ + UTILITY & LAYOUT CLASSES + ================================================================ */ +.page-box { + /* General page content wrapper */ +} + +/* ================================================================ + RESPONSIVE BREAKPOINTS (media queries) + ================================================================ */ +@media (max-width: 768px) { + /* Tablet and smaller */ +} + +@media (max-width: 480px) { + /* Mobile devices */ +} + + diff --git a/src/components/AboutBio.astro b/src/components/AboutBio.astro deleted file mode 100644 index b979efc..0000000 --- a/src/components/AboutBio.astro +++ /dev/null @@ -1,104 +0,0 @@ ---- ---- -
-

about me

-
-
-
-

Hello, I'm Dylan Etienne Headley!

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

Consectetur adipiscing elit quisque faucibus ex sapien vitae.

-
- -
- Dylan Headley -
-
- -
-
- -
-
- download cv -
-
- -
- - - \ No newline at end of file diff --git a/src/components/Footer.astro b/src/components/Footer.astro index c7cac8e..70ebb80 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,9 +1,21 @@ - --- --- - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index edaffad..0002766 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,48 +1,8 @@ - --- -import Navigation from '../components/Nav.astro'; +import Navigation from "./Navigation.astro"; --- -
- -
-
-
- Dylan Headley headshot photo -
-
- Dylan Headley -
-
-
+
+

dylan headley

-
- - - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Nav.astro b/src/components/Nav.astro deleted file mode 100644 index eb990c3..0000000 --- a/src/components/Nav.astro +++ /dev/null @@ -1,38 +0,0 @@ ---- ---- - - - - - \ No newline at end of file diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro new file mode 100644 index 0000000..63f1671 --- /dev/null +++ b/src/components/Navigation.astro @@ -0,0 +1,23 @@ +--- +--- + + diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 1834537..07dabd0 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -2,7 +2,6 @@ --- const { pageTitle } = Astro.props; -import '../style/style.css'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; --- @@ -16,8 +15,15 @@ import Footer from '../components/Footer.astro'; {pageTitle} +
+
+
+
- +
+