Skip to content

Commit a449b83

Browse files
TOM-BOHNTOM-BOHN
authored
Merge pull request #16 from TOM-BOHN/sandbox
Merge sandbox: V2ME feature, Projects restructure, Tableau Color Blind palette, and UI improvements
2 parents 749aa01 + cdccadd commit a449b83

43 files changed

Lines changed: 3463 additions & 160 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/about/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ export default function About() {
88
<div className="mb-12">
99
<p className="text-sm text-accent mb-4 font-mono">{'>'} PRODUCT MANAGER & SOFTWARE DESIGNER</p>
1010
<h1 className="text-6xl md:text-7xl font-bold mb-8">
11-
<span className="bg-gradient-to-r from-orange-500 to-orange-600 bg-clip-text text-transparent">
11+
<span className="text-[#c85200]">
1212
Thomas
1313
</span>
1414
{' '}
15-
<span className="bg-gradient-to-r from-blue-900 to-blue-800 bg-clip-text text-transparent">
15+
<span className="text-[#1170aa]">
1616
Bohn
1717
</span>
1818
</h1>
@@ -43,7 +43,7 @@ export default function About() {
4343
</div>
4444
</div>
4545
{/* Bottom border accent (below image, not over it) */}
46-
<div className="h-1 bg-gradient-to-r from-orange-500 to-blue-900" />
46+
<div className="h-1 bg-gradient-to-r from-[#c85200] to-[#1170aa]" />
4747
</div>
4848
</div>
4949

‎app/blog/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default async function Blog() {
99
<div className="container mx-auto px-4 py-12">
1010
<div className="max-w-6xl mx-auto">
1111
<div className="mb-12">
12-
<p className="text-sm text-accent mb-4 font-mono">{'>'} SOFTWARE ENGINEER</p>
12+
<p className="text-sm text-accent mb-4 font-mono">{'>'} PRODUCT MANAGER & SOFTWARE DESIGNER</p>
1313
<h1 className="text-2xl font-semibold mb-4 text-text-primary font-mono">
1414
{'// BLOG'}
1515
</h1>

‎app/certifications/page.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getLearningData } from '@/lib/hub'
22
import { LearningSection } from '@/components/hub/LearningSection'
3+
import { LearningPageHeader } from '@/components/hub/LearningPageHeader'
34

45
export default async function Certifications() {
56
const learningData = await getLearningData()
@@ -8,10 +9,13 @@ export default async function Certifications() {
89
<div className="container mx-auto px-4 py-12">
910
<div className="max-w-6xl mx-auto">
1011
<div className="mb-12">
11-
<p className="text-sm text-accent mb-4 font-mono">{'>'} SOFTWARE ENGINEER</p>
12-
<h1 className="text-2xl font-semibold mb-4 text-text-primary font-mono">
13-
{'// CERTIFICATIONS & LEARNING'}
14-
</h1>
12+
<p className="text-sm text-accent mb-4 font-mono">{'>'} PRODUCT MANAGER & SOFTWARE DESIGNER</p>
13+
<div className="flex items-center justify-between mb-4">
14+
<h1 className="text-2xl font-semibold text-text-primary font-mono">
15+
{'// CERTIFICATIONS & LEARNING'}
16+
</h1>
17+
<LearningPageHeader />
18+
</div>
1519
<p className="text-text-secondary leading-relaxed">
1620
My journey of continuous learning and professional development
1721
</p>

‎app/contact/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function Contact() {
2222
<div className="container mx-auto px-4 py-12">
2323
<div className="max-w-6xl mx-auto">
2424
<div className="mb-12">
25-
<p className="text-sm text-accent mb-4 font-mono">{'>'} SOFTWARE ENGINEER</p>
25+
<p className="text-sm text-accent mb-4 font-mono">{'>'} PRODUCT MANAGER & SOFTWARE DESIGNER</p>
2626
<h1 className="text-2xl font-semibold mb-4 text-text-primary font-mono">
2727
{'// CONTACT'}
2828
</h1>

‎app/globals.css‎

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,66 @@
33
@tailwind utilities;
44

55
:root {
6-
/* Modern Theme Colors */
6+
/* Tableau Color Blind Palette - Blue Orange Diverging (10 colors) */
7+
/* Colors from: https://jrnold.github.io/ggthemes/reference/tableau_color_pal.html */
78
--bg-primary: #ffffff;
89
--bg-secondary: #f8f9fa;
910
--text-primary: #1a1a1a;
10-
--text-secondary: #6b7280;
11-
--accent: #f97316;
12-
--accent-hover: #ea580c;
13-
--border: #e5e7eb;
14-
--link: #f97316;
15-
--link-hover: #ea580c;
11+
--text-secondary: #57606c; /* Dark Gray from palette */
12+
--accent: #1170aa; /* Dark Blue - primary accent */
13+
--accent-hover: #0d5a88; /* Darker blue for hover */
14+
--accent-orange: #fc7d0b; /* Bright Orange */
15+
--accent-orange-hover: #c85200; /* Dark Orange/Brown for hover */
16+
--border: #c8d0d9; /* Very Light Gray from palette */
17+
--link: #1170aa; /* Dark Blue for links */
18+
--link-hover: #fc7d0b; /* Bright Orange for link hover */
19+
20+
/* Additional palette colors available */
21+
--tableau-blue-light: #5fa2ce; /* Medium Blue */
22+
--tableau-blue-pale: #a3cce9; /* Very Light Blue */
23+
--tableau-gray-light: #a3acb9; /* Light Gray */
24+
--tableau-gray-medium: #7b848f; /* Medium Dark Gray */
25+
--tableau-peach: #ffbc79; /* Light Peach */
1626
}
1727

1828
[data-theme="dark"] {
19-
/* Modern Dark Theme Colors */
29+
/* Tableau Color Blind Palette - Dark Theme */
2030
--bg-primary: #0b1220;
2131
--bg-secondary: #111a2e;
2232
--text-primary: #e5e7eb;
23-
--text-secondary: #93a4b8;
24-
--accent: #f97316;
25-
--accent-hover: #fb923c;
26-
--border: #22314a;
27-
--link: #93c5fd;
28-
--link-hover: #fbbf24;
33+
--text-secondary: #a3acb9; /* Light Gray from palette */
34+
--accent: #5fa2ce; /* Medium Blue - lighter for dark theme */
35+
--accent-hover: #1170aa; /* Dark Blue */
36+
--accent-orange: #fc7d0b; /* Bright Orange */
37+
--accent-orange-hover: #ffbc79; /* Light Peach for hover */
38+
--border: #57606c; /* Dark Gray from palette */
39+
--link: #5fa2ce; /* Medium Blue for links */
40+
--link-hover: #fc7d0b; /* Bright Orange for link hover */
41+
42+
/* Additional palette colors available */
43+
--tableau-blue-light: #a3cce9; /* Very Light Blue - lighter for dark theme */
44+
--tableau-blue-pale: #5fa2ce; /* Medium Blue */
45+
--tableau-gray-light: #7b848f; /* Medium Dark Gray */
46+
--tableau-gray-medium: #a3acb9; /* Light Gray */
47+
--tableau-peach: #ffbc79; /* Light Peach */
2948
}
3049

3150
[data-theme="xanga"] {
32-
/* Xanga Theme Colors - 2000s nostalgia with orange and navy */
51+
/* Xanga Theme Colors - 2000s nostalgia with Tableau Color Blind palette */
3352
--bg-primary: #0a0a0a;
3453
--bg-secondary: #1a1a2e;
3554
--bg-tertiary: #16213e;
36-
--text-primary: #fbbf24;
37-
--text-secondary: #60a5fa;
38-
--accent: #f97316;
39-
--accent-hover: #fb923c;
40-
--accent-light: #fbbf24;
41-
--accent-navy: #1e3a8a;
42-
--accent-navy-light: #3b82f6;
43-
--border: #f97316;
44-
--border-navy: #1e3a8a;
45-
--link: #60a5fa;
46-
--link-hover: #fbbf24;
55+
--text-primary: #ffbc79; /* Tableau Light Peach */
56+
--text-secondary: #5fa2ce; /* Tableau Medium Blue */
57+
--accent: #fc7d0b; /* Tableau Bright Orange */
58+
--accent-hover: #ffbc79; /* Tableau Light Peach */
59+
--accent-light: #ffbc79; /* Tableau Light Peach */
60+
--accent-navy: #1170aa; /* Tableau Dark Blue */
61+
--accent-navy-light: #5fa2ce; /* Tableau Medium Blue */
62+
--border: #fc7d0b; /* Tableau Bright Orange */
63+
--border-navy: #1170aa; /* Tableau Dark Blue */
64+
--link: #5fa2ce; /* Tableau Medium Blue */
65+
--link-hover: #ffbc79; /* Tableau Light Peach */
4766
}
4867

4968
* {
@@ -59,9 +78,13 @@ body {
5978
}
6079

6180
/* Modern Theme Styles */
81+
/* Inter font is applied via inter.className in layout.tsx */
82+
/* System fonts are used as fallback if Inter fails to load */
6283
html[data-theme="light"] body,
6384
html[data-theme="dark"] body {
64-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
85+
/* Open Sans font is set by Next.js font optimization via className */
86+
/* This ensures system fonts are used as fallback */
87+
font-family: var(--font-open-sans, -apple-system), BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
6588
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
6689
sans-serif;
6790
line-height: 1.6;
@@ -71,7 +94,7 @@ html[data-theme="dark"] body {
7194
html[data-theme="xanga"] body {
7295
font-family: 'Comic Sans MS', 'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif;
7396
background-color: var(--bg-primary);
74-
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='stars' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23fbbf24' opacity='0.6'/%3E%3Ccircle cx='5' cy='5' r='0.5' fill='%2360a5fa' opacity='0.4'/%3E%3Ccircle cx='15' cy='15' r='0.5' fill='%23f97316' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23stars)'/%3E%3C/svg%3E");
97+
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='stars' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffbc79' opacity='0.6'/%3E%3Ccircle cx='5' cy='5' r='0.5' fill='%235fa2ce' opacity='0.4'/%3E%3Ccircle cx='15' cy='15' r='0.5' fill='%23fc7d0b' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23stars)'/%3E%3C/svg%3E");
7598
background-repeat: repeat;
7699
min-height: 100vh;
77100
}

‎app/layout.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
11
import type { Metadata } from 'next'
2-
import { Inter } from 'next/font/google'
2+
import { Open_Sans } from 'next/font/google'
33
import './globals.css'
44
import { ThemeProvider } from '@/components/ThemeProvider'
55
import { Header } from '@/components/Header'
66
import { Footer } from '@/components/Footer'
77
import { XangaShell } from '@/components/XangaShell'
88

9-
const inter = Inter({ subsets: ['latin'] })
9+
const openSans = Open_Sans({
10+
subsets: ['latin'],
11+
display: 'swap',
12+
variable: '--font-open-sans',
13+
fallback: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif'],
14+
})
1015

1116
export const metadata: Metadata = {
1217
title: 'Thomas Bohn',
1318
description: 'Personal website and blog',
1419
metadataBase: new URL('https://thomaslbohn.com'),
20+
manifest: '/manifest.json',
1521
alternates: {
1622
canonical: 'https://thomaslbohn.com',
1723
},
1824
icons: {
1925
icon: '/icon.svg',
2026
shortcut: '/icon.svg',
21-
apple: '/icon.svg',
27+
apple: '/apple-touch-icon.png',
2228
},
2329
openGraph: {
2430
title: 'Thomas Bohn',
@@ -41,7 +47,7 @@ export default function RootLayout({
4147
}) {
4248
return (
4349
<html lang="en" suppressHydrationWarning>
44-
<body className={inter.className} suppressHydrationWarning>
50+
<body className={`${openSans.className} ${openSans.variable}`} suppressHydrationWarning>
4551
<ThemeProvider>
4652
<div className="min-h-screen flex flex-col">
4753
<Header />

‎app/page.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ export default function Home() {
1212
{/* Left column - Name and bio */}
1313
<div>
1414
<h1 className="text-6xl md:text-7xl font-bold mb-6">
15-
<span className="bg-gradient-to-r from-orange-500 to-orange-600 bg-clip-text text-transparent">
15+
<span className="text-[#c85200]">
1616
Thomas
1717
</span>
1818
{' '}
19-
<span className="bg-gradient-to-r from-blue-900 to-blue-800 bg-clip-text text-transparent">
19+
<span className="text-[#1170aa]">
2020
Bohn
2121
</span>
2222
</h1>
@@ -63,7 +63,7 @@ export default function Home() {
6363
</div>
6464
</div>
6565
{/* Bottom border accent (below image, not over it) */}
66-
<div className="h-1 bg-gradient-to-r from-orange-500 to-blue-900" />
66+
<div className="h-1 bg-gradient-to-r from-[#c85200] to-[#1170aa]" />
6767
</div>
6868
</div>
6969
</div>
@@ -78,7 +78,7 @@ export default function Home() {
7878
{/* Medium Card */}
7979
<div className="border-2 border-border rounded-lg p-8 bg-bg-secondary hover:border-accent transition-all">
8080
<div className="flex items-center gap-4 mb-4">
81-
<div className="w-12 h-12 bg-accent rounded flex items-center justify-center text-white font-bold text-xl">
81+
<div className="w-12 h-12 bg-accent-orange rounded flex items-center justify-center text-white font-bold text-xl">
8282
M
8383
</div>
8484
<h3 className="text-3xl font-bold text-text-primary">Medium</h3>
@@ -92,7 +92,7 @@ export default function Home() {
9292
<p className="text-sm font-semibold text-text-primary mb-3 font-mono">RECENT ARTICLES:</p>
9393
<ul className="space-y-2 text-text-secondary">
9494
<li className="flex items-start gap-2">
95-
<span className="text-accent mt-1">→</span>
95+
<span className="text-accent-orange mt-1">→</span>
9696
<a
9797
href="https://medium.com/@bohn.tl/the-4-cs-of-data-governance-measurement-5759fdbbc373"
9898
target="_blank"
@@ -103,7 +103,7 @@ export default function Home() {
103103
</a>
104104
</li>
105105
<li className="flex items-start gap-2">
106-
<span className="text-accent mt-1">→</span>
106+
<span className="text-accent-orange mt-1">→</span>
107107
<a
108108
href="https://medium.com/@bohn.tl/the-enabling-team-playbook-78b60b0bb4f0"
109109
target="_blank"
@@ -114,7 +114,7 @@ export default function Home() {
114114
</a>
115115
</li>
116116
<li className="flex items-start gap-2">
117-
<span className="text-accent mt-1">→</span>
117+
<span className="text-accent-orange mt-1">→</span>
118118
<a
119119
href="https://medium.com/@bohn.tl/the-spec-driven-writing-framework-55facae16425"
120120
target="_blank"
@@ -154,7 +154,7 @@ export default function Home() {
154154
<p className="text-sm font-semibold text-text-primary mb-3 font-mono">FEATURED REPOS:</p>
155155
<ul className="space-y-2 text-text-secondary">
156156
<li className="flex items-start gap-2">
157-
<span className="text-accent mt-1">→</span>
157+
<span className="text-accent-orange mt-1">→</span>
158158
<a
159159
href="https://github.com/TOM-BOHN/MsDS-deep-learing-gan-monet-painting/tree/main"
160160
target="_blank"
@@ -165,7 +165,7 @@ export default function Home() {
165165
</a>
166166
</li>
167167
<li className="flex items-start gap-2">
168-
<span className="text-accent mt-1">→</span>
168+
<span className="text-accent-orange mt-1">→</span>
169169
<a
170170
href="https://github.com/TOM-BOHN/MsDS-deep-learing-cnn-cancer-detection"
171171
target="_blank"
@@ -176,7 +176,7 @@ export default function Home() {
176176
</a>
177177
</li>
178178
<li className="flex items-start gap-2">
179-
<span className="text-accent mt-1">→</span>
179+
<span className="text-accent-orange mt-1">→</span>
180180
<a
181181
href="https://github.com/TOM-BOHN/MsDS-deep-learning-llm-classification-finetuning"
182182
target="_blank"
@@ -205,10 +205,10 @@ export default function Home() {
205205
<h2 className="text-2xl font-bold mb-8 text-text-primary font-mono">
206206
{'// DIG DEEPER'}
207207
</h2>
208-
<div className="border-2 border-accent/30 rounded-lg p-8 bg-bg-secondary">
208+
<div className="border-2 border-accent-orange/30 rounded-lg p-8 bg-bg-secondary">
209209
<div className="flex items-center gap-3 mb-4">
210-
<div className="w-12 h-12 bg-accent/20 rounded flex items-center justify-center">
211-
<svg className="w-6 h-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
210+
<div className="w-12 h-12 bg-accent-orange/20 rounded flex items-center justify-center">
211+
<svg className="w-6 h-6 text-accent-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
212212
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
213213
</svg>
214214
</div>

0 commit comments

Comments
 (0)