Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iteration #34

Merged
merged 1 commit into from
Oct 7, 2024
Merged

iteration #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion decs.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
declare module "alpinejs-overlap"
declare module "alpinejs-overlap"
declare module '@alpinejs/resize';
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"dependencies": {
"@alpinejs/intersect": "^3.14.1",
"@alpinejs/persist": "^3.14.1",
"@alpinejs/resize": "^3.14.1",
"@astrojs/alpinejs": "^0.4.0",
"@astrojs/check": "^0.9.3",
"@astrojs/mdx": "3.1.7",
Expand Down
Binary file modified public/nahiyankhan_resume.pdf
View file
Open in desktop
Binary file not shown.
10 changes: 10 additions & 0 deletions src/alpine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Alpine } from 'alpinejs'
import persist from '@alpinejs/persist'
import intersect from '@alpinejs/intersect'
import resize from '@alpinejs/resize'

enum MODE {
SYSTEM = "system",
Expand All @@ -18,6 +19,7 @@ interface ThemeStore {
export default (Alpine: Alpine) => {
Alpine.plugin(persist)
Alpine.plugin(intersect)
Alpine.plugin(resize)

Alpine.store('theme', {
mode: Alpine.$persist(MODE.SYSTEM).as("mode") as unknown as MODE,
Expand Down Expand Up @@ -45,4 +47,12 @@ export default (Alpine: Alpine) => {
});
},
} as ThemeStore);

Alpine.store('header', {
headerHeight: 0,
headerNKHeight: 0,
introNKHeight: 0,


})
}
52 changes: 28 additions & 24 deletions src/components/About.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
---

<Section title="about">
<div class="mb-16 flex sm:mb-32 sm:mt-8">
<div class="mb-12 flex sm:mb-20 sm:mt-8">
<div class="sm:w-1/2">
<div class="mb-8 mt-10 sm:mb-16">
<img src={AboutSneak.src} class="" height={AboutSneak.height} alt="" />
</div>

<p class="mb-4 leading-[1.6] sm:mb-8 sm:leading-[1.75]">
<p class="mb-4 leading-[1.6] sm:mb-6 sm:leading-[1.75]">
Am an engineer. Am a designer. Am both? Am neither? Definitions are arbitrary. Existential
crisis is real. But 9 to 5, I lead design system strategy and infrastructure to implement
craft at scale.
</p>

<p class="mb-8 leading-[1.6] sm:mb-8 sm:leading-[1.75]">
<p class="mb-4 leading-[1.6] sm:mb-6 sm:leading-[1.75]">
And 5 to 9, I read science fiction, tinker a bunch, and ocasionally rock climb. I am also
going down an espresso rabbit hole and am attempting latte art. Result: Let's say I won't be
winning any medals. But you know how Jake in Adventure Time says it, sucking at something is
Expand All @@ -44,73 +44,77 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
<p class="pl-4">Download Resume</p>
</a>
</div>

<!-- <div class="relative flex w-1/2 justify-end">
<img src={AboutSneak.src} class="w-4/5" height={AboutSneak.height} alt="" />
</div> -->
</div>

<div class="mb-12 inline-flex text-textProminent sm:mb-24 sm:[&>svg]:h-12">
<div class="mb-12 inline-flex border-t text-textProminent sm:mb-24 [&>svg]:h-5 sm:[&>svg]:h-12">
<Fragment set:html={Education} />
</div>

<div class="mb-2 sm:mb-8 sm:w-1/2">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-16">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-12 sm:[&>svg]:w-16">
<Fragment set:html={JHULogo} />
<div class="mt-3 sm:ml-4 sm:mt-0">
<p class="header-standard">Masters in Computer Science</p>
<p class="text-base font-medium leading-[1.6rem] sm:text-xl">
<p class="font-medium sm:text-xl">
Johns Hopkins University <span class="text-textSubtle"> | 2019 - 2022</span>
</p>
</div>
</div>

<p class="leading-[1.6] sm:leading-[1.75]">
Software Engineering and Enterprise Web Development.
</p>
<p class="">Software Engineering and Enterprise Web Development.</p>
</div>

