diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index a37f563..fc58aa0 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -6,10 +6,11 @@ import '../styles/global.css' interface Props { frontmatter: CollectionEntry<'blog'>['data'] withNav?: boolean + withoutFooter?: boolean type?: string } -const { frontmatter, withNav = true, type = 'website' } = Astro.props as Props +const { frontmatter, withNav = true, withoutFooter = false, type = 'website' } = Astro.props as Props const { title, publishedAt, description, image, keywords } = frontmatter const url = new URL(Astro.url.pathname, Astro.site) @@ -59,16 +60,19 @@ const socialMedia = await getCollection('icons') {withNav && } - + { + !withoutFooter && ( + + ) + } diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index d2dd1eb..4893039 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,7 +1,8 @@ --- +import { getImage } from 'astro:assets' import { getCollection } from 'astro:content' import BaseLayout from '../../layouts/BaseLayout.astro' -import { READABLE_FORMAT, blogCompareFn } from '../../lib/utils' +import { READABLE_FORMAT, blogCompareFn, getImageURL } from '../../lib/utils' const props = { title: `vanntile's blog on software, career and thoughts on society`, @@ -21,10 +22,17 @@ const props = { ], } +// Set dynamic image path +const { src, alt } = props.image +const remoteImgURL = await getImageURL(src) +const resultingImage = await getImage({ src: remoteImgURL, width: 1600, height: 800 }) +// Update frontmatter +const frontmatter = { ...props, image: { src: resultingImage.src, alt } } + const posts = await getCollection('blog') --- - +

Blog posts

{ diff --git a/src/pages/design/brand-book.astro b/src/pages/design/brand-book.astro index b0d6173..7806ca2 100644 --- a/src/pages/design/brand-book.astro +++ b/src/pages/design/brand-book.astro @@ -1,5 +1,7 @@ --- +import { getImage, Image } from 'astro:assets' import BaseLayout from '../../layouts/BaseLayout.astro' +import { getImageURL } from '../../lib/utils' const props = { title: 'vanntile - brand book', @@ -8,47 +10,232 @@ const props = { image: { src: '/assets/deck/banner-deck.png', alt: 'Banner image for the brand book' }, keywords: ['design', 'branding', 'graphic design', 'brand book', 'design deck'], } + +// Set dynamic image path +const { src, alt } = props.image +const remoteImgURL = await getImageURL(src) +const resultingImage = await getImage({ src: remoteImgURL, width: 1600, height: 800 }) +// Update frontmatter +const frontmatter = { ...props, image: { src: resultingImage.src, alt } } + +const imageSources: Record = {} +for (let i = 1; i < 25; i++) { + const key = `/assets/deck/page.${i}.webp` + imageSources[key] = await getImageURL(key) +} --- - +
-
vanntile brand deck cover page
-
brand deck project description
-
brand personality
-
logo
- logo with primary version color scheme + vanntile brand deck cover page +
+
+ brand deck project description +
+
+ brand personality +
+
+ logo +
+
+ logo with primary version color scheme +
+
+ logomark with primary version color scheme +
+
+ logo with monochrome color scheme +
+
+ logomark assembly from shapes +
+
+ logo grid overlap +
+
+ step by step visual refinement of logo +
+
+ adaptability of the logo +
+
+ logo construction: tyeface sizing +
+
+ logo construction: spacing +
+
+ logo construction: whitespace +
+
+ all logo versions +
+
+ brand color palette +
+
+ brand typography +
+
+ main shape pattern
- logomark with primary version color scheme + secondary brand patterns
- logo with monochrome color scheme + signs and expressions of the logo
-
logomark assembly from shapes
-
logo grid overlap
- step by step visual refinement of logo + iconography
-
adaptability of the logo
- logo construction: tyeface sizing + stationery usage of the brand elements
-
logo construction: spacing
-
logo construction: whitespace
-
all logo versions
-
brand color palette
-
brand typography
-
main shape pattern
-
secondary brand patterns
- signs and expressions of the logo + social media usage
-
iconography
- stationery usage of the brand elements + profile page mockup
-
social media usage
-
profile page mockup
 diff --git a/src/styles/global.css b/src/styles/global.css index fa770f6..fb78d55 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1891,7 +1891,7 @@ padding-right: 1rem; padding-left: 1rem; width: 100vw; - height: calc(100vh - 84px); + height: 100vh; overflow-y: scroll; scroll-snap-align: center; scroll-snap-type: y mandatory;