Skip to content

Add Salazar last name, X/Reddit socials, 3 new projects, expanded About Me, new favicon #13

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

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Add Salazar last name, X/Reddit socials, 3 new projects, expanded About Me, new favicon #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38f2acf
Add Salazar last name, X/Reddit social links, 3 new projects, expande…
Copilot Jun 2, 2026
c67a15e
Add Reddit icon SVG for visual consistency
Copilot Jun 2, 2026
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
9 changes: 5 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mericio - Infrastructure Engineer</title>
<meta name="description" content="Personal website of Mericio, Infrastructure Engineer specializing in Kubernetes, Linux, and Google Cloud Platform. CNCF Meshery contributor from Guatemala." />
<meta name="author" content="Mericio" />
<link rel="icon" type="image/png" href="/favicon.png" />
<title>Mericio Salazar - Infrastructure Engineer</title>
<meta name="description" content="Personal website of Mericio Salazar, Infrastructure Engineer specializing in Kubernetes, Linux, and Google Cloud Platform. CNCF Meshery contributor from Guatemala." />
<meta name="author" content="Mericio Salazar" />

<meta property="og:title" content="Mericio - Infrastructure Engineer" />
<meta property="og:title" content="Mericio Salazar - Infrastructure Engineer" />
<meta property="og:description" content="Infrastructure Engineer specializing in Kubernetes, Linux, and Google Cloud Platform. CNCF Meshery contributor from Guatemala." />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://avatars.githubusercontent.com/u/218162243?v=4" />
Expand Down
Binary file added public/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 68 additions & 7 deletions src/pages/Index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { Github, Linkedin, ArrowDown } from 'lucide-react';
import { Github, Linkedin, ArrowDown, X } from 'lucide-react';

const RedditIcon = ({ className }: { className?: string }) => (
<svg className={className} viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="currentColor" fillOpacity="0"/>
<path d="M20 10C20 4.477 15.523 0 10 0S0 4.477 0 10c0 4.992 3.657 9.128 8.438 9.879V12.89h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.989C16.343 19.129 20 14.992 20 10z"/>
</svg>
);
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
Expand Down Expand Up @@ -29,6 +36,21 @@ const Index = () => {
title: "MeshMate",
description: "I am a Layer5 MeshMate. I am an advocate for infrastructure management and visualization using Kanvas for cloud native applications.",
tech: ["Kanvas", "Infrastructure", "Visualization"]
},
{
title: "Kubernetes Home Lab",
description: "Self-hosted Kubernetes cluster running on bare metal for personal experimentation, learning, and running production-grade workloads at home.",
tech: ["Kubernetes", "Bare Metal", "Networking", "Linux"]
},
{
title: "GCP Infrastructure Automation",
description: "Terraform modules and CI/CD pipelines for automating Google Cloud Platform infrastructure provisioning and management at scale.",
tech: ["Terraform", "GCP", "CI/CD", "IaC"]
},
{
title: "Open Source DevRel",
description: "Developer relations work for the CNCF ecosystem — creating tutorials, writing documentation, and speaking at community events to grow cloud native adoption.",
tech: ["CNCF", "Community", "Documentation", "Speaking"]
}
];

