Skip to content

Commit e4324cd

Browse files
arjunmehta-gitarjunmehta-git
authored
Create index.html
1 parent 0b10201 commit e4324cd

1 file changed

Lines changed: 277 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Arjun • Product • Bengaluru</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10+
11+
<style>
12+
:root {
13+
--bg: #0f0f0f;
14+
--text: #e0e0e0;
15+
--text-light: #a0a0a0;
16+
--accent: #00d4ff;
17+
--accent-dark: #0099bb;
18+
--card: #161616;
19+
--border: #222;
20+
}
21+
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
body {
29+
font-family: 'Inter', system-ui, sans-serif;
30+
background: var(--bg);
31+
color: var(--text);
32+
line-height: 1.6;
33+
min-height: 100vh;
34+
}
35+
36+
.container {
37+
max-width: 980px;
38+
margin: 0 auto;
39+
padding: 0 24px;
40+
}
41+
42+
header {
43+
padding: 120px 0 80px;
44+
text-align: center;
45+
background: linear-gradient(to bottom, #0f0f0f, #0a0a0a);
46+
}
47+
48+
.avatar {
49+
width: 140px;
50+
height: 140px;
51+
border-radius: 50%;
52+
object-fit: cover;
53+
border: 4px solid var(--accent);
54+
margin-bottom: 24px;
55+
box-shadow: 0 8px 32px rgba(0,212,255,0.18);
56+
}
57+
58+
h1 {
59+
font-size: 3.2rem;
60+
font-weight: 700;
61+
margin-bottom: 12px;
62+
}
63+
64+
.tagline {
65+
font-size: 1.4rem;
66+
color: var(--text-light);
67+
margin-bottom: 32px;
68+
max-width: 580px;
69+
margin-left: auto;
70+
margin-right: auto;
71+
}
72+
73+
.social-links {
74+
display: flex;
75+
justify-content: center;
76+
gap: 24px;
77+
margin-bottom: 48px;
78+
flex-wrap: wrap;
79+
}
80+
81+
.social-btn {
82+
display: inline-flex;
83+
align-items: center;
84+
gap: 10px;
85+
padding: 12px 24px;
86+
background: var(--card);
87+
border: 1px solid var(--border);
88+
border-radius: 50px;
89+
color: var(--text);
90+
text-decoration: none;
91+
font-weight: 500;
92+
transition: all 0.22s ease;
93+
}
94+
95+
.social-btn:hover {
96+
background: var(--accent);
97+
color: #000;
98+
transform: translateY(-2px);
99+
box-shadow: 0 8px 24px rgba(0,212,255,0.25);
100+
}
101+
102+
section {
103+
padding: 80px 0;
104+
}
105+
106+
h2 {
107+
font-size: 2.4rem;
108+
margin-bottom: 48px;
109+
text-align: center;
110+
background: linear-gradient(90deg, #00d4ff, #a78bfa);
111+
-webkit-background-clip: text;
112+
-webkit-text-fill-color: transparent;
113+
}
114+
115+
.grid {
116+
display: grid;
117+
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
118+
gap: 28px;
119+
}
120+
121+
.card {
122+
background: var(--card);
123+
border: 1px solid var(--border);
124+
border-radius: 16px;
125+
padding: 32px;
126+
transition: all 0.3s ease;
127+
}
128+
129+
.card:hover {
130+
transform: translateY(-8px);
131+
border-color: var(--accent);
132+
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
133+
}
134+
135+
.card h3 {
136+
font-size: 1.5rem;
137+
margin-bottom: 12px;
138+
color: var(--accent);
139+
}
140+
141+
.card .period {
142+
color: var(--text-light);
143+
font-size: 0.95rem;
144+
margin-bottom: 16px;
145+
display: block;
146+
}
147+
148+
.tags {
149+
display: flex;
150+
flex-wrap: wrap;
151+
gap: 10px;
152+
margin-top: 16px;
153+
}
154+
155+
.tag {
156+
background: rgba(0,212,255,0.12);
157+
color: var(--accent);
158+
padding: 6px 14px;
159+
border-radius: 30px;
160+
font-size: 0.82rem;
161+
border: 1px solid rgba(0,212,255,0.3);
162+
}
163+
164+
.about-text {
165+
max-width: 720px;
166+
margin: 0 auto 60px;
167+
font-size: 1.15rem;
168+
color: var(--text-light);
169+
text-align: center;
170+
}
171+
172+
footer {
173+
text-align: center;
174+
padding: 60px 0 100px;
175+
color: var(--text-light);
176+
font-size: 0.95rem;
177+
border-top: 1px solid var(--border);
178+
}
179+
180+
@media (max-width: 640px) {
181+
header { padding: 80px 0 60px; }
182+
h1 { font-size: 2.6rem; }
183+
.avatar { width: 120px; height: 120px; }
184+
}
185+
</style>
186+
</head>
187+
<body>
188+
189+
<header>
190+
<div class="container">
191+
<!-- Replace with your real photo URL or remove if you don't want a picture -->
192+
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&auto=format&fit=crop&q=80" alt="Arjun" class="avatar">
193+
194+
<h1>Arjun</h1>
195+
<div class="tagline">
196+
Product • Growth • AI-curious human living in Cedar Park, TX
197+
</div>
198+
199+
<div class="social-links">
200+
<a href="https://linkedin.com/in/YOUR-LINKEDIN-USERNAME" class="social-btn" target="_blank">LinkedIn</a>
201+
<a href="https://x.com/YOURHANDLE" class="social-btn" target="_blank">X / Twitter</a>
202+
<a href="https://github.com/YOURUSERNAME" class="social-btn" target="_blank">GitHub</a>
203+
<a href="mailto:hello@arjun.example.com" class="social-btn">Email</a>
204+
<!-- Add more: portfolio, calendly, medium, etc. -->
205+
</div>
206+
</div>
207+
</header>
208+
209+
<section id="about">
210+
<div class="container">
211+
<h2>About</h2>
212+
<p class="about-text">
213+
I build products people actually want to use. Currently focused on
214+
<strong>AI-native workflows</strong>, developer tools, and
215+
<em>making complex things feel simple</em>.<br><br>
216+
217+
Previously: early growth @ [Company], scaled [Product] to X00k users,
218+
led product at [Another Company].<br><br>
219+
220+
Right now I'm most excited about agentic systems, prompt engineering that actually matters,
221+
and figuring out how normal humans can thrive in a world full of increasingly capable models.
222+
</p>
223+
</div>
224+
</section>
225+
226+
<section id="experience">
227+
<div class="container">
228+
<h2>Experience</h2>
229+
<div class="grid">
230+
231+
<div class="card">
232+
<h3>Product Manager</h3>
233+
<span class="period">Company Name • 2023 – Present</span>
234+
<p>Leading product for [core product]. Grew active users 4.2×, launched AI features that became the #1 requested capability.</p>
235+
<div class="tags">
236+
<span class="tag">Product Strategy</span>
237+
<span class="tag">AI Features</span>
238+
<span class="tag">Growth</span>
239+
<span class="tag">User Research</span>
240+
</div>
241+
</div>
242+
243+
<div class="card">
244+
<h3>Senior Product / Growth</h3>
245+
<span class="period">Previous Company • 2020 – 2023</span>
246+
<p>Owned onboarding + activation. Reduced time-to-aha moment by 62%. Ran 70+ experiments.</p>
247+
<div class="tags">
248+
<span class="tag">Experimentation</span>
249+
<span class="tag">Funnels</span>
250+
<span class="tag">SQL + Mixpanel</span>
251+
</div>
252+
</div>
253+
254+
<div class="card">
255+
<h3>Earlier roles & side projects</h3>
256+
<span class="period">2016 – 2020</span>
257+
<p>Startup co-founder • mobile dev • indie hacker • failed beautifully a few times</p>
258+
<div class="tags">
259+
<span class="tag">Founding</span>
260+
<span class="tag">React Native</span>
261+
<span class="tag">Node.js</span>
262+
</div>
263+
</div>
264+
265+
</div>
266+
</div>
267+
</section>
268+
269+
<footer>
270+
<div class="container">
271+
<p>Currently based in Cedar Park, Texas • Open to interesting opportunities & good conversations</p>
272+
<p style="margin-top:24px;">Made with ☕ & dark mode • 2026</p>
273+
</div>
274+
</footer>
275+
276+
</body>
277+
</html>

0 commit comments

Comments
 (0)