Skip to content

Commit b54b23a

Browse files
Skt329Skt329
committed
revert: restore index.html and Hero.tsx to commit fix:add 404
1 parent e40784b commit b54b23a

5 files changed

Lines changed: 133 additions & 158 deletions

File tree

‎index.html‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,18 @@
88
<meta name="keywords" content="Saurabh Tiwari, AI Engineer, Agentic AI, LLM Engineer, RAG pipeline, MCP integration, React developer, Next.js, Python AI, Bengaluru, India, portfolio, semantic-recall, NeutriAI, ContextAI" />
99
<meta name="author" content="Saurabh Tiwari" />
1010
<meta name="robots" content="index, follow" />
11-
<meta name="theme-color" content="#0a0d1a" />
11+
<meta name="theme-color" content="#0d0d1a" />
1212
<link rel="canonical" href="https://skt329.github.io" />
1313

14+
<!-- Google Search Console Verification -->
15+
<meta name="google-site-verification" content="aMv4THBog1OsvEqPcp_NwkxnC7T1Y8tkPXWa5O9g6EA" />
16+
1417
<!-- Open Graph -->
1518
<meta property="og:title" content="Saurabh Tiwari — AI Engineer | Agentic Systems & LLM Integration" />
1619
<meta property="og:description" content="AI Engineer building production-grade agentic systems, RAG pipelines, and MCP integrations. 6+ shipped apps. Open to opportunities." />
1720
<meta property="og:type" content="website" />
1821
<meta property="og:url" content="https://skt329.github.io" />
19-
<meta property="og:image" content="https://skt329.github.io/og-image.jpg" />
22+
<meta property="og:image" content="https://skt329.github.io/og-image.png" />
2023
<meta property="og:image:width" content="1200" />
2124
<meta property="og:image:height" content="630" />
2225
<meta property="og:site_name" content="Saurabh Tiwari Portfolio" />
@@ -26,9 +29,9 @@
2629
<meta name="twitter:card" content="summary_large_image" />
2730
<meta name="twitter:title" content="Saurabh Tiwari — AI Engineer" />
2831
<meta name="twitter:description" content="AI Engineer building production-grade agentic systems, RAG pipelines, and MCP integrations. 6+ shipped apps." />
29-
<meta name="twitter:image" content="https://skt329.github.io/og-image.jpg" />
32+
<meta name="twitter:image" content="https://skt329.github.io/og-image.png" />
3033

31-
<!-- Fonts -->
34+
<!-- Fonts: Inter (body) + Syne (headings) -->
3235
<link rel="preconnect" href="https://fonts.googleapis.com" />
3336
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
3437
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
@@ -40,7 +43,6 @@
4043
"@type": "Person",
4144
"name": "Saurabh Tiwari",
4245
"url": "https://skt329.github.io",
43-
"image": "https://skt329.github.io/avatar.jpg",
4446
"jobTitle": "AI Engineer",
4547
"description": "AI Engineer specializing in agentic AI systems, RAG pipelines, LLM integration, and full-stack development. Based in Bengaluru, India.",
4648
"address": {
@@ -66,6 +68,19 @@
6668
}
6769
}
6870
</script>
71+
72+
<!-- BreadcrumbList for better search appearance -->
73+
<script type="application/ld+json">
74+
{
75+
"@context": "https://schema.org",
76+
"@type": "BreadcrumbList",
77+
"itemListElement": [
78+
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://skt329.github.io"},
79+
{"@type": "ListItem", "position": 2, "name": "Projects", "item": "https://skt329.github.io/#projects"},
80+
{"@type": "ListItem", "position": 3, "name": "Skills", "item": "https://skt329.github.io/#skills"}
81+
]
82+
}
83+
</script>
6984
</head>
7085
<body>
7186
<div id="root"></div>

‎public/avatar.jpg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/og-image.jpg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/og-image.png‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/Hero.tsx‎

Lines changed: 113 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Github, Linkedin, Mail, Download, ArrowRight, MapPin, Package, ArrowUpRight } from "lucide-react";
1+
import { Github, Linkedin, Mail, Download, ChevronDown, ArrowRight, MapPin, Package } from "lucide-react";
22
import { useEffect, useRef } from "react";
33

