Merge version_1 into main #1
289
src/app/page.tsx
289
src/app/page.tsx
@@ -30,137 +30,37 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "skills",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="CS.dev"
|
||||
button={{
|
||||
text: "Resume",
|
||||
href: "/resume.pdf",
|
||||
}}
|
||||
text: "Resume", href: "/resume.pdf"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Innovative Solutions for Complex Problems"
|
||||
description="I'm a Computer Science student passionate about building elegant software, AI, and scalable cloud systems. Let's create the future together."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/computer-monitors-office-desk-showing-data-analytics-dashboards_482257-126705.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126876.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-technology-background_1017-3798.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-lens-flare-background_1017-3413.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-hacker-celebrating-phishing-achievement-pc-feeling-happy-about-stealing-passwords-night-skilled-spy-enjoying-cyberattack-success-with-malware-break-firewall_482257-66409.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/computer-monitors-office-desk-showing-data-analytics-dashboards_482257-126705.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126876.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blue-technology-background_1017-3798.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-lens-flare-background_1017-3413.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/successful-hacker-celebrating-phishing-achievement-pc-feeling-happy-about-stealing-passwords-night-skilled-spy-enjoying-cyberattack-success-with-malware-break-firewall_482257-66409.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-home-office-with-desktop-pc-monitor-displaying-business-analytics_482257-130255.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cryptocurrency-coding-digital-blue-background-open-source-blockchain-concept_53876-124644.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-72239.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-72241.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-background-with-connecting-dots-circuit-board-image_1048-5813.jpg",
|
||||
imageAlt: "modern tech desk dashboard",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Work",
|
||||
href: "#projects",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/empty-business-workplace-equipped-with-modern-tech-tools-serve-enterprise_482257-125151.jpg",
|
||||
alt: "Empty business workplace",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/digital-devices-displaying-company-data_482257-119238.jpg",
|
||||
alt: "Digital devices",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/empty-high-end-workspace-with-advanced-tech-tools-enhancing-productivity_482257-119752.jpg",
|
||||
alt: "Empty high end workspace",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/empty-business-office-with-cubicles-used-organizational-activity-efficiency_482257-125697.jpg",
|
||||
alt: "Empty business office",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg",
|
||||
alt: "Modern workspace",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg",
|
||||
alt: "Financial software UI",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/boardroom-table-with-tablet-running-isolated-mockup-night-lights-performance-projections_482257-136166.jpg",
|
||||
alt: "Boardroom table",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/financial-application-ui-pc-screen-showing-company-revenue_482257-119232.jpg",
|
||||
alt: "Financial app",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/3d-render-low-poly-design-abstract-blur-background_1048-12681.jpg",
|
||||
alt: "Abstract low poly",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/3d-data-technology-background-with-flowing-particles_1048-18065.jpg",
|
||||
alt: "Flowing particles",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-home-office-with-desktop-pc-monitor-displaying-business-analytics_482257-130255.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cryptocurrency-coding-digital-blue-background-open-source-blockchain-concept_53876-124644.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-72239.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-72241.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-background-with-connecting-dots-circuit-board-image_1048-5813.jpg", imageAlt: "modern tech desk dashboard" },
|
||||
]}
|
||||
buttons={[{ text: "View My Work", href: "#projects" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -170,18 +70,9 @@ export default function LandingPage() {
|
||||
title="Passionate Learner, Aspiring Engineer"
|
||||
description="Currently pursuing a degree in CS with a focus on full-stack development and artificial intelligence. I bridge the gap between complex logic and user-centric design."
|
||||
metrics={[
|
||||
{
|
||||
value: "15+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "3+",
|
||||
title: "Hackathons Won",
|
||||
},
|
||||
{
|
||||
value: "2000+",
|
||||
title: "Commits This Year",
|
||||
},
|
||||
{ value: "15+", title: "Projects Completed" },
|
||||
{ value: "3+", title: "Hackathons Won" },
|
||||
{ value: "2000+", title: "Commits This Year" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg"
|
||||
imageAlt="student portrait modern tech"
|
||||
@@ -196,26 +87,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
tag: "Software Architecture",
|
||||
title: "Distributed Cloud Systems",
|
||||
subtitle: "Scalable Infrastructure",
|
||||
description: "Designed and deployed a highly available distributed system.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/engineer-oversees-ai-neural-network_482257-75607.jpg",
|
||||
},
|
||||
tag: "Software Architecture", title: "Distributed Cloud Systems", subtitle: "Scalable Infrastructure", description: "Designed and deployed a highly available distributed system.", imageSrc: "http://img.b2bpic.net/free-photo/engineer-oversees-ai-neural-network_482257-75607.jpg"},
|
||||
{
|
||||
tag: "Mobile Dev",
|
||||
title: "Cross-Platform App",
|
||||
subtitle: "User Experience Focused",
|
||||
description: "Developed a full-stack mobile application.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/engineers-data-center-using-isolated-screen-mockup-laptop_482257-122519.jpg",
|
||||
},
|
||||
tag: "Mobile Dev", title: "Cross-Platform App", subtitle: "User Experience Focused", description: "Developed a full-stack mobile application.", imageSrc: "http://img.b2bpic.net/free-photo/engineers-data-center-using-isolated-screen-mockup-laptop_482257-122519.jpg"},
|
||||
{
|
||||
tag: "AI & ML",
|
||||
title: "Predictive Analytics Engine",
|
||||
subtitle: "Data Science",
|
||||
description: "Built a predictive analytics engine.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-connecting-lines-dots_1048-7940.jpg",
|
||||
},
|
||||
tag: "AI & ML", title: "Predictive Analytics Engine", subtitle: "Data Science", description: "Built a predictive analytics engine.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-connecting-lines-dots_1048-7940.jpg"},
|
||||
]}
|
||||
title="Technical Projects"
|
||||
description="A showcase of some recent work demonstrating my technical proficiency and problem-solving skills."
|
||||
@@ -228,24 +104,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "s1",
|
||||
icon: Code,
|
||||
title: "Programming",
|
||||
value: "Expert",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
icon: Database,
|
||||
title: "Systems",
|
||||
value: "Proficient",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
icon: Cloud,
|
||||
title: "Infrastructure",
|
||||
value: "Certified",
|
||||
},
|
||||
{ id: "s1", icon: Code, title: "Programming", value: "Expert" },
|
||||
{ id: "s2", icon: Database, title: "Systems", value: "Proficient" },
|
||||
{ id: "s3", icon: Cloud, title: "Infrastructure", value: "Certified" },
|
||||
]}
|
||||
title="Tech Stack Mastery"
|
||||
description="Core competencies across multiple layers of technology."
|
||||
@@ -254,44 +115,15 @@ export default function LandingPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Prof. Smith",
|
||||
handle: "@university",
|
||||
testimonial: "An incredibly sharp student.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167349.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Jane Doe",
|
||||
handle: "@techcorp",
|
||||
testimonial: "Excellent collaboration skills.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-concept-portrait-handsome-business-man-playing-digital-notebook-with-smiling-confident-face-white-backgroundcopy-space_1258-103939.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Bob Lee",
|
||||
handle: "@peer",
|
||||
testimonial: "Go-to person for complex algorithm problems.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285285.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Alice Wang",
|
||||
handle: "@collab",
|
||||
testimonial: "Proactive and keeps up with tech.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "John Doe",
|
||||
handle: "@startup",
|
||||
testimonial: "Brilliant contributor.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/multicultural-team-women-leaders-hold-online-conference-call_482257-123708.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Prof. Smith", handle: "@university", testimonial: "An incredibly sharp student.", imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167349.jpg" },
|
||||
{ id: "t2", name: "Jane Doe", handle: "@techcorp", testimonial: "Excellent collaboration skills.", imageSrc: "http://img.b2bpic.net/free-photo/business-concept-portrait-handsome-business-man-playing-digital-notebook-with-smiling-confident-face-white-backgroundcopy-space_1258-103939.jpg" },
|
||||
{ id: "t3", name: "Bob Lee", handle: "@peer", testimonial: "Go-to person for complex algorithm problems.", imageSrc: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285285.jpg" },
|
||||
{ id: "t4", name: "Alice Wang", handle: "@collab", testimonial: "Proactive and keeps up with tech.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg" },
|
||||
{ id: "t5", name: "John Doe", handle: "@startup", testimonial: "Brilliant contributor.", imageSrc: "http://img.b2bpic.net/free-photo/multicultural-team-women-leaders-hold-online-conference-call_482257-123708.jpg" },
|
||||
]}
|
||||
title="Endorsements"
|
||||
description="What professors and peers say about my contributions."
|
||||
@@ -304,25 +136,10 @@ export default function LandingPage() {
|
||||
title="Let's Collaborate"
|
||||
description="Looking for opportunities or want to chat about tech? Drop me a message."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Let's talk about...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
textarea={{ name: "message", placeholder: "Let's talk about...", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/office-supplies-with-computer-notebook-white-desk_1357-107.jpg"
|
||||
/>
|
||||
</div>
|
||||
@@ -330,40 +147,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navigation", items: [{ label: "About", href: "#about" }, { label: "Projects", href: "#projects" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Social", items: [{ label: "GitHub", href: "#" }, { label: "LinkedIn", href: "#" }, { label: "Twitter", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 CS Student Portfolio"
|
||||
bottomRightText="Built with passion"
|
||||
|
||||
Reference in New Issue
Block a user