diff --git a/src/App.tsx b/src/App.tsx index f3a05b3..885564f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom" import { Contact } from "@/routes/Contact" import { Board } from "./routes/Board" import { Inbox } from "./routes/Inbox" +import { Presentations } from "./routes/Presentations" import { createRoot } from "react-dom/client" import { DailyProvider } from "@daily-co/daily-react" import Daily from "@daily-co/daily-js" @@ -23,6 +24,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/css/style.css b/src/css/style.css index 6b80367..4a59c0d 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -46,12 +46,35 @@ h6 { } header { - margin-bottom: 2em; + margin-bottom: 1em; font-size: 1.5rem; font-variation-settings: "MONO" 1; font-variation-settings: "CASL" 1; } +.main-nav { + margin-bottom: 2em; + display: flex; + gap: 2em; + align-items: center; +} + +.nav-link { + color: #0366d6; + text-decoration: none; + font-weight: 500; + padding: 0.5em 1em; + border-radius: 6px; + transition: all 0.2s ease; + border: 1px solid transparent; +} + +.nav-link:hover { + background-color: #f6f8fa; + border-color: #e1e4e8; + text-decoration: none; +} + i { font-variation-settings: "slnt" -15; } @@ -396,4 +419,124 @@ p:has(+ ol) { .lock-indicator:hover { transform: scale(1.1) !important; background: #f0f0f0; +} + +/* Presentations Page Styles */ +.presentations-grid { + display: grid; + grid-template-columns: 1fr; + gap: 3em; + margin: 2em 0; +} + +.presentation-card { + border: 1px solid #e1e4e8; + border-radius: 8px; + padding: 1.5em; + background-color: #fafbfc; + transition: all 0.2s ease; +} + +.presentation-card:hover { + border-color: #0366d6; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.presentation-card h3 { + margin-top: 0; + margin-bottom: 0.5em; + color: #24292e; + font-size: 1.3rem; +} + +.presentation-card p { + margin-bottom: 1em; + color: #586069; + font-size: 1rem; +} + +.presentation-embed { + margin: 1.5em 0; + border-radius: 6px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.presentation-embed iframe { + display: block; + border: none; + background-color: #fff; +} + +.presentation-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1em; + padding-top: 1em; + border-top: 1px solid #e1e4e8; + font-size: 0.9rem; +} + +.presentation-meta span { + color: #586069; + font-style: italic; +} + +.presentation-meta a { + color: #0366d6; + text-decoration: none; + font-weight: 500; +} + +.presentation-meta a:hover { + text-decoration: underline; +} + +.presentations-info { + margin-top: 3em; + padding: 2em; + background-color: #f6f8fa; + border-radius: 8px; + border-left: 4px solid #0366d6; +} + +.presentations-info h3 { + margin-top: 0; + color: #24292e; +} + +.presentations-info p { + margin-bottom: 1em; + color: #586069; +} + +.presentations-info a { + color: #0366d6; + text-decoration: none; +} + +.presentations-info a:hover { + text-decoration: underline; +} + +/* Responsive design for presentations */ +@media (max-width: 768px) { + .presentations-grid { + gap: 2em; + } + + .presentation-card { + padding: 1em; + } + + .presentation-meta { + flex-direction: column; + align-items: flex-start; + gap: 0.5em; + } + + .presentation-embed iframe { + height: 400px; + } } \ No newline at end of file diff --git a/src/routes/Contact.tsx b/src/routes/Contact.tsx index f4da458..16c8d02 100644 --- a/src/routes/Contact.tsx +++ b/src/routes/Contact.tsx @@ -5,25 +5,57 @@ export function Contact() { Jeff Emmett

Contact

-

- Twitter: @jeffemmett -

-

- BlueSky:{" "} - - @jeffemnmett.bsky.social - -

-

- Mastodon:{" "} - @jeffemmett@social.coop -

-

- Email: jeffemmett@gmail.com -

-

- GitHub: Jeff-Emmett -

+ +
+

Schedule a Meeting

+

Book a 30-minute meeting with me:

+