Merge version_1 into main #1
305
src/app/page.tsx
305
src/app/page.tsx
@@ -27,219 +27,112 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "skills",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "work",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Himank"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Himank"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Himank"
|
||||
description="Tech Enthusiast | Solutions Architect | Web Designer. Crafting digital experiences. Solving real-world problems through technology."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Work",
|
||||
href: "#work",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/network-connections-technology-background_1048-10358.jpg"
|
||||
imageAlt="Futuristic digital background"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Himank"
|
||||
description="Tech Enthusiast | Solutions Architect | Web Designer. Crafting digital experiences. Solving real-world problems through technology."
|
||||
buttons={[{ text: "Explore Work", href: "#work" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/network-connections-technology-background_1048-10358.jpg"
|
||||
imageAlt="Futuristic digital background"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Who I Am"
|
||||
description="I am an Intermediate 1st Year student with a deep-seated passion for the digital world. I don't just use technology; I dissect it, refine it, and use it to solve real-world problems. Whether it’s building a sleek interface or digging into back-end systems, I thrive on making technology work better for everyone."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-man-working-with-tablet_23-2149930989.jpg"
|
||||
imageAlt="A developer working on new digital solutions"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Problem Solver",
|
||||
description: "I analyze complex data to find simple, effective solutions.",
|
||||
},
|
||||
{
|
||||
title: "Tech Enthusiast",
|
||||
description: "Always exploring the latest trends in UI/UX and backend architecture.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Who I Am"
|
||||
description="I am an Intermediate 1st Year student with a deep-seated passion for the digital world. I don't just use technology; I dissect it, refine it, and use it to solve real-world problems. Whether it’s building a sleek interface or digging into back-end systems, I thrive on making technology work better for everyone."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-man-working-with-tablet_23-2149930989.jpg"
|
||||
imageAlt="A developer working on new digital solutions"
|
||||
bulletPoints={[
|
||||
{ title: "Problem Solver", description: "I analyze complex data to find simple, effective solutions." },
|
||||
{ title: "Tech Enthusiast", description: "Always exploring the latest trends in UI/UX and backend architecture." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Technical Troubleshooting",
|
||||
"Performance Tuning",
|
||||
"Legacy Code Audits",
|
||||
"System Debugging",
|
||||
"Infrastructure Security",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Web & UI/UX Design",
|
||||
"Internet Detective",
|
||||
"Digital Content Creation",
|
||||
"Software Architecture",
|
||||
"Full Stack Development",
|
||||
],
|
||||
}}
|
||||
title="What I Do Best"
|
||||
description="Interactive neon-glass cards with hover glow + 3D tilt effect."
|
||||
/>
|
||||
</div>
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["Technical Troubleshooting", "Performance Tuning", "Legacy Code Audits", "System Debugging", "Infrastructure Security"] }}
|
||||
positiveCard={{ items: ["Web & UI/UX Design", "Internet Detective", "Digital Content Creation", "Software Architecture", "Full Stack Development"] }}
|
||||
title="What I Do Best"
|
||||
description="Interactive neon-glass cards with hover glow + 3D tilt effect."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="philosophy" data-section="philosophy">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Sparkles,
|
||||
title: "Problems Solved",
|
||||
value: "50+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Shield,
|
||||
title: "Projects Completed",
|
||||
value: "20+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Zap,
|
||||
title: "Hours Investigating",
|
||||
value: "1000+",
|
||||
},
|
||||
]}
|
||||
title="My Philosophy"
|
||||
description="I believe that no problem is too small to ignore and no data is too hidden to find. My goal is to bridge the gap between complex technology and a seamless user experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="philosophy" data-section="philosophy">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Sparkles, title: "Problems Solved", value: "50+" },
|
||||
{ id: "m2", icon: Shield, title: "Projects Completed", value: "20+" },
|
||||
{ id: "m3", icon: Zap, title: "Hours Investigating", value: "1000+" },
|
||||
]}
|
||||
title="My Philosophy"
|
||||
description="I believe that no problem is too small to ignore and no data is too hidden to find. My goal is to bridge the gap between complex technology and a seamless user experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "System UI v1",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201876.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Web Interface",
|
||||
price: "Portfolio",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "App Concept",
|
||||
price: "UI Design",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104511.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Space Architecture",
|
||||
price: "Digital",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hud-user-interface-technology-spaceship-virtual-reality-game-with-infographic-chart-navigation-button_90220-1368.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Data Dashboard",
|
||||
price: "UI Design",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-41005.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Brand Showcase",
|
||||
price: "Visual",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/blog-main-page-template_53876-88255.jpg",
|
||||
},
|
||||
]}
|
||||
title="My Work"
|
||||
description="System UI Design and creative digital works."
|
||||
/>
|
||||
</div>
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "System UI v1", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201876.jpg" },
|
||||
{ id: "p2", name: "Web Interface", price: "Portfolio", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg" },
|
||||
{ id: "p3", name: "App Concept", price: "UI Design", imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104511.jpg" },
|
||||
{ id: "p4", name: "Space Architecture", price: "Digital", imageSrc: "http://img.b2bpic.net/free-photo/hud-user-interface-technology-spaceship-virtual-reality-game-with-infographic-chart-navigation-button_90220-1368.jpg" },
|
||||
{ id: "p5", name: "Data Dashboard", price: "UI Design", imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-41005.jpg" },
|
||||
{ id: "p6", name: "Brand Showcase", price: "Visual", imageSrc: "http://img.b2bpic.net/free-vector/blog-main-page-template_53876-88255.jpg" },
|
||||
]}
|
||||
title="My Work"
|
||||
description="System UI Design and creative digital works."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
tag="Let’s Connect"
|
||||
title="Available for new challenges"
|
||||
description="I’m always looking for new challenges and opportunities to grow my skill set. Reach me at himonkbavisetti@gmail.com or @_technophile_.x on Instagram."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/scene-with-business-person-working-futuristic-office-job_23-2151003699.jpg"
|
||||
imageAlt="Collaboration atmosphere"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "animated-grid" }}
|
||||
tag="Let’s Connect"
|
||||
title="Available for new challenges"
|
||||
description="I’m always looking for new challenges and opportunities to grow my skill set. Reach me at himonkbavisetti@gmail.com or @_technophile_.x on Instagram."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/scene-with-business-person-working-futuristic-office-job_23-2151003699.jpg"
|
||||
imageAlt="Collaboration atmosphere"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Skills",
|
||||
href: "#skills",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Work",
|
||||
href: "#work",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Himank"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Skills", href: "#skills" }] },
|
||||
{ items: [{ label: "Work", href: "#work" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
logoText="Himank"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user