diff --git a/src/pages/homepage-mock.astro b/src/pages/homepage-mock.astro new file mode 100644 index 0000000..510ec8d --- /dev/null +++ b/src/pages/homepage-mock.astro @@ -0,0 +1,564 @@ +--- +/** + * High-fidelity homepage design mock — isolated from production. + * Open at: http://localhost:4321/homepage-mock + */ +import "../styles/homepage-mock.css"; + +const linkedin = "https://www.linkedin.com/in/saharpak/"; +const techImmigrants = "https://www.youtube.com/@TechImmigrants"; + +const badges = [ + "Platform Products", + "APIs", + "Tech Community", + "Open Source", + "Product Experiments", + "Finland", +]; + +const pillars = [ + { + label: "My foundation", + title: "Professional Platform Work", + text: "At RELEX, I worked on platform products, APIs, integrations, and technical collaboration in high-scale, ambiguous environments.", + nuance: null, + tags: ["Platform products", "APIs", "Integrations", "Scale", "Ambiguity"], + accent: "blue" as const, + icon: "layers", + }, + { + label: "My discovery engine", + title: "Tech Community Insight", + text: "Through Tech Immigrants, I stay close to a tech community focused on career growth, immigration, interview preparation, and securing opportunities.", + nuance: "A broader tech community — many members are developers, but not only.", + tags: ["Career growth", "Immigration", "Interview prep", "Community signals"], + accent: "teal" as const, + icon: "signal", + }, + { + label: "My way of working", + title: "Builder Mindset", + text: "I start from user pain points and feedback, then validate with small experiments before scaling into products, open-source projects, or platforms.", + nuance: null, + tags: ["User signals", "Validation", "MVPs", "Open source"], + accent: "violet" as const, + icon: "build", + }, +]; + +const processSteps = [ + { n: 1, label: "Community signals", accent: "teal", icon: "chat", highlight: false }, + { n: 2, label: "Data & analysis", accent: "blue", icon: "chart", highlight: false }, + { n: 3, label: "Patterns & opportunities", accent: "blue", icon: "grid", highlight: false }, + { n: 4, label: "Start small", accent: "violet", icon: "seed", highlight: false }, + { n: 5, label: "Validate with users", accent: "violet", icon: "check", highlight: false }, + { n: 6, label: "Build what works", accent: "gold", icon: "rocket", highlight: true }, +]; + +const projects = [ + { + title: "Community Intelligence Dashboard", + signal: "recurring community questions", + text: "Analyzed community data to understand recurring pain points, needs, and patterns.", + status: "Demo", + statusBg: "bg-mock-violet-soft text-mock-violet", + accent: "violet" as const, + }, + { + title: "CV → CV Builder", + signal: "CVs failing in real applications", + text: "Started by solving the CV problem manually, then turned it into an open-source project with contributors.", + status: "Open Source", + statusBg: "bg-mock-green-soft text-mock-green", + accent: "green" as const, + link: "https://cvroast.dev", + }, + { + title: "Demo Day → ProductBuilders.app", + signal: "builders wanted feedback before a platform", + text: "Validated builder interest through Demo Days before building a full platform.", + status: "Pilot", + statusBg: "bg-mock-blue-soft text-mock-blue", + accent: "blue" as const, + }, + { + title: "Tech Immigrants", + signal: "navigating tech careers across borders", + text: "A 53K+ tech community helping people navigate career growth, immigration, and tech opportunities.", + status: "Live", + statusBg: "bg-mock-teal-soft text-mock-teal", + accent: "teal" as const, + link: techImmigrants, + }, + { + title: "Persian Clip Finder", + signal: "long videos, short attention", + text: "Repurposes long Persian tech videos into searchable short clips.", + status: "Internal Tool", + statusBg: "bg-mock-surface-soft text-mock-text-muted", + accent: "teal" as const, + }, + { + title: "Trillion Operator Agent", + signal: "scattered projects and decisions", + text: "A local-first operator workspace for projects, content, and decision-making.", + status: "Internal Tool", + statusBg: "bg-mock-surface-soft text-mock-text-muted", + accent: "violet" as const, + }, +]; + +const experienceCards = [ + { + title: "Platform capabilities", + text: "APIs, integrations, internal/external developer workflows", + accent: "blue" as const, + icon: "plug", + }, + { + title: "Technical collaboration", + text: "Working with engineering, architecture, QA, and customer-facing teams", + accent: "teal" as const, + icon: "people", + }, + { + title: "Ambiguity at scale", + text: "Turning complex technical needs into product decisions", + accent: "violet" as const, + icon: "compass", + }, +]; + +const stats = [ + { value: "53K+", label: "Cross-platform reach", color: "text-mock-teal" }, + { value: "190+", label: "Episodes", color: "text-mock-blue" }, + { value: "400K+", label: "YouTube views", color: "text-mock-violet" }, +]; + +const accentStyles = { + blue: { + border: "border-t-mock-blue", + label: "text-mock-blue", + iconBg: "bg-mock-blue-soft", + iconStroke: "#2563EB", + tagBg: "bg-mock-blue-soft text-mock-blue", + circleBorder: "border-mock-blue", + }, + teal: { + border: "border-t-mock-teal", + label: "text-mock-teal", + iconBg: "bg-mock-teal-soft", + iconStroke: "#0F766E", + tagBg: "bg-mock-teal-soft text-mock-teal", + circleBorder: "border-mock-teal", + }, + violet: { + border: "border-t-mock-violet", + label: "text-mock-violet", + iconBg: "bg-mock-violet-soft", + iconStroke: "#7C3AED", + tagBg: "bg-mock-violet-soft text-mock-violet", + circleBorder: "border-mock-violet", + }, + green: { + border: "border-t-mock-green", + label: "text-mock-green", + iconBg: "bg-mock-green-soft", + iconStroke: "#4D7C0F", + tagBg: "bg-mock-green-soft text-mock-green", + circleBorder: "border-mock-green", + }, + gold: { + border: "border-t-mock-gold", + label: "text-mock-gold", + iconBg: "bg-mock-gold/15", + iconStroke: "#D6A84F", + tagBg: "bg-mock-gold/15 text-mock-gold", + circleBorder: "border-mock-gold", + }, +}; +--- + + + + + + + + Homepage Mock — Sahar Pakseresht (Design Preview) + + + + + + + +
+ DESIGN MOCK — not production · View current homepage → +
+ + + + + + +
+ + + + +
+
+
+ +
+ +
+

