Skip to content

Commit 03dcdd4

Browse files
lucasbecker-devlucasbecker-dev
committed
Modularize portfolio page with component extraction and improved code organization
- Extract components from page.tsx into separate files - Create dedicated components for Header, Footer, and each section - Add Skill component for consistent technology highlighting - Improve code readability and maintainability - Preserve existing functionality and styling
1 parent f376673 commit 03dcdd4

File tree

9 files changed

+527
-490
lines changed

9 files changed

+527
-490
lines changed

‎app/page.tsx‎

Lines changed: 9 additions & 490 deletions
Large diffs are not rendered by default.

‎components/layout/footer.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use client"
2+
3+
import Link from "next/link"
4+
import { Github, Linkedin, Mail } from "lucide-react"
5+
import { Button } from "@/components/ui/button"
6+
7+
export const Footer = () => (
8+
<footer className="border-t py-6 md:py-8 bg-muted/50">
9+
<div className="container flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
10+
<div className="text-sm text-muted-foreground">
11+
Copyright © {new Date().getFullYear()} Lucas Becker. All rights reserved.
12+
</div>
13+
<div className="flex gap-4">
14+
<Link href="https://github.com/lucasbecker-dev" target="_blank" rel="noopener noreferrer">
15+
<Button variant="ghost" size="icon" className="text-foreground hover:text-primary hover:bg-primary/10">
16+
<Github className="h-5 w-5" />
17+
<span className="sr-only">GitHub</span>
18+
</Button>
19+
</Link>
20+
<Link href="https://www.linkedin.com/in/lucasbecker-dev/" target="_blank" rel="noopener noreferrer">
21+
<Button variant="ghost" size="icon" className="text-foreground hover:text-primary hover:bg-primary/10">
22+
<Linkedin className="h-5 w-5" />
23+
<span className="sr-only">LinkedIn</span>
24+
</Button>
25+
</Link>
26+
<Link href="mailto:lucasbecker.dev@gmail.com">
27+
<Button variant="ghost" size="icon" className="text-foreground hover:text-primary hover:bg-primary/10">
28+
<Mail className="h-5 w-5" />
29+
<span className="sr-only">Email</span>
30+
</Button>
31+
</Link>
32+
</div>
33+
</div>
34+
</footer>
35+
);

