mirror of
https://github.com/ghndrx/gregh.dev.git
synced 2026-02-10 06:44:57 +00:00
316 lines
16 KiB
HTML
316 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#0a192f">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<title>Greg | DevOps</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|
<link rel="icon" type="image/png" href="favico.png">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link href="css/style.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-[#0a192f] text-white">
|
|
<div id="particles-js" class="particle-background"></div>
|
|
|
|
<nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-75 shadow-lg backdrop-blur-md">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex-shrink-0">
|
|
<span class="text-2xl font-bold text-[#64ffda]">Greg</span>
|
|
</div>
|
|
<div class="hidden md:flex space-x-6">
|
|
<a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">About</a>
|
|
<a href="#experience" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Experience</a>
|
|
<a href="#tools" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Tools</a>
|
|
<a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Projects</a>
|
|
</div>
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-button" class="text-white hover:text-[#64ffda] focus:outline-none focus:text-[#64ffda]">
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">About</a>
|
|
<a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Experience</a>
|
|
<a href="#tools" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Tools</a>
|
|
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Projects</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="pt-20 relative">
|
|
<!-- Hero Section -->
|
|
<section class="container mx-auto px-6 py-32">
|
|
<div data-aos="fade-up" data-aos-duration="1000">
|
|
<p class="text-[#64ffda] mb-4">Hello!</p>
|
|
<h1 class="text-4xl font-bold mb-2 text-white">I'm Gregory Hendrickson</h1>
|
|
<h2 class="text-5xl font-bold mb-6 text-[#8892b0]">
|
|
I build cloud infrastructure
|
|
</h2>
|
|
<a href="#contact" class="border border-[#64ffda] text-[#64ffda] px-6 py-3 rounded hover:bg-[#64ffda]/10 transition-colors">
|
|
Get In Touch
|
|
</a>
|
|
|
|
<div id="scroll-arrow" class="fixed bottom-10 left-0 right-0 flex justify-center pointer-events-none">
|
|
<i class="fas fa-arrow-down text-4xl text-[#64ffda] animate-bounce"></i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="py-16">
|
|
<div class="container mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row items-center">
|
|
<img src="https://github.com/ghndrx.png" alt="Greg Hendrickson Profile Picture" class="w-32 h-32 md:w-48 md:h-48 rounded-full mb-6 md:mb-0 md:mr-8 shadow-lg" data-aos="fade-up">
|
|
<div data-aos="fade-up" data-aos-delay="100">
|
|
<h2 class="text-4xl font-bold text-[#64ffda] mb-4">About Me</h2>
|
|
<p class="text-xl text-[#8892b0]">
|
|
I am passionate about building resilient, scalable cloud infrastructure for health tech companies. I specialize in AWS, GCP, and Kubernetes while continuously exploring innovative ways to streamline operations and automate processes. Whether it's optimizing CI/CD pipelines or architecting hybrid cloud systems, I love solving complex challenges and making technology work smarter.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="experience" class="py-16">
|
|
<div class="container mx-auto px-6">
|
|
<h2 class="text-4xl font-bold mb-12 text-[#64ffda]" data-aos="fade-up">Experience</h2>
|
|
<div class="max-w-3xl">
|
|
<!-- Pluto Health Experience -->
|
|
<div class="relative border-l border-[#64ffda] pl-8 pb-12" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="absolute w-3 h-3 bg-[#64ffda] rounded-full -left-[6px]"></div>
|
|
<h3 class="text-xl font-bold text-white">DevOps Engineer - Pluto Health</h3>
|
|
<p class="text-[#8892b0] mb-4">Feb 2024 - Present</p>
|
|
<ul class="text-[#8892b0] space-y-2">
|
|
<li>• Architected and maintained AWS/GCP hybrid cloud infrastructure</li>
|
|
<li>• Led automation and incident response initiatives</li>
|
|
<li>• Managed CI/CD pipelines using GitHub Actions</li>
|
|
</ul>
|
|
</div>
|
|
<!-- HCL Tech Experience -->
|
|
<div class="relative border-l border-[#64ffda] pl-8 pb-12" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="absolute w-3 h-3 bg-[#64ffda] rounded-full -left-[6px]"></div>
|
|
<h3 class="text-xl font-bold text-white">Cloud Engineer - HCL Tech</h3>
|
|
<p class="text-[#8892b0] mb-4">Dec 2021 - Jan 2024</p>
|
|
<ul class="text-[#8892b0] space-y-2">
|
|
<li>• Designed and implemented cloud solutions on GCP</li>
|
|
<li>• Supported cloud migration projects and optimization efforts</li>
|
|
<li>• Collaborated with cross-functional teams to streamline cloud operations</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tools & Technologies -->
|
|
<section id="tools" class="py-16">
|
|
<div class="container mx-auto px-6">
|
|
<h2 class="text-4xl font-bold mb-12 text-[#64ffda]" data-aos="fade-up">Tech Stack</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="tech-card text-center" data-aos="fade-up" data-aos-delay="100">
|
|
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg" class="tech-icon mx-auto" alt="AWS">
|
|
<h3 class="text-xl font-bold mb-4 text-[#64ffda]">AWS</h3>
|
|
<ul class="text-[#8892b0] space-y-2">
|
|
<li>• EC2, EKS, Lambda</li>
|
|
<li>• RDS, DynamoDB</li>
|
|
<li>• API Gateway, WAF</li>
|
|
<li>• CloudWatch, CloudTrail</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tech-card text-center" data-aos="fade-up" data-aos-delay="200">
|
|
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/googlecloud/googlecloud-original-wordmark.svg" class="tech-icon mx-auto" alt="GCP">
|
|
<h3 class="text-xl font-bold mb-4 text-[#64ffda]">Google Cloud</h3>
|
|
<ul class="text-[#8892b0] space-y-2">
|
|
<li>• Cloud Functions</li>
|
|
<li>• Cloud Run</li>
|
|
<li>• Cloud Storage</li>
|
|
<li>• BigQuery</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tech-card text-center" data-aos="fade-up" data-aos-delay="300">
|
|
<img src="https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo/logo.svg" class="tech-icon mx-auto" alt="Kubernetes">
|
|
<h3 class="text-xl font-bold mb-4 text-[#64ffda]">Infrastructure</h3>
|
|
<ul class="text-[#8892b0] space-y-2">
|
|
<li>• Kubernetes/EKS</li>
|
|
<li>• Terraform</li>
|
|
<li>• Docker</li>
|
|
<li>• GitHub Actions</li>
|
|
<li>• Cloudflare WAF</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section id="projects" class="py-16">
|
|
<div class="container mx-auto px-6">
|
|
<h2 class="text-4xl font-bold mb-12 text-[#64ffda]" data-aos="fade-up">Notable Projects</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="tech-card" data-aos="fade-up" data-aos-delay="100">
|
|
<h3 class="text-xl font-bold mb-4 text-[#64ffda]">Infrastructure as Code Pipeline</h3>
|
|
<p class="text-[#8892b0] mb-4">
|
|
Developed a comprehensive IaC pipeline using Terraform and GitHub Actions for automated
|
|
infrastructure deployment across AWS and GCP. Includes state management, drift detection,
|
|
and automated testing.
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="https://github.com/ghndrx/" class="text-[#64ffda] hover:text-white">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-card" data-aos="fade-up" data-aos-delay="200">
|
|
<h3 class="text-xl font-bold mb-4 text-[#64ffda]">Multi-Cloud Monitoring Solution</h3>
|
|
<p class="text-[#8892b0] mb-4">
|
|
Built a centralized monitoring system integrating Datadog for hybrid
|
|
cloud environments. Features custom dashboards, automated alerting, and incident response
|
|
workflows.
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="https://github.com/ghndrx/" class="text-[#64ffda] hover:text-white">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-card" data-aos="fade-up" data-aos-delay="300">
|
|
<h3 class="text-xl font-bold mb-4 text-[#64ffda]">Kubernetes Platform Engineering</h3>
|
|
<p class="text-[#8892b0] mb-4">
|
|
Architected and implemented a EKS-based and EC2 Kubernetes Deployments integrated with GitOps workflows ArgoCD,
|
|
cloudflare waf, and automated scaling policies. Reduced deployment time by 70%.
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="https://github.com/ghndrx/" class="text-[#64ffda] hover:text-white">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-card" data-aos="fade-up" data-aos-delay="400">
|
|
<h3 class="text-xl font-bold mb-4 text-[#64ffda]">Zero Trust Network Architecture</h3>
|
|
<p class="text-[#8892b0] mb-4">
|
|
Designed and implemented a zero trust network using Tailscale, AWS WAF, and Identity-Aware Proxy, Cloudflare Access, Okta.
|
|
Enhanced security posture while maintaining operational efficiency.
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="https://github.com/ghndrx/" class="text-[#64ffda] hover:text-white">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="py-32">
|
|
<div class="container mx-auto px-6 text-center">
|
|
<h2 class="text-4xl font-bold mb-8 text-[#64ffda]" data-aos="fade-up">Get In Touch</h2>
|
|
<p class="text-[#8892b0] max-w-xl mx-auto mb-8" data-aos="fade-up" data-aos-delay="100">
|
|
I'm currently open to new opportunities. Whether you have a question or just want to say hi,
|
|
I'll get back to you!
|
|
</p>
|
|
<a href="mailto:greg@hndrx.co"
|
|
class="inline-block border border-[#64ffda] text-[#64ffda] px-8 py-4 rounded hover:bg-[#64ffda]/10 transition-colors"
|
|
data-aos="fade-up" data-aos-delay="200">
|
|
Say Hello
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-[#0a192f]/90 text-[#8892b0] py-8">
|
|
<div class="container mx-auto px-6 text-center">
|
|
<div class="flex justify-center space-x-6 mb-4">
|
|
<a href="https://github.com/ghndrx" class="hover:text-[#64ffda]"><i class="fab fa-github"></i></a>
|
|
<a href="https://linkedin.com/in/grhendrickson" class="hover:text-[#64ffda]"><i class="fab fa-linkedin"></i></a>
|
|
</div>
|
|
<p>Built with ❤️ by Greg Hendrickson</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Initialize particles.js
|
|
particlesJS("particles-js", {
|
|
particles: {
|
|
number: { value: 50, density: { enable: true, value_area: 800 } },
|
|
color: { value: "#64ffda" },
|
|
opacity: { value: 0.1 },
|
|
size: { value: 3 },
|
|
line_linked: {
|
|
enable: true,
|
|
distance: 150,
|
|
color: "#64ffda",
|
|
opacity: 0.1,
|
|
width: 1
|
|
},
|
|
move: {
|
|
enable: true,
|
|
speed: 1
|
|
}
|
|
}
|
|
});
|
|
|
|
// Initialize AOS
|
|
AOS.init({
|
|
duration: 1000,
|
|
once: true,
|
|
mirror: false
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
// Toggle mobile menu visibility
|
|
document.getElementById("mobile-menu-button").addEventListener("click", function() {
|
|
const mobileMenu = document.getElementById("mobile-menu");
|
|
mobileMenu.classList.toggle("hidden");
|
|
});
|
|
</script>
|
|
<script>
|
|
// After DOM content is loaded
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Listen for any scroll or mouse movement events
|
|
function hideArrow() {
|
|
const arrow = document.getElementById("scroll-arrow");
|
|
if (arrow) {
|
|
arrow.style.opacity = "0";
|
|
}
|
|
}
|
|
document.addEventListener("scroll", hideArrow);
|
|
document.addEventListener("mousemove", hideArrow);
|
|
document.addEventListener("touchstart", hideArrow);
|
|
});
|
|
</script>
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SDT95W7CH8"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-SDT95W7CH8');
|
|
</script>
|
|
|
|
</body>
|
|
</html> |