feat: only show hero and carousel on index
This commit is contained in:
parent
0edd672a70
commit
81538a6fdf
GPG key ID:
DFC06C02ED3B4711
18 changed files with 104 additions and 225 deletions
7
bun.lock
7
bun.lock
|
|
@ -23,7 +23,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"@iconify-json/simple-icons": "^1.2.24",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/bun": "^1.2.2",
|
||||
"prettier": "^3.5.0",
|
||||
|
|
@ -143,8 +142,6 @@
|
|||
|
||||
"@iconify-json/mdi": ["@iconify-json/mdi@1.2.3", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg=="],
|
||||
|
||||
"@iconify-json/simple-icons": ["@iconify-json/simple-icons@1.2.24", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-06ZWXZx3PHCE+02zn+iIGOKKNgE3kyPd0Yh7IUEIa0bCYI6UmGlsYYghRx8As9TnTNYMCEiy5V0zI4Jb6EY6XA=="],
|
||||
|
||||
"@iconify/tools": ["@iconify/tools@4.1.1", "", { "dependencies": { "@iconify/types": "^2.0.0", "@iconify/utils": "^2.2.0", "@types/tar": "^6.1.13", "axios": "^1.7.9", "cheerio": "1.0.0", "domhandler": "^5.0.3", "extract-zip": "^2.0.1", "local-pkg": "^0.5.1", "pathe": "^1.1.2", "svgo": "^3.3.2", "tar": "^6.2.1" } }, "sha512-Hybu/HGhv6T8nLQhiG9rKx+ekF7NNpPOEQAy7JRSKht3s3dcFSsPccYzk24Znc9MTxrR6Gak3cg6CPP5dyvS2Q=="],
|
||||
|
||||
"@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
|
||||
|
|
@ -371,7 +368,7 @@
|
|||
|
||||
"astring": ["astring@1.9.0", "", { "bin": { "astring": "bin/astring" } }, "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg=="],
|
||||
|
||||
"astro": ["astro@5.2.6", "", { "dependencies": { "@astrojs/compiler": "^2.10.3", "@astrojs/internal-helpers": "0.5.1", "@astrojs/markdown-remark": "6.1.0", "@astrojs/telemetry": "3.2.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.1.4", "@types/cookie": "^0.6.0", "acorn": "^8.14.0", "aria-query": "^5.3.2", "axobject-query": "^4.1.0", "boxen": "8.0.1", "ci-info": "^4.1.0", "clsx": "^2.1.1", "common-ancestor-path": "^1.0.1", "cookie": "^0.7.2", "cssesc": "^3.0.0", "debug": "^4.4.0", "deterministic-object-hash": "^2.0.2", "devalue": "^5.1.1", "diff": "^5.2.0", "dlv": "^1.1.3", "dset": "^3.1.4", "es-module-lexer": "^1.6.0", "esbuild": "^0.24.2", "estree-walker": "^3.0.3", "fast-glob": "^3.3.3", "flattie": "^1.1.1", "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.1.1", "js-yaml": "^4.1.0", "kleur": "^4.1.5", "magic-string": "^0.30.17", "magicast": "^0.3.5", "micromatch": "^4.0.8", "mrmime": "^2.0.0", "neotraverse": "^0.6.18", "p-limit": "^6.2.0", "p-queue": "^8.1.0", "preferred-pm": "^4.1.1", "prompts": "^2.4.2", "rehype": "^13.0.2", "semver": "^7.7.1", "shiki": "^1.29.2", "tinyexec": "^0.3.2", "tsconfck": "^3.1.4", "ultrahtml": "^1.5.3", "unist-util-visit": "^5.0.0", "unstorage": "^1.14.4", "vfile": "^6.0.3", "vite": "^6.0.11", "vitefu": "^1.0.5", "which-pm": "^3.0.1", "xxhash-wasm": "^1.1.0", "yargs-parser": "^21.1.1", "yocto-spinner": "^0.2.0", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.1", "zod-to-ts": "^1.2.0" }, "optionalDependencies": { "sharp": "^0.33.3" }, "bin": { "astro": "astro.js" } }, "sha512-CrTuJMwpWF9kmOhX+cl6uPqNbTRrHO7eXggFP9SK7+Bsen/7FpJtA6k1p/ALleuV5ndJLqn/9tpmP3qACHPjYA=="],
|
||||
"astro": ["astro@5.3.0", "", { "dependencies": { "@astrojs/compiler": "^2.10.3", "@astrojs/internal-helpers": "0.5.1", "@astrojs/markdown-remark": "6.1.0", "@astrojs/telemetry": "3.2.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.1.4", "@types/cookie": "^0.6.0", "acorn": "^8.14.0", "aria-query": "^5.3.2", "axobject-query": "^4.1.0", "boxen": "8.0.1", "ci-info": "^4.1.0", "clsx": "^2.1.1", "common-ancestor-path": "^1.0.1", "cookie": "^0.7.2", "cssesc": "^3.0.0", "debug": "^4.4.0", "deterministic-object-hash": "^2.0.2", "devalue": "^5.1.1", "diff": "^5.2.0", "dlv": "^1.1.3", "dset": "^3.1.4", "es-module-lexer": "^1.6.0", "esbuild": "^0.24.2", "estree-walker": "^3.0.3", "fast-glob": "^3.3.3", "flattie": "^1.1.1", "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.1.1", "js-yaml": "^4.1.0", "kleur": "^4.1.5", "magic-string": "^0.30.17", "magicast": "^0.3.5", "micromatch": "^4.0.8", "mrmime": "^2.0.0", "neotraverse": "^0.6.18", "p-limit": "^6.2.0", "p-queue": "^8.1.0", "preferred-pm": "^4.1.1", "prompts": "^2.4.2", "rehype": "^13.0.2", "semver": "^7.7.1", "shiki": "^1.29.2", "tinyexec": "^0.3.2", "tsconfck": "^3.1.4", "ultrahtml": "^1.5.3", "unist-util-visit": "^5.0.0", "unstorage": "^1.14.4", "vfile": "^6.0.3", "vite": "^6.0.11", "vitefu": "^1.0.5", "which-pm": "^3.0.1", "xxhash-wasm": "^1.1.0", "yargs-parser": "^21.1.1", "yocto-spinner": "^0.2.0", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.1", "zod-to-ts": "^1.2.0" }, "optionalDependencies": { "sharp": "^0.33.3" }, "bin": { "astro": "astro.js" } }, "sha512-e88l/Yk/6enR/ZDddLbqtM+oblBFk5mneNSmNesyVYGL/6Dj4UA67GPAZOk79VxT5dbLlclZSyyw/wlxN1aj3A=="],
|
||||
|
||||
"astro-icon": ["astro-icon@1.1.5", "", { "dependencies": { "@iconify/tools": "^4.0.5", "@iconify/types": "^2.0.0", "@iconify/utils": "^2.1.30" } }, "sha512-CJYS5nWOw9jz4RpGWmzNQY7D0y2ZZacH7atL2K9DeJXJVaz7/5WrxeyIxO8KASk1jCM96Q4LjRx/F3R+InjJrw=="],
|
||||
|
||||
|
|
@ -919,7 +916,7 @@
|
|||
|
||||
"preferred-pm": ["preferred-pm@4.1.1", "", { "dependencies": { "find-up-simple": "^1.0.0", "find-yarn-workspace-root2": "1.2.16", "which-pm": "^3.0.1" } }, "sha512-rU+ZAv1Ur9jAUZtGPebQVQPzdGhNzaEiQ7VL9+cjsAWPHFYOccNXPNiev1CCDSOg/2j7UujM7ojNhpkuILEVNQ=="],
|
||||
|
||||
"prettier": ["prettier@3.5.0", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-quyMrVt6svPS7CjQ9gKb3GLEX/rl3BCL2oa/QkNcXv4YNVBC9olt3s+H7ukto06q7B1Qz46PbrKLO34PR6vXcA=="],
|
||||
"prettier": ["prettier@3.5.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-hPpFQvHwL3Qv5AdRvBFMhnKo4tYxp0ReXiPn2bxkiohEX6mBeBwEpBSQTkD458RaaDKQMYSp4hX4UtfUTA5wDw=="],
|
||||
|
||||
"prettier-plugin-astro": ["prettier-plugin-astro@0.14.1", "", { "dependencies": { "@astrojs/compiler": "^2.9.1", "prettier": "^3.0.0", "sass-formatter": "^0.7.6" } }, "sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw=="],
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
"@tailwindcss/vite": "^4.0.6",
|
||||
"@types/alpinejs": "^3.13.11",
|
||||
"alpinejs": "^3.14.8",
|
||||
"astro": "^5.2.6",
|
||||
"astro": "^5.3.0",
|
||||
"astro-icon": "^1.1.5",
|
||||
"rehype-external-links": "^3.0.0",
|
||||
"tailwindcss": "^4.0.6",
|
||||
|
|
@ -30,10 +30,9 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"@iconify-json/simple-icons": "^1.2.24",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/bun": "^1.2.2",
|
||||
"prettier": "^3.5.0",
|
||||
"prettier": "^3.5.1",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,9 +79,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]"
|
||||
>
|
||||
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
|
||||
<Prose>
|
||||
<Content />
|
||||
</Prose>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,15 @@
|
|||
type Props = {
|
||||
href: String;
|
||||
link: String;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
const { href, link, class: additionalClasses } = Astro.props;
|
||||
|
||||
const baseClasses =
|
||||
"bg-tertiary text-primary hover:bg-accent flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center text-sm font-medium text-nowrap capitalize";
|
||||
const combinedClasses = `${baseClasses} ${additionalClasses || ""}`;
|
||||
const { href, link } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={`${href}`}>
|
||||
<div class={combinedClasses}>
|
||||
<div
|
||||
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-3 py-1.5 text-center text-sm font-medium text-nowrap capitalize transition-colors duration-300"
|
||||
>
|
||||
{link}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@ import Link from "@components/Link.astro";
|
|||
import { Icon } from "astro-icon/components";
|
||||
---
|
||||
|
||||
<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-12">
|
||||
<div class="flex flex-col items-center justify-between md:flex-row">
|
||||
<span class="text-tertiary text-center text-sm font-medium"
|
||||
<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-24">
|
||||
<div class="flex flex-col items-center justify-between gap-2 md:gap-4">
|
||||
<span class="text-tertiary text-center text-sm"
|
||||
>© {new Date().getFullYear()}
|
||||
<a href="/" class="hover:text-secondary transition-colors duration-300"
|
||||
>{SITE.TITLE}</a
|
||||
>. All rights reserved.
|
||||
</span>
|
||||
<div class="mt-4 flex gap-3 sm:mt-0 sm:justify-center">
|
||||
<div class="flex gap-3 sm:justify-center">
|
||||
{
|
||||
SITE.LINKS.map((i) => (
|
||||
<Link href={i.href}>
|
||||
<Icon
|
||||
name={i.icon}
|
||||
title={i.name}
|
||||
class="text-tertiary hover:text-secondary h-5 w-auto transition-colors duration-300"
|
||||
class="text-tertiary hover:text-secondary h-4 w-auto transition-colors duration-300"
|
||||
/>
|
||||
</Link>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ if (typeof tags !== "undefined") {
|
|||
|
||||
import outfit from "@fontsource-variable/outfit/files/outfit-latin-wght-normal.woff2?url";
|
||||
import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-latin-wght-normal.woff2?url";
|
||||
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
|
||||
---
|
||||
|
||||
<head>
|
||||
|
|
@ -110,4 +111,11 @@ import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-lat
|
|||
href={redhatmono}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href={instrument}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,86 +1,68 @@
|
|||
---
|
||||
import { SITE } from "@consts";
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
const pathname = new URL(Astro.request.url).pathname;
|
||||
const currentPath = pathname.replace(/\/$/, "");
|
||||
---
|
||||
|
||||
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 pt-4">
|
||||
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 md:pt-4">
|
||||
<nav
|
||||
x-data="{ mobileMenuIsOpen: false }"
|
||||
x-on:click.away="mobileMenuIsOpen = false"
|
||||
class="flex h-12 items-center justify-between"
|
||||
class="md:flex-no-wrap flex w-full flex-wrap justify-between"
|
||||
x-data="{ open: false }"
|
||||
>
|
||||
<a href="/" title={SITE.TITLE}>
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||
/>
|
||||
</a>
|
||||
<ul class="hidden items-center gap-4 sm:flex">
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li>
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<button
|
||||
x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
|
||||
x-bind:aria-expanded="mobileMenuIsOpen"
|
||||
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-99' : null"
|
||||
type="button"
|
||||
class="text-secondary flex sm:hidden"
|
||||
aria-label="mobile menu"
|
||||
aria-controls="mobileMenu"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:menu"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="!mobileMenuIsOpen"
|
||||
/>
|
||||
<Icon
|
||||
name="mdi:window-close"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex w-full items-center justify-between md:w-fit">
|
||||
<a href="/" title={SITE.TITLE}>
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
x-on:click="open = !open"
|
||||
x-bind:aria-expanded="open"
|
||||
type="button"
|
||||
class="text-secondary flex md:hidden"
|
||||
aria-label="mobile menu"
|
||||
aria-controls="mobileMenu"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:menu"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="!open"
|
||||
/>
|
||||
<Icon
|
||||
name="mdi:window-close"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="open"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
class="w-full items-center gap-4 text-right md:flex md:w-fit md:text-left"
|
||||
x-bind:class="{ 'hidden': !open }"
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
|
||||
x-transition:enter-start="-translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="-translate-y-full"
|
||||
id="mobileMenu"
|
||||
class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto px-6 pt-6 pb-6 sm:hidden"
|
||||
>
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="py-4">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-secondary w-full text-lg font-medium capitalize focus:underline"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
SITE.NAVLINKS.map((link) => {
|
||||
let linkHref = link.href.replace(/\/$/, "");
|
||||
const isActive = currentPath.startsWith(linkHref);
|
||||
return (
|
||||
<li class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden">
|
||||
<a
|
||||
href={link.href}
|
||||
class:list={[isActive ? "text-secondary" : ""]}
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,8 @@
|
|||
---
|
||||
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { Image } from "astro:assets";
|
||||
import icon from "public/assets/icon.png";
|
||||
---
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href={instrument}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<section class="animate-reveal opacity-0">
|
||||
<div class="mx-auto flex h-full self-center px-8 py-32">
|
||||
<div
|
||||
|
|
@ -32,15 +22,6 @@ import icon from "public/assets/icon.png";
|
|||
<div class="text-tertiary font-serif font-light tracking-wide italic">
|
||||
digital designer.
|
||||
</div>
|
||||
<div class="group absolute right-0 left-0 mx-auto mt-8 w-fit">
|
||||
<a href="#featured-projects">
|
||||
<Icon
|
||||
name="mdi:chevron-up"
|
||||
class="text-tertiary group-hover:text-secondary h-8 w-auto rotate-180 animate-bounce transition-all duration-300 ease-in-out"
|
||||
title="Move down"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded max-w-full"
|
||||
class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded max-w-full"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@ const { collection } = Astro.props;
|
|||
class="group hover:bg-tertiary/30 bg-none"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
>
|
||||
<article class="flex flex-col">
|
||||
<h3 class="mb-1 font-semibold text-balance">
|
||||
<span class="text-secondary">{collection.data.title}</span><span
|
||||
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
|
||||
>{collection.data.description}</span
|
||||
>
|
||||
<article class="flex flex-row items-center justify-between">
|
||||
<h3 class="text-secondary mb-1 font-semibold text-nowrap">
|
||||
{collection.data.title}
|
||||
</h3>
|
||||
<time class="text-accent block text-sm"
|
||||
<hr
|
||||
class="text-tertiary group-hover:text-secondary mx-6 w-full border-dotted transition-colors duration-300"
|
||||
/>
|
||||
<time class="text-accent block text-nowrap"
|
||||
><FormattedDate date={collection.data.date} /></time
|
||||
>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const { collection } = Astro.props;
|
|||
alt={collection.data.image.alt}
|
||||
title={collection.data.title}
|
||||
loading="eager"
|
||||
class="aspect-square object-cover transition-transform duration-300 ease-in-out group-hover:scale-102"
|
||||
class="aspect-[2/1] object-cover transition-all duration-300 ease-in-out group-hover:brightness-50"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,16 +44,6 @@ export const SITE: Site = {
|
|||
href: "/cv",
|
||||
icon: "mdi:certificate",
|
||||
},
|
||||
{
|
||||
name: "itch.io",
|
||||
href: "https://troylusty.itch.io",
|
||||
icon: "simple-icons:itchdotio",
|
||||
},
|
||||
{
|
||||
name: "LinkedIn",
|
||||
href: "https://linkedin.com/in/troylusty",
|
||||
icon: "mdi:linkedin",
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
href: "https://github.com/troylusty",
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
<svg
|
||||
data-name="Layer 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 900 300"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M900 5v290a5 5 0 0 1-5 5h-40a5 5 0 0 1-5-5V129.9a5 5 0 0 0-4.83-5A125.16 125.16 0 0 1 725.11 5.16a5 5 0 0 1 5-5.17h40.05a5 5 0 0 1 5 4.64 75.12 75.12 0 0 0 69.5 70.17 5 5 0 0 0 5.36-5V5a5 5 0 0 1 5-5h40A5 5 0 0 1 900 5zM575 300c-82.71 0-150-67.29-150-150S492.29 0 575 0s150 67.29 150 150-67.29 150-150 150zm0-250a100 100 0 1 0 100 100A100.11 100.11 0 0 0 575 50zM275 5v40a5 5 0 0 1-5 5h-65a5 5 0 0 0-5 5v240a5 5 0 0 1-5 5h-40a5 5 0 0 1-5-5V55a5 5 0 0 0-5-5H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h265a5 5 0 0 1 5 5z"
|
||||
></path
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M422.83 299.55h-56.57a5 5 0 0 1-3.53-1.46l-79.19-79.19a5 5 0 0 0-8.54 3.53V245a5 5 0 0 1-5 5h-40a5 5 0 0 1-5-5V80a5 5 0 0 1 5-5h40a5 5 0 0 1 5 5v39.82a5 5 0 0 0 5.36 5 75.12 75.12 0 0 0 69.45-69.45 5 5 0 0 0-5-5.36H305a5 5 0 0 1-5-5v-40a5 5 0 0 1 5-5h90a5 5 0 0 1 5 5v45a125.21 125.21 0 0 1-85.69 118.67 5 5 0 0 0-2 8.28l87.24 87.24 26.82 26.82a5 5 0 0 1-3.54 8.53z"
|
||||
></path
|
||||
></svg
|
||||
>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -27,7 +27,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
|
|||
tags={tags}
|
||||
/>
|
||||
<body
|
||||
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4 pt-0 md:pt-4"
|
||||
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4"
|
||||
>
|
||||
<Header />
|
||||
<main
|
||||
|
|
|
|||
|
|
@ -164,9 +164,11 @@ import icon from "public/assets/icon.png";
|
|||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
||||
Task:
|
||||
</p>
|
||||
<p class="w-full lg:inline-block lg:w-8/12">
|
||||
CMS Migration and Rebrand
|
||||
</p>
|
||||
<div class="w-full lg:inline-block lg:w-8/12">
|
||||
<Link href="/projects/camouflage-store"
|
||||
>CMS Migration and Rebrand
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mb-6">
|
||||
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
|
||||
|
|
@ -215,9 +217,8 @@ import icon from "public/assets/icon.png";
|
|||
Personal blog:
|
||||
</p>
|
||||
<p class="w-full lg:inline-block lg:w-8/12">
|
||||
My blog is the center of my online presence. Here, I share
|
||||
posts about what I've learnt, tutorials and my thoughts on
|
||||
web development in general.
|
||||
My personal portfolio website made using Astro. A place for
|
||||
me to share my work and anything else I've learnt.
|
||||
</p>
|
||||
</section>
|
||||
<section class="mb-6">
|
||||
|
|
|
|||
|
|
@ -2,89 +2,23 @@
|
|||
import Layout from "@layouts/Layout.astro";
|
||||
import { HOME } from "@consts";
|
||||
import { getCollection } from "astro:content";
|
||||
import ShowcasePost from "@components/ShowcasePost.astro";
|
||||
import Hero from "@components/Hero.astro";
|
||||
import Button from "@components/Button.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Carousel from "@components/Carousel.astro";
|
||||
|
||||
const allPosts = await getCollection("posts");
|
||||
|
||||
const posts = allPosts
|
||||
.filter((post) => !post.data.draft)
|
||||
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
|
||||
.slice(0, HOME.HOMESETTINGS?.NUM_POSTS_ON_HOMEPAGE);
|
||||
|
||||
const allProjects = await getCollection("projects");
|
||||
|
||||
const projects = allProjects
|
||||
.filter((project) => !project.data.draft && project.data.featured)
|
||||
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
|
||||
.slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
|
||||
|
||||
const projectsJSON = JSON.stringify(projects);
|
||||
---
|
||||
|
||||
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
|
||||
<Hero />
|
||||
<section aria-labelledby="featured-projects" class="animate-reveal opacity-0 [animation-delay:0.1s]">
|
||||
<div
|
||||
class="mx-auto flex flex-col items-start justify-between sm:flex-row sm:items-center"
|
||||
>
|
||||
<h2
|
||||
class=" text-2xl font-semibold break-words capitalize "
|
||||
id="featured-projects"
|
||||
>
|
||||
Featured projects
|
||||
</h2>
|
||||
{
|
||||
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
|
||||
<div class="group">
|
||||
<a
|
||||
href="/projects"
|
||||
class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
|
||||
>
|
||||
View all
|
||||
<Icon
|
||||
name="mdi:chevron-right"
|
||||
class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
<section
|
||||
id="featured-projects"
|
||||
class="animate-reveal opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
<Carousel data={projectsJSON} />
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="recent-posts" class="mt-24 animate-reveal opacity-0 [animation-delay:0.2s]">
|
||||
<div class="group flex w-fit flex-row items-center">
|
||||
<h2
|
||||
class="text-2xl font-semibold break-words capitalize"
|
||||
>
|
||||
Recent posts
|
||||
</h2>
|
||||
</div>
|
||||
<ol
|
||||
class="mt-8 grid grid-cols-1 gap-6"
|
||||
>
|
||||
{posts.map((post) => <ShowcasePost collection={post} />)}
|
||||
</ol>
|
||||
{
|
||||
allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? (
|
||||
<div class="group">
|
||||
<a
|
||||
href="/posts"
|
||||
class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
|
||||
>
|
||||
View all
|
||||
<Icon
|
||||
name="mdi:chevron-right"
|
||||
class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</section>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const projects = (await getCollection("projects"))
|
|||
{PROJECTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal mt-8 grid grid-cols-2 gap-2 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
|
||||
class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
|
||||
>
|
||||
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
--color-secondary: var(--secondary);
|
||||
--color-tertiary: var(--tertiary);
|
||||
--color-accent: var(--accent);
|
||||
|
||||
--color-button: var(--button);
|
||||
--color-button-active: var(--button-active);
|
||||
}
|
||||
|
||||
@theme {
|
||||
|
|
@ -39,6 +42,9 @@
|
|||
--secondary: light-dark(var(--color-neutral-950), var(--color-neutral-50));
|
||||
--tertiary: light-dark(var(--color-neutral-500), var(--color-neutral-500));
|
||||
--accent: light-dark(var(--color-neutral-700), var(--color-neutral-300));
|
||||
|
||||
--button: light-dark(#f3f4f6, #1f1f1f);
|
||||
--button-active: light-dark(#e5e7eb, #2f2f2f);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue