twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

more tweaks, formatting

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-06 20:29:03 -04:00
parent 3f6a319565
commit f02ff70ff3
10 changed files with 357 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env Normal file
View File

@@ -0,0 +1 @@
APP_URL=https://me.twk95.com

12
docker-compose.yml
View File

@@ -6,10 +6,20 @@ services:
container_name: eleventy_dev container_name: eleventy_dev
# Map port 8080 on the host to port 8080 in the container # Map port 8080 on the host to port 8080 in the container
ports: ports:
- "8080:8080" - 8080:8080
# Mount the current directory on the host to /app in the container # Mount the current directory on the host to /app in the container
# This allows for live-reloading as you edit your files locally # This allows for live-reloading as you edit your files locally
volumes: volumes:
- .:/usr/src/app - .:/usr/src/app
# Anonymize the node_modules directory to prevent conflicts with local modules # Anonymize the node_modules directory to prevent conflicts with local modules
- /app/node_modules - /app/node_modules
labels:
diun.enable: false
homepage.group: Tools
homepage.name: Eleventy
homepage.icon: eleventy
homepage.href: ${APP_URL}
networks: {}
x-dockge:
urls:
- ${APP_URL}

3
src/_data/site.json
View File

@@ -1,7 +1,8 @@
{ {
"author": { "author": {
"name": "Jesus Network Solutions", "name": "Jesus Otero",
"email": "jesus@twk95.com", "email": "jesus@twk95.com",
"shortname": "JOL",
"linkedinUrl": "https://linkedin.twk95.com" "linkedinUrl": "https://linkedin.twk95.com"
}, },
"resumeUrl": "resume/jesus-main.pdf" "resumeUrl": "resume/jesus-main.pdf"

8
src/_includes/base.njk
View File

@@ -1,3 +1,7 @@
---
title: "Base"
layout: "layout.njk"
---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@@ -63,7 +67,6 @@
</style> </style>
</head> </head>
<body class="bg-gray-50 text-gray-800"> <body class="bg-gray-50 text-gray-800">
<!-- Header --> <!-- Header -->
<header class="bg-white shadow-sm"> <header class="bg-white shadow-sm">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
@@ -71,19 +74,16 @@
<p class="text-gray-600 mt-1">A demonstration of what's possible with this powerful static site generator.</p> <p class="text-gray-600 mt-1">A demonstration of what's possible with this powerful static site generator.</p>
</div> </div>
</header> </header>
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="prose"> <div class="prose">
{{ content | safe }} {{ content | safe }}
</div> </div>
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="bg-white mt-12"> <footer class="bg-white mt-12">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4 text-center text-gray-500"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4 text-center text-gray-500">
<p>Created to showcase the power of <a href="https://www.11ty.dev/" target="_blank" class="text-blue-500 hover:underline">Eleventy</a>.</p> <p>Created to showcase the power of <a href="https://www.11ty.dev/" target="_blank" class="text-blue-500 hover:underline">Eleventy</a>.</p>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

38
src/_includes/layout.njk
View File

@@ -12,18 +12,17 @@
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body class="antialiased"> <body class="antialiased">
<!-- Header & Nav -->
<!-- Header --> <header class="sticky top-0 z-50 glass-card shadow-md">
<header class="bg-gray-900 shadow-md sticky top-0 z-50">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center"> <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="/" class="text-2xl font-bold text-white">{{ site.author.name }}</a> <a href="/" class="text-2xl font-bold text-white">{{ site.author.shortname }}<span class="text-blue-500">.</span></a>
<div class="hidden md:flex space-x-6 items-center"> <div class="hidden md:flex space-x-6 items-center">
<a href="/#about" class="text-gray-300 hover:text-white">About</a> <a href="/#about" class="text-gray-300 hover:text-blue-400">About</a>
<a href="/blog" class="text-gray-300 hover:text-white">Blog</a> <a href="/blog" class="text-gray-300 hover:text-blue-400">Blog</a>
<a href="/#services" class="text-gray-300 hover:text-white">Services</a> <a href="/#services" class="text-gray-300 hover:text-blue-400">Services</a>
<a href="/#skills" class="text-gray-300 hover:text-white">Skills</a> <a href="/#skills" class="text-gray-300 hover:text-blue-400">Skills</a>
<a href="/#experience" class="text-gray-300 hover:text-white">Experience</a> <a href="/#experience" class="text-gray-300 hover:text-blue-400">Experience</a>
<a href="/#contact" class="text-gray-300 hover:text-white">Contact</a> <a href="/#contact" class="text-gray-300 hover:text-blue-400">Contact</a>
<a href="/{{ site.resumeUrl }}" target="_blank" class="btn">View Resume</a> <a href="/{{ site.resumeUrl }}" target="_blank" class="btn">View Resume</a>
</div> </div>
<div class="md:hidden"> <div class="md:hidden">
@@ -34,31 +33,28 @@
</nav> </nav>
<!-- Mobile Menu --> <!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden px-6 pt-2 pb-4 space-y-2"> <div id="mobile-menu" class="hidden md:hidden px-6 pt-2 pb-4 space-y-2">
<a href="/#about" class="block text-gray-300 hover:text-white">About</a> <a href="/#about" class="block text-gray-300 hover:text-blue-400">About</a>
<a href="/blog" class="block text-gray-300 hover:text-white">Blog</a> <a href="/blog" class="block text-gray-300 hover:text-blue-400">Blog</a>
<a href="/#services" class="block text-gray-300 hover:text-white">Services</a> <a href="/#services" class="block text-gray-300 hover:text-blue-400">Services</a>
<a href="/#skills" class="block text-gray-300 hover:text-white">Skills</a> <a href="/#skills" class="block text-gray-300 hover:text-blue-400">Skills</a>
<a href="/#experience" class="block text-gray-300 hover:text-white">Experience</a> <a href="/#experience" class="block text-gray-300 hover:text-blue-400">Experience</a>
<a href="/#contact" class="block text-gray-300 hover:text-white">Contact</a> <a href="/#contact" class="block text-gray-300 hover:text-blue-400">Contact</a>
<a href="/{{ site.resumeUrl }}" target="_blank" class="block btn mt-2">View Resume</a> <a href="/{{ site.resumeUrl }}" target="_blank" class="block btn mt-2">View Resume</a>
</div> </div>
</header> </header>
<main class="container mx-auto px-6 py-12"> <main class="container mx-auto px-6 py-12">
{{ content | safe }} {{ content | safe }}
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-6"> <footer class="bg-gray-900 text-gray-400 py-6">
<div class="container mx-auto px-6 text-center"> <div class="container mx-auto px-6 text-center">
<div class="flex justify-center space-x-6 mb-4"> <div class="flex justify-center space-x-6 mb-4">
<a href="{{ site.author.linkedinUrl }}" target="_blank" class="hover:text-white"><i class="fab fa-linkedin fa-2x"></i></a> <a href="{{ site.author.linkedinUrl }}" target="_blank" class="hover:text-blue-400"><i class="fab fa-linkedin fa-2x"></i></a>
<a href="mailto:{{ site.author.email }}" class="hover:text-white"><i class="fas fa-envelope fa-2x"></i></a> <a href="mailto:{{ site.author.email }}" class="hover:text-blue-400"><i class="fas fa-envelope fa-2x"></i></a>
</div> </div>
<p>&copy; {% year %} {{ site.author.name }}. All Rights Reserved.</p> <p>&copy; {% year %} {{ site.author.name }}. All Rights Reserved.</p>
</div> </div>
</footer> </footer>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>
</html> </html>

40
src/css/style.css
View File

@@ -28,6 +28,11 @@ body {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
display: inline-block; display: inline-block;
} }
.glass-card {
background: rgba(31, 41, 55, 0.5); /* bg-gray-800 with opacity */
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn { .btn {
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 600;
@@ -35,17 +40,42 @@ body {
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
background-color: #4299e1; background-color: #2563EB;
color: white; color: white;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.75rem 1.5rem; padding: 0.75rem 2rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
border-radius: 0.5rem; border-radius: 9999px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition-property: transform, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.btngray {
display: inline-block;
font-weight: 600;
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: #374151;
color: white;
border: 1px solid transparent;
padding: 0.75rem 2rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 9999px;
transition-property: transform, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
} }
.btn:hover { .btn:hover {
background-color: #3182ce; background-color: #1D4ED8;
transform: scale(1.05);
}
.btngray:hover {
background-color: #4B5563;
transform: scale(1.05);
} }
.icon { .icon {
font-size: 1.5rem; font-size: 1.5rem;

41
src/index.md
View File

@@ -1,37 +1,36 @@
--- ---
title: "Jesus E. Otero Lagunes - Telecommunications Specialist" title: "Jesus - Network Engineer"
layout: "layout.njk" layout: "layout.njk"
--- ---
<!-- Hero Section --> <!-- Hero Section -->
<section id="hero" class="text-center py-20"> <section id="hero" class="text-center py-20">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Expert IT & ISP Networking Consultation</h1> <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Senior Network Engineer</h1>
<p id="typewriter" class="text-xl md:text-2xl text-blue-400 font-medium mb-8"></p>
<p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto mb-8">10+ years of experience in designing, deploying, and troubleshooting robust network solutions. Let's build a reliable and efficient network for your business.</p> <p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto mb-8">10+ years of experience in designing, deploying, and troubleshooting robust network solutions. Let's build a reliable and efficient network for your business.</p>
<a href="#contact" class="btn">Get in Touch</a> <div class="flex justify-center space-x-4">
<a href="resume/jesus-main.pdf" target="_blank" class="btn">Download CV</a>
<a href="#contact" class="btngray">Get in Touch</a>
</div>
</section> </section>
<!-- About Me Section --> <!-- About Me Section -->
<section id="about" class="py-16"> <section id="about" class="py-16">
<h2 class="text-3xl font-bold text-center section-title">About Me</h2> <h2 class="text-3xl font-bold text-center section-title">About Me</h2>
<div class="flex flex-col md:flex-row items-center gap-12"> <div class="flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/3 text-center">
<img src="https://placehold.co/300x300/2d3748/e2e8f0?text=JOL" alt="Jesus Otero Lagunes" class="rounded-full mx-auto shadow-2xl border-4 border-gray-700">
</div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<p class="text-lg text-gray-300 mb-4"> <p class="text-gray-400 mb-4">
I am a highly motivated and adaptable telecommunications engineer with a proven ability to troubleshoot and resolve complex network issues. I am passionate about all things computer networking and thrive in challenging environments where continuous learning and meaningful contributions are valued. I am a highly motivated and adaptable telecommunications engineer with a proven ability to troubleshoot and resolve complex network issues. I am passionate about all things computer networking and thrive in challenging environments where continuous learning and meaningful contributions are valued.
</p> </p>
<p class="text-lg text-gray-300"> <p class="text-gray-400">
My goal is to leverage my decade of experience to help businesses optimize their network infrastructure, ensuring high availability, security, and performance. I believe in a healthy work-life balance, which allows me to stay sharp and bring my best to every project. My goal is to leverage my decade of experience to help businesses optimize their network infrastructure, ensuring high availability, security, and performance. I believe in a healthy work-life balance, which allows me to stay sharp and bring my best to every project.
</p> </p>
</div> </div>
<div class="md:w-1/3 text-center">
<img src="https://placehold.co/300x300/2d3748/e2e8f0?text=JOL" alt="Jesus Otero Lagunes" class="rounded-full mx-auto shadow-lg">
</div>
</div> </div>
</section> </section>
<!-- Services Section --> <!-- Services Section -->
<section id="services" class="py-16"> <section id="services" class="py-16">
<h2 class="text-3xl font-bold text-center section-title">Consultation Services</h2> <h2 class="text-3xl font-bold text-center section-title">Consultation Services</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -67,9 +66,7 @@ My goal is to leverage my decade of experience to help businesses optimize their
</div> </div>
</div> </div>
</section> </section>
<!-- Skills & Certifications Section --> <!-- Skills & Certifications Section -->
<section id="skills" class="py-16"> <section id="skills" class="py-16">
<h2 class="text-3xl font-bold text-center section-title">Skills & Certifications</h2> <h2 class="text-3xl font-bold text-center section-title">Skills & Certifications</h2>
<div class="grid md:grid-cols-2 gap-12"> <div class="grid md:grid-cols-2 gap-12">
@@ -123,9 +120,7 @@ My goal is to leverage my decade of experience to help businesses optimize their
</div> </div>
</div> </div>
</section> </section>
<!-- Work Experience Section --> <!-- Work Experience Section -->
<section id="experience" class="py-16"> <section id="experience" class="py-16">
<h2 class="text-3xl font-bold text-center section-title">Work Experience</h2> <h2 class="text-3xl font-bold text-center section-title">Work Experience</h2>
<div class="relative border-l-2 border-gray-700 ml-6"> <div class="relative border-l-2 border-gray-700 ml-6">
@@ -177,19 +172,17 @@ My goal is to leverage my decade of experience to help businesses optimize their
</div> </div>
</div> </div>
</section> </section>
<!-- Contact Section --> <!-- Contact Section -->
<section id="contact" class="py-16"> <section id="contact" class="py-16">
<div class="glass-card max-w-2xl mx-auto p-8 md:p-12 rounded-lg">
<h2 class="text-3xl font-bold text-center section-title">Get In Touch</h2> <h2 class="text-3xl font-bold text-center section-title">Get In Touch</h2>
<div class="card max-w-2xl mx-auto"> <p class="text-center text-gray-400 mb-8">I'm always open to discussing new projects, creative ideas, or opportunities to be part of an ambitious vision.</p>
<p class="text-center text-gray-400 mb-8">Have a project in mind or just want to chat? Fill out the form below or email me directly.</p>
<form action="https://formspree.io/f/mnnzgdak" method="POST"> <form action="https://formspree.io/f/mnnzgdak" method="POST">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<input type="text" name="name" placeholder="Your Name" required class="w-full p-3 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> <input type="text" name="name" placeholder="Your Name" required class="w-full p-3 rounded bg-gray-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<input type="email" name="email" placeholder="Your Email" required class="w-full p-3 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> <input type="email" name="email" placeholder="Your Email" required class="w-full p-3 rounded bg-gray-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div> </div>
<textarea name="message" placeholder="Your Message" rows="5" required class="w-full p-3 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-6"></textarea> <textarea name="message" placeholder="Your Message" rows="5" required class="w-full p-3 rounded bg-gray-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-6"></textarea>
<div class="text-center"> <div class="text-center">
<button type="submit" class="btn">Send Message</button> <button type="submit" class="btn">Send Message</button>
</div> </div>

23
src/js/main.js
View File

@@ -8,6 +8,29 @@ if (mobileMenuButton && mobileMenu) {
}); });
} }
// Typewriter Effect
const typewriterElement = document.getElementById('typewriter');
const text = "Specializing in ISP Environments";
let index = 0;
let isDeleting = false;
function type() {
const currentText = text.substring(0, index);
typewriterElement.textContent = currentText;
if (!isDeleting && index < text.length) {
index++;
setTimeout(type, 100);
} else {
// Keep the full text visible
}
}
// Start typing effect on load
document.addEventListener('DOMContentLoaded', () => {
setTimeout(type, 500);
});
// Smooth scrolling for anchor links // Smooth scrolling for anchor links
document.querySelectorAll('a[href^="/#"]').forEach(anchor => { document.querySelectorAll('a[href^="/#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) { anchor.addEventListener('click', function (e) {

6
src/posts/8-5-25.md → src/posts/8.5.25.md
View File

@@ -5,7 +5,7 @@ layout: "post.njk"
tags: "posts" tags: "posts"
--- ---
Welcome to my new blog! This is my very first post. This website was created with eleventy using a custom nodejs docker container, pretty cool huh?? Welcome to my new blog! This is my very first post. This website was created using eleventy in a custom nodejs docker container, pretty cool huh?? Maybe I'll post the source code one here one day!
<br/>
<br/>
Check back soon for more updates on networking, homelabbing, and technology! Check back soon for more updates on networking, homelabbing, and technology!