Update src/app/page.tsx
This commit is contained in:
251
src/app/page.tsx
251
src/app/page.tsx
@@ -27,154 +27,123 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Skills", id: "skills"},
|
||||
{
|
||||
name: "Timeline", id: "timeline"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="DEVANSH"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Timeline", id: "timeline" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="DEVANSH"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Hi, I'm Devansh."
|
||||
description="A Levels student. Future CS engineer. AI enthusiast."
|
||||
tag="// Mumbai, India"
|
||||
buttons={[
|
||||
{
|
||||
text: "View my work ↓", href: "#projects"},
|
||||
{
|
||||
text: "Get in touch", href: "#contact"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-cyber-particles_1048-13211.jpg", imageAlt: "abstract geometric dark background"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-boho-frame-pack_23-2149014818.jpg", imageAlt: "abstract geometric dark background"}
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Too young to be this serious, too driven to stop."
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Hi, I'm Devansh."
|
||||
description="A Levels student. Future CS engineer. AI enthusiast."
|
||||
tag="// Mumbai, India"
|
||||
buttons={[
|
||||
{ text: "View my work ↓", href: "#projects" },
|
||||
{ text: "Get in touch", href: "#contact" }
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-cyber-particles_1048-13211.jpg", imageAlt: "abstract geometric dark background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-boho-frame-pack_23-2149014818.jpg", imageAlt: "abstract geometric dark background" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Too young to be this serious, too driven to stop."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="// About Me"
|
||||
title="Driven to build the future."
|
||||
description="I'm a 17-year-old student in Mumbai, juggling five A Level subjects including Further Maths and Chemistry. I started coding with Python, found my way to web design, and now I'm building things that matter."
|
||||
subdescription="Outside academics, I game competitively and play sports. I believe the same mindset that wins games wins problems. My goal: join a top CS program and work on meaningful AI."
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-illustration_23-2149265565.jpg"
|
||||
icon={Code2}
|
||||
imageAlt="abstract geometric dark background"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="// About Me"
|
||||
title="Driven to build the future."
|
||||
description="I'm a 17-year-old student in Mumbai, juggling five A Level subjects including Further Maths and Chemistry. I started coding with Python, found my way to web design, and now I'm building things that matter."
|
||||
subdescription="Outside academics, I game competitively and play sports. I believe the same mindset that wins games wins problems. My goal: join a top CS program and work on meaningful AI."
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-illustration_23-2149265565.jpg"
|
||||
icon={Code2}
|
||||
imageAlt="abstract geometric dark background"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Python", description: "Scripting, automation, and logic-building for AI experiments.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-shapes-cover-collection_23-2148924494.jpg", imageAlt: "Hand drawn abstract shapes cover collection"},
|
||||
items: [],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "HTML", description: "Semantic structure for accessible, performant web markup.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-illustration_23-2149291049.jpg", imageAlt: "Hand drawn one line art illustration"},
|
||||
items: [],
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
title: "CSS", description: "Responsive layouts, animations, and precise pixel-perfect design.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-poster-set_23-2149291047.jpg", imageAlt: "Hand drawn one line art poster set"},
|
||||
items: [],
|
||||
reverse: false
|
||||
}
|
||||
]}
|
||||
title="Core Technical Stack"
|
||||
description="A focused set of tools chosen for efficiency and impact."
|
||||
tag="// what i work with"
|
||||
/>
|
||||
</div>
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Python", description: "Scripting, automation, and logic-building for AI experiments.", media: { imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-shapes-cover-collection_23-2148924494.jpg", imageAlt: "Hand drawn abstract shapes cover collection" }, items: [], reverse: false },
|
||||
{ title: "HTML", description: "Semantic structure for accessible, performant web markup.", media: { imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-illustration_23-2149291049.jpg", imageAlt: "Hand drawn one line art illustration" }, items: [], reverse: true },
|
||||
{ title: "CSS", description: "Responsive layouts, animations, and precise pixel-perfect design.", media: { imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-poster-set_23-2149291047.jpg", imageAlt: "Hand drawn one line art poster set" }, items: [], reverse: false },
|
||||
{ title: "Python", description: "Advanced logic for backend development.", media: { imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-connecting-lines-dots-modern-communications_1048-13763.jpg", imageAlt: "Abstract lines" }, items: [], reverse: false },
|
||||
{ title: "HTML", description: "Semantic web architecture.", media: { imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-plexus-low-poly-design-with-selective-focus_1048-12167.jpg", imageAlt: "Plexus design" }, items: [], reverse: true }
|
||||
]}
|
||||
title="Core Technical Stack"
|
||||
description="A focused set of tools chosen for efficiency and impact."
|
||||
tag="// what i work with"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="timeline" data-section="timeline">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "2023", title: "Completed IGCSE", items: [
|
||||
"Finished with top results in Maths and CS."],
|
||||
},
|
||||
{
|
||||
id: "2", value: "2024", title: "Started A Levels", items: [
|
||||
"Challenging myself with Further Maths and Chemistry."],
|
||||
},
|
||||
{
|
||||
id: "3", value: "2024", title: "First Webpage", items: [
|
||||
"Zero to working HTML/CSS in weeks."],
|
||||
},
|
||||
{
|
||||
id: "4", value: "2025", title: "Portfolio Launch", items: [
|
||||
"Committing to a serious online presence."],
|
||||
},
|
||||
]}
|
||||
title="Timeline & Growth"
|
||||
description="My journey through education and personal milestones."
|
||||
/>
|
||||
</div>
|
||||
<div id="timeline" data-section="timeline">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", value: "2023", title: "Completed IGCSE", items: ["Finished with top results in Maths and CS."] },
|
||||
{ id: "2", value: "2024", title: "Started A Levels", items: ["Challenging myself with Further Maths and Chemistry."] },
|
||||
{ id: "3", value: "2024", title: "First Webpage", items: ["Zero to working HTML/CSS in weeks."] },
|
||||
{ id: "4", value: "2025", title: "Portfolio Launch", items: ["Committing to a serious online presence."] },
|
||||
{ id: "5", value: "2025", title: "Deep Learning", items: ["Exploring neural networks."] }
|
||||
]}
|
||||
title="Timeline & Growth"
|
||||
description="My journey through education and personal milestones."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
title="Projects incoming."
|
||||
description="Currently building. Check back soon _"
|
||||
/>
|
||||
</div>
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
title="Projects incoming."
|
||||
description="Currently building. Check back soon _"
|
||||
products={[
|
||||
{ id: "p1", name: "Project Alpha", price: "$0", imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-low-poly-plexus-shapes-with-floating-particles_1048-12476.jpg" },
|
||||
{ id: "p2", name: "Project Beta", price: "$0", imageSrc: "http://img.b2bpic.net/free-vector/elegant-brown-maroon-gold-leaves-bouquet_44538-14354.jpg" },
|
||||
{ id: "p3", name: "Project Gamma", price: "$0", imageSrc: "http://img.b2bpic.net/free-psd/wine-label-template-design_23-2151940994.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="// Contact"
|
||||
title="Let's talk."
|
||||
description="I'm always up for a conversation about code, AI, or anything interesting."
|
||||
buttons={[
|
||||
{
|
||||
text: "Email Me", href: "mailto:thakkar.devansh@gmail.com"},
|
||||
{
|
||||
text: "LinkedIn", href: "https://linkedin.com/in/devansh-thakkar-584b66378"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="// Contact"
|
||||
title="Let's talk."
|
||||
description="I'm always up for a conversation about code, AI, or anything interesting."
|
||||
buttons={[
|
||||
{ text: "Email Me", href: "mailto:thakkar.devansh@gmail.com" },
|
||||
{ text: "LinkedIn", href: "https://linkedin.com/in/devansh-thakkar-584b66378" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="DEVANSH THAKKAR"
|
||||
copyrightText="© 2025 · Built with HTML, CSS & JS · Mumbai"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="DEVANSH THAKKAR"
|
||||
copyrightText="© 2025 · Built with HTML, CSS & JS · Mumbai"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user