diff --git a/index.html b/index.html index e88981a..03197b2 100644 --- a/index.html +++ b/index.html @@ -4,132 +4,488 @@ - Devyani Jain — Product Designer - + Golden Github Seeds — Devyani Jain + + + - - - - - - - - - - - - - + - + -
-
-

Devyani Jain

-

- I'm Devyani Jain, a mission-driven product designer who is chasing after - the magic to connect people in physical and digital spaces. - Currently, at GitHub designing to get rid of - AI slop and multiply developer powers. -

- - -
- - Scroll - - -
- -
-
-

Selected Work

- -
-
-

Lucid Motors — Design System

-

- Product Designer - - 2024 -

-
-

- Lucid Motors' Electric Integration ecosystem spans 25+ applications - (OTA updates, Infotainment, ADAS) supported by six teams and 300+ - engineers. The goal was to define a shared experience between - data-heavy applications across teams with varying functionality and - interaction models. Over 12 weeks, I delivered a unified design system - and developer tools for three teams. Valued at ~$140K and hosted on - Storybook for the first time, the system now enables engineers to - build faster and more consistently. It directly supported Lucid Motors - during a period of rapid growth — 45% revenue increase that quarter, - followed by 65% the next. -

-
- -
-
-

Lenskart × DIVINE Collection

-

- Creative Design Intern - - 2023 -

-
-

- Lenskart, Asia's largest eyewear retailer, partnered with DIVINE, an - Indian rapper with over 5.2 million listeners, to bring a hip-hop - eyewear collection to life. I joined the design team focused on concept - direction across e-commerce and in-store creative. Our goal was to - combine Indian street hip-hop culture with youth-centric eyewear. -

-
- -
-
-

VisionTranslate

-

- Design Lead - - 2023 -

-
-

- VisionTranslate is a mixed-reality (MR) app built native to Apple - VisionOS that translates real-time sign-language, text, and speech. - People who are hard-of-hearing face undesirable experiences when - communicating with another individual. So, we set out to answer, "Can - we create a system to fluently connect sign-language communication - better?" VisionTranslate is now on the App Store. I designed the - end-to-end user experience and co-led the development. I conducted user - research, created accessible mockups, and defined spatial wireframes, - eventually giving life to our mission. + +

+ + +
+ + +
+
+

Golden Github Seeds

+

+ A garden of hubbers, I had the joy of working and connecting with + while I worked here. Each dot is someone who left a mark on my + experience here.