+ Sahar Pakseresht +

+ +

+ Product Manager at Scale · Community Builder by Passion · Builder by Practice +

+ +

+ I combine platform product experience, community insight, and a builder mindset to turn real signals into products. +

+ + + +
+ {badges.map((badge) => ( + {badge} + ))} +
+
+ +
+
+ Sahar Pakseresht + Building ProductBuilders.app +
+
+ +
+
+ + + + +
+
+ + {pillars.map((pillar) => { + const s = accentStyles[pillar.accent]; + return ( +
+
+ {pillar.icon === "layers" && ( + + + + )} + {pillar.icon === "signal" && ( + + + + + )} + {pillar.icon === "build" && ( + + + + )} +
+ +

{pillar.label}

+

{pillar.title}

+

{pillar.text}

+ {pillar.nuance && ( +

{pillar.nuance}

+ )} +
+ {pillar.tags.map((tag) => ( + {tag} + ))} +
+
+ ); + })} + +
+
+ + + + +
+
+ +

+ How I turn signals into products +

+ +
+ {processSteps.map((step) => { + const s = accentStyles[step.accent as keyof typeof accentStyles]; + return ( +
+
+ {step.icon === "chat" && ( + + + + )} + {step.icon === "chart" && ( + + + + )} + {step.icon === "grid" && ( + + + + )} + {step.icon === "seed" && ( + + + + )} + {step.icon === "check" && ( + + + + )} + {step.icon === "rocket" && ( + + + + )} +
+ 0{step.n} + {step.label} +
+ ); + })} +
+ +

+ I follow user signals first, then validate, and only then build. +

+ +
+
+ + + + +
+
+ +
+

+ From signals to products +

+

+ These are not random side projects. They are product responses shaped by real user signals and validation. +

+
+ +
+ {projects.map((project) => { + const s = accentStyles[project.accent]; + return ( +
+

+ Signal: {project.signal} +

+

{project.title}

+

{project.text}

+
+ {project.status} + {project.link ? ( + + Visit → + + ) : ( + + )} +
+
+ ); + })} +
+ +
+
+ + + + +
+
+ +
+

Experience

+

+ Professional product work at scale +

+

+ My professional foundation comes from working on platform and integration-heavy products at RELEX, close to APIs, technical teams, enterprise customers, and ambiguous product problems. +