<div class="mb-12 pt-8 sm:mb-24 sm:w-1/2">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-16">
<div class="mb-12 pt-8 sm:mb-20 sm:w-1/2">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-12 sm:[&>svg]:w-16">
<Fragment set:html={MacalesterLogo} />
<div class="mt-3 sm:ml-4 sm:mt-0">
<p class="header-standard">Bachelor of Arts</p>
<p class="text-base font-medium leading-[1.6] sm:text-xl">
<p class="text-sm font-medium leading-[1.6] sm:text-xl">
Macalester College <span class="text-textSubtle"> | 2009 - 2013</span>
</p>
</div>
</div>

<p class="leading-[1.6] sm:leading-[1.75]">Math Major, Computer Science and Art Minors</p>
<p class="">Math Major, Computer Science and Art Minors</p>
</div>

<div class="mb-12 inline-flex text-textProminent sm:mb-24 sm:[&>svg]:h-12">
<div class="mb-12 inline-flex border-t text-textProminent sm:mb-24 [&>svg]:h-5 sm:[&>svg]:h-12">
<Fragment set:html={Mantras} />
</div>

<ul class="mb-16 sm:mb-24">
<li class="mb-2 flex">
<li class="mb-1 flex items-center sm:mb-2">
<div class="full justify-left flex items-center">
<Icon aria-hidden="true" class="h-8 w-8" focusable="false" name="mdi:blinds-open" />
<Icon
aria-hidden="true"
class="h-4 w-4 sm:h-8 sm:w-8"
focusable="false"
name="mdi:blinds-open"
/>
</div>
<p class="pl-4">Work in the open</p>
</li>

<li class="mb-2 flex">
<li class="mb-1 flex items-center sm:mb-2">
<div class="full justify-left flex items-center">
<Icon
aria-hidden="true"
class="h-8 w-8"
class="h-4 w-4 sm:h-8 sm:w-8"
focusable="false"
name="mdi:file-document-edit-outline"
/>
</div>
<p class="pl-4">Document it all</p>
</li>

<li class="mb-2 flex">
<li class="mb-1 flex items-center sm:mb-2">
<div class="full justify-left flex items-center">
<Icon aria-hidden="true" class="h-8 w-8" focusable="false" name="mdi:handshake-outline" />
<Icon
aria-hidden="true"
class="h-4 w-4 sm:h-8 sm:w-8"
focusable="false"
name="mdi:handshake-outline"
/>
</div>
<p class="pl-4">Trust by default</p>
</li>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Contact.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Section from "./Section.astro";

<Section title="contact">
<div class="mb-12 mt-8 w-1/2">
<p class="mb-8">Say hello. Recommend a science fiction novel. Let's jam on something.</p>
<p class="mb-8">Say hello. Recommend a science fiction novel. Let's jam.</p>
</div>
<div class="mb-24">
<!-- <p class="mb-7 h-[76px] content-end font-mono text-2xl font-extrabold">Say hello at</p> -->
Expand Down
20 changes: 10 additions & 10 deletions src/components/Experiences.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ import { Icon } from "astro-icon/components";
---

<Section title="experiences">
<div class="mb-12 mt-2 sm:mb-24 sm:mt-4 sm:w-1/2">
<div class="mb-4 mt-2 sm:mb-24 sm:mt-4 sm:w-1/2">
<p class="leading-[1.6] sm:leading-[1.75]">A.K.A The things I am more than sorta good at.</p>
</div>

<div class="mb-12 inline-flex text-textProminent sm:mb-24 sm:[&>svg]:h-12">
<div class="mb-12 inline-flex border-t text-textProminent sm:mb-24 sm:[&>svg]:h-12">
<Fragment set:html={Current} />
</div>

<div class="mb-12 sm:mb-20 sm:w-1/2">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-16">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-12 sm:[&>svg]:w-16">
<Fragment set:html={CashAppLogo} />
<div class="mt-3 sm:ml-4 sm:mt-0">
<p class="header-standard">Engineering Lead, Design Systems</p>
Expand All @@ -40,12 +40,12 @@ import { Icon } from "astro-icon/components";
</p>
</div>

<div class="mb-12 inline-flex text-textProminent sm:mb-24 sm:[&>svg]:h-12">
<div class="mb-12 inline-flex border-t text-textProminent sm:mb-24 sm:[&>svg]:h-12">
<Fragment set:html={Past} />
</div>

