Skip to content

Commit fda9879

Browse files
TOM-BOHNTOM-BOHN
authored
Merge pull request #4 from TOM-BOHN/sandbox
feat: redesign home and about pages with profile image
2 parents d2daa5c + 96606a1 commit fda9879

4 files changed

Lines changed: 248 additions & 102 deletions

File tree

‎app/about/page.tsx‎

Lines changed: 121 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,130 @@
1+
import Image from 'next/image'
2+
13
export default function About() {
24
return (
35
<div className="container mx-auto px-4 py-12">
4-
<div className="max-w-3xl mx-auto">
5-
<h1 className="text-4xl font-bold mb-6 text-text-primary">About</h1>
6-
7-
<div className="prose prose-lg max-w-none">
8-
<section className="mb-8">
9-
<h2 className="text-2xl font-semibold mb-4 text-text-primary">Who I Am</h2>
10-
<p className="text-text-secondary leading-relaxed mb-4">
11-
[Your introduction and background will go here]
12-
</p>
13-
<p className="text-text-secondary leading-relaxed">
14-
[More about your interests, values, and what drives you]
15-
</p>
16-
</section>
6+
<div className="max-w-6xl mx-auto">
7+
{/* Header section with role tag */}
8+
<div className="mb-12">
9+
<p className="text-sm text-accent mb-4 font-mono">{'>'} SOFTWARE ENGINEER</p>
10+
<h1 className="text-6xl md:text-7xl font-bold mb-8">
11+
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
12+
Tom
13+
</span>
14+
{' '}
15+
<span className="bg-gradient-to-r from-blue-600 to-pink-600 bg-clip-text text-transparent">
16+
Bohn
17+
</span>
18+
</h1>
19+
</div>
20+
21+
{/* Two column layout - Picture and Bio */}
22+
<div className="grid md:grid-cols-2 gap-12 mb-16">
23+
{/* Left column - Profile picture */}
24+
<div className="flex justify-center md:justify-start">
25+
<div className="relative w-64 h-80 md:w-80 md:h-96">
26+
<div className="absolute inset-0 border-2 border-accent/30 rounded-lg"
27+
style={{
28+
clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)',
29+
borderTopLeftRadius: '0.5rem',
30+
borderTopRightRadius: '0.5rem',
31+
}}
32+
/>
33+
<div className="relative w-full h-full rounded-lg overflow-hidden bg-bg-secondary">
34+
<Image
35+
src="/profile.jpg"
36+
alt="Tom Bohn"
37+
fill
38+
className="object-cover"
39+
priority
40+
/>
41+
</div>
42+
{/* Bottom border accent */}
43+
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600" />
44+
</div>
45+
</div>
1746

18-
<section className="mb-8">
19-
<h2 className="text-2xl font-semibold mb-4 text-text-primary">What I Do</h2>
20-
<p className="text-text-secondary leading-relaxed mb-4">
21-
[Your professional background and current work]
22-
</p>
23-
<p className="text-text-secondary leading-relaxed">
24-
[Your skills and areas of expertise]
25-
</p>
26-
</section>
47+
{/* Right column - About content */}
48+
<div className="prose prose-lg max-w-none">
49+
<section className="mb-8">
50+
<h2 className="text-2xl font-semibold mb-4 text-text-primary font-mono">// ABOUT ME</h2>
51+
<div className="text-text-secondary leading-relaxed space-y-4">
52+
<p>
53+
I'm a software engineer and technical leader with a passion for building
54+
scalable, maintainable solutions. My expertise spans Salesforce development,
55+
data engineering, cloud architecture, and team leadership.
56+
</p>
57+
<p>
58+
Throughout my career, I've focused on delivering high-quality enterprise
59+
solutions that solve real business problems. I specialize in Salesforce
60+
platform development, working with Apex, Lightning Web Components, Flows,
61+
and the broader Salesforce ecosystem to build custom applications and
62+
integrations.
63+
</p>
64+
<p>
65+
In addition to hands-on development, I'm passionate about data engineering
66+
and building robust data pipelines. I work with modern data stack tools
67+
including dbt, Spark, Trino, and various cloud data warehouses to transform
68+
raw data into actionable insights.
69+
</p>
70+
<p>
71+
As a technical leader, I believe in the power of mentorship and knowledge
72+
sharing. I enjoy working with teams to establish best practices, improve
73+
code quality, and foster a culture of continuous learning. I'm particularly
74+
interested in agentic SDLC processes and spec-driven development methodologies
75+
that help teams deliver better software faster.
76+
</p>
77+
<p>
78+
When I'm not coding, I'm likely writing about software engineering,
79+
contributing to open source projects, or exploring new technologies.
80+
I believe in the importance of giving back to the developer community
81+
and sharing knowledge through writing, speaking, and open source contributions.
82+
</p>
83+
<p>
84+
I'm always interested in connecting with fellow developers, discussing
85+
technical challenges, and exploring opportunities to collaborate on
86+
interesting projects. Feel free to reach out if you'd like to connect!
87+
</p>
88+
</div>
89+
</section>
2790

28-
<section className="mb-8">
29-
<h2 className="text-2xl font-semibold mb-4 text-text-primary">Interests</h2>
30-
<ul className="list-disc list-inside text-text-secondary space-y-2">
31-
<li>[Interest 1]</li>
32-
<li>[Interest 2]</li>
33-
<li>[Interest 3]</li>
34-
</ul>
35-
</section>
91+
<section className="mb-8">
92+
<h2 className="text-2xl font-semibold mb-4 text-text-primary font-mono">// TECHNICAL EXPERTISE</h2>
93+
<div className="text-text-secondary">
94+
<p className="mb-3">
95+
<strong className="text-text-primary">Salesforce Platform:</strong> Apex, Lightning Web Components,
96+
Flows, Process Builder, Salesforce DX, Metadata API, Integration Patterns
97+
</p>
98+
<p className="mb-3">
99+
<strong className="text-text-primary">Data Engineering:</strong> dbt, Spark, Trino, SQL,
100+
Data Warehousing, ETL/ELT Pipelines, Data Modeling
101+
</p>
102+
<p className="mb-3">
103+
<strong className="text-text-primary">Languages & Tools:</strong> JavaScript, TypeScript,
104+
Python, SQL, Git, CI/CD, Agile Methodologies
105+
</p>
106+
<p>
107+
<strong className="text-text-primary">Cloud & Infrastructure:</strong> AWS, Azure,
108+
Cloud Architecture, DevOps Practices
109+
</p>
110+
</div>
111+
</section>
36112

37-
<section>
38-
<h2 className="text-2xl font-semibold mb-4 text-text-primary">Get in Touch</h2>
39-
<p className="text-text-secondary leading-relaxed mb-4">
40-
Feel free to reach out if you'd like to connect or collaborate.
41-
</p>
42-
<a
43-
href="/contact"
44-
className="inline-block px-6 py-3 bg-accent text-white rounded-lg hover:bg-accent-hover transition-colors"
45-
>
46-
Contact Me
47-
</a>
48-
</section>
113+
<section>
114+
<h2 className="text-2xl font-semibold mb-4 text-text-primary font-mono">// GET IN TOUCH</h2>
115+
<p className="text-text-secondary leading-relaxed mb-4">
116+
I'm always open to discussing new opportunities, technical challenges,
117+
or potential collaborations. Feel free to reach out through any of the
118+
channels below.
119+
</p>
120+
<a
121+
href="/contact"
122+
className="inline-block px-6 py-3 bg-accent text-white rounded-lg hover:bg-accent-hover transition-colors font-semibold"
123+
>
124+
Contact Me
125+
</a>
126+
</section>
127+
</div>
49128
</div>
50129
</div>
51130
</div>

‎app/page.tsx‎

Lines changed: 125 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,138 @@
11
import Link from 'next/link'
2+
import Image from 'next/image'
23

34
export default function Home() {
45
return (
56
<div className="container mx-auto px-4 py-12">
6-
<div className="max-w-3xl mx-auto">
7-
<h1 className="text-5xl font-bold mb-6 text-text-primary">
8-
Welcome
9-
</h1>
10-
<p className="text-xl text-text-secondary mb-8 leading-relaxed">
11-
Welcome to my personal website. Here you'll find my thoughts, projects,
12-
and various corners of the internet where I exist.
13-
</p>
7+
<div className="max-w-6xl mx-auto">
8+
{/* Role tag */}
9+
<p className="text-sm text-accent mb-4 font-mono">{'>'} SOFTWARE ENGINEER</p>
1410

15-
<div className="grid md:grid-cols-2 gap-6 mt-12">
16-
<Link
17-
href="/about"
18-
className="p-6 border border-border rounded-lg hover:border-accent hover:shadow-lg transition-all bg-bg-secondary"
19-
>
20-
<h2 className="text-2xl font-semibold mb-2 text-accent">About</h2>
21-
<p className="text-text-secondary">
22-
Learn more about me, my background, and what I'm passionate about.
11+
{/* Main content area - two column layout */}
12+
<div className="grid md:grid-cols-2 gap-12 mb-16">
13+
{/* Left column - Name and bio */}
14+
<div>
15+
<h1 className="text-6xl md:text-7xl font-bold mb-6">
16+
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
17+
Tom
18+
</span>
19+
{' '}
20+
<span className="bg-gradient-to-r from-blue-600 to-pink-600 bg-clip-text text-transparent">
21+
Bohn
22+
</span>
23+
</h1>
24+
<p className="text-lg text-text-secondary leading-relaxed mb-4">
25+
Software engineer and technical leader specializing in Salesforce development,
26+
data engineering, and cloud architecture. Building scalable solutions and
27+
leading teams to deliver impactful technology solutions.
2328
</p>
24-
</Link>
25-
26-
<Link
27-
href="/blog"
28-
className="p-6 border border-border rounded-lg hover:border-accent hover:shadow-lg transition-all bg-bg-secondary"
29-
>
30-
<h2 className="text-2xl font-semibold mb-2 text-accent">Blog</h2>
31-
<p className="text-text-secondary">
32-
Thoughts, tutorials, and random musings on technology and life.
33-
</p>
34-
</Link>
35-
36-
<Link
37-
href="/projects"
38-
className="p-6 border border-border rounded-lg hover:border-accent hover:shadow-lg transition-all bg-bg-secondary"
39-
>
40-
<h2 className="text-2xl font-semibold mb-2 text-accent">Projects</h2>
41-
<p className="text-text-secondary">
42-
A collection of projects I've worked on and things I've built.
43-
</p>
44-
</Link>
45-
46-
<Link
47-
href="/hub"
48-
className="p-6 border border-border rounded-lg hover:border-accent hover:shadow-lg transition-all bg-bg-secondary"
49-
>
50-
<h2 className="text-2xl font-semibold mb-2 text-accent">Hub</h2>
51-
<p className="text-text-secondary">
52-
All the places you can find me online - a personal link hub.
29+
<p className="text-lg text-text-secondary leading-relaxed">
30+
Currently working on enterprise-level Salesforce implementations and data
31+
warehouse solutions. Passionate about clean code, best practices, and
32+
mentoring the next generation of developers.{' '}
33+
<a
34+
href="/contact"
35+
className="text-link hover:text-link-hover underline"
36+
>
37+
Get in touch
38+
</a>.
5339
</p>
54-
</Link>
40+
</div>
41+
42+
{/* Right column - Profile picture */}
43+
<div className="flex justify-center md:justify-end">
44+
<div className="relative w-64 h-80 md:w-80 md:h-96">
45+
<div className="absolute inset-0 border-2 border-accent/30 rounded-lg"
46+
style={{
47+
clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)',
48+
borderTopLeftRadius: '0.5rem',
49+
borderTopRightRadius: '0.5rem',
50+
}}
51+
/>
52+
<div className="relative w-full h-full rounded-lg overflow-hidden bg-bg-secondary">
53+
<Image
54+
src="/profile.jpg"
55+
alt="Tom Bohn"
56+
fill
57+
className="object-cover"
58+
priority
59+
/>
60+
</div>
61+
{/* Bottom border accent */}
62+
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600" />
63+
</div>
64+
</div>
5565
</div>
5666

57-
<div className="mt-12 p-6 border border-border rounded-lg bg-bg-secondary">
58-
<h2 className="text-2xl font-semibold mb-4 text-text-primary">Quick Links</h2>
59-
<div className="flex flex-wrap gap-4">
60-
<Link href="/links" className="text-link hover:text-link-hover underline">
61-
Bookmarks & Tools
62-
</Link>
63-
<Link href="/certifications" className="text-link hover:text-link-hover underline">
64-
Certifications & Learning
65-
</Link>
66-
<Link href="/contact" className="text-link hover:text-link-hover underline">
67-
Get in Touch
68-
</Link>
67+
{/* Project Cards Section */}
68+
<div className="mb-8">
69+
<h2 className="text-2xl font-bold mb-8 text-text-primary font-mono">// MY WORK</h2>
70+
71+
<div className="grid md:grid-cols-2 gap-8">
72+
{/* Medium Card */}
73+
<div className="border-2 border-border rounded-lg p-8 bg-bg-secondary hover:border-accent transition-all">
74+
<div className="flex items-center gap-4 mb-4">
75+
<div className="w-12 h-12 bg-accent rounded flex items-center justify-center text-white font-bold text-xl">
76+
M
77+
</div>
78+
<h3 className="text-3xl font-bold text-text-primary">Medium</h3>
79+
</div>
80+
<p className="text-text-secondary mb-6 leading-relaxed">
81+
Writing about software engineering, Salesforce development, data engineering,
82+
and technical leadership. Sharing insights, tutorials, and experiences from
83+
building enterprise solutions.
84+
</p>
85+
<div className="mb-6">
86+
<p className="text-sm font-semibold text-text-primary mb-3 font-mono">RECENT ARTICLES:</p>
87+
<ul className="space-y-2 text-text-secondary">
88+
<li className="flex items-start gap-2">
89+
<span className="text-accent mt-1">→</span>
90+
<span>Check out my latest articles on Medium</span>
91+
</li>
92+
</ul>
93+
</div>
94+
<a
95+
href="https://medium.com/@bohn.tl"
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
className="inline-block text-link hover:text-link-hover underline font-semibold"
99+
>
100+
READ ON MEDIUM →
101+
</a>
102+
</div>
103+
104+
{/* GitHub Card */}
105+
<div className="border-2 border-border rounded-lg p-8 bg-bg-secondary hover:border-accent transition-all">
106+
<div className="flex items-center gap-4 mb-4">
107+
<div className="w-12 h-12 bg-gray-800 rounded flex items-center justify-center">
108+
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
109+
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482C19.138 20.197 22 16.442 22 12.017 22 6.484 17.522 2 12 2z" clipRule="evenodd" />
110+
</svg>
111+
</div>
112+
<h3 className="text-3xl font-bold text-text-primary">GitHub</h3>
113+
</div>
114+
<p className="text-text-secondary mb-6 leading-relaxed">
115+
Open source projects, code samples, and contributions. Exploring new
116+
technologies, building tools, and sharing code with the developer community.
117+
</p>
118+
<div className="mb-6">
119+
<p className="text-sm font-semibold text-text-primary mb-3 font-mono">FEATURED REPOS:</p>
120+
<ul className="space-y-2 text-text-secondary">
121+
<li className="flex items-start gap-2">
122+
<span className="text-accent mt-1">→</span>
123+
<span>Check out my repositories and contributions</span>
124+
</li>
125+
</ul>
126+
</div>
127+
<a
128+
href="https://github.com/TOM-BOHN"
129+
target="_blank"
130+
rel="noopener noreferrer"
131+
className="inline-block text-link hover:text-link-hover underline font-semibold"
132+
>
133+
VIEW ON GITHUB →
134+
</a>
135+
</div>
69136
</div>
70137
</div>
71138
</div>

‎components/Header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export function Header() {
2424
<div className="container mx-auto px-4 py-4">
2525
<nav className="flex items-center justify-between">
2626
<div className="flex items-center space-x-6">
27-
<Link href="/" className="text-xl font-bold text-accent hover:text-accent-hover transition-colors">
28-
Tom Bohn
27+
<Link href="/" className="text-xl font-bold text-accent hover:text-accent-hover transition-colors font-mono tracking-wider">
28+
THOMASLBOHN.COM
2929
</Link>
3030
<div className="hidden md:flex space-x-6">
3131
{navItems.map((item) => {

‎public/profile.jpg‎

116 KB
Loading

0 commit comments

Comments
 (0)