From 64cd26a11d1f881d4d1755885ae416816e798c5a Mon Sep 17 00:00:00 2001 From: "Mericio \"Hablo\" Salazar" <218162243+simihablo@users.noreply.github.com> Date: Sat, 5 Sep 2026 20:06:49 -0500 Subject: [PATCH] Add AI and outdoor blog posts Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/App.tsx | 2 + src/content/newBlogPosts.ts | 261 ++++++++++++++++++ src/index.css | 51 ++-- src/pages/Blog.tsx | 28 +- src/pages/Index.tsx | 95 +++---- src/pages/NotFound.tsx | 11 +- src/pages/blog/DogsAndDevops.tsx | 6 +- src/pages/blog/HikingOaxacaAdventure.tsx | 6 +- src/pages/blog/KubernetesMonitoringKanvas.tsx | 6 +- src/pages/blog/NewBlogPost.tsx | 92 ++++++ .../blog/OpenSourceContributionsMeshery.tsx | 6 +- 11 files changed, 471 insertions(+), 93 deletions(-) create mode 100644 src/content/newBlogPosts.ts create mode 100644 src/pages/blog/NewBlogPost.tsx diff --git a/src/App.tsx b/src/App.tsx index 7a7c8b1..bd7d370 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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(); @@ -29,6 +30,7 @@ const App = () => ( } /> } /> } /> + } /> {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> diff --git a/src/content/newBlogPosts.ts b/src/content/newBlogPosts.ts new file mode 100644 index 0000000..27504ef --- /dev/null +++ b/src/content/newBlogPosts.ts @@ -0,0 +1,261 @@ +export type BlogPostSection = { + title: string; + paragraphs: string[]; + bullets?: string[]; +}; + +export type BlogPost = { + id: string; + title: string; + excerpt: string; + date: string; + displayDate: string; + category: 'AI' | 'Hiking' | 'Camping'; + tags: string[]; + readTime: string; + intro: string; + sections: BlogPostSection[]; +}; + +export const newBlogPosts: BlogPost[] = [ + { + id: 'practical-ai-for-infrastructure-engineers', + title: 'Practical AI for Infrastructure Engineers: Start With the Runbook', + excerpt: 'A grounded way to use AI in operations: begin with repeatable work, preserve review points, and keep the runbook as the source of truth.', + date: '2026-09-01', + displayDate: 'September 1, 2026', + category: 'AI', + tags: ['AI', 'Infrastructure', 'Automation', 'Runbooks'], + readTime: '7 min read', + intro: 'AI is most useful in infrastructure work when it helps us move through familiar, well-understood tasks faster. The goal is not to hand over production decisions; it is to create more time for the judgment calls that require context, experience, and accountability.', + sections: [ + { + title: 'Choose a narrow first use case', + paragraphs: [ + 'Start with work that already has a dependable sequence: summarizing an incident timeline, drafting a change plan from an approved template, or turning a noisy alert into a concise handoff. These tasks have inputs, expected outputs, and a human who can easily spot a bad answer.', + 'Avoid beginning with autonomous remediation. An assistant may produce a convincing command without knowing the full state of a cluster, the current maintenance window, or the customer impact. A small and reversible use case gives the team a chance to learn safely.' + ], + bullets: [ + 'Summarize alerts, logs, and incident notes for an on-call handoff.', + 'Draft runbook steps from a known operational pattern.', + 'Suggest questions to ask before making a change.', + 'Turn a completed incident into a first-pass retrospective.' + ] + }, + { + title: 'Keep the runbook in the loop', + paragraphs: [ + 'A useful AI workflow begins with trusted material. Give the assistant the current runbook, service ownership details, and the guardrails that already guide human operators. This makes the result more relevant and reinforces the documentation the team wants to maintain.', + 'When an answer exposes a gap in the runbook, fix the runbook rather than relying on a future prompt to remember the exception. Over time, the documentation becomes clearer for people and more useful as context for assistants.' + ] + }, + { + title: 'Make review explicit', + paragraphs: [ + 'Treat generated output as a proposal. A named operator should verify assumptions, inspect every command that could change state, and confirm that the recommendation fits the current environment. The review is not a formality; it is where operational context enters the process.', + 'This approach creates a healthy division of labor. AI can reduce the blank-page problem and gather clues quickly, while engineers remain responsible for decisions, changes, and outcomes.' + ] + } + ] + }, + { + id: 'ai-pairing-workflow-with-human-control', + title: 'An AI Pairing Workflow That Keeps Humans in Control', + excerpt: 'AI becomes a better teammate when each step has a clear owner, a visible review point, and a record of the reasoning behind the final decision.', + date: '2026-08-20', + displayDate: 'August 20, 2026', + category: 'AI', + tags: ['AI', 'Engineering', 'Collaboration', 'Reliability'], + readTime: '6 min read', + intro: 'The best AI workflow I have found feels less like delegation and more like pair programming. The assistant proposes, organizes, and challenges assumptions; the engineer defines the goal, checks the work, and makes the final call.', + sections: [ + { + title: 'Write the question before opening the tool', + paragraphs: [ + 'A vague prompt usually produces a vague result. Before asking for help, state the problem, the boundaries, and what a good answer must include. For an operational task, that can mean naming the affected service, the environment, the desired outcome, and the actions that are out of bounds.', + 'This small pause also clarifies whether the task should be automated at all. If the goal cannot be explained clearly enough for another engineer to review, it probably needs more investigation before an assistant is involved.' + ] + }, + { + title: 'Use short loops instead of a single giant request', + paragraphs: [ + 'Break work into visible stages: understand the situation, propose options, select an approach, and prepare the change. Asking for one step at a time makes it easier to inspect the reasoning and correct course before an error compounds.', + 'Short loops also make collaboration easier. A teammate can review a proposed plan or a generated diff without having to reconstruct a long chain of hidden decisions.' + ], + bullets: [ + 'Ask for a concise summary of the evidence.', + 'Request two or three approaches with trade-offs.', + 'Choose an approach and ask for an implementation checklist.', + 'Review the result against the original acceptance criteria.' + ] + }, + { + title: 'Capture what changed the decision', + paragraphs: [ + 'The final answer matters, but the reason for choosing it matters too. Add the chosen approach, rejected alternatives, and any validation notes to the pull request or runbook. This keeps important context available after the chat or terminal session ends.', + 'Human control is strongest when it is built into the workflow, not added as a hurried approval at the end. Clear ownership, small reviewable steps, and durable notes make AI assistance easier to trust.' + ] + } + ] + }, + { + id: 'safer-ai-assisted-kubernetes-operations', + title: 'Building Safer AI-Assisted Kubernetes Operations', + excerpt: 'Four practical guardrails for using AI around Kubernetes without turning suggestions into unchecked production changes.', + date: '2026-08-05', + displayDate: 'August 5, 2026', + category: 'AI', + tags: ['AI', 'Kubernetes', 'Security', 'Operations'], + readTime: '8 min read', + intro: 'Kubernetes has enough moving parts that a plausible suggestion is not the same thing as a safe change. AI can help operators understand manifests, write queries, and prepare troubleshooting steps, but the workflow must protect the cluster from confident mistakes.', + sections: [ + { + title: 'Separate observation from mutation', + paragraphs: [ + 'Start by giving AI read-only questions: explain a deployment manifest, compare two versions of a Helm value file, or draft a query for metrics that an operator will run. The moment a suggestion can change cluster state, it deserves a stronger review path.', + 'Keeping these modes separate makes intent clear. Everyone involved can see when the work moved from understanding a problem to proposing a production action.' + ] + }, + { + title: 'Build guardrails around the environment', + paragraphs: [ + 'Use the same protections you would expect from any operational tool. Scope credentials to the smallest necessary permissions, require pull requests for declarative changes, and test manifests in a non-production environment before promotion.', + 'An assistant should not become a path around existing controls. If a change would normally require peer review, policy checks, or an approved maintenance window, generated commands and manifests should require them too.' + ], + bullets: [ + 'Use read-only access for investigation tasks whenever possible.', + 'Require reviewable Git changes for desired-state updates.', + 'Validate manifests with the same policy and schema checks used by the team.', + 'Record the operator, intent, and rollback path before a production change.' + ] + }, + { + title: 'Practice recovery before you need it', + paragraphs: [ + 'Every proposed change should include a rollback plan. Asking an assistant to identify a rollback is useful, but it must be checked against the actual deployment strategy and current application state.', + 'The objective is not to eliminate human effort. It is to use AI to reduce routine friction while preserving the habits that make operations resilient: observability, small changes, peer review, and fast recovery.' + ] + } + ] + }, + { + id: 'weather-first-weekend-camping-checklist', + title: 'A Weather-First Weekend Camping Checklist', + excerpt: 'Build a better camping plan by reading the forecast first, then choosing shelter, clothing, food, and a turnaround plan that match the conditions.', + date: '2026-07-19', + displayDate: 'July 19, 2026', + category: 'Camping', + tags: ['Camping', 'Weather', 'Planning', 'Outdoors'], + readTime: '5 min read', + intro: 'A good camping weekend begins before the car is packed. The forecast is not a last-minute detail; it is the foundation for decisions about where to camp, what to bring, and when it is smarter to change the plan.', + sections: [ + { + title: 'Read the forecast as a set of conditions', + paragraphs: [ + 'Temperature tells only part of the story. Check wind, precipitation probability, overnight lows, humidity, and storm timing. A calm afternoon can turn into a cold, wet night when wind and rain arrive together.', + 'Use that information to pick a campsite with appropriate shelter and drainage. If the conditions are outside the comfort range of your gear or experience, choose a lower-risk route, a developed campground, or another weekend.' + ] + }, + { + title: 'Pack in systems, not single items', + paragraphs: [ + 'Think of your gear as connected systems. Your shelter system includes the tent, footprint, stakes, rain fly, and a dry place for clothing. Your sleep system includes the bag, pad, layers, and a plan for staying dry. Missing one piece can undermine the rest.', + 'Pack the critical items where they are easy to reach. A rain jacket buried at the bottom of a full pack is less useful than one available before the first drops fall.' + ], + bullets: [ + 'Shelter: tent, rain fly, stakes, ground protection, and a repair option.', + 'Sleep: temperature-rated bag, insulated pad, dry base layer, and warm socks.', + 'Safety: headlamp, first-aid kit, map, charged phone, and backup power.', + 'Food and water: more water than the minimum plan, treatment method, and simple meals.' + ] + }, + { + title: 'Decide the turnaround point in advance', + paragraphs: [ + 'A weather-first plan includes a point where you will turn back or leave camp. Decide it while you are warm, dry, and looking at reliable information, not after fatigue or pride has made the decision harder.', + 'Changing a plan is not failing the trip. It is good judgment. The best camping memories come from returning home with energy to plan the next adventure.' + ] + } + ] + }, + { + id: 'planning-a-lightweight-three-day-camp', + title: 'Three Days on the Trail: Planning a Lightweight Camp', + excerpt: 'A simple framework for balancing pack weight, comfort, food, water, and route choices on a short backcountry camping trip.', + date: '2026-07-05', + displayDate: 'July 5, 2026', + category: 'Camping', + tags: ['Camping', 'Backpacking', 'Hiking', 'Gear'], + readTime: '7 min read', + intro: 'Lightweight camping is not about owning the smallest version of everything. It is about carrying what supports a safe and enjoyable trip, while leaving behind the extras that make every climb and mile harder.', + sections: [ + { + title: 'Let the route shape the packing list', + paragraphs: [ + 'Start with distance, elevation, terrain, water sources, and expected conditions. A three-day route with reliable water and gentle trails calls for a different kit than one with exposed ridges and long dry sections.', + 'Write down the real constraints before comparing gear. This protects you from packing based on habit or on a gear list meant for a completely different environment.' + ] + }, + { + title: 'Weigh the big items first', + paragraphs: [ + 'Your shelter, sleep system, backpack, food, and water make up the largest part of the load. Improving one of these categories usually matters more than obsessing over tiny accessories. Comfort also counts: an exhausted hiker with an ultralight pack is not necessarily having a better trip.', + 'Before buying anything, try removing duplicates, sharing group gear, and repackaging food into only what the trip requires. These low-cost changes often deliver the most noticeable weight savings.' + ], + bullets: [ + 'Plan meals around calories, simplicity, and minimal cleanup.', + 'Carry water for the distance between verified sources, not for the whole route by default.', + 'Bring layered clothing that works together instead of separate outfits for each day.', + 'Leave a detailed trip plan with someone who is not joining the hike.' + ] + }, + { + title: 'Test the complete setup close to home', + paragraphs: [ + 'Set up the tent, cook one meal, and sleep with the system before the trip. Testing in a backyard or local campground exposes missing stakes, an uncomfortable pad, or a stove you do not know how to use while the stakes are low.', + 'A lighter pack is valuable only when it still supports good decisions. The right balance is personal, route-specific, and worth revisiting after every trip.' + ] + } + ] + }, + { + id: 'leave-no-trace-at-busy-campsites', + title: 'Leave No Trace, Even When the Campsite Is Busy', + excerpt: 'Busy campgrounds need extra care. Small choices around food, fires, water, noise, and waste help preserve the outdoors for everyone.', + date: '2026-06-18', + displayDate: 'June 18, 2026', + category: 'Hiking', + tags: ['Hiking', 'Camping', 'Leave No Trace', 'Stewardship'], + readTime: '6 min read', + intro: 'It is easy to think Leave No Trace matters only in remote places. In busy campgrounds and popular trails, thoughtful habits matter even more because the impact of small choices is multiplied by every visitor.', + sections: [ + { + title: 'Start with a plan that reduces pressure', + paragraphs: [ + 'Check local rules, reserve sites where required, and learn whether fires are allowed before you arrive. Choosing established trails and durable campsites protects vegetation and keeps new social paths from spreading into fragile areas.', + 'If a place is crowded, consider a less popular time, route, or destination. Flexibility is one of the simplest ways to reduce impact and often leads to a quieter, more enjoyable experience.' + ] + }, + { + title: 'Keep food, water, and waste contained', + paragraphs: [ + 'Store food securely and never leave scraps for wildlife. Animals that learn to find food around people can become dependent or dangerous, and the consequences are rarely good for the animal or the next campers.', + 'Pack out everything that came with you, including small items such as wrappers, bottle caps, and food scraps. Follow local guidance for human waste, and wash dishes well away from streams and lakes using only the amount of water and soap that the situation allows.' + ], + bullets: [ + 'Use established fire rings only when fires are permitted.', + 'Keep music and conversations at a level that lets nearby visitors hear the outdoors.', + 'Yield thoughtfully on narrow trails and greet other hikers with patience.', + 'Leave natural objects where they are for the next person to discover.' + ] + }, + { + title: 'Make stewardship visible', + paragraphs: [ + 'You do not need to lecture other visitors to set a good example. A clean campsite, a quiet morning departure, and a willingness to pick up a stray piece of litter all communicate respect for the place.', + 'The outdoors is shared infrastructure. Taking care of a trail or campsite is a practical way to protect future adventures for hikers, campers, wildlife, and the communities that welcome us.' + ] + } + ] + } +]; diff --git a/src/index.css b/src/index.css index a20aa58..22c92c6 100644 --- a/src/index.css +++ b/src/index.css @@ -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%; @@ -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; } } \ No newline at end of file diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index b1c1510..69c066b 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -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', @@ -51,6 +53,8 @@ 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'; } }; @@ -58,31 +62,31 @@ const Blog = () => { console.log('Blog component rendering'); return ( -
+
{/* Header */} -
+
- + ← Back to Home
-

+

Blog

- Thoughts on infrastructure, open source, hiking adventures, and life with dogs. + Thoughts on AI, infrastructure, open source, hiking adventures, camping, and life with dogs.

{/* Blog Posts */}
-
+
{blogPosts.map((post) => ( - + -
+
{post.category} @@ -95,18 +99,18 @@ const Blog = () => { })}
- + {post.title} - + {post.excerpt} -
-
+
+
{post.tags.map((tag) => ( {tag} diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 013f9a7..0718cea 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -33,6 +33,7 @@ const Index = () => { ]; const blogTopics = [ + "Practical AI for Infrastructure Engineers", "Hiking Adventures in Mexico", "Managing Infrastructure with Kanvas", "Contributing to Open Source Projects", @@ -70,22 +71,22 @@ const Index = () => { }; return ( -
+
{/* Hero Section */}
-
+
-

+

Mericio

-

+

Infrastructure Engineer

-

+

Kubernetes • Linux • Google Cloud Platform • Open Source Contributor

-

+

📍 Guatemala • 🐕 Dog Lover • 🥾 Hiking Enthusiast

@@ -93,7 +94,7 @@ const Index = () => {
{/* About Section */}
-

About Me

+

About Me

-

+

I'm an infrastructure engineer based in beautiful Guatemala, passionate about building robust, scalable systems using cutting-edge cloud native technologies.

-

- As a contributor to the CNCF project Meshery, and - an advocate for Layer5 projects like Kanvas, +

+ As a contributor to the CNCF project Meshery, and + an advocate for Layer5 projects like Kanvas, I'm deeply involved in the cloud native ecosystem.

-

But life’s not all code and containers.

-

+

But life’s not all code and containers.

+

When I'm not managing Kubernetes clusters or writing Go code, you'll find me hiking through Mexico's stunning landscapes or sharing my adventures with my beloved dogs.

-
-

What I Do

-

When I’m not deep in YAML or container logs...

+
+

What I Do

+

When I’m not deep in YAML or container logs...

-
    +
    • -
      +
      Run local tech meetup groups
    • -
      +
      Conduct workshops and training sessions
    • -
      +
      Contribute to open source projects
    • -
      +
      Write technical blog posts
    • -
      +
      Share hiking adventures
    @@ -180,15 +181,15 @@ const Index = () => {
{/* Skills Section */} -
+
-

Technical Expertise

+

Technical Expertise

{skills.map((skill, index) => ( {skill} @@ -201,20 +202,20 @@ const Index = () => { {/* Projects Section */}
-

Key Projects & Contributions

+

Key Projects & Contributions

{projects.map((project, index) => ( - + - {project.title} - + {project.title} + {project.description}
{project.tech.map((tech) => ( - + {tech} ))} @@ -227,17 +228,17 @@ const Index = () => {
{/* Blog Topics Section */} -
+
-

Blog Topics I Love Writing About

+

Blog Topics I Love Writing About

{blogTopics.map((topic, index) => (
-

-
+

+
{topic}

@@ -249,15 +250,15 @@ const Index = () => { {/* Contact Section */}
-

Let's Connect

-

+

Let's Connect

+

Whether you want to discuss Kubernetes, open source contributions, or share hiking stories, ¡Me encantaría saber de usted!

{/* Footer */} -