diff --git a/public/batcore-dark.webp b/public/batcore-dark.webp new file mode 100644 index 0000000..dd3c31c Binary files /dev/null and b/public/batcore-dark.webp differ diff --git a/public/batcore-light.webp b/public/batcore-light.webp new file mode 100644 index 0000000..54b8b1a Binary files /dev/null and b/public/batcore-light.webp differ diff --git a/public/fonts/Chakra-Petch-OFL.txt b/public/fonts/Chakra-Petch-OFL.txt new file mode 100644 index 0000000..9cee5a5 --- /dev/null +++ b/public/fonts/Chakra-Petch-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2018 The Chakra Petch Project Authors (https://github.com/m4rc1e/Chakra-Petch.git) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/public/fonts/chakra-petch-600.woff2 b/public/fonts/chakra-petch-600.woff2 new file mode 100644 index 0000000..0a6768c Binary files /dev/null and b/public/fonts/chakra-petch-600.woff2 differ diff --git a/public/fonts/chakra-petch-700.woff2 b/public/fonts/chakra-petch-700.woff2 new file mode 100644 index 0000000..41bc5cb Binary files /dev/null and b/public/fonts/chakra-petch-700.woff2 differ diff --git a/src/components/BackgroundGrid.astro b/src/components/BackgroundGrid.astro deleted file mode 100644 index 0a95276..0000000 --- a/src/components/BackgroundGrid.astro +++ /dev/null @@ -1,67 +0,0 @@ ---- -// Cheap, CSS-only topology motif: a faint grid + slow-drifting accent glows. -// No canvas, no WebGL, no JS. Fully disabled under prefers-reduced-motion. ---- - - - - diff --git a/src/components/Hero.astro b/src/components/Hero.astro index f541db6..4050cb5 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -1,11 +1,9 @@ --- -import BackgroundGrid from "./BackgroundGrid.astro"; import { site } from "../data/site"; import { cvAvailable } from "../lib/assets"; ---
-

{site.role}

@@ -53,16 +51,32 @@ import { cvAvailable } from "../lib/assets"; margin-bottom: var(--space-4); } .hero__title { + font-family: var(--font-display); font-size: var(--step-5); line-height: 1.12; - letter-spacing: -0.03em; + /* Chakra Petch is geometric/wide — looser tracking than Inter's -0.03em. */ + letter-spacing: -0.005em; /* Extend the paint box below the baseline so background-clip:text doesn't crop glyph descenders (the "g" in Wright). */ padding-bottom: 0.14em; - background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 62%, var(--accent))); + /* Electric kinetic fill: light text with a cyan→magenta band — the same + sweep as the Bat-Computer board — gliding across once on load (heroSheen) + over an electric halo, tying the headline into the backdrop. */ + background: linear-gradient( + 100deg, + var(--text) 0%, + var(--text) 34%, + var(--accent) 46%, + var(--accent-2) 56%, + var(--text) 66%, + var(--text) 100% + ); + background-size: 230% 100%; + background-position: 130% 0; -webkit-background-clip: text; background-clip: text; color: transparent; + filter: drop-shadow(0 0 26px var(--accent-glow)); } .hero__positioning { margin-top: var(--space-5); @@ -103,8 +117,11 @@ import { cvAvailable } from "../lib/assets"; .hero__cta { animation: heroIn 0.7s var(--ease) both; } + /* Entrance + a one-shot electric sheen sweeping across the name. */ .hero__title { - animation-delay: 0.06s; + animation: + heroIn 0.7s var(--ease) 0.06s both, + heroSheen 1.6s var(--ease) 0.7s both; } .hero__positioning { animation-delay: 0.14s; @@ -126,4 +143,13 @@ import { cvAvailable } from "../lib/assets"; transform: none; } } + /* A bright royal band sweeps left→right across the glyphs, then rests. */ + @keyframes heroSheen { + from { + background-position: 130% 0; + } + to { + background-position: 0% 0; + } + } diff --git a/src/components/Section.astro b/src/components/Section.astro index dbf1038..59d76f7 100644 --- a/src/components/Section.astro +++ b/src/components/Section.astro @@ -25,11 +25,27 @@ const { id, eyebrow, title, index } = Astro.props; .section__head { margin-bottom: var(--space-6); } + /* A short cyan→magenta tick leads each section eyebrow — board palette. */ + .section__head .eyebrow { + display: inline-flex; + align-items: center; + gap: 0.6rem; + } + .section__head .eyebrow::before { + content: ""; + width: 1.7rem; + height: 2px; + border-radius: 2px; + background: linear-gradient(90deg, var(--accent), var(--accent-2)); + box-shadow: 0 0 8px var(--accent-glow); + } .section__index { color: var(--text-faint); margin-right: 0.6rem; } .section__title { + font-family: var(--font-display); + letter-spacing: -0.01em; margin-top: var(--space-3); font-size: var(--step-3); max-width: 22ch; diff --git a/src/components/SkillGroup.astro b/src/components/SkillGroup.astro index c2126cb..a91c91d 100644 --- a/src/components/SkillGroup.astro +++ b/src/components/SkillGroup.astro @@ -10,7 +10,9 @@ const { group } = Astro.props;

{group.title}

{group.blurb}

    - {group.items.map((item) =>
  • {item}
    • )} + {group.items.map((item) => ( +
  • {item}
    • + ))}
@@ -40,6 +42,53 @@ const { group } = Astro.props; margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; + gap: 0.5rem; + } + + /* Circuit-node chips — a glowing cyan→magenta node + mono label, wired to the + board palette. Gradient border via padding-box/border-box layering so the + radius survives. Lights to a full gradient outline + glow on hover. */ + .chip { + --chip-grad: linear-gradient(100deg, var(--accent), var(--accent-2)); + display: inline-flex; + align-items: center; gap: 0.45rem; + font-family: var(--font-mono); + font-size: 0.72rem; + letter-spacing: 0.01em; + color: var(--text-dim); + padding: 0.3rem 0.62rem 0.3rem 0.55rem; + border-radius: 7px; + border: 1px solid var(--accent-line); + background: color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%); + transition: color 0.2s var(--ease), transform 0.2s var(--ease), + border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), + background 0.2s var(--ease); + } + /* The node: a small cyan→magenta square that glows, like a lit via/pad. */ + .chip__node { + flex: none; + width: 6px; + height: 6px; + border-radius: 2px; + background: var(--chip-grad); + box-shadow: 0 0 7px var(--accent-glow); + } + .chip:hover { + color: var(--text); + transform: translateY(-1px); + border-color: transparent; + /* dark fill (padding-box) inside a live gradient border (border-box) */ + background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, + var(--chip-grad) border-box; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 0 16px var(--accent-glow); + } + @media (prefers-reduced-motion: reduce) { + .chip { + transition: none; + } + .chip:hover { + transform: none; + } } diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index bb4d47f..9b2c067 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -56,6 +56,14 @@ const ogImage = new URL(site.ogImage, site.url).href; + + +