‎components/layout/header.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
"use client"
2+
3+
import Link from "next/link"
4+
import { Github, Linkedin, Menu, X } from "lucide-react"
5+
import { Button } from "@/components/ui/button"
6+
import { ThemeToggle } from "@/components/theme-toggle"
7+
8+
// Header component props
9+
interface HeaderProps {
10+
mobileMenuOpen: boolean;
11+
setMobileMenuOpen: (open: boolean) => void;
12+
handleSmoothScroll: (e: React.MouseEvent<HTMLAnchorElement>) => void;
13+
}
14+
15+
export const Header = ({ mobileMenuOpen, setMobileMenuOpen, handleSmoothScroll }: HeaderProps) => (
16+
<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm">
17+
<div className="container flex h-16 items-center justify-between">
18+
<Link href="/" className="text-xl font-bold text-foreground">
19+
Lucas Becker
20+
</Link>
21+
<nav className={`${mobileMenuOpen ? "flex" : "hidden"} md:flex absolute md:static top-16 left-0 right-0 flex-col md:flex-row items-start md:items-center gap-4 md:gap-6 p-4 md:p-0 bg-background md:bg-transparent border-b md:border-0 z-50`}>
22+
<Link
23+
href="#about"
24+
className="text-foreground hover:text-primary transition-colors"
25+
onClick={(e) => {
26+
handleSmoothScroll(e);
27+
setMobileMenuOpen(false);
28+
}}
29+
>
30+
About
31+
</Link>
32+
<Link
33+
href="#projects"
34+
className="text-foreground hover:text-primary transition-colors"
35+
onClick={(e) => {
36+
handleSmoothScroll(e);
37+
setMobileMenuOpen(false);
38+
}}
39+
>
40+
Projects
41+
</Link>
42+
<Link
43+
href="#skills"
44+
className="text-foreground hover:text-primary transition-colors"
45+
onClick={(e) => {
46+
handleSmoothScroll(e);
47+
setMobileMenuOpen(false);
48+
}}
49+
>
50+
Skills
51+
</Link>
52+
<Link
53+
href="#contact"
54+
className="text-foreground hover:text-primary transition-colors"
55+
onClick={(e) => {
56+
handleSmoothScroll(e);
57+
setMobileMenuOpen(false);
58+
}}
59+
>
60+
Contact
61+
</Link>
62+
</nav>
63+
<div className="flex items-center gap-2">
64+
<ThemeToggle />
65+
<div className="hidden md:flex gap-2">
66+
<Link href="https://github.com/lucasbecker-dev" target="_blank" rel="noopener noreferrer">
67+
<Button variant="ghost" size="icon" className="text-foreground hover:text-primary hover:bg-primary/10">
68+
<Github className="h-5 w-5" />
69+
<span className="sr-only">GitHub</span>
70+
</Button>
71+
</Link>
72+
<Link href="https://www.linkedin.com/in/lucasbecker-dev/" target="_blank" rel="noopener noreferrer">
73+
<Button variant="ghost" size="icon" className="text-foreground hover:text-primary hover:bg-primary/10">
74+
<Linkedin className="h-5 w-5" />
75+
<span className="sr-only">LinkedIn</span>
76+
</Button>
77+
</Link>
78+
</div>
79+
<Button
80+
variant="ghost"
81+
size="icon"
82+
className="md:hidden text-muted-foreground hover:text-primary hover:bg-primary/10"
83+
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
84+
>
85+
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
86+
<span className="sr-only">Toggle menu</span>
87+
</Button>
88+
</div>
89+
</div>
90+
</header>
91+
);