+

+ I'm comfortable working on products that are not always visible to end users, but are critical for other teams, customers, partners, and developers to build on top of. +

+
+ +
+ {experienceCards.map((card) => { + const s = accentStyles[card.accent]; + return ( +
+
+ {card.icon === "plug" && ( + + + + )} + {card.icon === "people" && ( + + + + )} + {card.icon === "compass" && ( + + + + )} +
+
+

{card.title}

+

{card.text}

+
+
+ ); + })} +
+ +
+
+ + + + +
+
+ +
+
+

Discovery evidence

+

+ Tech Immigrants in numbers +

+
+

+ Community insights help me understand what people need and decide what to build next. +

+
+ +
+ {stats.map((stat) => ( +
+

{stat.value}

+

{stat.label}

+
+ ))} +
+ +

+ Aggregate and anonymized. Community data is not sold. +

+ +
+
+ + + + +
+
+
+ +
+

+ Want to build, partner, or talk? +

+

+ I'm open to collaborations around product strategy, tech communities, AI tools, immigrant tech talent, events, and community-led products. +

+ +
+
+ +
+ + + + + + diff --git a/src/styles/homepage-mock.css b/src/styles/homepage-mock.css new file mode 100644 index 0000000..ac6cd49 --- /dev/null +++ b/src/styles/homepage-mock.css @@ -0,0 +1,337 @@ +/* homepage-mock.css — isolated design mock styles, not used by production */ + +@import "tailwindcss"; + +@theme { + --color-mock-bg: #F8F7F2; + --color-mock-surface: #FFFFFF; + --color-mock-surface-soft: #EEF7F4; + --color-mock-text: #102033; + --color-mock-text-muted: #5F6F7A; + --color-mock-teal: #0F766E; + --color-mock-teal-soft: #D9F0EA; + --color-mock-blue: #2563EB; + --color-mock-blue-soft: #DBEAFE; + --color-mock-green: #4D7C0F; + --color-mock-green-soft: #E7F3D4; + --color-mock-violet: #7C3AED; + --color-mock-violet-soft: #EDE9FE; + --color-mock-border: #D8E3E1; + --color-mock-gold: #D6A84F; + + --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-mono: "JetBrains Mono", "Fira Code", monospace; +} + +html { + scroll-behavior: smooth; +} + +body.mock-page { + background-color: var(--color-mock-bg); + color: var(--color-mock-text); + font-family: var(--font-sans); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.mock-page ::selection { + background-color: var(--color-mock-teal); + color: white; +} + +/* ---- Nav ---- */ +.mock-nav { + position: sticky; + top: 0; + z-index: 50; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + background: color-mix(in srgb, var(--color-mock-bg) 82%, transparent); + border-bottom: 1px solid var(--color-mock-border); +} + +/* ---- Blobs ---- */ +.mock-blob { + position: absolute; + border-radius: 50%; + filter: blur(80px); + pointer-events: none; + z-index: 0; +} + +.mock-blob-teal { + background: color-mix(in srgb, var(--color-mock-teal) 18%, transparent); +} + +.mock-blob-violet { + background: color-mix(in srgb, var(--color-mock-violet) 14%, transparent); +} + +/* ---- Buttons ---- */ +.mock-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.625rem 1.25rem; + border-radius: 9999px; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.25; + transition: all 0.2s ease; + text-decoration: none; + white-space: nowrap; +} + +.mock-btn-primary { + background: var(--color-mock-teal); + color: white; +} + +.mock-btn-primary:hover { + background: color-mix(in srgb, var(--color-mock-teal) 88%, black); + transform: translateY(-1px); + box-shadow: 0 4px 14px color-mix(in srgb, var(--color-mock-teal) 25%, transparent); +} + +.mock-btn-outline { + background: transparent; + color: var(--color-mock-text); + border: 1.5px solid var(--color-mock-text); +} + +.mock-btn-outline:hover { + background: var(--color-mock-text); + color: white; +} + +.mock-btn-ghost { + background: transparent; + color: var(--color-mock-blue); + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.mock-btn-ghost:hover { + color: var(--color-mock-teal); +} + +.mock-btn-white { + background: white; + color: var(--color-mock-text); +} + +.mock-btn-white:hover { + background: var(--color-mock-teal-soft); +} + +.mock-btn-ghost-light { + background: transparent; + color: white; + border: 1.5px solid color-mix(in srgb, white 30%, transparent); +} + +.mock-btn-ghost-light:hover { + border-color: var(--color-mock-teal-soft); + color: var(--color-mock-teal-soft); +} + +/* ---- Badges / tags ---- */ +.mock-badge { + display: inline-flex; + align-items: center; + padding: 0.3rem 0.75rem; + border-radius: 9999px; + font-family: var(--font-mono); + font-size: 0.6875rem; + font-weight: 500; + letter-spacing: 0.01em; + background: var(--color-mock-surface); + border: 1px solid var(--color-mock-border); + color: var(--color-mock-text); +} + +.mock-tag { + display: inline-flex; + padding: 0.2rem 0.625rem; + border-radius: 9999px; + font-size: 0.6875rem; + font-weight: 500; +} + +/* ---- Cards ---- */ +.mock-card { + background: var(--color-mock-surface); + border: 1px solid var(--color-mock-border); + border-radius: 1rem; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.mock-card:hover { + transform: translateY(-2px); + box-shadow: + 0 8px 24px color-mix(in srgb, var(--color-mock-text) 6%, transparent), + 0 2px 6px color-mix(in srgb, var(--color-mock-text) 4%, transparent); +} + +.mock-pillar { + border-top-width: 3px; + border-top-style: solid; + padding: 1.5rem; +} + +.mock-icon-wrap { + width: 2.5rem; + height: 2.5rem; + border-radius: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +/* ---- Process ---- */ +.mock-process-track { + position: relative; + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 0.5rem; +} + +.mock-process-track::before { + content: ""; + position: absolute; + top: 1.25rem; + left: 8%; + right: 8%; + height: 2px; + background: linear-gradient( + 90deg, + var(--color-mock-teal-soft), + var(--color-mock-blue-soft), + var(--color-mock-violet-soft), + var(--color-mock-gold) + ); + z-index: 0; +} + +.mock-process-step { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 0.5rem; +} + +.mock-process-circle { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + background: var(--color-mock-surface); + border: 2px solid var(--color-mock-border); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 8px color-mix(in srgb, var(--color-mock-text) 5%, transparent); +} + +.mock-process-circle.highlight { + border-color: var(--color-mock-gold); + box-shadow: + 0 0 0 3px color-mix(in srgb, var(--color-mock-gold) 25%, transparent), + 0 2px 8px color-mix(in srgb, var(--color-mock-gold) 15%, transparent); +} + +/* ---- Project status ---- */ +.mock-status { + display: inline-flex; + padding: 0.15rem 0.5rem; + border-radius: 9999px; + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 500; +} + +/* ---- Stat cards ---- */ +.mock-stat-value { + font-size: clamp(1.75rem, 4vw, 2.25rem); + font-weight: 800; + letter-spacing: -0.02em; + line-height: 1; +} + +/* ---- Section labels ---- */ +.mock-label { + font-family: var(--font-mono); + font-size: 0.6875rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +/* ---- Portrait chip ---- */ +.mock-portrait-chip { + position: absolute; + bottom: -0.5rem; + left: -0.75rem; + padding: 0.375rem 0.75rem; + border-radius: 9999px; + font-family: var(--font-mono); + font-size: 0.6875rem; + font-weight: 500; + background: var(--color-mock-teal-soft); + color: var(--color-mock-teal); + border: 1px solid var(--color-mock-border); + box-shadow: 0 4px 12px color-mix(in srgb, var(--color-mock-teal) 12%, transparent); + white-space: nowrap; +} + +.mock-portrait-chip::before { + content: ""; + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--color-mock-teal); + margin-right: 0.375rem; + animation: mock-pulse 2s ease-in-out infinite; +} + +@keyframes mock-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } +} + +/* ---- Mobile process ---- */ +@media (max-width: 767px) { + .mock-process-track { + grid-template-columns: 1fr; + gap: 0; + padding-left: 1.25rem; + border-left: 2px solid var(--color-mock-border); + } + + .mock-process-track::before { + display: none; + } + + .mock-process-step { + flex-direction: row; + text-align: left; + align-items: flex-start; + gap: 0.875rem; + padding-bottom: 1.25rem; + } + + .mock-process-step:last-child { + padding-bottom: 0; + } +} + +@media (max-width: 639px) { + .mock-nav-links { + display: none; + } +}