44
const Hero = () => {
@@ -25,176 +25,139 @@ const Hero = () => {
2525
<section
2626
ref={sectionRef}
2727
id="hero"
28-
className="relative min-h-screen flex flex-col justify-center px-6 pt-20 pb-16 overflow-hidden"
28+
className="relative min-h-screen flex flex-col justify-center px-6 pt-24 pb-20 overflow-hidden"
2929
>
30-
{/* Mesh + grid */}
30+
{/* Animated mesh background */}
3131
<div className="mesh-gradient absolute inset-0 -z-10" />
32+
{/* Dot grid */}
3233
<div className="dot-grid absolute inset-0 -z-10" />
3334

3435
<div className="max-w-6xl mx-auto w-full">
35-
{/* ── SPLIT LAYOUT ── */}
36-
<div className="grid lg:grid-cols-[1fr_auto] gap-12 lg:gap-20 items-center">
3736

38-
{/* LEFT COLUMN */}
39-
<div>
40-
{/* Status badge */}
41-
<div className="reveal stagger-1 flex flex-wrap items-center gap-3 mb-10">
42-
<div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full border border-primary/25 bg-primary/8">
43-
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
44-
<span className="text-xs font-mono font-medium text-emerald-400/90 tracking-wide">Open to work</span>
45-
</div>
46-
<div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground/55 font-mono">
47-
<MapPin className="w-3 h-3" />
48-
Bengaluru, India
49-
</div>
37+
{/* Top row — status badge + social links */}
38+
<div className="reveal stagger-1 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-16">
39+
<div className="flex items-center gap-3 flex-wrap">
40+
<div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full border border-primary/20 bg-primary/5">
41+
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
42+
<span className="text-xs font-medium text-primary/90 tracking-wide font-mono">Available for opportunities</span>
5043
</div>
51-
52-
{/* BIG NAME */}
53-
<h1 className="reveal stagger-2 font-heading font-extrabold leading-[0.88] tracking-tight mb-6">
54-
<span className="block text-[clamp(3.5rem,9vw,7rem)] text-foreground">
55-
Saurabh
56-
</span>
57-
<span className="block text-[clamp(3.5rem,9vw,7rem)] text-gradient">
58-
Tiwari
59-
</span>
60-
</h1>
61-
62-
{/* Title tag */}
63-
<div className="reveal stagger-3 mb-8">
64-
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-border bg-surface/60 font-mono text-sm text-muted-foreground">
65-
<span className="text-primary">~/</span>
66-
AI Engineer · Agentic Systems · RAG · LLM Integration
67-
</span>
44+
<div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground/60">
45+
<MapPin className="w-3 h-3" />
46+
Bengaluru, India · Remote-friendly
6847
</div>
69-
70-
{/* Bio */}
71-
<p className="reveal stagger-4 max-w-xl text-muted-foreground text-sm sm:text-[15px] leading-relaxed mb-10">
72-
Building production-grade AI — independently shipped{" "}
73-
<span className="text-foreground font-semibold">6 apps</span> since graduation.
74-
From a{" "}
75-
<a href="https://www.npmjs.com/package/semantic-recall" target="_blank" rel="noopener noreferrer"
76-
className="text-primary/80 hover:text-primary underline underline-offset-2 transition-colors">
77-
published npm package
78-
</a>{" "}
79-
to a{" "}
80-
<span className="text-foreground font-semibold">15-tool agentic PWA</span>{" "}
81-
with live Swiggy MCP commerce.
82-
</p>
83-
84-
{/* CTAs */}
85-
<div className="reveal stagger-5 flex flex-wrap items-center gap-3 mb-12">
86-
<a
87-
href="#projects"
88-
className="group inline-flex items-center gap-3 px-7 py-3.5 rounded-xl bg-primary text-primary-foreground font-heading font-bold text-sm tracking-wide hover:shadow-xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-0.5"
89-
>
90-
View my work
91-
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
92-
</a>
93-
<a
94-
href="https://drive.google.com/file/d/1XVWXvlxU5R8PVge5lEtQM27rHmyn9sS7/view?usp=drive_link"
95-
target="_blank" rel="noopener noreferrer"
96-
className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl border border-border text-sm font-heading font-semibold text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-all duration-300"
97-
>
98-
<Download className="w-4 h-4" />
99-
Resume
100-
</a>
48+
</div>
49+
<div className="flex items-center gap-2">
50+
{[
51+
{ icon: Github, href: "https://github.com/Skt329", label: "GitHub" },
52+
{ icon: Linkedin, href: "https://linkedin.com/in/saurabht0", label: "LinkedIn" },
53+
{ icon: Mail, href: "mailto:st108113@gmail.com", label: "Email" },
54+
].map(({ icon: Icon, href, label }) => (
10155
<a
102-
href="https://www.npmjs.com/package/semantic-recall"
103-
target="_blank" rel="noopener noreferrer"
104-
className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl border border-primary/20 text-sm font-heading font-semibold text-primary/70 hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-all duration-300"
56+
key={label}
57+
href={href}
58+
target={label !== "Email" ? "_blank" : undefined}
59+
rel="noopener noreferrer"
60+
aria-label={label}
61+
className="w-10 h-10 flex items-center justify-center rounded-xl border border-border text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/5 transition-all duration-300"
10562
>
106-
<Package className="w-4 h-4" />
107-
npm
63+
<Icon className="w-4 h-4" />
10864
</a>
109-
</div>
110-
111-
{/* Socials row */}
112-
<div className="reveal stagger-6 flex items-center gap-3">
113-
{[
114-
{ icon: Github, href: "https://github.com/Skt329", label: "GitHub" },
115-
{ icon: Linkedin, href: "https://linkedin.com/in/saurabht0", label: "LinkedIn" },
116-
{ icon: Mail, href: "mailto:st108113@gmail.com", label: "Email" },
117-
].map(({ icon: Icon, href, label }) => (
118-
<a
119-
key={label}
120-
href={href}
121-
target={label !== "Email" ? "_blank" : undefined}
122-
rel="noopener noreferrer"
123-
aria-label={label}
124-
className="w-10 h-10 flex items-center justify-center rounded-xl border border-border text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/5 transition-all duration-300"
125-
>
126-
<Icon className="w-4 h-4" />
127-
</a>
128-
))}
129-
<span className="ml-2 text-xs text-muted-foreground/40 font-mono">st108113@gmail.com</span>
130-
</div>
65+
))}
13166
</div>
67+
</div>
13268

133-
{/* RIGHT COLUMN — Photo card */}
134-
<div className="reveal-right stagger-2 hidden lg:flex flex-col items-center gap-5">
135-
136-
{/* Avatar */}
137-
<div className="relative">
138-
{/* Glow ring */}
139-
<div className="absolute -inset-1 rounded-3xl bg-gradient-to-br from-primary/40 via-secondary/20 to-accent/20 blur-xl opacity-60" />
140-
<div className="relative w-64 xl:w-72 aspect-square rounded-3xl overflow-hidden border border-primary/20">
141-
<img
142-
src="/avatar.jpg"
143-
alt="Saurabh Tiwari — AI Engineer"
144-
className="w-full h-full object-cover object-top"
145-
loading="eager"
146-
fetchPriority="high"
147-
/>
148-
</div>
149-
{/* Floating badge — top right */}
150-
<div className="absolute -top-3 -right-3 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-[11px] font-mono font-medium">
151-
Available
152-
</div>
153-
</div>
154-
155-
{/* Stat cards below photo */}
156-
<div className="grid grid-cols-2 gap-2 w-full">
157-
{[
158-
{ value: "6+", label: "Apps shipped" },
159-
{ value: "15+", label: "AI tools" },
160-
{ value: "1", label: "npm package" },
161-
{ value: "2024", label: "MCA grad" },
162-
].map((stat) => (
163-
<div key={stat.label} className="skill-card rounded-xl p-3 text-center">
164-
<div className="stat-number text-xl">{stat.value}</div>
165-
<div className="text-[10px] text-muted-foreground mt-0.5">{stat.label}</div>
166-
</div>
167-
))}
168-
</div>
169-
170-
{/* Quick link to LinkedIn */}
69+
{/* Main headline */}
70+
<div className="max-w-4xl">
71+
<p className="reveal stagger-1 text-sm font-mono font-medium text-primary/70 tracking-[0.25em] uppercase mb-5">
72+
Saurabh Tiwari · AI Engineer
73+
</p>
74+
75+
<h1 className="font-heading font-extrabold tracking-tight text-foreground leading-[0.9] mb-8">
76+
<span className="reveal stagger-2 block text-5xl sm:text-6xl md:text-7xl lg:text-[5.2rem] xl:text-[6rem]">
77+
Building AI that
78+
</span>
79+
<span className="reveal stagger-3 block text-5xl sm:text-6xl md:text-7xl lg:text-[5.2rem] xl:text-[6rem]">
80+
<span className="text-gradient">actually ships.</span>
81+
</span>
82+
</h1>
83+
84+
<p className="reveal stagger-4 max-w-2xl text-muted-foreground text-sm sm:text-base leading-relaxed mb-3">
85+
AI Engineer building production-grade agentic systems, RAG pipelines, and MCP integrations.
86+
Independently shipped{" "}
87+
<span className="text-foreground font-medium">6 production apps</span> since MCA graduation —
88+
including a published{" "}
89+
<a href="https://www.npmjs.com/package/semantic-recall" target="_blank" rel="noopener noreferrer" className="text-primary/80 hover:text-primary underline underline-offset-2 transition-colors">
90+
npm package (semantic-recall)
91+
</a>{" "}
92+
and an agentic PWA with{" "}
93+
<span className="text-foreground font-medium">15+ orchestrated tools.</span>
94+
</p>
95+
96+
<p className="reveal stagger-4 text-xs text-muted-foreground/45 mb-12 font-mono">
97+
Stack:{" "}
98+
<span className="text-muted-foreground/70">Next.js</span> ·{" "}
99+
<span className="text-muted-foreground/70">Python</span> ·{" "}
100+
<span className="text-muted-foreground/70">FastAPI</span> ·{" "}
101+
<span className="text-muted-foreground/70">Vercel AI SDK</span> ·{" "}
102+
<span className="text-muted-foreground/70">pgvector</span> ·{" "}
103+
<span className="text-muted-foreground/70">ChromaDB</span> ·{" "}
104+
<span className="text-muted-foreground/70">Tauri/Rust</span>
105+
</p>
106+
107+
{/* CTAs */}
108+
<div className="reveal stagger-5 flex flex-wrap items-center gap-3">
171109
<a
172-
href="https://linkedin.com/in/saurabht0"
173-
target="_blank" rel="noopener noreferrer"
174-
className="flex items-center gap-2 text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors font-mono"
110+
href="#projects"
111+
className="group inline-flex items-center gap-3 px-7 py-3.5 rounded-xl bg-primary text-primary-foreground font-heading font-semibold text-sm tracking-wide hover:shadow-xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-0.5"
175112
>
176-
<Linkedin className="w-3 h-3" />
177-
linkedin.com/in/saurabht0
178-
<ArrowUpRight className="w-3 h-3" />
113+
View my work
114+
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
115+
</a>
116+
<a
117+
href="https://drive.google.com/file/d/1XVWXvlxU5R8PVge5lEtQM27rHmyn9sS7/view?usp=drive_link"
118+
target="_blank"
119+
rel="noopener noreferrer"
120+
className="group inline-flex items-center gap-2 px-6 py-3.5 rounded-xl border border-border text-sm font-heading font-semibold text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-all duration-300"
121+
>
122+
<Download className="w-4 h-4" />
123+
Resume
124+
</a>
125+
<a
126+
href="https://www.npmjs.com/package/semantic-recall"
127+
target="_blank"
128+
rel="noopener noreferrer"
129+
className="group inline-flex items-center gap-2 px-6 py-3.5 rounded-xl border border-primary/20 text-sm font-heading font-semibold text-primary/70 hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-all duration-300"
130+
>
131+
<Package className="w-4 h-4" />
132+
npm package
179133
</a>
180134
</div>
181-
182135
</div>
183136

184-
{/* Mobile photo (shows below text on mobile) */}
185-
<div className="lg:hidden mt-12 flex justify-center reveal stagger-6">
186-
<div className="relative w-48 aspect-square rounded-3xl overflow-hidden border border-primary/20">
187-
<div className="absolute -inset-1 rounded-3xl bg-gradient-to-br from-primary/30 via-secondary/15 to-accent/15 blur-lg opacity-60" />
188-
<img
189-
src="/avatar.jpg"
190-
alt="Saurabh Tiwari"
191-
className="relative w-full h-full object-cover object-top"
192-
loading="eager"
193-
/>
194-
</div>
137+
{/* Quick stat strip */}
138+
<div className="reveal stagger-6 mt-20 pt-10 border-t border-border grid grid-cols-2 sm:grid-cols-4 gap-8 max-w-2xl">
139+
{[
140+
{ value: "6+", label: "Production apps" },
141+
{ value: "15+", label: "AI tools orchestrated" },
142+
{ value: "1", label: "Published npm package" },
143+
{ value: "2024", label: "MCA Graduate" },
144+
].map((stat) => (
145+
<div key={stat.label} className="text-left">
146+
<div className="stat-number text-2xl sm:text-3xl mb-0.5">{stat.value}</div>
147+
<div className="text-xs text-muted-foreground">{stat.label}</div>
148+
</div>
149+
))}
195150
</div>
196-
197151
</div>
152+
153+
{/* Scroll indicator */}
154+
<a
155+
href="#projects"
156+
className="absolute bottom-8 left-1/2 -translate-x-1/2 text-muted-foreground/30 hover:text-muted-foreground/60 transition-colors"
157+
aria-label="Scroll to projects"
158+
>
159+
<ChevronDown className="w-5 h-5 animate-scroll-bounce" />
160+
</a>
198161
</section>
199162
);
200163
};

0 commit comments

Comments
 (0)