‎components/sections/about-section.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
"use client"
2+
3+
import { Skill } from "@/components/ui/skill"
4+
5+
export const AboutSection = () => (
6+
<section id="about" className="py-12 md:py-24 scroll-mt-16 section-alt rounded-xl p-6 md:p-8">
7+
<h2 className="text-3xl font-bold mb-8 flex items-center gap-2">
8+
About Me
9+
<div className="h-px bg-primary/30 flex-1 ml-4"></div>
10+
</h2>
11+
<div className="grid md:grid-cols-2 gap-8">
12+
<div className="space-y-4">
13+
<p className="text-lg">
14+
I'm a passionate software engineer specializing in <Skill>Java</Skill>, <Skill>Spring Boot</Skill>, <Skill>Hibernate</Skill>, <Skill>Maven</Skill>, <Skill>MySQL</Skill>, <Skill>React</Skill>, <Skill>Tailwind CSS</Skill>, and <Skill>TypeScript</Skill>. I focus on creating clean, efficient, and user-friendly applications.
15+
</p>
16+
<p className="text-lg">
17+
My journey in software development began with building simple websites as a teenager, which sparked my curiosity about how technology works. Since then, I've worked on a
18+
variety of projects ranging from web applications to developer tools.
19+
</p>
20+
<p className="text-lg">When I'm not coding, you can find me reading, exercising, and spending time with my family.</p>
21+
22+
<h3 className="text-xl font-semibold mt-6">Education</h3>
23+
<div className="space-y-2">
24+
<div>
25+
<div className="font-medium">Bachelor of Science in Computer Science</div>
26+
<div className="text-muted-foreground">Western Governors University, December 2025</div>
27+
</div>
28+
</div>
29+
30+
<h3 className="text-xl font-semibold mt-6">Relevant Experience</h3>
31+
<div className="space-y-4">
32+
<div>
33+
<div className="font-medium">Full Stack Developer & Project Manager</div>
34+
<div className="text-muted-foreground">We Make Good Software, July 2024 – Present</div>
35+
<ul className="list-disc list-inside text-muted-foreground mt-2">
36+
<li>Developed and maintained a full-stack web application using <Skill>Java</Skill>, <Skill>Spring Boot</Skill>, <Skill>TypeScript</Skill>, <Skill>React</Skill>, <Skill>MySQL</Skill>, and <Skill>Material UI</Skill></li>
37+
<li>Deployed applications on <Skill>Railway</Skill> and managed the project using <Skill>Jira</Skill></li>
38+
<li>Conducted code reviews, provided technical guidance, and contributed to architectural and design decisions</li>
39+
<li>Led team meetings, coordinated client communications, and oversaw project planning</li>
40+
</ul>
41+
</div>
42+
</div>
43+
</div>
44+
<div className="space-y-4">
45+
<h3 className="text-xl font-semibold">Additional Experience</h3>
46+
<div className="space-y-4">
47+
<div>
48+
<div className="font-medium">Java Coding Instructor</div>
49+
<div className="text-muted-foreground">Coders Campus, May 2024 – Present (Contract, Remote)</div>
50+
<ul className="list-disc list-inside text-muted-foreground mt-2">
51+
<li>Teaching <Skill>Java</Skill>, <Skill>Spring Boot</Skill>, <Skill>Hibernate</Skill>, <Skill>Maven</Skill>, <Skill>MySQL</Skill>, <Skill>Thymeleaf</Skill>, <Skill>HTML</Skill>, and <Skill>CSS</Skill> coding skills to full stack Java bootcamp students</li>
52+
<li>Conducting regular class sessions, answering questions, and providing 1-on-1 tutoring</li>
53+
<li>Helping students develop practical programming skills for real-world applications</li>
54+
</ul>
55+
</div>
56+
<div>
57+
<div className="font-medium">Software Developer</div>
58+
<div className="text-muted-foreground">Self Employed, September 2021 – Present</div>
59+
<ul className="list-disc list-inside text-muted-foreground mt-2">
60+
<li>Delivered custom full-stack web solutions as a freelance Software Engineer</li>
61+
<li>Adapted to diverse client requirements by leveraging both front-end and back-end development skills</li>
62+
<li>Utilized technologies such as <Skill>Java</Skill>, <Skill>Spring</Skill>, and <Skill>React</Skill> to build scalable applications</li>
63+
</ul>
64+
</div>
65+
<div>
66+
<div className="font-medium">Full Stack Engineer</div>
67+
<div className="text-muted-foreground">Start Small Think Big, January 2022 – August 2022</div>
68+
<ul className="list-disc list-inside text-muted-foreground mt-2">
69+
<li>Contributed as a contract developer within an agile team of four engineers</li>
70+
<li>Enhanced testing coverage and improved overall application performance</li>
71+
<li>Built and integrated various components while proactively identifying and resolving bugs</li>
72+
<li>Utilized a modern tech stack including <Skill>Next.js</Skill>, <Skill>React</Skill>, <Skill>Material UI</Skill>, <Skill>Salesforce</Skill>, and <Skill>Jira</Skill></li>
73+
</ul>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
</section>
79+
);

