-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathteam.html
More file actions
195 lines (175 loc) · 10.8 KB
/
team.html
File metadata and controls
195 lines (175 loc) · 10.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Sandy's Snacks</title>
<meta name="description" content="Meet the team behind Sandy's Snacks - a project manager's snack obsession meets a developer's problem-solving skills.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cal+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css" />
<style>
</style>
</head>
<body>
<header>
<nav class="container">
<a href="/" class="logo font-display">
🍪 Sandy's Snacks
</a>
<ul class="nav-links">
<li><a href="/#how-it-works">How It Works</a></li>
<li><a href="/#pricing">Pricing</a></li>
<li><a href="#story">About</a></li>
<li><a href="#team">Our Team</a></li>
</ul>
<a href="https://app.sandyssnacks.com/signup" class="btn btn-primary">Get Started</a>
</nav>
</header>
<main>
<section class="hero">
<div class="container-sm">
<h1 class="font-display">Meet the humans behind the snacks</h1>
<p class="hero-subtitle">
What happens when a Buisness Analyst's snack obsession meets a developer's problem-solving skills? Pure magic (and really good treats).
</p>
</div>
</section>
<section id="team" class="team">
<div class="container">
<div class="team-grid">
<div class="team-member animate-in">
<div class="member-avatar">S</div>
<h3 class="member-name font-display">Sandhya (Sandy)</h3>
<p class="member-role">Chief Snack Curator & Taste Tester</p>
<p class="member-bio">
Sandy is the mastermind behind every carefully curated collection. As a project manager by day and snack enthusiast by nature, she brings both organizational skills and an incredibly refined palate to the table. She personally taste-tests every single item before it makes it to your office, ensuring that only the most delicious, interesting, and conversation-worthy snacks make the cut.
</p>
<div class="favorite-snacks">
<h4 class="snacks-title">🍪 Sandy's Current Obsessions(ASK HER)</h4>
<div class="snack-list">
<div class="snack-tag">🥨 Snack 1</div>
<div class="snack-tag">🍫 Snack</div>
<div class="snack-tag">🌶️ Snack</div>
<div class="snack-tag">🥜 Snack</div>
<div class="snack-tag">🧀 Snack</div>
</div>
</div>
<div class="fun-facts">
<h5 class="facts-title">Fun Sandy Facts</h5>
<ul class="facts-list">
<li>Has a spreadsheet tracking every snack she's ever tried (yes, really)</li>
<li>Can identify the origin of chocolate by taste alone</li>
<li>Once drove 40 minutes for "the perfect pretzel"</li>
<li>Believes texture is just as important as flavor</li>
<li>Has strong opinions about optimal snack-to-meeting ratios</li>
</ul>
</div>
</div>
<div class="team-member animate-in">
<div class="member-avatar">HMS</div>
<h3 class="member-name font-display">HMSDev</h3>
<p class="member-role">Developer & Snack Distribution Technologist</p>
<p class="member-bio">
The software engineer who couldn't resist turning Sandy's snack genius into a proper app. When not writing Java code or hosting coworking sessions for her community, you'll find her deep in Spring or Flutter documentation, currently living the dream of building real things humans actually want to use (instead of yet another todo app). Spends way too much time perfecting animations that probably no one will notice, but hey, that's what makes it fun.
</p>
<div class="favorite-snacks">
<h4 class="snacks-title">🍿 Developer Fuel Favorites</h4>
<div class="snack-list">
<div class="snack-tag">🍌 Sweet & Spicy plantain chips</div>
<div class="snack-tag">🍿 Movie popcorn</div>
<div class="snack-tag">🥖 Chin chin (croquettes)</div>
<div class="snack-tag">🍓 Strawberry matchas</div>
<div class="snack-tag">🍨 Espresso & caramel gelato</div>
<div class="snack-tag">🥝 Yellow kiwis</div>
</div>
</div>
<div class="fun-facts">
<h5 class="facts-title">Fun Developer Facts</h5>
<ul class="facts-list">
<li>Built the entire app while documenting every breakthrough and bug</li>
<li>Has strong opinions about proper snack-to-code ratios</li>
<li>Chose Flutter over React and will defend this decision passionately</li>
<li>Believes good documentation is just as important as good code</li>
<li>Once spent 3 hours debugging why the snack photos weren't uploading (it was a typo)</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="story" class="story">
<div class="container">
<div class="story-card">
<h2 class="font-display">How Sandy's Snacks came to be</h2>
<p>
It all started with a simple observation: <span class="highlight">office snacks are universally terrible</span>. You know the scene—stale crackers in the break room, that vending machine with the suspicious expiration dates, the eternal debate over who should buy snacks and what they should get.
</p>
<p>
Sandhya, being Sandhya, had already solved this problem for herself and her lucky desk neighbors through careful curation and taste-testing. Her desk drawer was legendary—full of artisanal treats, international discoveries, and perfectly balanced sweet-and-savory options. Colleagues started making pilgrimages to "Sandy's snack stash" whenever they needed an afternoon pick-me-up.
</p>
<p>
That's when the lightbulb went off. What if we could scale Sandy's expertise? What if everyone could benefit from her ridiculously high standards and adventurous palate? <span class="highlight">What if we turned snack curation into a subscription service that actually made sense?</span>
</p>
<p>
Fast-forward through many late-night coding sessions, countless snack taste-tests, and probably too many matcha lattes—and here we are. A simple $5/month subscription that transforms your office snack game while supporting a real human who genuinely cares about what you're eating.
</p>
<p>
We're not trying to disrupt the snack industry or become the next unicorn startup. We just wanted to solve a very real problem for very real people in our very real office. The fact that other people want in on Sandy's expertise? Well, that's just the cherry on top of a very well-curated sundae.
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h3 class="font-display">🍪 Sandy's Snacks</h3>
<p>Transforming office break rooms one carefully curated treat at a time. Because life's too short for terrible snacks.</p>
</div>
<div class="footer-links">
<h4>Product</h4>
<ul>
<li><a href="#how-it-works">How it works</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="/faq.html">FAQ</a></li>
</ul>
</div>
<div class="footer-links">
<h4>Company</h4>
<ul>
<li><a href="/team.html">Meet The Team</a></li>
<li><a href="mailto:hello@sandyssnacks.com">Contact</a></li>
<li><a href="/privacy.html">Privacy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Sandy's Snacks. Made with ❤️ and lots of taste-testing.</p>
</div>
</div>
</footer>
</main>
<script>
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animationDelay = `${entry.target.dataset.delay || 0}ms`;
entry.target.classList.add('animate-in');
}
});
}, observerOptions);
// Observe elements for animation
document.querySelectorAll('.team-member').forEach((el, index) => {
el.dataset.delay = index * 200;
observer.observe(el);
});
</script>
</body>
</html>