Skip to content

Commit 2e2d426

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
feat: Add blog pages and posts
Adds a set of pages for the blog collection, ensuring each post has its own page. Includes four initial blog posts.
1 parent e4a6743 commit 2e2d426

7 files changed

Lines changed: 669 additions & 1 deletion

File tree

‎src/App.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1+
12
import { Toaster } from "@/components/ui/toaster";
23
import { Toaster as Sonner } from "@/components/ui/sonner";
34
import { TooltipProvider } from "@/components/ui/tooltip";
45
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
56
import { BrowserRouter, Routes, Route } from "react-router-dom";
67
import Index from "./pages/Index";
8+
import Blog from "./pages/Blog";
9+
import HikingOaxacaAdventure from "./pages/blog/HikingOaxacaAdventure";
10+
import KubernetesMonitoringKanvas from "./pages/blog/KubernetesMonitoringKanvas";
11+
import OpenSourceContributionsMeshery from "./pages/blog/OpenSourceContributionsMeshery";
12+
import DogsAndDevops from "./pages/blog/DogsAndDevops";
713
import NotFound from "./pages/NotFound";
814

915
const queryClient = new QueryClient();
@@ -16,6 +22,11 @@ const App = () => (
1622
<BrowserRouter>
1723
<Routes>
1824
<Route path="/" element={<Index />} />
25+
<Route path="/blog" element={<Blog />} />
26+
<Route path="/blog/hiking-oaxaca-adventure" element={<HikingOaxacaAdventure />} />
27+
<Route path="/blog/kubernetes-monitoring-kanvas" element={<KubernetesMonitoringKanvas />} />
28+
<Route path="/blog/open-source-contributions-meshery" element={<OpenSourceContributionsMeshery />} />
29+
<Route path="/blog/dogs-and-devops" element={<DogsAndDevops />} />
1930
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
2031
<Route path="*" element={<NotFound />} />
2132
</Routes>

‎src/pages/Blog.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
2+
import { Link } from 'react-router-dom';
3+
import { Calendar, ArrowRight } from 'lucide-react';
4+
import { Button } from '@/components/ui/button';
5+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
6+
import { Badge } from '@/components/ui/badge';
7+
8+
const Blog = () => {
9+
const blogPosts = [
10+
{
11+
id: 'hiking-oaxaca-adventure',
12+
title: 'Hiking Through Oaxaca: A 5-Day Adventure with My Dogs',
13+
excerpt: 'Join me and my four-legged companions as we explore the stunning mountain trails of Oaxaca, Mexico. From ancient ruins to breathtaking vistas.',
14+
date: '2024-03-15',
15+
category: 'Hiking',
16+
tags: ['Mexico', 'Hiking', 'Dogs', 'Adventure'],
17+
readTime: '8 min read'
18+
},
19+
{
20+
id: 'kubernetes-monitoring-kanvas',
21+
title: 'Mastering Kubernetes Monitoring with Kanvas',
22+
excerpt: 'Learn how to leverage Kanvas for comprehensive Kubernetes cluster monitoring and visualization. A deep dive into cloud native observability.',
23+
date: '2024-02-28',
24+
category: 'Technical',
25+
tags: ['Kubernetes', 'Kanvas', 'Monitoring', 'DevOps'],
26+
readTime: '12 min read'
27+
},
28+
{
29+
id: 'open-source-contributions-meshery',
30+
title: 'My Journey Contributing to CNCF Meshery',
31+
excerpt: 'Reflections on contributing to one of the most impactful cloud native projects. Tips for getting started with open source contributions.',
32+
date: '2024-02-10',
33+
category: 'Open Source',
34+
tags: ['CNCF', 'Meshery', 'Open Source', 'Community'],
35+
readTime: '10 min read'
36+
},
37+
{
38+
id: 'dogs-and-devops',
39+
title: 'What My Dogs Taught Me About DevOps',
40+
excerpt: 'Surprisingly, managing a pack of dogs and managing infrastructure have more in common than you might think. Leadership lessons from the pack.',
41+
date: '2024-01-20',
42+
category: 'Personal',
43+
tags: ['Dogs', 'DevOps', 'Leadership', 'Life'],
44+
readTime: '6 min read'
45+
}
46+
];
47+
48+
const getCategoryColor = (category: string) => {
49+
switch (category) {
50+
case 'Hiking': return 'bg-orange-100 text-orange-800 border-orange-200';
51+
case 'Technical': return 'bg-blue-100 text-blue-800 border-blue-200';
52+
case 'Open Source': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
53+
case 'Personal': return 'bg-green-100 text-green-800 border-green-200';
54+
default: return 'bg-gray-100 text-gray-800 border-gray-200';
55+
}
56+
};
57+
58+
return (
59+
<div className="min-h-screen bg-white">
60+
{/* Header */}
61+
<header className="bg-gradient-to-r from-slate-900 to-blue-900 text-white py-12">
62+
<div className="max-w-6xl mx-auto px-4">
63+
<div className="flex items-center justify-between mb-8">
64+
<Link to="/" className="text-yellow-400 hover:text-yellow-300 transition-colors">
65+
← Back to Home
66+
</Link>
67+
</div>
68+
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
69+
Blog
70+
</h1>
71+
<p className="text-xl text-blue-100 max-w-2xl">
72+
Thoughts on infrastructure, open source, hiking adventures, and life with dogs.
73+
</p>
74+
</div>
75+
</header>
76+
77+
{/* Blog Posts */}
78+
<main className="max-w-6xl mx-auto px-4 py-12">
79+
<div className="grid gap-8">
80+
{blogPosts.map((post) => (
81+
<Card key={post.id} className="hover:shadow-lg transition-shadow duration-300 border-gray-200">
82+
<CardHeader>
83+
<div className="flex items-center justify-between mb-2">
84+
<Badge className={getCategoryColor(post.category)}>
85+
{post.category}
86+
</Badge>
87+
<div className="flex items-center text-gray-500 text-sm">
88+
<Calendar className="mr-1 h-4 w-4" />
89+
{new Date(post.date).toLocaleDateString('en-US', {
90+
year: 'numeric',
91+
month: 'long',
92+
day: 'numeric'
93+
})}
94+
</div>
95+
</div>
96+
<CardTitle className="text-2xl text-gray-900 hover:text-blue-600 transition-colors">
97+
<Link to={`/blog/${post.id}`}>
98+
{post.title}
99+
</Link>
100+
</CardTitle>
101+
<CardDescription className="text-gray-600 text-base leading-relaxed">
102+
{post.excerpt}
103+
</CardDescription>
104+
</CardHeader>
105+
<CardContent>
106+
<div className="flex items-center justify-between">
107+
<div className="flex flex-wrap gap-2">
108+
{post.tags.map((tag) => (
109+
<Badge key={tag} variant="outline" className="text-xs">
110+
{tag}
111+
</Badge>
112+
))}
113+
</div>
114+
<div className="flex items-center gap-4">
115+
<span className="text-sm text-gray-500">{post.readTime}</span>
116+
<Button asChild variant="outline" size="sm">
117+
<Link to={`/blog/${post.id}`}>
118+
Read More
119+
<ArrowRight className="ml-1 h-4 w-4" />
120+
</Link>
121+
</Button>
122+
</div>
123+
</div>
124+
</CardContent>
125+
</Card>
126+
))}
127+
</div>
128+
</main>
129+
</div>
130+
);
131+
};
132+
133+
export default Blog;

‎src/pages/Index.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import { Github, Linkedin, ArrowDown } from 'lucide-react';
32
import { Button } from '@/components/ui/button';
43
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -75,6 +74,14 @@ const Index = () => {
7574
<Github className="mr-2 h-4 w-4" />
7675
GitHub
7776
</Button>
77+
<Button
78+
size="lg"
79+
variant="outline"
80+
className="border-yellow-500 text-yellow-400 hover:bg-yellow-500 hover:text-black transition-all duration-300"
81+
onClick={() => window.location.href = '/blog'}
82+
>
83+
Read Blog
84+
</Button>
7885
</div>
7986
</div>
8087

‎src/pages/blog/DogsAndDevops.tsx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
2+
import { Link } from 'react-router-dom';
3+
import { Calendar, ArrowLeft, Clock } from 'lucide-react';
4+
import { Button } from '@/components/ui/button';
5+
import { Badge } from '@/components/ui/badge';
6+
7+
const DogsAndDevops = () => {
8+
return (
9+
<div className="min-h-screen bg-white">
10+
{/* Header */}
11+
<header className="bg-gradient-to-r from-slate-900 to-blue-900 text-white py-8">
12+
<div className="max-w-4xl mx-auto px-4">
13+
<Link to="/blog" className="inline-flex items-center text-yellow-400 hover:text-yellow-300 transition-colors mb-6">
14+
<ArrowLeft className="mr-2 h-4 w-4" />
15+
Back to Blog
16+
</Link>
17+
<Badge className="bg-green-100 text-green-800 border-green-200 mb-4">
18+
Personal
19+
</Badge>
20+
<h1 className="text-4xl font-bold mb-4 text-white">
21+
What My Dogs Taught Me About DevOps
22+
</h1>
23+
<div className="flex items-center gap-4 text-blue-200">
24+
<div className="flex items-center">
25+
<Calendar className="mr-1 h-4 w-4" />
26+
January 20, 2024
27+
</div>
28+
<div className="flex items-center">
29+
<Clock className="mr-1 h-4 w-4" />
30+
6 min read
31+
</div>
32+
</div>
33+
</div>
34+
</header>
35+
36+
{/* Content */}
37+
<article className="max-w-4xl mx-auto px-4 py-12">
38+
<div className="prose prose-lg max-w-none">
39+
<p className="text-xl text-gray-600 mb-8 leading-relaxed">
40+
Living with three dogs while managing cloud infrastructure might seem like two completely unrelated experiences, but over the years, I've discovered that pack leadership and DevOps have more in common than you might think.
41+
</p>
42+
43+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">Meet the Pack</h2>
44+
<p className="text-gray-700 mb-6">
45+
Let me introduce you to my teachers: Max, a German Shepherd with strong opinions about security; Luna, a Border Collie who's obsessed with optimization; and Charlie, a Golden Retriever whose primary concern is keeping everyone happy. Together, they've inadvertently become my best DevOps mentors.
46+
</p>
47+
48+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">Lesson 1: Consistency Is Everything</h2>
49+
<p className="text-gray-700 mb-6">
50+
Dogs thrive on routine and consistency. Max expects his morning walk at 6 AM sharp, Luna wants her puzzle toy at the same time every day, and Charlie has his dinner schedule memorized down to the minute. Deviation from these patterns causes stress and confusion.
51+
</p>
52+
53+
<p className="text-gray-700 mb-6">
54+
The same principle applies to infrastructure management. Consistent deployment processes, standardized configurations, and predictable maintenance windows create stability and reduce the cognitive load on both teams and systems. When your CI/CD pipeline runs the same way every time, when your monitoring alerts follow consistent patterns, and when your infrastructure changes follow established procedures, everyone knows what to expect.
55+
</p>
56+
57+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">Lesson 2: Early Detection Prevents Big Problems</h2>
58+
<p className="text-gray-700 mb-6">
59+
Dogs are masters at reading subtle signals. Long before a thunderstorm arrives, my dogs know it's coming. Luna starts pacing, Max becomes restless, and Charlie seeks comfort. They've learned to detect patterns that precede events, allowing them to prepare or react accordingly.
60+
</p>
61+
62+
<p className="text-gray-700 mb-6">
63+
Effective monitoring in DevOps works the same way. The best engineers don't just wait for systems to fail; they watch for the early warning signs. CPU usage trending upward, memory leaks growing slowly, or response times gradually increasing. Like my dogs sensing a storm, good monitoring helps us detect problems before they become critical incidents.
64+
</p>
65+
66+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">Lesson 3: Clear Communication Prevents Confusion</h2>
67+
<p className="text-gray-700 mb-6">
68+
Each of my dogs communicates differently. Max uses direct eye contact and deliberate movements, Luna relies on subtle body language and positioning, while Charlie is wonderfully expressive with his entire body. Over time, I've learned to read their individual communication styles and respond appropriately.
69+
</p>
70+
71+
<p className="text-gray-700 mb-6">
72+
Similarly, different team members and stakeholders communicate in various ways. Some prefer detailed technical documentation, others want high-level summaries, and some learn best through visual representations. Effective DevOps leadership means adapting your communication style to your audience, whether you're explaining a system outage to executives or walking a junior engineer through a deployment process.
73+
</p>
74+
75+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">Lesson 4: Pack Dynamics and Team Collaboration</h2>
76+
<p className="text-gray-700 mb-6">
77+
Watching my dogs interact has taught me valuable lessons about team dynamics. Max naturally takes charge during uncertain situations, Luna excels at solving complex problems, and Charlie serves as the social glue that keeps everyone working together harmoniously. Each has their strengths, and the pack works best when everyone plays to their abilities.
78+
</p>
79+
80+
<p className="text-gray-700 mb-6">
81+
High-performing DevOps teams exhibit similar characteristics. You have your natural leaders who step up during incidents, your problem-solvers who dive deep into complex technical challenges, and your collaborators who ensure smooth communication between teams. Recognizing and leveraging these natural tendencies, rather than forcing everyone into the same mold, creates stronger teams.
82+
</p>
83+
84+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">Lesson 5: Recovery Is Just as Important as Prevention</h2>
85+
<p className="text-gray-700 mb-6">
86+
Despite my best efforts to maintain routines and prevent problems, things sometimes go wrong. Charlie occasionally gets into the garbage, Luna might dig up the garden, or Max decides to chase the neighbor's cat. When these incidents happen, the response matters more than the initial problem.
87+
</p>
88+
89+
<p className="text-gray-700 mb-6">
90+
The key is swift, calm action followed by analysis and adjustment. Punishment after the fact is rarely effective with dogs – they live in the moment. Instead, I focus on understanding why it happened and preventing similar incidents in the future.
91+
</p>
92+
93+
<p className="text-gray-700 mb-6">
94+
Incident response in DevOps follows a similar pattern. When systems fail, the priority is restoration first, blame never. Post-mortems should focus on understanding root causes and improving processes, not pointing fingers. The goal is learning and improvement, not punishment.
95+
</p>
96+
97+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">Lesson 6: Patience and Persistence Pay Off</h2>
98+
<p className="text-gray-700 mb-6">
99+
Training dogs requires patience, consistency, and persistence. Progress comes in small increments, with occasional setbacks. Luna didn't master her complex tricks overnight, and Charlie's recall training took months of consistent practice. But the investment in time and energy always pays off in the long run.
100+
</p>
101+
102+
<p className="text-gray-700 mb-6">
103+
Building robust, reliable infrastructure follows the same principles. Technical debt isn't eliminated overnight, cultural changes take time to take root, and new processes require consistent reinforcement. The engineers who succeed in DevOps are those who understand that lasting improvements come from persistent, incremental progress rather than dramatic overhauls.
104+
</p>
105+
106+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">Lesson 7: Leadership Through Service</h2>
107+
<p className="text-gray-700 mb-6">
108+
Perhaps the most important lesson my dogs have taught me is that true leadership comes through service. My role isn't to dominate or control, but to provide what they need to thrive: structure, consistency, clear communication, and unconditional support. When I fulfill my responsibilities as their leader, they naturally respond with trust and cooperation.
109+
</p>
110+
111+
<p className="text-gray-700 mb-6">
112+
The best DevOps leaders I know follow this same model. They don't lead through authority or technical superiority, but by removing obstacles, providing clear direction, and supporting their teams' success. They create environments where people can do their best work, just like I try to create an environment where my dogs can be their best selves.
113+
</p>
114+
115+
<h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">The Unexpected Teachers</h2>
116+
<p className="text-gray-700 mb-8">
117+
Who would have thought that Max, Luna, and Charlie would become such insightful DevOps mentors? Every day, they remind me that the fundamentals of good leadership – consistency, clear communication, early problem detection, and service to others – apply whether you're managing a pack of dogs or a team of engineers.
118+
</p>
119+
120+
<p className="text-gray-700 mb-8">
121+
The next time you're facing a challenging situation at work, maybe consider what your pets might do. They might just have the answer you're looking for.
122+
</p>
123+
</div>
124+
125+
{/* Navigation */}
126+
<div className="border-t pt-8 mt-12">
127+
<Button asChild>
128+
<Link to="/blog">
129+
<ArrowLeft className="mr-2 h-4 w-4" />
130+
Back to Blog
131+
</Link>
132+
</Button>
133+
</div>
134+
</article>
135+
</div>
136+
);
137+
};
138+
139+
export default DogsAndDevops;

0 commit comments

Comments
 (0)