-
+ +
+ + + +
+ + + + +
- - + + + + + diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..1f53798 --- /dev/null +++ b/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/style.css b/style.css index 3cdc4dd..9b5b21c 100644 --- a/style.css +++ b/style.css @@ -1,336 +1,431 @@ -/* ------------------------------------------------------------------ * - * Devyani Jain — portfolio - * Original design. Minimal, typographic, in the spirit of clean - * single-page designer sites. - * ------------------------------------------------------------------ */ - +/* ==================================================================== + DESIGN TOKENS + ==================================================================== */ :root { - /* Color */ - --color-bg: #f7f6f3; - --color-text: #17161a; - --color-muted: #6b6a72; - --color-line: #e2e0da; - --color-accent: #17161a; - - /* Type */ - --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", - Helvetica, Arial, sans-serif; - - /* Spacing scale */ - --space-1: 0.5rem; - --space-2: 1rem; - --space-3: 1.5rem; - --space-4: 2.5rem; - --space-5: 4rem; - --space-6: 6rem; - --space-7: 9rem; - - /* Layout */ - --wrap-max: 1080px; - --wrap-pad: clamp(1.25rem, 5vw, 4rem); - - /* Motion */ + /* Foreground */ + --fg-default: #FCFCFC; + --fg-default-muted: #D4D4D4; + + /* Foreground accent (dull) — used for default dot fills */ + --fg-red-dull: #620101; + --fg-yellow-dull: #413803; + --fg-blue-dull: #013B3C; /* teal/blue group */ + --fg-green-dull: #043710; + --fg-purple-dull: #31044B; + + /* Background */ + --bg-primary: #000000; + --bg-secondary: #1F1F1F; + --bg-tertiary: #3D3D3D; + + /* Typography */ + --font-heading: 'Space Mono', 'Courier New', monospace; + --font-body: 'Space Grotesk', system-ui, sans-serif; + + /* Font scale */ + --fs-h1: 28px; + --fs-h2: 24px; + --fs-h3: 20px; + --fs-p1: 18px; + --fs-p2: 16px; + --fs-p3: 14px; + --fs-caption: 12px; + + /* Spacing (padding tokens) */ + --padding-sm: 8px; + --padding-md: 16px; + --padding-lg: 24px; + + /* Radii */ + --radii-sm: 4px; + --radii-md: 12px; + + /* Dot */ + --dot-size: 28px; + + /* Panel */ + --panel-w: clamp(340px, 38vw, 520px); + + /* Animation */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } -/* ----------------------------- Reset ------------------------------ */ - -*, -*::before, -*::after { - box-sizing: border-box; -} +/* ==================================================================== + RESET + ==================================================================== */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { - scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { - margin: 0; - background-color: var(--color-bg); - color: var(--color-text); - font-family: var(--font-sans); - font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); - line-height: 1.6; - font-weight: 400; - letter-spacing: -0.01em; - -webkit-font-smoothing: antialiased; + background: var(--bg-primary); + color: var(--fg-default); + font-family: var(--font-body); + font-size: var(--fs-p2); + line-height: 1.5; + min-height: 100vh; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -h1, -h2, -h3, -p { - margin: 0; +button { font-family: inherit; cursor: pointer; } + +/* ==================================================================== + TYPOGRAPHY UTILITY CLASSES + ==================================================================== */ +.h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h1); line-height: 1.15; color: var(--fg-default); } +.h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2; color: var(--fg-default); } +.h3 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; color: var(--fg-default); } +.p1 { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-p1); color: var(--fg-default); } +.p2 { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-p2); color: var(--fg-default); } +.p3 { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-p3); color: var(--fg-default); } +.caption { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); color: var(--fg-default-muted); } + +/* ==================================================================== + HOME LAYOUT — three rows that together fill 100vh + ==================================================================== */ +.home { + display: flex; + flex-direction: column; + min-height: 100vh; } -a { - color: inherit; - text-decoration: none; +/* ── Dot fields (40vh each) ── */ +.dot-field { + position: relative; + flex: none; + height: 40vh; + background: var(--bg-primary); + overflow: hidden; } -.wrap { - width: 100%; - max-width: var(--wrap-max); - margin-inline: auto; - padding-inline: var(--wrap-pad); +/* ── Middle content (20vh) ── */ +.middle-content { + flex: none; + height: 20vh; + display: flex; + align-items: center; + background: transparent; + padding: 0 var(--padding-lg); + z-index: 1; } -/* ------------------------------ Hero ------------------------------ */ - -.hero { - position: relative; - min-height: 100vh; - min-height: 100svh; - display: flex; +.middle-content__inner { + display: flex; flex-direction: column; + gap: var(--padding-md); + max-width: 500px; +} + +.middle-content__desc { + color: var(--fg-default-muted); + font-size: var(--fs-p1); + line-height: 1.55; +} + +/* ==================================================================== + DOTS + ==================================================================== */ +.dot { + position: absolute; + width: var(--dot-size); + height: var(--dot-size); + border-radius: 50%; + border: none; + transform: translate(-50%, -50%); + transition: box-shadow 0.25s var(--ease); + /* position set via inline style (left/top %) */ +} + +/* Default (dull) fills — no interaction */ +.dot--yellow { background: var(--fg-yellow-dull); pointer-events: none; } +.dot--teal { background: var(--fg-blue-dull); pointer-events: none; } +.dot--green { background: var(--fg-green-dull); pointer-events: none; } +.dot--red { background: var(--fg-red-dull); pointer-events: none; } +.dot--purple { background: var(--fg-purple-dull); pointer-events: none; } + +/* Submitted — bright gradient + glow, interactive */ +.dot--submitted.dot--yellow { + background: radial-gradient(circle at 35% 35%, #D4A017, #7A5C00); + box-shadow: 0 0 14px 5px rgba(212,160,23,0.45); + pointer-events: auto; +} +.dot--submitted.dot--teal { + background: radial-gradient(circle at 35% 35%, #00CCCF, #005557); + box-shadow: 0 0 14px 5px rgba(0,204,207,0.45); + pointer-events: auto; +} +.dot--submitted.dot--green { + background: radial-gradient(circle at 35% 35%, #2DBD6A, #0A5C2A); + box-shadow: 0 0 14px 5px rgba(45,189,106,0.4); + pointer-events: auto; +} +.dot--submitted.dot--red { + background: radial-gradient(circle at 35% 35%, #FF4B4B, #8C0000); + box-shadow: 0 0 14px 5px rgba(255,75,75,0.45); + pointer-events: auto; +} +.dot--submitted.dot--purple { + background: radial-gradient(circle at 35% 35%, #B55FFF, #52007A); + box-shadow: 0 0 14px 5px rgba(181,95,255,0.45); + pointer-events: auto; +} + +.dot--submitted:hover, +.dot--submitted:focus-visible { + box-shadow: 0 0 22px 8px rgba(255,255,255,0.18); + outline: none; +} + +/* ==================================================================== + BUTTONS + ==================================================================== */ +.btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 9px 18px; + border-radius: var(--radii-sm); + font-family: var(--font-heading); + font-weight: 700; + font-size: var(--fs-p3); + line-height: 1; + transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); + border: 2px solid transparent; +} + +.btn--primary { + background: var(--bg-tertiary); + color: var(--fg-default); + border-color: var(--bg-tertiary); +} +.btn--primary:hover { background: #4d4d4d; border-color: #4d4d4d; } + +.btn--secondary { + background: transparent; + color: var(--fg-default); + border-color: transparent; +} +.btn--secondary:hover { color: var(--fg-default-muted); } + +/* Outlined — used for "Log some words" CTA */ +.btn--outlined { + background: transparent; + color: var(--fg-default); + border-color: var(--bg-tertiary); +} +.btn--outlined:hover { background: var(--bg-secondary); border-color: var(--fg-default-muted); } + +/* Icon button */ +.icon-btn { + display: inline-flex; + align-items: center; justify-content: center; - padding-block: var(--space-6) var(--space-7); -} - -.eyebrow { - font-size: 0.8125rem; - font-weight: 500; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--color-muted); - margin-bottom: var(--space-4); -} - -.hero__title { - font-size: clamp(1.75rem, 1.1rem + 3.4vw, 3.75rem); - line-height: 1.14; - font-weight: 600; - letter-spacing: -0.03em; - max-width: 20ch; -} - -.hero__muted { - color: var(--color-muted); + background: transparent; + border: none; + color: var(--fg-default); + padding: 4px; + border-radius: var(--radii-sm); + transition: color 0.2s, opacity 0.2s; +} +.icon-btn:hover { color: var(--fg-default-muted); } + +/* ==================================================================== + FEEDBACK PANEL + ==================================================================== */ +.feedback-panel { + position: fixed; + top: var(--padding-lg); + right: var(--padding-lg); + width: var(--panel-w); + max-height: calc(100vh - var(--padding-lg) * 2); + display: flex; + align-items: flex-start; + z-index: 200; + /* hidden off-screen by default */ + transform: translateX(calc(100% + var(--padding-lg))); + transition: transform 0.35s var(--ease); + pointer-events: none; +} + +.feedback-panel.is-open { + transform: translateX(0); + pointer-events: all; +} + +/* ==================================================================== + FEEDBACK BOX (shared shell) + ==================================================================== */ +.feedback-box { + width: 100%; + max-height: calc(100vh - var(--padding-lg) * 2); + background: var(--bg-secondary); + border: 4px solid var(--bg-tertiary); + border-radius: var(--radii-md); + display: flex; + flex-direction: column; + overflow: hidden; } -/* --------------------------- Contact bar -------------------------- */ - -.contact { - display: flex; - flex-wrap: wrap; +/* ── Action Bar ── */ +.actionBar { + flex: none; + display: flex; align-items: center; - gap: var(--space-2); - margin-top: var(--space-5); - font-size: 1rem; -} - -.contact__dot { - color: var(--color-muted); -} - -.contact__link { - position: relative; - font-weight: 500; - color: var(--color-text); - transition: color 0.25s var(--ease); + justify-content: space-between; + padding: var(--padding-sm) var(--padding-md); } -.contact__link::after { - content: ""; - position: absolute; - left: 0; - bottom: -2px; - width: 100%; - height: 1px; - background-color: currentColor; - transform: scaleX(0); - transform-origin: left; - transition: transform 0.3s var(--ease); +.actionBar--bordered { + border-bottom: 2px solid var(--bg-tertiary); } -.contact__link:hover, -.contact__link:focus-visible { - color: var(--color-accent); -} +.actionBar--end { justify-content: flex-end; } -.contact__link:hover::after, -.contact__link:focus-visible::after { - transform: scaleX(1); +/* ── Content Bar ── */ +.contentBar { + flex: 1; + overflow-y: auto; + padding: var(--padding-md); + display: flex; + flex-direction: column; + gap: var(--padding-md); + scrollbar-width: thin; + scrollbar-color: var(--bg-tertiary) transparent; } -/* --------------------------- Scroll hint -------------------------- */ +.contentBar::-webkit-scrollbar { width: 4px; } +.contentBar::-webkit-scrollbar-track { background: transparent; } +.contentBar::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 2px; } -.scroll-hint { - position: absolute; - left: var(--wrap-pad); - bottom: var(--space-4); - display: inline-flex; +/* ── Footer Bar ── */ +.footerBar { + flex: none; + display: flex; align-items: center; - gap: var(--space-1); - font-size: 0.8125rem; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--color-muted); - transition: color 0.25s var(--ease); -} - -.scroll-hint:hover, -.scroll-hint:focus-visible { - color: var(--color-text); -} - -.scroll-hint__arrow { - display: inline-block; - animation: bob 1.8s var(--ease) infinite; + padding: var(--padding-sm) var(--padding-md); } -@keyframes bob { - 0%, - 100% { - transform: translateY(0); - } - 50% { - transform: translateY(4px); - } -} +.footerBar--end { justify-content: flex-end; } +.footerBar--between { justify-content: space-between; } +.footerBar--gap { gap: 4px; } -/* ------------------------------ Work ------------------------------ */ - -.work { - padding-block: var(--space-6); - border-top: 1px solid var(--color-line); -} - -.section-label { - font-size: 0.8125rem; - font-weight: 500; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--color-muted); - margin-bottom: var(--space-5); -} - -.project { - padding-block: var(--space-5); - border-top: 1px solid var(--color-line); -} - -.project:first-of-type { - border-top: none; - padding-top: 0; +/* ── Scroll hint ── */ +.scroll-hint { + text-align: right; + padding: 0 var(--padding-md) 4px; + cursor: pointer; + user-select: none; + color: var(--fg-default-muted); + letter-spacing: 0.04em; + flex: none; +} +.scroll-hint:hover { color: var(--fg-default); } + +/* ==================================================================== + FORM ELEMENTS (Edit variant) + ==================================================================== */ +.form-group { + display: flex; + flex-direction: column; + gap: 4px; } -.project__head { - display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-between; - gap: var(--space-2); - margin-bottom: var(--space-3); -} +.form-label { color: var(--fg-default); } +.form-hint { color: var(--fg-default-muted); font-size: var(--fs-caption); font-family: var(--font-body); } -.project__title { - font-size: clamp(1.5rem, 1.05rem + 2vw, 2.5rem); - font-weight: 600; - letter-spacing: -0.025em; - line-height: 1.15; +.form-input, +.form-select, +.form-textarea { + background: var(--bg-tertiary); + border: 1.5px solid var(--bg-tertiary); + border-radius: var(--radii-sm); + color: var(--fg-default); + font-family: var(--font-body); + font-size: var(--fs-p3); + padding: 7px 10px; + outline: none; + transition: border-color 0.2s; + /* short inputs match the image width */ + width: min(180px, 55%); } -.project__meta { - display: inline-flex; - align-items: center; - gap: var(--space-1); - font-size: 0.9375rem; - color: var(--color-muted); - white-space: nowrap; +.form-textarea { + width: 100%; + resize: vertical; + min-height: 100px; } -.project__dot { - opacity: 0.7; +.form-input:focus, +.form-select:focus, +.form-textarea:focus { + border-color: var(--fg-default-muted); } -.project__desc { - max-width: 68ch; - color: var(--color-muted); - font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1875rem); +.form-select { + cursor: pointer; + -webkit-appearance: none; + appearance: none; } -/* ----------------------------- Footer ----------------------------- */ - -.footer { - padding-block: var(--space-5); - border-top: 1px solid var(--color-line); +.form-private { + color: var(--fg-default-muted); + font-size: var(--fs-caption); + font-family: var(--font-body); + margin-top: var(--padding-sm); } -.footer__inner { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: var(--space-3); -} - -.footer__name { - font-weight: 600; - letter-spacing: -0.02em; +/* ==================================================================== + VIEW VARIANT + ==================================================================== */ +.view-field { + display: flex; + flex-direction: column; + gap: 6px; } -.contact--footer { - margin-top: 0; -} +.view-label { color: var(--fg-default); } +.view-value { color: var(--fg-default-muted); font-size: var(--fs-p1); line-height: 1.55; } -.footer__top { - font-size: 0.9375rem; - color: var(--color-muted); - transition: color 0.25s var(--ease); +/* ==================================================================== + CONFIRMATION VARIANT + ==================================================================== */ +.confirm-desc { + color: var(--fg-default-muted); + line-height: 1.6; } -.footer__top:hover, -.footer__top:focus-visible { - color: var(--color-text); -} +/* ==================================================================== + RESPONSIVE + ==================================================================== */ +@media (max-width: 860px) { + /* Stack panel to bottom sheet on narrow screens */ + .feedback-panel { + top: auto; + right: 0; + bottom: 0; + left: 0; + width: 100%; + max-height: 88vh; + padding: var(--padding-md); + transform: translateY(100%); + align-items: flex-end; + } -/* --------------------------- Fade-in ------------------------------ * - * Content is visible by default. When scroll-driven animations are - * supported, projects fade + rise into view as they enter the - * viewport. Fully progressive — never hides content permanently. - * ------------------------------------------------------------------ */ + .feedback-panel.is-open { transform: translateY(0); } -@media (prefers-reduced-motion: no-preference) { - @supports (animation-timeline: view()) { - .fade-in { - animation: fade-rise linear both; - animation-timeline: view(); - animation-range: entry 0% cover 22%; - } - } -} + .middle-content { padding: 0 var(--padding-md); } -@keyframes fade-rise { - from { - opacity: 0; - transform: translateY(28px); - } - to { - opacity: 1; - transform: translateY(0); - } + .middle-content__inner { max-width: 100%; } } -/* --------------------------- Responsive --------------------------- */ +@media (max-width: 480px) { + :root { --dot-size: 22px; } -@media (max-width: 600px) { - .project__head { - flex-direction: column; - gap: var(--space-1); - } + .h1 { font-size: 22px; } - .footer__inner { - flex-direction: column; - align-items: flex-start; - } -} - -@media (min-width: 900px) { - .hero__title { - max-width: 22ch; - } + .middle-content { height: auto; min-height: 20vh; padding: var(--padding-md); } }