Skip to content

Commit 49ef078

Browse files
varyavarya
authored
Merge pull request #236 from varya/mentorship-services
Mentorship services
2 parents 47b0d61 + cea205c commit 49ef078

3 files changed

Lines changed: 175 additions & 15 deletions

File tree

‎src/components/Menu/Menu.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export const menuData = [
5151
href: "/services/development",
5252
},
5353
{ label: "Workshops", href: "/services/workshops" },
54+
{ label: "Mentorship", href: "/services/mentorship" },
5455
{ label: "Speaking", href: "/services/speaking" },
5556
],
5657
},

‎src/pages/index.js‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -54,26 +54,24 @@ const IndexPage = ({ data }) => {
5454
>
5555
<ImageBlock imageRight image={<Avatar />} margin={{ top: "medium" }}>
5656
<Paragraph size="large" standout lead margin={{ vertical: "none" }}>
57-
I am Varya Stepanova, a <b>design systems architect</b> with extensive
58-
experience in management, design, and the technical side. In my ~20
59-
years of technical career, my focus has been on component-focused UI
60-
design and development, creating helpful tools for the subject, and
61-
spreading best practices across large organizations. I hold two
62-
Master&apos;s degrees - one in physics and one in computer science
63-
from Aalto University&apos;s{" "}
57+
I am Varya Stepanova, a <b>design systems architect and engineering manager</b> with
58+
20+ years in tech and 15+ years leading engineering teams. My expertise spans
59+
component-focused UI design and development, creating helpful tools for the subject,
60+
and spreading best practices across large organizations while managing distributed
61+
teams and scaling design system operations. I hold two Master&apos;s degrees - one
62+
in physics and one in computer science from Aalto University&apos;s{" "}
6463
<Link to="https://www.idbm.aalto.fi/" target="_blank" rel="noopener">
6564
IDBM
6665
</Link>{" "}
67-
program, which focuses on service design and business. I also have 15+
68-
years of engineering experience and have held several leading roles.
66+
program, which focuses on service design and business.
67+
</Paragraph>
68+
<Paragraph size="large" standout lead>
69+
Currently, my focus is on bringing design systems to the next level of
70+
success, which includes working cooperatively with a client
71+
company&apos;s design & development community and bridging the gap
72+
between designers, developers, and business specialists.
6973
</Paragraph>
7074
</ImageBlock>
71-
<Paragraph size="large" standout lead>
72-
Currently, my focus is on bringing design systems to the next level of
73-
success, which includes working cooperatively with a client
74-
company&apos;s design & development community and bridging the gap
75-
between designers, developers, and business specialists.
76-
</Paragraph>
7775

7876
{/* <Workshop /> */}
7977
<Section heading="Services">

‎src/pages/services/mentorship.js‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
4+
import { Box, Button, Text } from "grommet";
5+
import { Heading, Paragraph, Avatar, ImageBlock, Link } from "@components";
6+
import { Page } from "@templates/Page";
7+
8+
import { InlineWidget } from "react-calendly";
9+
10+
import heroImage from "./hero-supervision.jpg"; // Using supervision hero image as placeholder
11+
12+
const HeroContent = () => (
13+
<Heading
14+
level={1}
15+
alignSelf="center"
16+
responsive
17+
size="large"
18+
margin={{ top: "auto" }}
19+
>
20+
<Text size="inherit" color="accent">
21+
Mentorship
22+
</Text>
23+
</Heading>
24+
);
25+
26+
const Mentorship = ({ location }) => (
27+
<Page
28+
hero={{
29+
props: {
30+
imageUrl: heroImage,
31+
hasOverlay: true,
32+
},
33+
content: HeroContent,
34+
}}
35+
seo={{
36+
title: "Design Systems and Frontend Development Mentorship",
37+
description: `Expert mentorship for designers and developers looking to advance their skills in design systems, frontend development, and team collaboration. Get personalized guidance from an experienced professional.`,
38+
cover: heroImage,
39+
keywords: [
40+
"mentorship",
41+
"design systems mentoring",
42+
"frontend development mentor",
43+
"career guidance",
44+
"professional development",
45+
"design systems expert",
46+
],
47+
}}
48+
location={location}
49+
>
50+
<ImageBlock imageLeft image={<Avatar />} margin={{ top: "medium" }}>
51+
<Paragraph size="large" standout lead margin={{ vertical: "none" }}>
52+
With 20+ years in tech and 15+ years leading engineering teams, I offer personalized
53+
mentorship for professionals looking to excel in design systems, UI development,
54+
and team leadership. My experience spans from building UI frameworks with 150+ components
55+
for one of Europe's largest internet companies to leading distributed teams across
56+
multiple countries and cultures.
57+
</Paragraph>
58+
<Paragraph size="large" standout lead>
59+
I've successfully grown teams from 1 to 7 people, managed design system adoption
60+
across large retail organizations that ship products to multiple markets, and led
61+
comprehensive design system implementations for SaaS platforms, messaging services,
62+
and international agricultural technology companies. My approach combines technical
63+
expertise with strong people management and cross-cultural collaboration skills.
64+
</Paragraph>
65+
</ImageBlock>
66+
<Paragraph>
67+
My mentorship focuses on:
68+
<ul>
69+
<li><strong>Design Systems Leadership:</strong> Strategy, roadmapping, stakeholder alignment, and measuring success through adoption metrics</li>
70+
<li><strong>Team Management:</strong> Building and scaling design system teams, conducting 1-1s, facilitating cross-functional collaboration</li>
71+
<li><strong>UI Architecture & Component Design:</strong> Creating scalable component libraries, design tokens, and documentation systems</li>
72+
<li><strong>Product Ownership:</strong> Establishing OKRs, tracking DORA metrics, and driving data-driven roadmap prioritization</li>
73+
<li><strong>Career Development:</strong> Transitioning from individual contributor to leadership roles, mentoring team members' growth</li>
74+
<li><strong>Cross-Cultural Collaboration:</strong> Managing distributed teams across time zones and fostering inclusive team environments</li>
75+
<li><strong>Community Building:</strong> Championing design system adoption, organizing knowledge sharing, and building internal communities</li>
76+
</ul>
77+
</Paragraph>
78+
<Paragraph>
79+
<strong>How mentorship works:</strong>
80+
</Paragraph>
81+
<Paragraph>
82+
Mentorship takes place through semi-regular online meetings where we discuss your current
83+
challenges, review your progress, and plan next steps. Between sessions, you'll receive
84+
practical homework assignments designed to help you apply what we've discussed and build
85+
real-world experience.
86+
</Paragraph>
87+
<Paragraph>
88+
The frequency of our meetings depends entirely on your needs and availability. Some mentees
89+
benefit from sessions a couple of times per month for intensive guidance during critical
90+
projects or career transitions, while others prefer quarterly check-ins to maintain momentum
91+
and get strategic advice. We'll find a rhythm that works best for your challenges and
92+
schedule.
93+
</Paragraph>
94+
<Paragraph>
95+
<strong>What exactly could I ask as a mentee?</strong>
96+
</Paragraph>
97+
<Paragraph>
98+
You can ask anything you feel relevant. Here are a few ideas — these are real questions
99+
I've discussed with my mentees. Maybe they're similar to your challenges:
100+
</Paragraph>
101+
<Paragraph>
102+
<ul>
103+
<li>"This is the status of my design system now, where do I invest time to make the best progress right now?"</li>
104+
<li>"How do I organize sync with designers?"</li>
105+
<li>"How exactly could I improve our documentation in Storybook?"</li>
106+
<li>"How to display what are our available CSS utilities so that a designer sees it?"</li>
107+
<li>"What to start with if we want visual regression testing in our specific setup?"</li>
108+
<li>"How do we increase adoption of design system in our product?"</li>
109+
<li>"What topics should I learn for my next interview to a design system position?"</li>
110+
</ul>
111+
</Paragraph>
112+
<Paragraph>
113+
Topics are not limited to this list — bring whatever challenges you're facing, and we'll
114+
work through them together.
115+
</Paragraph>
116+
117+
<Heading level={2} margin={{ top: "large", bottom: "medium" }}>
118+
Get in Touch
119+
</Heading>
120+
121+
<Paragraph>
122+
Ready to start your mentorship journey? I'd love to hear about your challenges and goals.
123+
</Paragraph>
124+
125+
<Box direction="row" gap="medium" wrap margin={{ bottom: "medium" }}>
126+
<Button
127+
primary
128+
size="medium"
129+
label="Email me at mail@varya.me"
130+
href="mailto:mail@varya.me"
131+
target="_blank"
132+
rel="noopener"
133+
/>
134+
<Button
135+
secondary
136+
size="medium"
137+
label="Connect on LinkedIn"
138+
href="https://www.linkedin.com/in/varyastepanova/"
139+
target="_blank"
140+
rel="noopener"
141+
/>
142+
</Box>
143+
144+
<Paragraph>
145+
Or book a video session directly via{" "}
146+
<Link to="https://calendly.com/var_ya">Calendly</Link> — I keep my calendar
147+
up to date, so you can easily see available times and choose what works best for you.
148+
</Paragraph>
149+
150+
<InlineWidget
151+
styles={{ minWidth: "320px", height: "700px" }}
152+
url="https://calendly.com/var_ya/30min"
153+
/>
154+
</Page>
155+
);
156+
157+
Mentorship.propTypes = {
158+
location: PropTypes.object,
159+
};
160+
161+
export default Mentorship;

0 commit comments

Comments
 (0)