Expand Down Expand Up @@ -77,7 +99,7 @@ const Index = () => {
<div className="relative z-10 text-center max-w-4xl mx-auto">
<div className="mb-8 animate-fade-in">
<h1 className="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-blue-400 via-orange-500 to-blue-300 bg-clip-text text-transparent">
Mericio
Mericio Salazar
</h1>
<p className="text-xl md:text-2xl text-blue-100 mb-4">
Infrastructure Engineer
Expand Down Expand Up @@ -108,6 +130,24 @@ const Index = () => {
<Github className="mr-2 h-4 w-4" />
GitHub
</Button>
<Button
size="lg"
variant="outline"
className="border-slate-400 text-slate-200 hover:bg-slate-600 hover:text-white transition-all duration-300"
onClick={() => window.open('https://x.com/simihablo', '_blank')}
>
<X className="mr-2 h-4 w-4" />
X
</Button>
<Button
size="lg"
variant="outline"
className="border-orange-600 text-orange-300 hover:bg-orange-600 hover:text-white transition-all duration-300"
onClick={() => window.open('https://www.reddit.com/user/MelodicClaim890/', '_blank')}
>
<RedditIcon className="mr-2 h-4 w-4" />
Reddit
</Button>
<Button
size="lg"
variant="outline"
Expand All @@ -134,18 +174,21 @@ const Index = () => {
<div className="grid md:grid-cols-2 gap-12 items-center">
<div className="space-y-6">
<p className="text-lg text-blue-100 leading-relaxed">
I'm an infrastructure engineer based in beautiful Guatemala, passionate about
I'm <span className="text-yellow-400 font-semibold">Mericio Salazar</span>, an infrastructure engineer based in beautiful Guatemala, passionate about
building robust, scalable systems using cutting-edge cloud native technologies.
</p>
<p className="text-lg text-blue-100 leading-relaxed">
As a contributor to the CNCF project <span className="text-yellow-400 font-semibold"><a href="https://meshery.io">Meshery</a>,</span> and
an advocate for <span className="text-orange-400 font-semibold"><a href="https://layer5.io">Layer5</a></span> projects like <a href="https://docs.kanvas.new">Kanvas</a>,
I'm deeply involved in the cloud native ecosystem.
</p>
<p className="text-lg text-blue-200 max-w-2xl mx-auto leading-relaxed">But life’s not all code and containers.</p>
<p className="text-lg text-blue-100 leading-relaxed">
With hands-on experience across <span className="text-orange-400 font-semibold">Google Cloud Platform, AWS, and Azure</span>, I design and operate multi-cloud infrastructure that is secure, observable, and highly available. My day-to-day involves Kubernetes, Terraform, and Go — with a strong focus on automation and GitOps workflows.
</p>
<p className="text-lg text-blue-200 max-w-2xl mx-auto leading-relaxed">But life's not all code and containers.</p>
<p className="text-lg text-blue-100 leading-relaxed">
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.
hiking through Mexico's stunning landscapes, exploring the Guatemalan countryside with my beloved dogs, or organizing the local tech community through meetups and workshops.
</p>
</div>
<div className="bg-gradient-to-br from-blue-800/50 to-orange-900/30 p-8 rounded-2xl border border-blue-500/20">
Expand Down Expand Up @@ -254,7 +297,7 @@ const Index = () => {
Whether you want to discuss Kubernetes, open source contributions, or share hiking stories,
¡Me encantaría saber de usted!
</p>
<div className="flex gap-6 justify-center">
<div className="flex gap-6 justify-center flex-wrap">
<Button
size="lg"
className="bg-yellow-500 hover:bg-yellow-400 text-black font-semibold transition-all duration-300 hover:scale-105"
Expand All @@ -263,6 +306,24 @@ const Index = () => {
<Github className="mr-2 h-5 w-5" />
GitHub
</Button>
<Button
size="lg"
variant="outline"
className="border-slate-400 text-slate-200 hover:bg-slate-600 hover:text-white transition-all duration-300 hover:scale-105"
onClick={() => window.open('https://x.com/simihablo', '_blank')}
>
<X className="mr-2 h-5 w-5" />
X / Twitter
</Button>
<Button
size="lg"
variant="outline"
className="border-orange-600 text-orange-300 hover:bg-orange-600 hover:text-white transition-all duration-300 hover:scale-105"
onClick={() => window.open('https://www.reddit.com/user/MelodicClaim890/', '_blank')}
>
<RedditIcon className="mr-2 h-5 w-5" />
Reddit
</Button>
{/* <Button
size="lg"
variant="outline"
Expand All @@ -280,7 +341,7 @@ const Index = () => {
<footer className="py-8 px-4 border-t border-blue-500/20">
<div className="max-w-6xl mx-auto text-center">
<p className="text-blue-300">
© 2025 Mericio • Infrastructure Engineer • Guatemala 🇬🇹
© 2025 Mericio Salazar • Infrastructure Engineer • Guatemala 🇬🇹
</p>
<p className="text-sm text-blue-400 mt-2">
Built with ❤️ using React, TypeScript, and Tailwind CSS
Expand Down