From a74cc775d027c95dd989355126d74a3bc2502ef5 Mon Sep 17 00:00:00 2001 From: Alex Lebens Date: Sun, 15 Feb 2026 23:38:55 -0600 Subject: [PATCH] feat: final refactor of sections --- src/components/Header.astro | 4 +- src/components/blog/BlogLeftSection.astro | 4 +- src/components/blog/BlogRightSection.astro | 4 +- .../sections/EducationSection.astro | 2 +- src/components/sections/Experience.astro | 152 ----------------- .../sections/ExperienceSection.astro | 159 ++++++++++++++++++ src/components/sections/HeaderSection.astro | 4 +- src/components/sections/HeroSection.astro | 8 +- ...stPosts.astro => LatestPostsSection.astro} | 12 +- ...Slider.astro => SkillsSliderSection.astro} | 100 +++++------ src/components/sections/WeatherSection.astro | 1 - src/pages/404.astro | 8 +- src/pages/about.astro | 8 +- src/pages/blog/[...slug].astro | 4 +- src/pages/index.astro | 4 +- src/styles/global.css | 1 + src/styles/utilities.css | 2 +- 17 files changed, 232 insertions(+), 245 deletions(-) delete mode 100644 src/components/sections/Experience.astro create mode 100644 src/components/sections/ExperienceSection.astro rename src/components/sections/{LatestPosts.astro => LatestPostsSection.astro} (77%) rename src/components/sections/{SkillsSlider.astro => SkillsSliderSection.astro} (57%) diff --git a/src/components/Header.astro b/src/components/Header.astro index 5663548..dbd5a2c 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,6 +1,6 @@ --- import BrandLogo from '@components/ui/logos/BrandLogo.astro'; -import ThemeToggle from '@components/buttons/ThemeToggle.astro'; +import ThemeToggleButton from '@components/buttons/ThemeToggleButton.astro'; import { NavigationLinks } from '@/config'; const pathname = new URL(Astro.request.url).pathname; @@ -90,7 +90,7 @@ const currentPath = pathname.slice(1); }) } - + diff --git a/src/components/blog/BlogLeftSection.astro b/src/components/blog/BlogLeftSection.astro index 5b761a7..61710f6 100644 --- a/src/components/blog/BlogLeftSection.astro +++ b/src/components/blog/BlogLeftSection.astro @@ -1,5 +1,5 @@ --- -import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro'; +import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro'; import Image from '@components/ui/images/Image.astro'; interface Props { @@ -39,6 +39,6 @@ const { title, subTitle, btnExists, btnTitle, btnURL, img, imgAlt } = Astro.prop > {subTitle}

- {btnExists ? : null} + {btnExists ? : null} diff --git a/src/components/blog/BlogRightSection.astro b/src/components/blog/BlogRightSection.astro index 1501902..2e2accc 100644 --- a/src/components/blog/BlogRightSection.astro +++ b/src/components/blog/BlogRightSection.astro @@ -1,5 +1,5 @@ --- -import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro'; +import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro'; import Image from '@components/ui/images/Image.astro'; interface Props { @@ -43,7 +43,7 @@ const { > {subTitle}

- {btnExists ? : null} + {btnExists ? : null} { diff --git a/src/components/sections/EducationSection.astro b/src/components/sections/EducationSection.astro index a635c54..77b6bd6 100644 --- a/src/components/sections/EducationSection.astro +++ b/src/components/sections/EducationSection.astro @@ -27,7 +27,7 @@ const certificates = ((await directus.request( Education
-

+

College

diff --git a/src/components/sections/Experience.astro b/src/components/sections/Experience.astro deleted file mode 100644 index ab53cad..0000000 --- a/src/components/sections/Experience.astro +++ /dev/null @@ -1,152 +0,0 @@ ---- -import { Icon } from 'astro-icon/components'; -import { readItems } from '@directus/sdk'; - -import type { Experience } from '@lib/directusTypes'; - -import directus from '@lib/directus'; - -const experiences = await directus.request( - readItems('site_experience', { - fields: ['*'], - sort: ['-endDate'], - }) -); ---- - -
-

Experience

-
    - { - experiences.map( - (experience: Experience) => { - const startYear = new Date(experience.startDate).getFullYear(); - const endYear = experience.endDate != null ? new Date(experience.endDate).getFullYear() : 'Present'; - - return ( -
  • -
    -
    - {' '} - -{' '} - -
    -
    -
    -

    -
    - - {experience.position} @ - {experience.url ? ( - - {experience.name} - - ) : ( - {experience.name} - )} - -
    -

    - {(experience.location || experience.location_type) && ( -
    - {experience.location} {experience.location && experience.location_type && '-'} {experience.location_type} -
    - )} -
    - {experience.summary && ( -
    -

    Summary:

    -
      - {Array.isArray(experience.summary) ? ( - experience.summary.map((item) => ({ item })) - ) : ( -
    • {experience.summary}
      • - )} -
    -
    - )} - - {(experience.responsibilities || experience.achievements) && ( -
    - {experience.responsibilities && ( -
    -

    Responsibilities:

    -
      - {experience.responsibilities.map(responsibility => ( -
    • {responsibility}
      • - ))} -
    -
    - )} - - {experience.achievements && ( -
    -

    Achievements:

    -
      - {experience.achievements.map(achievement => ( -
    • {achievement}
      • - ))} -
    -
    - )} -
    - - - -
      - {experience.skills && experience.skills.map(skill => { - const iconName = skill.toLowerCase(); - return ( -
    • - {skill} -
      • - ) - })} -
    - )} -
    -
    -
    -
    • - ); - } - ) - } -
-
- - - - - - diff --git a/src/components/sections/ExperienceSection.astro b/src/components/sections/ExperienceSection.astro new file mode 100644 index 0000000..7b2c388 --- /dev/null +++ b/src/components/sections/ExperienceSection.astro @@ -0,0 +1,159 @@ +--- +import { Icon } from 'astro-icon/components'; +import { readItems } from '@directus/sdk'; + +import type { Experience } from '@lib/directusTypes'; + +import directus from '@lib/directus'; + +const experiences = ((await directus.request( + readItems('site_experience'as any, { + fields: ['*'], + sort: ['-endDate'], + }) +)) as unknown) as Experience[]; +--- + +
+

+ Experience +

+
    + {experiences.map((experience: Experience) => { + const startYear = new Date(experience.startDate).getFullYear(); + const endYear = experience.endDate != null ? new Date(experience.endDate).getFullYear() : 'Present'; + + return ( +
  • +
    +
    + + {' '}-{' '} + +
    +
    +
    +

    +
    + + {experience.position} @ + {experience.url ? ( + + {experience.name} + + ) : ( + {experience.name} + )} + +
    +

    + {(experience.location || experience.location_type) && ( +
    + {experience.location} {experience.location && experience.location_type && '-'} {experience.location_type} +
    + )} +
    + {experience.summary && ( +
    +

    + Summary: +

    +
      +
    • + {experience.summary} +
      • +
    +
    + )} + {(experience.responsibilities || experience.achievements) && ( +
    + {experience.responsibilities && ( +
    +

    + Responsibilities: +

    +
      + {experience.responsibilities.map(responsibility => ( +
    • + {responsibility} +
      • + ))} +
    +
    + )} + {experience.achievements && ( +
    +

    + Achievements: +

    +
      + {experience.achievements.map(achievement => ( +
    • + {achievement} +
      • + ))} +
    +
    + )} +
    + + + +
      + {experience.skills && experience.skills.map(skill => { + const iconName = skill.toLowerCase(); + const skillName = skill.split(':')[1].replace(/^language-/, '').replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()); + return ( +
    • + {skillName} +
      • + ) + })} +
    + )} +
    +
    +
    +
    • + ); + })} +
+
+ + + + + + diff --git a/src/components/sections/HeaderSection.astro b/src/components/sections/HeaderSection.astro index da89173..8e4b6dd 100644 --- a/src/components/sections/HeaderSection.astro +++ b/src/components/sections/HeaderSection.astro @@ -1,5 +1,5 @@ --- -import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro'; +import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro'; interface Props { title: string; @@ -23,7 +23,7 @@ const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;

{btnExists ? (
- +
) : null}
diff --git a/src/components/sections/HeroSection.astro b/src/components/sections/HeroSection.astro index db40f03..092a1f0 100644 --- a/src/components/sections/HeroSection.astro +++ b/src/components/sections/HeroSection.astro @@ -1,6 +1,6 @@ --- -import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro'; -import GoLinkSecondary from '@components/buttons/GoLinkSecondary.astro'; +import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro'; +import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro'; import Image from '@components/ui/images/Image.astro'; interface Props { @@ -31,8 +31,8 @@ const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;

)}
- {primaryBtn && } - {secondaryBtn && } + {primaryBtn && } + {secondaryBtn && }
diff --git a/src/components/sections/LatestPosts.astro b/src/components/sections/LatestPostsSection.astro similarity index 77% rename from src/components/sections/LatestPosts.astro rename to src/components/sections/LatestPostsSection.astro index 5c250c6..d0c32e9 100644 --- a/src/components/sections/LatestPosts.astro +++ b/src/components/sections/LatestPostsSection.astro @@ -1,8 +1,9 @@ --- import { readItems } from '@directus/sdk'; -import directus from '@lib/directus'; import type { Post } from '@lib/directusTypes'; + +import directus from '@lib/directus'; import BlogCard from '@components/blog/BlogCard.astro'; const posts = await directus.request( @@ -20,11 +21,14 @@ const recentPosts = posts
-

+

Latest Posts

+
+ + Checkout my most recent thoughts here + +
{recentPosts.map((b) => )} diff --git a/src/components/sections/SkillsSlider.astro b/src/components/sections/SkillsSliderSection.astro similarity index 57% rename from src/components/sections/SkillsSlider.astro rename to src/components/sections/SkillsSliderSection.astro index 0ff10df..9f600c3 100644 --- a/src/components/sections/SkillsSlider.astro +++ b/src/components/sections/SkillsSliderSection.astro @@ -6,86 +6,63 @@ import type { Skill } from '@lib/directusTypes'; import directus from '@lib/directus'; -const skills = await directus.request( - readItems('site_skills', { +const skills = ((await directus.request( + readItems('site_skills' as any, { fields: ['*'], sort: ['-date_created'], }) -); - -const baseClasses = 'mx-2 min-w-[220px] sm:mx-4 sm:min-w-[280px]'; -const borderClasses = - 'border border-neutral-100 hover:border-neutral-200 dark:border-stone-500/20 dark:hover:border-neutral-800'; -const bgColorClasses = 'bg-neutral-100/80 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90'; -const hoverClasses = 'hover:-translate-y-2 hover:scale-105 '; -const shadowClasses = 'shadow-xs hover:shadow-lg'; +)) as unknown) as Skill[]; ---
-

+

Skills

- { - [...skills, ...skills, ...skills].map((skill: Skill) => { - return ( -
-
-
-
-
- -
-

- {skill.title} -

-
- - {skill.level}% - -
- -
-
-
- -
- Beginner - Advanced -
+ {[...skills, ...skills, ...skills].map((skill: Skill) => { + return ( +
+
+
+
+
+
+

+ {skill.title} +

- ); - }) - } + + {skill.level}% + +
+
+
+
+
+ Beginner + Advanced +
+
+
+ ); + })}
- -
-
-
-
+
+