From 04deacd323e5404423aef856908a0e925cedefbb Mon Sep 17 00:00:00 2001 From: Nahiyan Khan Date: Fri, 4 Oct 2024 07:49:21 -0400 Subject: [PATCH] Iteration (#25) (#26) --- package.json | 1 + src/components/About.astro | 101 +++++++++ .../{SocialList.astro => Contact.astro} | 21 +- src/components/Education.astro | 44 ---- src/components/Experiences.astro | 202 +++++++----------- src/components/Intro.astro | 2 +- src/components/Section.astro | 20 ++ src/components/SectionTitle.astro | 29 --- src/components/ThemeToggle.astro | 8 +- src/components/layout/Header.astro | 4 +- src/layouts/Base.astro | 1 + src/pages/index.astro | 55 +---- src/styles/global.css | 4 + tailwind.config.ts | 18 +- 14 files changed, 251 insertions(+), 259 deletions(-) create mode 100644 src/components/About.astro rename src/components/{SocialList.astro => Contact.astro} (56%) delete mode 100644 src/components/Education.astro create mode 100644 src/components/Section.astro delete mode 100644 src/components/SectionTitle.astro diff --git a/package.json b/package.json index 0ffdb9f..135e00a 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@astrojs/sitemap": "3.1.6", "@astrojs/tailwind": "5.1.0", "@fontsource-variable/inter": "^5.1.0", + "@fontsource-variable/jetbrains-mono": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.0.14", "@fontsource/rubik-mono-one": "^5.1.0", "alpinejs": "^3.14.1", diff --git a/src/components/About.astro b/src/components/About.astro new file mode 100644 index 0000000..e2fa11d --- /dev/null +++ b/src/components/About.astro @@ -0,0 +1,101 @@ +--- +import { Icon } from "astro-icon/components"; +import Section from "./Section.astro"; +import CashAppLogo from "@/assets/cash_app.svg?raw"; +--- + +
+
+

+ Am an engineer. Am a designer. Am both? Am neither? Definitions are arbitrary. Existential + crisis is real. But 9 to 5, I lead design systems strategy and infrastructure to implement + craft at scale. +

+ +

+ 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: Sucking at it so far. + But you know how Jake from Adventure Time says it, sucking at something is the first step to + being sorta good at something. +

+ + +
+
+

Download Resume

+ +
+ +
+

#Education

+
+ +
+
+ +
+

Masters in Computer Science

+

+ Johns Hopkins University | 2019 - 2022 +

+
+
+ +
+

Software Engineering and Enterprise Web Development.

+
+
+ +
+
+ +
+

Bachelor of Arts

+

+ Macalester College | 2009 - 2013 +

+
+
+ +
+

Math Major, Computer Science and Art Minors

+
+
+ +
+

#Mantras

+
+ + +
diff --git a/src/components/SocialList.astro b/src/components/Contact.astro similarity index 56% rename from src/components/SocialList.astro rename to src/components/Contact.astro index 40dd128..4fcb02b 100644 --- a/src/components/SocialList.astro +++ b/src/components/Contact.astro @@ -1,28 +1,35 @@ --- -import { Icon } from "astro-icon/components"; import { socialLinks } from "@/site-config"; +import { Icon } from "astro-icon/components"; +import Section from "./Section.astro"; --- -
-
+
+
+

+ Say hello. Recommend a science fiction book. Let's go rock climbing. Let's work on something + together. +

+
+
-
+ diff --git a/src/components/Education.astro b/src/components/Education.astro deleted file mode 100644 index fe07f13..0000000 --- a/src/components/Education.astro +++ /dev/null @@ -1,44 +0,0 @@ ---- -import CashAppLogo from "@/assets/cash_app.svg?raw"; ---- - -
-
-
-
- -
-

Masters in Computer Science

-

- Johns Hopkins University | 2019 - 2022 -

-
-
- -
-

- Software Engineering and Enterprise Web Development. -

-
-
- -
-
- -
-

Bachelor of Arts

-

- Macalester College | 2009 - 2013 -

-
-
- -
-

Math Major, Computer Science and Art Minors

-
-
-
-
diff --git a/src/components/Experiences.astro b/src/components/Experiences.astro index 0a8c375..421f390 100644 --- a/src/components/Experiences.astro +++ b/src/components/Experiences.astro @@ -2,149 +2,107 @@ import CashAppLogo from "@/assets/cash_app.svg?raw"; import ADPLogo from "@/assets/adp.svg?raw"; import PearsonLogo from "@/assets/pearson.svg?raw"; +import Section from "./Section.astro"; --- -
-
- - -
- -

#Current

-
- -
- +
+
+

+ A.K.A The friends I've made along the way in the places I've been and the things I've done. +

+
-
-
- -
-

Engineering Lead, Design Systems

-

- Cash App | April 2022 - Current -

-
-
+
+

#Current

+
-
-

- Brought design's high bar of craft to code and stood up Cash App's design system - function. Set up cross-platform design infrastructures, brought parity between design - and code vernacular, evangelized modular development, and supported 40+ components being - built and tested. Kicked off migration efforts to adopt the new system across 145+ flows - which cover 85% of app traffic. -

-
+
+
+ +
+

Engineering Lead, Design Systems

+

+ Cash App | April 2022 - Current +

- - -
- -

#Past

+
+

+ Brought design's high bar of craft to code and stood up Cash App's design system function. + Set up cross-platform design infrastructures, brought parity between design and code + vernacular, evangelized modular development, and supported 40+ components being built and + tested. Kicked off migration efforts to adopt the new system across 145+ flows covering 85% + of app traffic. +

+
-
-
-
- -
-

Lead UX Engineer, Design Systems

-

- ADP | March 2018 - April 2022 -

-
-
+
+

#Past

+
-
-

- Helped overhaul the design system of ADP's next generation suite of HR tools and built - and launched a custom responsive design system documentation site with fuzzy search, - demos, and content graphs. -

-
+
+
+ +
+

Lead UX Engineer, Design Systems

+

+ ADP | March 2018 - April 2022 +

-
-
-
- -
-

Product Designer

-

- Pearson | May 2013 - March 2018 -

-
-
+
+

+ Helped overhaul the design system of ADP's next generation suite of HR tools and built and + launched a custom responsive design system documentation site with fuzzy search, demos, and + content graphs. +

+
+
-
-

- Functioned as a code-first product designer and specialized in authoring the - front-of-the-front-end of Pearson's certifications focused tooling. -

-
+
+
+ +
+

Product Designer

+

+ Pearson | May 2013 - March 2018 +

- - -
- -

#Other

+
+

+ Functioned as a code-first product designer and specialized in authoring the + front-of-the-front-end of Pearson's certifications focused tooling. +

+
-
-
-
- -
-

Graphic Designer

-

- Macalester College - | September 2010 - May 2013 -

-
-
+ -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor - incididunt. -

-
+
+

#Other

+
+ +
+
+ +
+

Graphic Designer

+

+ Macalester College + | September 2010 - May 2013 +

- +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt. +

+
-
+
diff --git a/src/components/Intro.astro b/src/components/Intro.astro index 5a97908..1ff69db 100644 --- a/src/components/Intro.astro +++ b/src/components/Intro.astro @@ -1,7 +1,7 @@

+
+
+ / +

+ {title} +

+
+ +
+

diff --git a/src/components/SectionTitle.astro b/src/components/SectionTitle.astro deleted file mode 100644 index bde5ec7..0000000 --- a/src/components/SectionTitle.astro +++ /dev/null @@ -1,29 +0,0 @@ ---- -import About from "@/assets/about_chunky.svg?raw"; -import Experience from "@/assets/experience_chunky.svg?raw"; -import Projects from "@/assets/projects_chunky.svg?raw"; -import Contact from "@/assets/contact_chunky.svg?raw"; - -const { title, subtitle, ...rest } = Astro.props; ---- - -
-
- {subtitle &&
} - -
- - / - -

- {title} -

-
- -
-
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro index 0470aca..e9e4890 100644 --- a/src/components/ThemeToggle.astro +++ b/src/components/ThemeToggle.astro @@ -1,6 +1,6 @@ - +
-
+
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index c0f0ddd..3cdb7b4 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -1,5 +1,6 @@ --- import "@fontsource-variable/inter"; +import "@fontsource-variable/jetbrains-mono"; import "@fontsource/rubik-mono-one"; import BaseHead from "@/components/BaseHead.astro"; import SkipLink from "@/components/SkipLink.astro"; diff --git a/src/pages/index.astro b/src/pages/index.astro index c600baf..9adb5e1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,57 +2,24 @@ import Intro from "@/components/Intro.astro"; import Experiences from "@/components/Experiences.astro"; import PageLayout from "@/layouts/Base.astro"; -import SocialList from "@/components/SocialList.astro"; -import SectionTitle from "@/components/SectionTitle.astro"; -import Education from "@/components/Education.astro"; +import Section from "@/components/Section.astro"; +import About from "@/components/About.astro"; +import Contact from "@/components/Contact.astro"; --- - - -
-

- Am an engineer. Am a designer. Am both? Am neither? Definitions are arbitrary. Existential - crisis is real. But 9 to 5, I lead design systems strategy and infrastructure to implement - craft at scale. -

- -

- 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: Sucking at it so - far. But you know how Jake from Adventure Time says it, sucking at something is the first - step to being sorta good at something. -

- -

- - Download Resume - -

-
- - - -
-

- A.K.A The friends I've made along the way in the places I've been and the things I've done. -

-
- - + - - - -
-

- Say hello. Recommend a science fiction book. Let's go rock climbing. Let's work on something - together. +

+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad, alias, iste ex, quas nesciunt + reiciendis accusamus nam nemo consectetur.

- +
- + diff --git a/src/styles/global.css b/src/styles/global.css index 71e382d..4d8f135 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -49,4 +49,8 @@ * { @apply border-borderDivider; } + + .redact-hover:hover .redact::after { + @apply scale-x-100 + } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 7742ff2..085caf7 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -47,14 +47,20 @@ export default { ".column-right": { "@apply border-borderDivider": {}, }, + ".redact": { + "&::after": { + "@apply content-[''] absolute left-[-8px] w-[calc(100%+16px)] bg-white h-[calc(100%+8px)] top-[-4px] mix-blend-difference origin-left scale-x-0 duration-300 ease-out bg-[repeating-linear-gradient(transparent,_transparent_3px,_#00000054_4px)]": {}, + }, + }, + ".link": { + "@apply redact": {}, + "&:hover::after": { + "@apply scale-x-100": {}, + }, + }, ".section-tracker": { "@apply text-base sm:text-3xl font-bold transition-all text-textSubtle absolute sm:left-14": {}, }, - ".title-clip": { - clipPath: `path("M82 0.5L0.5 183H1841.5V0.5H82Z")`, - marginLeft: "-1ch", - paddingLeft: "1ch", - }, }); }), ], @@ -76,7 +82,7 @@ export default { }, fontFamily: { // Add any custom fonts here - sans: ['Inter Variable',...fontFamily.sans], + sans: ['JetBrains Mono Variable',...fontFamily.sans], mono: ['Rubik Mono One',...fontFamily.mono] }, keyframes: {