193 lines
11 KiB
TypeScript
193 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Sparkles, Zap, Star, Mail, Linkedin, Github, ExternalLink } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Your Name"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Projects", id: "projects" },
|
|
{ name: "Skills", id: "skills" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Crafting Digital Excellence"
|
|
description="Showcase your academic projects, skills, and achievements. Let your work speak for itself and connect with opportunities that match your passion."
|
|
tag="College Portfolio"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "animated-grid" }}
|
|
buttons={[
|
|
{ text: "View My Work", href: "projects" },
|
|
{ text: "Get In Touch", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/designer-desk-architectural-tools-notebook-working-place-concept_53876-123770.jpg?_wi=1"
|
|
imageAlt="Portfolio hero showcase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="About Me"
|
|
description="I'm a passionate student dedicated to creating meaningful digital experiences. Through my coursework and personal projects, I've developed expertise in design, development, and problem-solving. My goal is to bridge the gap between creative vision and technical implementation."
|
|
tag="Student Developer & Designer"
|
|
tagAnimation="blur-reveal"
|
|
buttons={[{ text: "Download Resume", href: "#" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/smart-looking-teacher_53876-23045.jpg"
|
|
imageAlt="Student portrait"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardTwo
|
|
title="Featured Projects"
|
|
description="A selection of my best work spanning web design, development, and creative projects. Each project demonstrates my commitment to quality and innovation."
|
|
tag="My Portfolio"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="blur-reveal"
|
|
buttons={[{ text: "View All Projects", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", brand: "Web Design", name: "E-Commerce Platform Redesign", price: "2024", rating: 5,
|
|
reviewCount: "Completed in 3 months", imageSrc: "http://img.b2bpic.net/free-vector/social-page-application-ui-design-concept_1284-45234.jpg?_wi=1", imageAlt: "E-commerce platform redesign project"
|
|
},
|
|
{
|
|
id: "2", brand: "Full Stack Development", name: "Task Management Application", price: "2024", rating: 5,
|
|
reviewCount: "8.2k GitHub stars", imageSrc: "http://img.b2bpic.net/free-photo/man-programming-office-using-artificial-intelligence-tech_482257-123917.jpg?_wi=1", imageAlt: "Task management app development"
|
|
},
|
|
{
|
|
id: "3", brand: "UI/UX Design", name: "Mobile App Concept", price: "2023", rating: 5,
|
|
reviewCount: "1.5k user engagement", imageSrc: "http://img.b2bpic.net/free-psd/creative-template-design_23-2150217599.jpg?_wi=1", imageAlt: "Mobile app design concept"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<FeatureCardSeven
|
|
title="My Expertise"
|
|
description="Proficient in a wide range of technologies and methodologies that drive modern digital solutions."
|
|
tag="Skills & Tools"
|
|
tagIcon={Zap}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Front-End Development", description: "HTML, CSS, JavaScript, React, and modern responsive design frameworks for creating beautiful user interfaces.", imageSrc: "http://img.b2bpic.net/free-vector/social-page-application-ui-design-concept_1284-45234.jpg?_wi=2", imageAlt: "Front-end development skills"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Back-End Development", description: "Server-side programming with Node.js, databases, APIs, and cloud services to power robust applications.", imageSrc: "http://img.b2bpic.net/free-photo/man-programming-office-using-artificial-intelligence-tech_482257-123917.jpg?_wi=2", imageAlt: "Back-end development skills"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "UI/UX Design", description: "User research, wireframing, prototyping, and design systems to create intuitive and engaging experiences.", imageSrc: "http://img.b2bpic.net/free-psd/creative-template-design_23-2150217599.jpg?_wi=2", imageAlt: "UI/UX design capabilities"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Project Management", description: "Agile methodologies, collaboration tools, and problem-solving skills to deliver projects on time and on budget.", imageSrc: "http://img.b2bpic.net/free-photo/designer-desk-architectural-tools-notebook-working-place-concept_53876-123770.jpg?_wi=2", imageAlt: "Project management experience"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="What Others Say"
|
|
description="Feedback from professors, mentors, and collaborators who have experienced my work and dedication."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Exceptional Problem Solver", quote: "Their ability to think critically and implement creative solutions consistently impressed me. They bring both technical skill and strategic thinking to every project.", name: "Dr. Sarah Johnson", role: "Computer Science Professor", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Dr. Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", title: "Collaborative Team Player", quote: "Working with them on the capstone project was a pleasure. They communicated effectively, took feedback graciously, and elevated everyone's work.", name: "Michael Chen", role: "Project Lead, Tech Internship", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", title: "Dedicated and Passionate", quote: "What sets them apart is their passion for learning and continuous improvement. They don't just complete assignments—they master them.", name: "Emily Rodriguez", role: "Faculty Mentor", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", title: "Industry-Ready Talent", quote: "Their portfolio demonstrates maturity and professionalism beyond typical student work. They're ready to make an immediate impact in any development team.", name: "David Kim", role: "Senior Developer, StartupXYZ", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4", imageAlt: "David Kim"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Let's Connect"
|
|
title="Ready to Collaborate?"
|
|
description="Have an exciting project in mind or want to discuss opportunities? I'd love to hear from you. Drop me a message and let's create something amazing together."
|
|
tagIcon={Mail}
|
|
tagAnimation="blur-reveal"
|
|
background={{ variant: "animated-grid" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/business-commuters-waiting-queue_107420-95872.jpg"
|
|
imageAlt="Contact collaboration"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Your email address"
|
|
buttonText="Get In Touch"
|
|
termsText="I respect your privacy. I'll only use your email to respond to your inquiry."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Your Name"
|
|
copyrightText="© 2025 Your Name. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn profile" },
|
|
{ icon: Github, href: "https://github.com", ariaLabel: "GitHub profile" },
|
|
{ icon: Mail, href: "mailto:your.email@example.com", ariaLabel: "Email contact" },
|
|
{ icon: ExternalLink, href: "https://yourportfolio.com", ariaLabel: "Personal website" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|