Skip to content

Commit 96606a1

Browse files
TOM-BOHNTOM-BOHN
committed
feat: redesign home and about pages with profile image
Motivation: Update website design to match modern portfolio style with profile image, project cards, and improved layout. Approach: Redesigned home page with two-column layout featuring profile image, bio blurb, and project cards for Medium and GitHub. Updated about page with matching design and longer bio content. Added website name to header. Updated Medium and GitHub links to correct URLs. Notes: Profile image added to public/profile.jpg. Both pages now feature consistent design with gradient name styling and project highlight cards.
1 parent 6c8a29e commit 96606a1

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)