<div class="mb-12 sm:mb-20 sm:w-1/2">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-16">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-12 sm:[&>svg]:w-16">
<Fragment set:html={ADPLogo} />
<div class="mt-3 sm:ml-4 sm:mt-0">
<p class="header-standard">Lead UX Engineer, Design Systems</p>
Expand All @@ -63,7 +63,7 @@ import { Icon } from "astro-icon/components";
</div>

<div class="mb-12 sm:mb-20 sm:w-1/2">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-16">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-12 sm:[&>svg]:w-16">
<Fragment set:html={PearsonLogo} />
<div class="mt-3 sm:ml-4 sm:mt-0">
<p class="header-standard">Product Designer</p>
Expand All @@ -80,7 +80,7 @@ import { Icon } from "astro-icon/components";
</div>

<div class="mb-12 sm:mb-20 sm:w-1/2">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-16">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row [&>svg]:w-12 sm:[&>svg]:w-16">
<Fragment set:html={MacalesterLogo} />
<div class="mt-3 sm:ml-4 sm:mt-0">
<p class="header-standard">Graphic Designer</p>
Expand All @@ -97,16 +97,16 @@ import { Icon } from "astro-icon/components";
</p>
</div>

<div class="mb-12 inline-flex text-textProminent sm:mb-24 sm:[&>svg]:h-12">
<div class="mb-12 inline-flex border-t text-textProminent sm:mb-24 sm:[&>svg]:h-12">
<Fragment set:html={Community} />
</div>

<div class="mb-12 sm:mb-20 sm:w-1/2">
<div class="mb-2 flex flex-col sm:mb-4 sm:flex-row">
<div class="block dark:hidden [&>svg]:w-16">
<div class="block dark:hidden [&>svg]:w-12 sm:[&>svg]:w-16">
<Fragment set:html={DesignXLogoWhite} />
</div>
<div class="hidden dark:block [&>svg]:w-16">
<div class="hidden dark:block [&>svg]:w-12 sm:[&>svg]:w-16">
<Fragment set:html={DesignXLogoDark} />
</div>
<div class="mt-3 sm:ml-4 sm:mt-0">
Expand Down
9 changes: 7 additions & 2 deletions src/components/Intro.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
import NahiyanKhan from "@/assets/nahiyankhan.svg?raw";
---