‎components/sections/contact-section.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
"use client"
2+
3+
import Link from "next/link"
4+
import { Github, Linkedin, Mail } from "lucide-react"
5+
import { Button } from "@/components/ui/button"
6+
import { Card, CardContent } from "@/components/ui/card"
7+
8+
export const ContactSection = () => (
9+
<section id="contact" className="py-12 md:py-24 scroll-mt-16">
10+
<h2 className="text-3xl font-bold mb-8 flex items-center gap-2">
11+
Contact
12+
<div className="h-px bg-primary/30 flex-1 ml-4"></div>
13+
</h2>
14+
<div className="grid md:grid-cols-2 gap-8">
15+
<div className="space-y-4">
16+
<p className="text-lg">
17+
I'm currently open to new opportunities and collaborations. If you'd like to get in touch, feel free to
18+
reach out through any of the channels below.
19+
</p>
20+
<div className="flex flex-col gap-4 mt-6">
21+
<Link
22+
href="mailto:lucasbecker.dev@gmail.com"
23+
className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
24+
>
25+
<Mail className="h-5 w-5" />
26+
lucasbecker.dev@gmail.com
27+
</Link>
28+
<Link
29+
href="https://github.com/lucasbecker-dev"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
33+
>
34+
<Github className="h-5 w-5" />
35+
github.com/lucasbecker-dev
36+
</Link>
37+
<Link
38+
href="https://www.linkedin.com/in/lucasbecker-dev/"
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
42+
>
43+
<Linkedin className="h-5 w-5" />
44+
linkedin.com/in/lucasbecker-dev
45+
</Link>
46+
</div>
47+
</div>
48+
<Card className="hover:shadow-md hover:shadow-primary/10 transition-shadow">
49+
<CardContent className="p-6">
50+
<form className="space-y-4">
51+
<div className="grid gap-2">
52+
<label htmlFor="name" className="text-sm font-medium">
53+
Name
54+
</label>
55+
<input
56+
id="name"
57+
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
58+
placeholder="Your name"
59+
/>
60+
</div>
61+
<div className="grid gap-2">
62+
<label htmlFor="email" className="text-sm font-medium">
63+
Email
64+
</label>
65+
<input
66+
id="email"
67+
type="email"
68+
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
69+
placeholder="Your email"
70+
/>
71+
</div>
72+
<div className="grid gap-2">
73+
<label htmlFor="message" className="text-sm font-medium">
74+
Message
75+
</label>
76+
<textarea
77+
id="message"
78+
className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
79+
placeholder="Your message"
80+
/>
81+
</div>
82+
<Button type="submit" className="w-full bg-primary text-white hover:bg-primary/90">
83+
Send Message
84+
</Button>
85+
</form>
86+
</CardContent>
87+
</Card>
88+
</div>
89+
</section>
90+
);

‎components/sections/hero-section.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
"use client"
2+
3+
import Image from "next/image"
4+
import Link from "next/link"
5+
import { Button } from "@/components/ui/button"
6+
import { Skill } from "@/components/ui/skill"
7+
8+
// Hero section props
9+
interface HeroSectionProps {
10+
handleSmoothScroll: (e: React.MouseEvent<HTMLAnchorElement>) => void;
11+
}
12+
13+
export const HeroSection = ({ handleSmoothScroll }: HeroSectionProps) => (
14+
<section className="py-12 md:py-24 flex flex-col md:flex-row items-center gap-8 md:gap-16">
15+
<div className="flex-1 space-y-4">
16+
<h1 className="text-4xl md:text-6xl font-bold tracking-tight">
17+
Hi, I'm <span className="text-orange-600 text-shadow">Lucas Becker</span>
18+
</h1>
19+
<p className="text-xl text-muted-foreground">
20+
Software Engineer specializing in building exceptional digital experiences with <Skill>Java</Skill>, <Skill>Spring Boot</Skill>, <Skill>Maven</Skill>, <Skill>Hibernate</Skill>, <Skill>React</Skill>, <Skill>TypeScript</Skill>, <Skill>Tailwind CSS</Skill>, and <Skill>MySQL</Skill>.
21+
</p>
22+
<div className="flex gap-4 pt-4">
23+
<Button asChild className="bg-primary text-primary-foreground hover:bg-primary/90">
24+
<Link href="#contact" onClick={handleSmoothScroll}>Get in touch</Link>
25+
</Button>
26+
<Button asChild variant="outline" className="border-primary text-primary hover:bg-primary/10">
27+
<Link href="#projects" onClick={handleSmoothScroll}>View my work</Link>
28+
</Button>
29+
</div>
30+
</div>
31+
<div className="flex-1 flex justify-center md:justify-end">
32+
<div className="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-primary/20">
33+
<Image src="/placeholder.svg?height=320&width=320" alt="Profile" fill className="object-cover" priority />
34+
</div>
35+
</div>
36+
</section>
37+
);

0 commit comments

Comments
 (0)