Skip to content

Add AI and outdoor blog content #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simihablo merged 1 commit into from
Sep 6, 2026
Merged

Add AI and outdoor blog content #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import HikingOaxacaAdventure from "./pages/blog/HikingOaxacaAdventure";
import KubernetesMonitoringKanvas from "./pages/blog/KubernetesMonitoringKanvas";
import OpenSourceContributionsMeshery from "./pages/blog/OpenSourceContributionsMeshery";
import DogsAndDevops from "./pages/blog/DogsAndDevops";
import NewBlogPost from "./pages/blog/NewBlogPost";
import NotFound from "./pages/NotFound";

const queryClient = new QueryClient();
Expand All @@ -29,6 +30,7 @@ const App = () => (
<Route path="/blog/kubernetes-monitoring-kanvas" element={<KubernetesMonitoringKanvas />} />
<Route path="/blog/open-source-contributions-meshery" element={<OpenSourceContributionsMeshery />} />
<Route path="/blog/dogs-and-devops" element={<DogsAndDevops />} />
<Route path="/blog/:slug" element={<NewBlogPost />} />
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
<Route path="*" element={<NotFound />} />
</Routes>
Expand Down
261 changes: 261 additions & 0 deletions src/content/newBlogPosts.ts
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 34 additions & 17 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,35 @@

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--background: 45 33% 96%;
--foreground: 222 47% 11%;

--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card-foreground: 222 47% 11%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--popover-foreground: 222 47% 11%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--primary: 158 64% 26%;
--primary-foreground: 48 100% 96%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 45 32% 92%;
--secondary-foreground: 222 47% 11%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--muted: 45 20% 91%;
--muted-foreground: 215 16% 36%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 43 74% 85%;
--accent-foreground: 222 47% 11%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--border: 35 22% 84%;
--input: 35 22% 84%;
--ring: 158 64% 26%;

--radius: 0.5rem;
--radius: 0.75rem;

--sidebar-background: 0 0% 98%;

Expand Down Expand Up @@ -98,6 +98,23 @@
}

body {
@apply bg-background text-foreground;
@apply bg-background text-foreground antialiased;
}
}

@layer components {
.site-home {
background:
radial-gradient(circle at 16% 12%, rgb(16 185 129 / 0.16), transparent 24rem),
radial-gradient(circle at 88% 24%, rgb(245 158 11 / 0.14), transparent 25rem),
linear-gradient(145deg, #020617 0%, #0f2e2b 52%, #172554 100%);
}

.site-page {
@apply min-h-screen bg-stone-50 text-slate-900;
}

.site-header {
@apply border-b border-emerald-400/15 bg-gradient-to-r from-slate-950 via-emerald-950 to-slate-900 text-white;
}
}
28 changes: 16 additions & 12 deletions src/pages/Blog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ import { Calendar, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { newBlogPosts } from '@/content/newBlogPosts';

const Blog = () => {
const blogPosts = [
...newBlogPosts,
{
id: 'hiking-oaxaca-adventure',
title: 'Hiking Through Oaxaca: A 5-Day Adventure with My Dogs',
Expand Down Expand Up @@ -51,38 +53,40 @@ const Blog = () => {
case 'Technical': return 'bg-blue-100 text-blue-800 border-blue-200';
case 'Open Source': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
case 'Personal': return 'bg-green-100 text-green-800 border-green-200';
case 'AI': return 'bg-violet-100 text-violet-800 border-violet-200';
case 'Camping': return 'bg-emerald-100 text-emerald-800 border-emerald-200';
default: return 'bg-gray-100 text-gray-800 border-gray-200';
}
};

console.log('Blog component rendering');

return (
<div className="min-h-screen bg-white">
<div className="site-page">
{/* Header */}
<header className="bg-gradient-to-r from-slate-900 to-blue-900 text-white py-12">
<header className="site-header py-12">
<div className="max-w-6xl mx-auto px-4">
<div className="flex items-center justify-between mb-8">
<Link to="/" className="text-yellow-400 hover:text-yellow-300 transition-colors">
<Link to="/" className="text-amber-300 hover:text-amber-200 transition-colors">
← Back to Home
</Link>
</div>
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-amber-300 via-amber-200 to-emerald-200 bg-clip-text text-transparent">
Blog
</h1>
<p className="text-xl text-blue-100 max-w-2xl">
Thoughts on infrastructure, open source, hiking adventures, and life with dogs.
Thoughts on AI, infrastructure, open source, hiking adventures, camping, and life with dogs.
</p>
</div>
</header>

{/* Blog Posts */}
<main className="max-w-6xl mx-auto px-4 py-12">
<div className="grid gap-8">
<div className="grid gap-6">
{blogPosts.map((post) => (
<Card key={post.id} className="hover:shadow-lg transition-shadow duration-300 border-gray-200">
<Card key={post.id} className="overflow-hidden border-stone-200 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-emerald-300 hover:shadow-xl hover:shadow-emerald-950/10">
<CardHeader>
<div className="flex items-center justify-between mb-2">
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
<Badge className={getCategoryColor(post.category)}>
{post.category}
</Badge>
Expand All @@ -95,18 +99,18 @@ const Blog = () => {
})}
</div>
</div>
<CardTitle className="text-2xl text-gray-900 hover:text-blue-600 transition-colors">
<CardTitle className="text-2xl text-slate-900 hover:text-emerald-700 transition-colors">
<Link to={`/blog/${post.id}`}>
{post.title}
</Link>
</CardTitle>
<CardDescription className="text-gray-600 text-base leading-relaxed">
<CardDescription className="text-slate-600 text-base leading-relaxed">
{post.excerpt}
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between">
<div className="flex flex-wrap gap-2">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex min-w-0 flex-wrap gap-2">
{post.tags.map((tag) => (
<Badge key={tag} variant="outline" className="text-xs">
{tag}
Expand Down
Loading
Loading