<div x-data="{ show: false }" class="w-full border-b transition-all">
<div x-data class="w-full border-b transition-all">
<div class="container flex h-[50vh] flex-col overflow-hidden border-x sm:mx-auto sm:h-[80vh]">
<div class="mb-2 text-textProminent sm:mb-4 [&>svg]:h-[100px]">
<div
class="mb-2 text-textProminent sm:mb-4 [&>svg]:h-7 sm:[&>svg]:h-24"
x-ref="introNK"
x-init="$store.header.introNKHeight = $refs.introNK.getBoundingClientRect().height"
x-resize="$store.header.introNKHeight = $height"
>
<Fragment set:html={NahiyanKhan} />
</div>
<p class="subtitle-large">(na-he-yahn)</p>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Section.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Contact from "@/assets/contact.svg?raw";
<!-- <h2 class="redact section-title relative" :class="{ 'redact-show': show }">
/{title}
</h2> -->
<div class="relative text-textProminent sm:[&>svg]:h-[100px]">
<div class="relative text-textProminent [&>svg]:h-7 sm:[&>svg]:h-24">
<Fragment
set:html={title === "about"
? About
Expand Down
8 changes: 4 additions & 4 deletions src/components/ThemeToggle.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<theme-toggle class="flex w-11 items-center justify-center">
<theme-toggle class="flex w-7 justify-center">
<button
class="relative h-11 w-11 text-textProminent"
class="relative h-7 w-7 text-textProminent"
type="button"
x-data
@click="$store.theme.toggleMode()"
>
<span class="sr-only">Dark Theme</span>
<svg
aria-hidden="true"
class="absolute start-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 opacity-100 duration-0 dark:opacity-0 sm:h-7 sm:w-7"
class="absolute start-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 opacity-100 duration-0 dark:opacity-0 sm:h-6 sm:w-6"
fill="none"
focusable="false"
id="sun-svg"
Expand Down Expand Up @@ -39,7 +39,7 @@
</svg>
<svg
aria-hidden="true"
class="absolute start-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 opacity-0 duration-0 dark:opacity-100 sm:h-7 sm:w-7"
class="absolute start-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 opacity-0 duration-0 dark:opacity-100 sm:h-6 sm:w-6"
fill="none"
focusable="false"
id="moon-svg"
Expand Down
23 changes: 15 additions & 8 deletions src/components/layout/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,30 @@ import NahiyanKhan from "@/assets/nahiyankhan.svg?raw";
---

<header
id="main-header"
class="fixed z-10 h-16 w-full overflow-hidden border-y bg-bgColor transition-colors duration-300 sm:h-24"
x-data="{ endScroll: false, scroll: 59 }"
@scroll.window="scroll = 59 - (window.scrollY*24/100); endScroll = window.scrollY >= (100 + 35/(24/100))"
class="fixed z-10 h-12 w-full overflow-hidden border-y bg-bgColor transition-colors duration-300 sm:h-24"
x-ref="header"
x-data="{ endScroll: false, headerHeight: $refs.header.getBoundingClientRect().height, headerNKHeight: $refs.headerNK.getBoundingClientRect().height, scroll: this.headerHeight }"
x-resize="headerHeight = $height"
@scroll.window="scroll = headerHeight - (window.scrollY*headerNKHeight/$store.header.introNKHeight); endScroll = window.scrollY >= (headerHeight + (headerHeight - headerNKHeight)/(headerNKHeight/$store.header.introNKHeight))"
>
<div class="container mx-auto flex h-full flex-row justify-between border-x">
<div
class="flex h-full items-center"
:class="{ 'translate-y-[59px]': !endScroll, 'translate-y-0': endScroll }"
class="h-full"
:class="{ 'translate-y-[100%]': !endScroll, 'translate-y-0': endScroll }"
:style="!endScroll && { transform: `translateY(${scroll}px)` }"
x-cloak
>
<div class="relative text-textProminent [&>svg]:h-6">
<div
class="relative text-textProminent [&>svg]:h-4 sm:[&>svg]:h-6"
x-ref="headerNK"
x-resize="headerNKHeight = $height"
>
<Fragment set:html={NahiyanKhan} />
</div>
</div>
<ThemeToggle />
<div x-cloak>
<ThemeToggle />
</div>
</div>

<style>
Expand Down
7 changes: 2 additions & 5 deletions src/layouts/Base.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,11 @@ const {
<BaseHead articleDate={articleDate} description={description} ogImage={ogImage} title={title} />
<ViewTransitions />
</head>
<body class="bg-bgColor transition-colors duration-300">
<body class="bg-bgColor text-sm transition-colors duration-300 sm:text-base sm:leading-[1.75]">
<ThemeProvider />
<SkipLink />
<Header />
<main
id="main"
class="text-normal flex grid min-h-screen flex-row px-0 pt-16 leading-8 tracking-wider sm:pt-24"
>
<main id="main" class="flex grid min-h-screen flex-row px-0 pt-12 tracking-wider sm:pt-24">
<slot />
</main>
<Footer />
Expand Down
4 changes: 0 additions & 4 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,4 @@
* {
@apply border-borderDivider;
}

.redact-hover:hover .redact::after {
@apply scale-x-100
}
}
4 changes: 2 additions & 2 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default {
plugin(({ addComponents }) => {
addComponents({
".header-standard": {
"@apply text-xl sm:text-2xl leading-9 font-semibold text-textProminent tracking-tight": {},
"@apply text-xl sm:text-2xl leading-6 sm:leading-9 font-semibold text-textProminent tracking-tight": {},
},
".subtitle-large": {
"@apply text-base sm:text-xl leading-8 sm:leading-10 font-normal text-textStandard tracking-wider": {},
Expand Down Expand Up @@ -93,7 +93,7 @@ export default {
},
fontFamily: {
// Add any custom fonts here
sans: ['JetBrains Mono Variable',...fontFamily.sans],
sans: ['Inter Variable',...fontFamily.sans],
mono: ['Rubik Mono One',...fontFamily.mono]
},
keyframes: {
Expand Down
Loading