Merge version_1 into main #2
261
src/app/page.tsx
261
src/app/page.tsx
@@ -10,7 +10,7 @@ import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { BookOpen, Code, Compass, GraduationCap, Heart, Lightbulb, Rocket, Salad, Smile, Sparkles } from "lucide-react";
|
||||
import { BookOpen, Code, Compass, GraduationCap, Heart, Lightbulb, Rocket, Salad, Smile, Sparkles, Brain, Dumbbell } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -31,29 +31,17 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "About Me",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About Me", id: "#about"},
|
||||
{
|
||||
name: "Goals",
|
||||
id: "#goals",
|
||||
},
|
||||
name: "Goals", id: "#goals"},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "#projects",
|
||||
},
|
||||
name: "Projects", id: "#projects"},
|
||||
{
|
||||
name: "Journey",
|
||||
id: "#journey",
|
||||
},
|
||||
name: "Journey", id: "#journey"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="My Portfolio"
|
||||
/>
|
||||
@@ -62,51 +50,28 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
variant: "rotated-rays-animated"}}
|
||||
title="Hi, I'm Alex Chen"
|
||||
description="A driven student passionate about AI, self-improvement, and fitness, aiming for academic excellence and impactful projects."
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
text: "View My Projects", href: "#projects"},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
text: "Learn More", href: "#about"},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "hc-1",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-1r8my6gs.jpg?_wi=1",
|
||||
imageAlt: "Student working on a laptop",
|
||||
},
|
||||
id: "hc-1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-1r8my6gs.jpg", imageAlt: "Student working on a laptop"},
|
||||
{
|
||||
id: "hc-2",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-4w8r28zc.jpg?_wi=1",
|
||||
imageAlt: "Student taking a selfie",
|
||||
},
|
||||
id: "hc-2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-4w8r28zc.jpg", imageAlt: "Student taking a selfie"},
|
||||
{
|
||||
id: "hc-3",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-2aorx0aq.jpg?_wi=1",
|
||||
imageAlt: "Student viewing media on phone",
|
||||
},
|
||||
id: "hc-3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-2aorx0aq.jpg", imageAlt: "Student viewing media on phone"},
|
||||
{
|
||||
id: "hc-4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-66637.jpg?_wi=1",
|
||||
imageAlt: "Student focused on AI development",
|
||||
},
|
||||
id: "hc-4", imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-66637.jpg", imageAlt: "Student focused on AI development"},
|
||||
{
|
||||
id: "hc-5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-afro-american-sports-man-holding-phone-hand-while-listen-music_171337-9243.jpg",
|
||||
imageAlt: "Person exercising for fitness",
|
||||
},
|
||||
id: "hc-5", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-afro-american-sports-man-holding-phone-hand-while-listen-music_171337-9243.jpg", imageAlt: "Person exercising for fitness"},
|
||||
{
|
||||
id: "hc-6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shadow-running-sportsman_23-2147755456.jpg",
|
||||
imageAlt: "Abstract representation of personal growth",
|
||||
},
|
||||
id: "hc-6", imageSrc: "http://img.b2bpic.net/free-photo/shadow-running-sportsman_23-2147755456.jpg", imageAlt: "Abstract representation of personal growth"},
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
@@ -117,7 +82,6 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="About Me: Student, Learner, Creator"
|
||||
description="Currently pursuing my IGCSEs, I am deeply interested in Artificial Intelligence and its potential to shape the future. My journey is fueled by a commitment to continuous self-improvement, both intellectually and physically, through fitness. I believe in a holistic approach to personal development, blending academic rigor with practical application and well-being. This portfolio is a glimpse into my passions, projects, and aspirations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -128,104 +92,68 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Academic Excellence",
|
||||
description: "Striving for top grades in IGCSEs, with a focus on deep understanding and critical thinking across all subjects.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/opened-book-vivid-pile-against-chalkboard_23-2148207632.jpg",
|
||||
imageAlt: "Academic excellence symbol",
|
||||
},
|
||||
title: "Academic Excellence", description: "Striving for top grades in IGCSEs, with a focus on deep understanding and critical thinking across all subjects.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/opened-book-vivid-pile-against-chalkboard_23-2148207632.jpg", imageAlt: "Academic excellence symbol"},
|
||||
items: [
|
||||
{
|
||||
icon: GraduationCap,
|
||||
text: "Achieve A* grades",
|
||||
},
|
||||
text: "Achieve A* grades"},
|
||||
{
|
||||
icon: BookOpen,
|
||||
text: "Master core subjects",
|
||||
},
|
||||
text: "Master core subjects"},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
text: "Develop critical thinking",
|
||||
},
|
||||
text: "Develop critical thinking"},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-1r8my6gs.jpg?_wi=2",
|
||||
imageAlt: "academic excellence minimalist black white",
|
||||
},
|
||||
{
|
||||
title: "AI Exploration & Projects",
|
||||
description: "Actively learning about Artificial Intelligence, developing practical skills, and building innovative projects.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-symmetric-pattern-magnetic-shaving-pattern-backdrop_23-2148263526.jpg",
|
||||
imageAlt: "AI neural network",
|
||||
},
|
||||
title: "AI Exploration & Projects", description: "Actively learning about Artificial Intelligence, developing practical skills, and building innovative projects.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-symmetric-pattern-magnetic-shaving-pattern-backdrop_23-2148263526.jpg", imageAlt: "AI neural network"},
|
||||
items: [
|
||||
{
|
||||
icon: Brain,
|
||||
text: "Learn ML frameworks",
|
||||
},
|
||||
text: "Learn ML frameworks"},
|
||||
{
|
||||
icon: Code,
|
||||
text: "Build AI applications",
|
||||
},
|
||||
text: "Build AI applications"},
|
||||
{
|
||||
icon: Rocket,
|
||||
text: "Innovate with AI",
|
||||
},
|
||||
text: "Innovate with AI"},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-4w8r28zc.jpg?_wi=2",
|
||||
imageAlt: "academic excellence minimalist black white",
|
||||
},
|
||||
{
|
||||
title: "Holistic Self-Improvement",
|
||||
description: "Committed to personal growth through learning new skills, reading, and cultivating a positive mindset.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-white-jaguar-nature_23-2151694920.jpg",
|
||||
imageAlt: "Person meditating",
|
||||
},
|
||||
title: "Holistic Self-Improvement", description: "Committed to personal growth through learning new skills, reading, and cultivating a positive mindset.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-white-jaguar-nature_23-2151694920.jpg", imageAlt: "Person meditating"},
|
||||
items: [
|
||||
{
|
||||
icon: Sparkles,
|
||||
text: "Daily learning habits",
|
||||
},
|
||||
text: "Daily learning habits"},
|
||||
{
|
||||
icon: Compass,
|
||||
text: "Develop new skills",
|
||||
},
|
||||
text: "Develop new skills"},
|
||||
{
|
||||
icon: Smile,
|
||||
text: "Cultivate positive mindset",
|
||||
},
|
||||
text: "Cultivate positive mindset"},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EnooGF53LWSxRtH9JvRgqcb6Bs/uploaded-1780902261619-2aorx0aq.jpg?_wi=2",
|
||||
imageAlt: "academic excellence minimalist black white",
|
||||
},
|
||||
{
|
||||
title: "Fitness & Well-being",
|
||||
description: "Maintaining a healthy and active lifestyle through regular exercise, balanced nutrition, and mental well-being practices.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-practicing-yoga_23-2151406448.jpg",
|
||||
imageAlt: "Running track",
|
||||
},
|
||||
title: "Fitness & Well-being", description: "Maintaining a healthy and active lifestyle through regular exercise, balanced nutrition, and mental well-being practices.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-practicing-yoga_23-2151406448.jpg", imageAlt: "Running track"},
|
||||
items: [
|
||||
{
|
||||
icon: Dumbbell,
|
||||
text: "Consistent workouts",
|
||||
},
|
||||
text: "Consistent workouts"},
|
||||
{
|
||||
icon: Salad,
|
||||
text: "Balanced nutrition",
|
||||
},
|
||||
text: "Balanced nutrition"},
|
||||
{
|
||||
icon: Heart,
|
||||
text: "Mental wellness",
|
||||
},
|
||||
text: "Mental wellness"},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-66637.jpg?_wi=2",
|
||||
imageAlt: "academic excellence minimalist black white",
|
||||
},
|
||||
]}
|
||||
title="My Aspirations & Growth"
|
||||
@@ -242,47 +170,17 @@ export default function LandingPage() {
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Portfolio Website (Current)",
|
||||
price: "In Progress",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148275643.jpg",
|
||||
imageAlt: "Portfolio website dashboard",
|
||||
},
|
||||
id: "p1", name: "Portfolio Website (Current)", price: "In Progress", imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148275643.jpg", imageAlt: "Portfolio website dashboard"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Data Analytics Dashboard",
|
||||
price: "Concept",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/graph-data-show-summary-analysis-icon-graphic_53876-64935.jpg",
|
||||
imageAlt: "Data analysis visualization",
|
||||
},
|
||||
id: "p2", name: "Data Analytics Dashboard", price: "Concept", imageSrc: "http://img.b2bpic.net/free-photo/graph-data-show-summary-analysis-icon-graphic_53876-64935.jpg", imageAlt: "Data analysis visualization"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Personal Habit Tracker App",
|
||||
price: "Prototype",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mobile-app-analytics-dashboard_23-2151957122.jpg",
|
||||
imageAlt: "Self-improvement app UI",
|
||||
},
|
||||
id: "p3", name: "Personal Habit Tracker App", price: "Prototype", imageSrc: "http://img.b2bpic.net/free-photo/mobile-app-analytics-dashboard_23-2151957122.jpg", imageAlt: "Self-improvement app UI"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "AI Chatbot Prototype",
|
||||
price: "Experiment",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-binary-script-running-pc-monitors_482257-123753.jpg",
|
||||
imageAlt: "Student presenting code",
|
||||
},
|
||||
id: "p4", name: "AI Chatbot Prototype", price: "Experiment", imageSrc: "http://img.b2bpic.net/free-photo/close-up-binary-script-running-pc-monitors_482257-123753.jpg", imageAlt: "Student presenting code"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "IoT Home Automation",
|
||||
price: "Idea Stage",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-girl-student-works-laptop-listens-music-headphones-blank-computer_1258-195989.jpg",
|
||||
imageAlt: "Smart home interface",
|
||||
},
|
||||
id: "p5", name: "IoT Home Automation", price: "Idea Stage", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-girl-student-works-laptop-listens-music-headphones-blank-computer_1258-195989.jpg", imageAlt: "Smart home interface"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Decentralized Finance Concept",
|
||||
price: "Research",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-purple-lights-with-bokeh-effect_1017-2671.jpg",
|
||||
imageAlt: "Blockchain network visualization",
|
||||
},
|
||||
id: "p6", name: "Decentralized Finance Concept", price: "Research", imageSrc: "http://img.b2bpic.net/free-photo/neon-purple-lights-with-bokeh-effect_1017-2671.jpg", imageAlt: "Blockchain network visualization"},
|
||||
]}
|
||||
title="My Creative Ventures"
|
||||
description="Exploring innovative ideas and bringing concepts to life through various projects, from AI prototypes to web development experiments."
|
||||
@@ -297,34 +195,16 @@ export default function LandingPage() {
|
||||
carouselMode="buttons"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "IGCSE",
|
||||
title: "Academic Pursuits",
|
||||
items: [
|
||||
"Started IGCSE studies (2023)",
|
||||
"Focused on STEM subjects",
|
||||
"Aiming for A* in all subjects",
|
||||
],
|
||||
id: "m1", value: "IGCSE", title: "Academic Pursuits", items: [
|
||||
"Started IGCSE studies (2023)", "Focused on STEM subjects", "Aiming for A* in all subjects"],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "AI/Dev",
|
||||
title: "Project Milestones",
|
||||
items: [
|
||||
"First coding projects (2022)",
|
||||
"Exploring AI fundamentals (2023)",
|
||||
"Developing portfolio site (2024)",
|
||||
],
|
||||
id: "m2", value: "AI/Dev", title: "Project Milestones", items: [
|
||||
"First coding projects (2022)", "Exploring AI fundamentals (2023)", "Developing portfolio site (2024)"],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Growth",
|
||||
title: "Personal Development",
|
||||
items: [
|
||||
"Started fitness journey (2022)",
|
||||
"Adopted self-learning habits (2023)",
|
||||
"Continuous skill acquisition",
|
||||
],
|
||||
id: "m3", value: "Growth", title: "Personal Development", items: [
|
||||
"Started fitness journey (2022)", "Adopted self-learning habits (2023)", "Continuous skill acquisition"],
|
||||
},
|
||||
]}
|
||||
title="My Journey of Growth"
|
||||
@@ -336,22 +216,15 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
text="Let's Connect and Collaborate. Reach out for projects, inquiries, or just a chat!"
|
||||
buttons={[
|
||||
{
|
||||
text: "Email Me",
|
||||
href: "mailto:hello@example.com",
|
||||
},
|
||||
text: "Email Me", href: "mailto:hello@example.com"},
|
||||
{
|
||||
text: "LinkedIn",
|
||||
href: "https://linkedin.com/in/yourprofile",
|
||||
},
|
||||
text: "LinkedIn", href: "https://linkedin.com/in/yourprofile"},
|
||||
{
|
||||
text: "GitHub",
|
||||
href: "https://github.com/yourprofile",
|
||||
},
|
||||
text: "GitHub", href: "https://github.com/yourprofile"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -363,37 +236,23 @@ export default function LandingPage() {
|
||||
logoText="My Portfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "About Me",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About Me", href: "#about"},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
label: "Projects", href: "#projects"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:hello@example.com",
|
||||
},
|
||||
label: "Email", href: "mailto:hello@example.com"},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "https://linkedin.com/in/yourprofile",
|
||||
},
|
||||
label: "LinkedIn", href: "https://linkedin.com/in/yourprofile"},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "https://github.com/yourprofile",
|
||||
},
|
||||
label: "GitHub", href: "https://github.com/yourprofile"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user