Skip to content

Commit e7feb9b

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Create personal website
Implement a personal website based on the user's provided information.
1 parent ab354b4 commit e7feb9b

2 files changed

Lines changed: 248 additions & 11 deletions

File tree

‎index.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1+
12
<!DOCTYPE html>
23
<html lang="en">
34
<head>
45
<meta charset="UTF-8" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>mericio-kanvas-cloud</title>
7-
<meta name="description" content="Lovable Generated Project" />
8-
<meta name="author" content="Lovable" />
7+
<title>Mericio - Infrastructure Engineer</title>
8+
<meta name="description" content="Personal website of Mericio, Infrastructure Engineer specializing in Kubernetes, Linux, and Google Cloud Platform. CNCF Meshery contributor from Guatemala." />
9+
<meta name="author" content="Mericio" />
910

10-
<meta property="og:title" content="mericio-kanvas-cloud" />
11-
<meta property="og:description" content="Lovable Generated Project" />
11+
<meta property="og:title" content="Mericio - Infrastructure Engineer" />
12+
<meta property="og:description" content="Infrastructure Engineer specializing in Kubernetes, Linux, and Google Cloud Platform. CNCF Meshery contributor from Guatemala." />
1213
<meta property="og:type" content="website" />
1314
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
1415

‎src/pages/Index.tsx‎

Lines changed: 242 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,248 @@
1-
// Update this page (the content is just a fallback if you fail to update the page)
1+
2+
import { Github, Linkedin, ArrowDown } from 'lucide-react';
3+
import { Button } from '@/components/ui/button';
4+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
5+
import { Badge } from '@/components/ui/badge';
26

