diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 16dbd6f4..e5241ea2 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/package.json b/package.json index 2d5a3f2d..a6b6b6ca 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "@fontsource-variable/nunito-sans": "^5.0.14", "@fontsource/baskervville": "^5.0.20", "@hookform/resolvers": "^3.4.0", - "astro": "^4.8.5", + "astro": "^4.8.6", "firebase": "^10.12.0", "firebase-admin": "^12.1.0", "gsap": "^3.12.5", diff --git a/src/pages/about.astro b/src/pages/about.astro index 7cbff900..35cb0c15 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -7,7 +7,7 @@ import Breadcrumbs from "@components/molecules/breadcrumbs/Breadcrumbs.astro"; --- - + diff --git a/src/pages/articles/[...slug].astro b/src/pages/articles/[...slug].astro index 4c92d56d..6032a74a 100644 --- a/src/pages/articles/[...slug].astro +++ b/src/pages/articles/[...slug].astro @@ -50,7 +50,7 @@ const { Content } = await currentArticle.render(); ) } - +

{title} diff --git a/src/pages/articles/_articles.css b/src/pages/articles/_articles.css index a99a9aa2..5df1b764 100644 --- a/src/pages/articles/_articles.css +++ b/src/pages/articles/_articles.css @@ -1,135 +1,131 @@ @layer articles { - .articles__wrapper { - background-color: var(--neutral-light-4); - } - - .articles__title { - color: var(--primary-main); - margin-bottom: 5rem; + .articles__wrapper { + background-color: var(--neutral-light-4); + } - @media (max-width: 960px) { - margin-bottom: 2rem; + .articles__title { + color: var(--primary-main); } - } - .featured-article__wrapper { - display: grid; - gap: 0 2rem; - grid: 'Featured-Article-Image Featured-Article-Content' minmax(auto, 70dvh) / minmax(70%, 1fr) 1fr; + .featured-article__wrapper { + display: grid; + gap: 0 2rem; + grid: 'Featured-Article-Image Featured-Article-Content' minmax(auto, 70dvh) / minmax(70%, 1fr) 1fr; - @media (max-width: 960px) { - gap: 1rem 0; - grid: 'Featured-Article-Image Featured-Article-Image ' minmax(auto, 50dvh) + @media (max-width: 960px) { + gap: 1rem 0; + grid: 'Featured-Article-Image Featured-Article-Image ' minmax(auto, 50dvh) 'Featured-Article-Content Featured-Article-Content ' 1fr / 1fr; - padding-block-end: 1rem; + padding-block-end: 1rem; + } + } + + .featured-article__image { + grid-area: Featured-Article-Image; + object-fit: cover; + } + + .featured-article__details__wrapper { + grid-area: Featured-Article-Content; + padding-inline-end: 1rem; + position: relative; + } + + .featured-article__details { + align-self: center; + gap: 2rem 0; + + @media (max-width: 960px) { + gap: 1rem 0; + padding-inline: 1rem; + } + } + + .featured-article__share__wrapper { + bottom: -0.5rem; + gap: 1rem 0; + justify-content: space-between; + position: absolute; + translate: 0 100%; + width: 100%; + + @media (max-width: 960px) { + bottom: -1.5rem; + gap: 0.5rem 1rem; + justify-content: flex-start; + padding-inline: 1rem; + } + } + + .featured-article__share__link__item { + color: var(--neutral-main); + } + + .featured-article__share__links__list { + gap: 0 1rem; + } + + .featured-article__share__title { + font-weight: 700; + letter-spacing: 0.25rem; + text-transform: uppercase; + } + + .featured-article__link { + align-content: center; + flex-flow: row wrap; + font-weight: 700; + gap: 0 1rem; + transition: gap 0.2s; + + img { + rotate: 0.5turn; + width: 2rem; + } + + &:hover { + gap: 0 1.5rem; + } + } + + .articles__grid__list { + gap: 5rem 0; + margin: 12rem 0; + + @media (max-width: 960px) { + justify-content: center; + margin: 7rem 0; + } + } + + .articles__grid__item { + max-width: calc(100% / 4 - 2rem); + position: relative; + width: 100%; + + @media (max-width: 960px) { + max-width: calc(100% / 1 - 2rem); + } } - } - - .featured-article__image { - grid-area: Featured-Article-Image; - object-fit: cover; - } - - .featured-article__details__wrapper { - grid-area: Featured-Article-Content; - padding-inline-end: 1rem; - position: relative; - } - - .featured-article__details { - align-self: center; - gap: 2rem 0; - - @media (max-width: 960px) { - gap: 1rem 0; - padding-inline: 1rem; - } - } - - .featured-article__share__wrapper { - bottom: -0.5rem; - gap: 1rem 0; - justify-content: space-between; - position: absolute; - translate: 0 100%; - width: 100%; - - @media (max-width: 960px) { - bottom: -1.5rem; - gap: 0.5rem 1rem; - justify-content: flex-start; - padding-inline: 1rem; - } - } - - .featured-article__share__link__item { - color: var(--neutral-main); - } - - .featured-article__share__links__list { - gap: 0 1rem; - } - - .featured-article__share__title { - font-weight: 700; - letter-spacing: 0.25rem; - text-transform: uppercase; - } - - .featured-article__link { - align-content: center; - flex-flow: row wrap; - font-weight: 700; - gap: 0 1rem; - transition: gap 0.2s; - - img { - rotate: 0.5turn; - width: 2rem; - } - - &:hover { - gap: 0 1.5rem; - } - } - - .articles__grid__list { - gap: 5rem 0; - margin: 12rem 0; - - @media (max-width: 960px) { - justify-content: center; - margin: 7rem 0; - } - } - - .articles__grid__item { - max-width: calc(100% / 4 - 2rem); - position: relative; - width: 100%; - - @media (max-width: 960px) { - max-width: calc(100% / 1 - 2rem); - } - } - - .article__card__title { - font-size: clamp(2rem, 3rem, 3rem); - grid-area: Title; - letter-spacing: normal; - } - - .article__card__image{ - object-fit: none; - } - .article__card__wrapper { - display: grid; - gap: 0.5rem 0; - height: 100%; - - &.--no-image-variant { - grid: + + .article__card__title { + font-size: clamp(2rem, 3rem, 3rem); + grid-area: Title; + letter-spacing: normal; + } + + .article__card__image { + object-fit: none; + } + + .article__card__wrapper { + display: grid; + gap: 0.5rem 0; + height: 100%; + + &.--no-image-variant { + grid: 'Publish-Date' auto 'Title' 1fr 'Author' auto @@ -137,14 +133,14 @@ 'Tags' auto / 1fr; - .article__card__title { - align-self: center; - font-size: clamp(2.5rem, 4rem, 4rem); - } - } + .article__card__title { + align-self: center; + font-size: clamp(2.5rem, 4rem, 4rem); + } + } - &.--default-variant { - grid: + &.--default-variant { + grid: 'Publish-Date' auto 'Featured-Image' 1fr 'Title' auto @@ -152,34 +148,34 @@ 'Excerpt' auto 'Tags' auto / 1fr; + } } - } - .article__card__author { - grid-area: Author; - z-index: 1; + .article__card__author { + grid-area: Author; + z-index: 1; - a { - color: var(--primary-main); + a { + color: var(--primary-main); + } } - } - .article__card__link { - inset: 0; - position: absolute; - width: 100%; - } + .article__card__link { + inset: 0; + position: absolute; + width: 100%; + } - .article__card__publish-date { - grid-area: Publish-Date; - } + .article__card__publish-date { + grid-area: Publish-Date; + } - .article__card__description { - grid-area: Excerpt; - } + .article__card__description { + grid-area: Excerpt; + } - .article__card__tags__list { - grid-area: Tags; - z-index: 1; - } + .article__card__tags__list { + grid-area: Tags; + z-index: 1; + } } diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro index 3d24dfe9..746aaae7 100644 --- a/src/pages/articles/index.astro +++ b/src/pages/articles/index.astro @@ -43,7 +43,7 @@ const featuredArticleShareUrl = new URL(featuredArticleHref, Astro.url).href;

The Blog

- +
diff --git a/src/pages/index.astro b/src/pages/index.astro index 0d0a5c39..465d9638 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,7 +6,7 @@ import MyWork from "@components/organisms/myWork/MyWork.astro"; import LatestArticles from "@components/organisms/latestArticles/LatestArticles.astro"; import Breadcrumbs from "../ui/components/molecules/breadcrumbs/Breadcrumbs.astro"; -// todo (current): breadcrumbs +// todo (current): breadcrumbs (missing projects) // todo: tags page // todo: add resume (PDF) in about? // todo: dynamic content diff --git a/src/pages/projects.astro b/src/pages/projects.astro index b406aa5f..25620c50 100644 --- a/src/pages/projects.astro +++ b/src/pages/projects.astro @@ -9,7 +9,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/**/*.{j --- - +

Stories of Impact

diff --git a/src/ui/components/molecules/breadcrumbs/breadcrumbs.css b/src/ui/components/molecules/breadcrumbs/breadcrumbs.css index 671a6115..5f1dd4c7 100644 --- a/src/ui/components/molecules/breadcrumbs/breadcrumbs.css +++ b/src/ui/components/molecules/breadcrumbs/breadcrumbs.css @@ -1,13 +1,32 @@ @layer breadcrumbs { .breadcrumb__item, - .breadcrumbs__list{ + .breadcrumbs__list { gap: 1rem; } - .--is-current-page{ + + .--is-current-page { color: var(--primary-main) } + + .article-page .breadcrumbs__list { + justify-content: flex-start; + margin: 0 auto; + max-width: var(--grid-small); + padding: 2rem 0; + width: 100%; + } + + .articles-page .breadcrumbs__list { + margin-bottom: 5rem; + + @media (max-width: 960px) { + margin-bottom: 2rem; + } + } + + .about-page .breadcrumbs__list, .contact-page .breadcrumbs__list { justify-content: flex-start; padding-top: 2rem; } -} \ No newline at end of file +} diff --git a/src/ui/components/molecules/breadcrumbs/utils/generateBreadcrumbs/generateBreadcrumbs.ts b/src/ui/components/molecules/breadcrumbs/utils/generateBreadcrumbs/generateBreadcrumbs.ts index b89c2f4b..5261b286 100644 --- a/src/ui/components/molecules/breadcrumbs/utils/generateBreadcrumbs/generateBreadcrumbs.ts +++ b/src/ui/components/molecules/breadcrumbs/utils/generateBreadcrumbs/generateBreadcrumbs.ts @@ -1,19 +1,19 @@ -import { deSlugify } from '@shared/utils/deSlugify'; - -interface GenerateBreadcrumbsProps{ - currentPath: string, -} - -export const generateBreadcrumbs = ({ currentPath }: GenerateBreadcrumbsProps) => { - const pathSegments = currentPath.split('/').filter(segment => segment.trim() !== ''); - const breadcrumbs = pathSegments.map((_, index) => { - const link = `/${pathSegments.slice(0, index + 1).join('/')}`; - const label = deSlugify(pathSegments.at(index) ?? ''); - - return { label, link }; - }); - - currentPath !== '/' && breadcrumbs.unshift({ label: "Home", link: "/" }); - - return breadcrumbs; -} \ No newline at end of file +import { deSlugify } from "@shared/utils/deSlugify"; + +interface GenerateBreadcrumbsProps { + currentPath: string; +} + +export const generateBreadcrumbs = ({ currentPath }: GenerateBreadcrumbsProps) => { + const pathSegments = currentPath.split("/").filter((segment) => segment.trim() !== ""); + const breadcrumbs = pathSegments.map((_, index) => { + const link = `/${pathSegments.slice(0, index + 1).join("/")}`; + const label = deSlugify(pathSegments.at(index) ?? ""); + + return { label, link }; + }); + + currentPath !== "/" && breadcrumbs.unshift({ label: "Home", link: "/" }); + + return breadcrumbs; +}; diff --git a/src/ui/components/molecules/breadcrumbs/utils/generateBreadcrumbs/index.ts b/src/ui/components/molecules/breadcrumbs/utils/generateBreadcrumbs/index.ts index e96a1d4e..cc451b33 100644 --- a/src/ui/components/molecules/breadcrumbs/utils/generateBreadcrumbs/index.ts +++ b/src/ui/components/molecules/breadcrumbs/utils/generateBreadcrumbs/index.ts @@ -1 +1 @@ -export * from './generateBreadcrumbs' \ No newline at end of file +export * from "./generateBreadcrumbs"; diff --git a/src/ui/shared/utils/deSlugify/deSlugify.ts b/src/ui/shared/utils/deSlugify/deSlugify.ts index 4a4baa4b..67a24242 100644 --- a/src/ui/shared/utils/deSlugify/deSlugify.ts +++ b/src/ui/shared/utils/deSlugify/deSlugify.ts @@ -1,5 +1,3 @@ export function deSlugify(slug: string): string { - return slug - .replace(/-/g, ' ') - .replace(/\b\w/g, match => match.toUpperCase()); -} \ No newline at end of file + return slug.replace(/-/g, " ").replace(/\b\w/g, (match) => match.toUpperCase()); +} diff --git a/yarn.lock b/yarn.lock index 8ee669ba..919aa4b1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4122,9 +4122,9 @@ __metadata: languageName: node linkType: hard -"astro@npm:^4.8.5": - version: 4.8.5 - resolution: "astro@npm:4.8.5" +"astro@npm:^4.8.6": + version: 4.8.6 + resolution: "astro@npm:4.8.6" dependencies: "@astrojs/compiler": "npm:^2.8.0" "@astrojs/internal-helpers": "npm:0.4.0" @@ -4195,7 +4195,7 @@ __metadata: optional: true bin: astro: astro.js - checksum: 10c0/7b9be8204af74e736e722a0c28c6f1247626f1ab343c9cf380fae4e0be94b5211bba8630ba68a7aa97c2cd016060dcf4a54a91d6c06510f43160a964e961950e + checksum: 10c0/4d5db593524f305a178973fd2044604a08a45b07031bcbac9d1550a88ef363c7ff398e9f8c7cf0d1ed07dc783816f6add4c98e78b8c23bbaa510e157965b2241 languageName: node linkType: hard @@ -4284,7 +4284,7 @@ __metadata: "@types/react": "npm:^18.3.2" "@types/react-dom": "npm:^18.3.0" "@types/three": "npm:^0.164.0" - astro: "npm:^4.8.5" + astro: "npm:^4.8.6" firebase: "npm:^10.12.0" firebase-admin: "npm:^12.1.0" gsap: "npm:^3.12.5"