Skip to content

Commit

Permalink
iteration (#56)
Browse files Browse the repository at this point in the history 
* wip

* updated resume
  • Loading branch information
@nahiyankhan
nahiyankhan authored Oct 11, 2024
1 parent 3982d31 commit 6fe1a1b
Show file tree
Hide file tree
Showing 9 changed files with 112 additions and 70 deletions.
Binary file modified public/nahiyankhan_resume.pdf
View file
Binary file not shown.
1 change: 1 addition & 0 deletions src/alpine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export default (Alpine: Alpine) => {

Alpine.store('settings', {
open: false,
scale: 1,

toggle() {
this.open = !this.open
Expand Down
2 changes: 1 addition & 1 deletion src/assets/khan.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
109 changes: 84 additions & 25 deletions src/components/About.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,50 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
import Subtitle from "./Subtitle.astro";
import SortaGood from "@/assets/sortagood.gif";
import EasterEgg from "./EasterEgg.astro";
import ThisIsFine from "@/assets/thisisfine.gif";
import BoxLines from "./BoxLines.astro";
import AboutSneak from "@/assets/about.gif";
const today = new Date().getTime();
const sashaDOB = new Date("2024-08-05").getTime();
const weeksSince = Math.floor((today - sashaDOB) / (1000 * 60 * 60 * 24 * 7));
---

<Section title="about">
<div class="mb-12 mt-4 w-11/12 sm:mb-24 sm:mt-8 md:w-3/5 2xl:w-1/2">
<p class="subtitle-large mb-6 sm:mb-12">A.K.A The 5 to 9.</p>
<div class="mb-12 mt-6 w-11/12 sm:mb-24 sm:mt-12 md:w-3/5 2xl:w-1/2">
<div class="subtitle-large mb-6 inline-block sm:mb-8">
Am an engineer. Am a designer. Am both? Am neither? Definitions are arbitrary.
<EasterEgg src={ThisIsFine.src} height={ThisIsFine.height}>Existential crisis</EasterEgg>
is real. But 9 to 5, I lead and build design infrastructures and tooling.
</div>

<p class="subtitle-large mb-2 inline sm:mb-4">
I rock climb, tinker, and read science fiction (Do you have a recommendation?). I am also
going down an espresso rabbit hole and am attempting latte art. Result: Sucking at it so far.
<p class="subtitle-large mb-2 sm:mb-4">
And 5 to 9. I rock climb, tinker, bake cheesecakes, go down rabbit holes, and read science
fiction. Or rather, I did until my newborn came along {weeksSince} weeks ago.
</p>

<div class="relative mb-8 mt-10 sm:mb-16">
<BoxLines />
<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">
<img src={AboutSneak.src} class="" height={AboutSneak.height} alt="" />
</div>
</div>

<a
class="link relative flex w-fit items-center text-textProminent underline"
href="/nahiyankhan_resume.pdf"
target="_blank"
>
<div class="full justify-left inline-flex items-center">
<Icon
aria-hidden="true"
class="h-8 w-8"
focusable="false"
name="mdi:file-document-outline"
/>
</div>
<p class="pl-4">Resume</p>
</a>
</div>

<Subtitle title="education" />
Expand Down Expand Up @@ -50,11 +84,9 @@ import EasterEgg from "./EasterEgg.astro";
</div>
</div>

<Subtitle title="mantras" />

<div class="mb-8 w-11/12 md:w-3/5 xl:w-1/2">
<div class="mb-2 text-base font-medium sm:text-xl">Work</div>
<Subtitle title="specialty" />

<div class="mb-8 w-11/12 sm:mb-24 md:w-3/5 xl:w-1/2">
<ul class="mb-4 sm:mb-8">
<li class="flex items-center">
<div class="full justify-left flex items-center">
Expand All @@ -65,9 +97,8 @@ import EasterEgg from "./EasterEgg.astro";
name="mdi:circle-small"
/>
</div>
<p class="pl-4">Trust by default</p>
<p class="pl-4">Holistic (design + eng) design system strategy</p>
</li>

<li class="flex items-center">
<div class="full justify-left flex items-center">
<Icon
Expand All @@ -77,9 +108,8 @@ import EasterEgg from "./EasterEgg.astro";
name="mdi:circle-small"
/>
</div>
<p class="pl-4">Work in the open</p>
<p class="pl-4">Setting up design infrastructures</p>
</li>

<li class="flex items-center">
<div class="full justify-left flex items-center">
<Icon
Expand All @@ -89,13 +119,8 @@ import EasterEgg from "./EasterEgg.astro";
name="mdi:circle-small"
/>
</div>
<p class="pl-4">Document it all</p>
<p class="pl-4">Leading cross-domain initiatives</p>
</li>
</ul>

<div class="mb-2 text-base font-medium sm:text-xl">Personal</div>

<ul class="mb-8 sm:mb-40">
<li class="flex items-center">
<div class="full justify-left flex items-center">
<Icon
Expand All @@ -105,13 +130,39 @@ import EasterEgg from "./EasterEgg.astro";
name="mdi:circle-small"
/>
</div>
<div class="inline pl-4">
Sucking at something is the first step to being
<EasterEgg src={SortaGood.src} height={SortaGood.height}> sorta good</EasterEgg>
at something
<p class="pl-4">Fostering cross-discipline relationships</p>
</li>
<li class="flex items-center">
<div class="full justify-left flex items-center">
<Icon
aria-hidden="true"
class="h-4 w-4 sm:h-8 sm:w-8"
focusable="false"
name="mdi:circle-small"
/>
</div>
<p class="pl-4">Mentoring designers and engineers</p>
</li>
<li class="flex items-center">
<div class="full justify-left flex items-center">
<Icon
aria-hidden="true"
class="h-4 w-4 sm:h-8 sm:w-8"
focusable="false"
name="mdi:circle-small"
/>
</div>
<p class="pl-4">Prototyping</p>
</li>
</ul>
</div>

<Subtitle title="mantra" />

<div class="mb-20 w-11/12 sm:mb-40 md:w-3/5 xl:w-1/2">
<div class="mb-2 text-base font-medium sm:text-xl">Work</div>

<ul class="mb-4 sm:mb-8">
<li class="flex items-center">
<div class="full justify-left flex items-center">
<Icon
Expand All @@ -121,9 +172,13 @@ import EasterEgg from "./EasterEgg.astro";
name="mdi:circle-small"
/>
</div>
<p class="pl-4">Don’t let your dreams be dreams (to justify my 3am purchases)</p>
<p class="pl-4">Trust by default. Work in the open. Document it all.</p>
</li>
</ul>

<div class="mb-2 text-base font-medium sm:text-xl">Personal</div>

<ul>
<li class="flex items-center">
<div class="full justify-left flex items-center">
<Icon
Expand All @@ -133,7 +188,11 @@ import EasterEgg from "./EasterEgg.astro";
name="mdi:circle-small"
/>
</div>
<p class="pl-4">Today I am a [insert obsesion of the day] kinda guy</p>
<div class="inline pl-4">
Sucking at something is the first step to being
<EasterEgg src={SortaGood.src} height={SortaGood.height}> sorta good</EasterEgg>
at something
</div>
</li>
</ul>
</div>
Expand Down
49 changes: 12 additions & 37 deletions src/components/Intro.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,19 @@ import EasterEgg from "./EasterEgg.astro";

<div x-data class="nk-transition border-x">
<div class="flex min-h-[50vh] flex-col">
<div class="w-full">
<div class="mb-14 w-full sm:mb-40">
<div
class="[&_svg]:nk-transition relative -mt-[1px] mb-2 flex w-[fit-content] flex-wrap text-textProminent sm:mb-4 [&_svg]:h-14 sm:[&_svg]:h-[5.5rem] md:[&_svg]:h-[6.5rem] lg:[&_svg]:h-36 xl:[&_svg]:h-[11.5rem] 2xl:[&_svg]:h-56"
class="[&_svg]:nk-transition relative -mt-[1px] mb-2 flex w-[fit-content] flex-wrap text-textProminent sm:mb-8 [&_svg]:h-full [&_svg]:w-screen sm:[&_svg]:max-w-screen-sm md:[&_svg]:max-w-screen-md lg:[&_svg]:max-w-screen-lg xl:[&_svg]:max-w-screen-xl 2xl:[&_svg]:max-w-screen-2xl"
x-ref="introNK"
x-init="$store.header.introNKHeight = $refs.introNK.getBoundingClientRect().height"
x-resize="$store.header.introNKHeight = $height"
>
<!-- <div
class="[&_svg]:nk-transition relative -mt-[1px] mb-2 flex w-[fit-content] flex-wrap text-textProminent sm:mb-8 [&_svg]:h-14 sm:[&_svg]:h-[5.5rem] md:[&_svg]:h-[6.5rem] lg:[&_svg]:h-36 xl:[&_svg]:h-[11.5rem] 2xl:[&_svg]:h-56"
x-ref="introNK"
x-init="$store.header.introNKHeight = $refs.introNK.getBoundingClientRect().height"
x-resize="$store.header.introNKHeight = $height"
> -->
<!-- <Fragment set:html={NahiyanKhan} /> -->
<div class="relative mb-2 sm:mb-4 sm:mr-4">
<BoxLines />
Expand All @@ -31,42 +37,11 @@ import EasterEgg from "./EasterEgg.astro";
</div>
</div>
</div>
</div>
<p class="subtitle-large">(na-he-yahn) or khan 🖖🏽</p>

<div class="mb-14 w-11/12 sm:mb-40 lg:w-3/5 xl:w-1/2">
<div class="relative mb-8 mt-10 sm:mb-16">
<BoxLines />
<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">
<img src={AboutSneak.src} class="" height={AboutSneak.height} alt="" />
</div>
</div>

<div class="subtitle-large inline">
Am an engineer. Am a designer. Am both? Am neither? Definitions are arbitrary.
<EasterEgg src={ThisIsFine.src} height={ThisIsFine.height}>Existential crisis</EasterEgg>
is real.
</div>

<p class="subtitle-large my-4 sm:my-6">
But 9 to 5, I lead and build design infrastructures and tooling.
</p>

<a
class="link relative flex w-fit items-center text-textProminent underline"
href="/nahiyankhan_resume.pdf"
target="_blank"
<p
class="subtitle-large animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0"
>
<div class="full justify-left inline-flex items-center">
<Icon
aria-hidden="true"
class="h-8 w-8"
focusable="false"
name="mdi:file-document-outline"
/>
</div>
<p class="pl-4">Resume</p>
</a>
(na-he-yahn) or khan 🖖🏽
</p>
</div>
</div>
</div>
Expand Down
9 changes: 9 additions & 0 deletions src/components/Settings.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@ import { Icon } from "astro-icon/components";
import ThemeToggle from "./ThemeToggle.astro";
---

<settings-backdrop
x-data
x-cloak
class="pointer-events-none fixed inset-0 z-10 bg-black bg-opacity-50 duration-300 ease-[cubic-bezier(0.55,0,1,0.45)]"
:class="{ 'opacity-100': $store.settings.open, 'opacity-0': !$store.settings.open, 'pointer-events-auto': $store.settings.open }"
@click="$store.settings.toggle()"
>
</settings-backdrop>

<settings
x-data
x-cloak
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const year = new Date().getFullYear();
---

<footer
class="h-12 w-full border-b border-t duration-700 ease-[cubic-bezier(0.95,0.05,0.795,0.035)] sm:h-24"
class="nk-transition h-12 w-full border-b border-t sm:h-24"
x-data
x-cloak
:style="$store.settings.open ? { marginLeft: `-320px` } : { marginLeft: `0px` }"
Expand Down
5 changes: 2 additions & 3 deletions src/components/layout/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@ import BoxLines from "../BoxLines.astro";
---

<header
class="nk-transition fixed z-10 h-12 w-full border-y bg-bgColor sm:h-24 [&::after]:absolute [&::after]:bottom-[-1px] [&::after]:left-[100%] [&::after]:h-[1px] [&::after]:w-full [&::after]:bg-divider [&::after]:content-['']"
class="nk-transition fixed z-10 h-12 w-full origin-top-left border-y bg-bgColor sm:h-24"
x-ref="header"
x-data="{ endScroll: false, headerHeight: $refs.header.getBoundingClientRect().height, headerNKHeight: $refs.headerNK.getBoundingClientRect().height, scroll: this.headerHeight }"
x-init="$store.header.headerHeight = $refs.header.getBoundingClientRect().height"
x-resize="headerHeight = $height, $store.header.headerHeight = $refs.header.getBoundingClientRect().height"
@scroll.window="scroll = headerHeight - (window.scrollY*headerNKHeight/$store.header.introNKHeight); endScroll = scroll < 0"
:style="{ transform: $store.settings.open ? `translateX(-320px)` : `translateX(0px)` }"
:style="$store.settings.open ? { transform: `translateX(-320px)` } : { transform: `translateX(0px)` }"
>
<!-- $store.settings.open ? { transform: `translateX(-320px)` } : { transform: `translateX(0px)` } -->
<div
class="nk-transition container mx-auto flex h-full flex-row justify-between overflow-hidden border-x"
>
Expand Down
5 changes: 2 additions & 3 deletions src/layouts/Base.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { siteConfig } from "@/site-config";
import type { SiteMeta } from "@/types";
import { ViewTransitions } from "astro:transitions";
import Settings from "@/components/Settings.astro";
import Lines from "@/components/Lines.astro";
interface Props {
meta: SiteMeta;
Expand All @@ -34,8 +33,8 @@ const {
<main
x-data
id="main"
class="nk-transition min-h-screen w-full pt-12 tracking-wider sm:pt-24"
:style="$store.settings.open && { transform: `translateX(-320px)` }"
class="nk-transition min-h-screen w-full origin-left pt-12 tracking-wider sm:pt-24"
:style="$store.settings.open ? { transform: `translateX(-320px)` } : { transform: `translateX(0px)` }"
>
<div
class="nk-transition container mx-auto flex flex-col"
Expand Down

0 comments on commit 6fe1a1b

Please sign in to comment.