37
const Index = () => {
8+
const skills = [
9+
"Kubernetes", "Linux", "Google Cloud Platform", "Golang", "Docker",
10+
"Terraform", "CI/CD", "Microservices", "Service Mesh", "Cloud Native"
11+
];
12+
13+
const projects = [
14+
{
15+
title: "CNCF Meshery Contributor",
16+
description: "Contributing to the cloud native management plane for service meshes and their workloads.",
17+
tech: ["Go", "Kubernetes", "Service Mesh", "CNCF"]
18+
},
19+
{
20+
title: "Guatemala Tech Meetup",
21+
description: "Organizing and running local meetups to foster the tech community in Guatemala.",
22+
tech: ["Community", "Speaking", "Workshops"]
23+
},
24+
{
25+
title: "Layer5 & Kanvas Advocate",
26+
description: "Infrastructure management and visualization using Kanvas for cloud native applications.",
27+
tech: ["Kanvas", "Infrastructure", "Visualization"]
28+
}
29+
];
30+
31+
const blogTopics = [
32+
"Hiking Adventures in Mexico",
33+
"Managing Infrastructure with Kanvas",
34+
"Contributing to Open Source Projects",
35+
"Kubernetes Best Practices",
36+
"Life with Dogs & Tech"
37+
];
38+
439
return (
5-
<div className="min-h-screen flex items-center justify-center bg-background">
6-
<div className="text-center">
7-
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
8-
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
9-
</div>
40+
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-800">
41+
{/* Hero Section */}
42+
<section className="relative min-h-screen flex items-center justify-center px-4">
43+
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-orange-500/10"></div>
44+
<div className="relative z-10 text-center max-w-4xl mx-auto">
45+
<div className="mb-8 animate-fade-in">
46+
<h1 className="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-300 bg-clip-text text-transparent">
47+
Mericio
48+
</h1>
49+
<p className="text-xl md:text-2xl text-blue-100 mb-4">
50+
Infrastructure Engineer
51+
</p>
52+
<p className="text-lg text-blue-200 max-w-2xl mx-auto leading-relaxed">
53+
Kubernetes • Linux • Google Cloud Platform • Open Source Contributor
54+
</p>
55+
<p className="text-base text-blue-300 mt-2">
56+
📍 Guatemala • 🐕 Dog Lover • 🥾 Hiking Enthusiast
57+
</p>
58+
</div>
59+
60+
<div className="flex gap-4 justify-center mb-12 animate-scale-in">
61+
<Button
62+
size="lg"
63+
className="bg-yellow-500 hover:bg-yellow-400 text-black font-semibold transition-all duration-300 hover:scale-105"
64+
onClick={() => document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' })}
65+
>
66+
Learn More
67+
<ArrowDown className="ml-2 h-4 w-4" />
68+
</Button>
69+
<Button
70+
size="lg"
71+
variant="outline"
72+
className="border-orange-500 text-orange-400 hover:bg-orange-500 hover:text-white transition-all duration-300"
73+
onClick={() => window.open('https://github.com/simihablo', '_blank')}
74+
>
75+
<Github className="mr-2 h-4 w-4" />
76+
GitHub
77+
</Button>
78+
</div>
79+
</div>
80+
81+
{/* Floating tech icons */}
82+
<div className="absolute inset-0 overflow-hidden pointer-events-none">
83+
<div className="absolute top-20 left-10 w-16 h-16 bg-blue-500/20 rounded-full animate-pulse"></div>
84+
<div className="absolute top-40 right-20 w-12 h-12 bg-yellow-500/20 rounded-full animate-pulse delay-1000"></div>
85+
<div className="absolute bottom-40 left-20 w-20 h-20 bg-orange-500/20 rounded-full animate-pulse delay-2000"></div>
86+
</div>
87+
</section>
88+
89+
{/* About Section */}
90+
<section id="about" className="py-20 px-4">
91+
<div className="max-w-6xl mx-auto">
92+
<h2 className="text-4xl font-bold text-center mb-12 text-yellow-400">About Me</h2>
93+
<div className="grid md:grid-cols-2 gap-12 items-center">
94+
<div className="space-y-6">
95+
<p className="text-lg text-blue-100 leading-relaxed">
96+
I'm an infrastructure engineer based in beautiful Guatemala, passionate about
97+
building robust, scalable systems using cutting-edge cloud native technologies.
98+
</p>
99+
<p className="text-lg text-blue-100 leading-relaxed">
100+
As a contributor to the CNCF project <span className="text-yellow-400 font-semibold">Meshery</span> and
101+
an advocate for <span className="text-orange-400 font-semibold">Layer5</span> projects like Kanvas,
102+
I'm deeply involved in the cloud native ecosystem.
103+
</p>
104+
<p className="text-lg text-blue-100 leading-relaxed">
105+
When I'm not managing Kubernetes clusters or writing Go code, you'll find me
106+
hiking through Mexico's stunning landscapes or sharing my adventures with my beloved dogs.
107+
</p>
108+
</div>
109+
<div className="bg-gradient-to-br from-blue-800/50 to-orange-900/30 p-8 rounded-2xl border border-blue-500/20">
110+
<h3 className="text-2xl font-bold text-yellow-400 mb-6">What I Do</h3>
111+
<ul className="space-y-3 text-blue-100">
112+
<li className="flex items-center gap-3">
113+
<div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
114+
Run local tech meetup groups
115+
</li>
116+
<li className="flex items-center gap-3">
117+
<div className="w-2 h-2 bg-orange-400 rounded-full"></div>
118+
Conduct workshops and training sessions
119+
</li>
120+
<li className="flex items-center gap-3">
121+
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
122+
Contribute to open source projects
123+
</li>
124+
<li className="flex items-center gap-3">
125+
<div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
126+
Write technical blog posts
127+
</li>
128+
<li className="flex items-center gap-3">
129+
<div className="w-2 h-2 bg-orange-400 rounded-full"></div>
130+
Share hiking adventures
131+
</li>
132+
</ul>
133+
</div>
134+
</div>
135+
</div>
136+
</section>
137+
138+
{/* Skills Section */}
139+
<section className="py-20 px-4 bg-gradient-to-r from-blue-900/50 to-slate-900/50">
140+
<div className="max-w-6xl mx-auto">
141+
<h2 className="text-4xl font-bold text-center mb-12 text-yellow-400">Technical Expertise</h2>
142+
<div className="flex flex-wrap gap-4 justify-center">
143+
{skills.map((skill, index) => (
144+
<Badge
145+
key={skill}
146+
variant="outline"
147+
className="text-lg py-3 px-6 border-orange-500/50 text-orange-200 hover:bg-orange-500/20 transition-all duration-300 hover:scale-105"
148+
style={{ animationDelay: `${index * 100}ms` }}
149+
>
150+
{skill}
151+
</Badge>
152+
))}
153+
</div>
154+
</div>
155+
</section>
156+
157+
{/* Projects Section */}
158+
<section className="py-20 px-4">
159+
<div className="max-w-6xl mx-auto">
160+
<h2 className="text-4xl font-bold text-center mb-12 text-yellow-400">Key Projects & Contributions</h2>
161+
<div className="grid md:grid-cols-3 gap-8">
162+
{projects.map((project, index) => (
163+
<Card key={project.title} className="bg-slate-800/50 border-blue-500/20 hover:border-yellow-400/50 transition-all duration-300 hover:scale-105">
164+
<CardHeader>
165+
<CardTitle className="text-yellow-400">{project.title}</CardTitle>
166+
<CardDescription className="text-blue-200">
167+
{project.description}
168+
</CardDescription>
169+
</CardHeader>
170+
<CardContent>
171+
<div className="flex flex-wrap gap-2">
172+
{project.tech.map((tech) => (
173+
<Badge key={tech} variant="secondary" className="text-xs bg-orange-500/20 text-orange-200">
174+
{tech}
175+
</Badge>
176+
))}
177+
</div>
178+
</CardContent>
179+
</Card>
180+
))}
181+
</div>
182+
</div>
183+
</section>
184+
185+
{/* Blog Topics Section */}
186+
<section className="py-20 px-4 bg-gradient-to-r from-slate-900/50 to-blue-900/50">
187+
<div className="max-w-4xl mx-auto">
188+
<h2 className="text-4xl font-bold text-center mb-12 text-yellow-400">Blog Topics I Love Writing About</h2>
189+
<div className="grid md:grid-cols-2 gap-4">
190+
{blogTopics.map((topic, index) => (
191+
<div
192+
key={topic}
193+
className="bg-gradient-to-r from-blue-800/30 to-orange-900/20 p-6 rounded-xl border border-blue-500/20 hover:border-yellow-400/50 transition-all duration-300 hover:scale-105"
194+
>
195+
<h3 className="text-lg font-semibold text-blue-100 flex items-center gap-3">
196+
<div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
197+
{topic}
198+
</h3>
199+
</div>
200+
))}
201+
</div>
202+
</div>
203+
</section>
204+
205+
{/* Contact Section */}
206+
<section className="py-20 px-4">
207+
<div className="max-w-4xl mx-auto text-center">
208+
<h2 className="text-4xl font-bold mb-8 text-yellow-400">Let's Connect</h2>
209+
<p className="text-xl text-blue-200 mb-12 max-w-2xl mx-auto">
210+
Whether you want to discuss Kubernetes, open source contributions, or share hiking stories,
211+
I'd love to hear from you!
212+
</p>
213+
<div className="flex gap-6 justify-center">
214+
<Button
215+
size="lg"
216+
className="bg-yellow-500 hover:bg-yellow-400 text-black font-semibold transition-all duration-300 hover:scale-105"
217+
onClick={() => window.open('https://github.com/simihablo', '_blank')}
218+
>
219+
<Github className="mr-2 h-5 w-5" />
220+
GitHub
221+
</Button>
222+
<Button
223+
size="lg"
224+
variant="outline"
225+
className="border-orange-500 text-orange-400 hover:bg-orange-500 hover:text-white transition-all duration-300 hover:scale-105"
226+
onClick={() => window.open('https://linkedin.com/in/mericio', '_blank')}
227+
>
228+
<Linkedin className="mr-2 h-5 w-5" />
229+
LinkedIn
230+
</Button>
231+
</div>
232+
</div>
233+
</section>
234+
235+
{/* Footer */}
236+
<footer className="py-8 px-4 border-t border-blue-500/20">
237+
<div className="max-w-6xl mx-auto text-center">
238+
<p className="text-blue-300">
239+
© 2024 Mericio • Infrastructure Engineer • Guatemala 🇬🇹
240+
</p>
241+
<p className="text-sm text-blue-400 mt-2">
242+
Built with ❤️ using React, TypeScript, and Tailwind CSS
243+
</p>
244+
</div>
245+
</footer>
10246
</div>
11247
);
12248
};

0 commit comments

Comments
 (0)