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
# Map port 8080 on the host to port 8080 in the container
ports:
- "8080:8080"
- 8080:8080
# Mount the current directory on the host to /app in the container
# This allows for live-reloading as you edit your files locally
volumes:
- .:/usr/src/app
# Anonymize the node_modules directory to prevent conflicts with local 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": {
"name": "Jesus Network Solutions",
"name": "Jesus Otero",
"email": "jesus@twk95.com",
"shortname": "JOL",
"linkedinUrl": "https://linkedin.twk95.com"
},
"resumeUrl": "resume/jesus-main.pdf"

8
src/_includes/base.njk
View File

@@ -1,3 +1,7 @@
---
title: "Base"
layout: "layout.njk"
---
<!DOCTYPE html>
<html lang="en">
<head>
@@ -63,7 +67,6 @@
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Header -->
<header class="bg-white shadow-sm">
<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>
</div>
</header>
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="prose">
{{ content | safe }}
</div>
</main>
<!-- Footer -->
<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">
<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>
</footer>
</body>
</html>

38
src/_includes/layout.njk
View File

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

40
src/css/style.css
View File

@@ -28,6 +28,11 @@ body {
margin-bottom: 0.5rem;
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 {
display: inline-block;
font-weight: 600;
@@ -35,17 +40,42 @@ body {
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: #4299e1;
background-color: #2563EB;
color: white;
border: 1px solid transparent;
padding: 0.75rem 1.5rem;
padding: 0.75rem 2rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.5rem;
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;
border-radius: 9999px;
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 {
background-color: #3182ce;
background-color: #1D4ED8;
transform: scale(1.05);
}
.btngray:hover {
background-color: #4B5563;
transform: scale(1.05);
}
.icon {
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"
---
<!-- Hero Section -->
<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>
<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>
<!-- About Me Section -->
<section id="about" class="py-16">
<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="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">
<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.
</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.
</p>
</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>
</section>
<!-- Services Section -->
<section id="services" class="py-16">
<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">
@@ -67,9 +66,7 @@ My goal is to leverage my decade of experience to help businesses optimize their
</div>
</div>
</section>
<!-- Skills & Certifications Section -->
<section id="skills" class="py-16">
<h2 class="text-3xl font-bold text-center section-title">Skills & Certifications</h2>
<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>
</section>
<!-- Work Experience Section -->
<section id="experience" class="py-16">
<h2 class="text-3xl font-bold text-center section-title">Work Experience</h2>
<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>
</section>
<!-- Contact Section -->
<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>
<div class="card max-w-2xl mx-auto">
<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>
<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>
<form action="https://formspree.io/f/mnnzgdak" method="POST">
<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="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="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-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
</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">
<button type="submit" class="btn">Send Message</button>
</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
document.querySelectorAll('a[href^="/#"]').forEach(anchor => {
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"
---
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!