diff --git a/files/daniel-laforce-resume.pdf b/files/daniel-laforce-resume.pdf new file mode 100644 index 0000000..0effeb9 Binary files /dev/null and b/files/daniel-laforce-resume.pdf differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..dcd3b56 --- /dev/null +++ b/index.html @@ -0,0 +1,667 @@ + + + + + + Daniel LaForce | Infrastructure & Systems Architect | DevOps Engineer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+
+
+
+

Daniel LaForce

+ your +
+ +

+ + + System Administrator & IT Expert + + + DevOps & Automation Engineer + + + Infrastructure & Systems Architect + + +

+ +

+ Building scalable infrastructure with optimized performance and bulletproof security — from server management to end-user support that keeps businesses running smoothly. +

+ +
+
> Ready for deployment...
+
+
+ +
+
+
+ Lab Status: Online +
+ +
+
+
+
+
+
+
+
+
+
> Monitoring infrastructure...
+
> CPU load: Normal
+
> RAM usage: 42%
+
> Network: Stable
+
> Containers: 16 running
+
> Backing up critical data...
+
> Status: All systems operational
+
+
+
+ +
+ + Hire Me + + + + + + Explore My Lab + + + + + View Resume + + +
+
+
+
+ + +
+
+
+

Solving Complex IT Challenges

+
+ +
+
+
+

Seamless Microsoft 365 Migrations

+

Executed with 60% less downtime than industry average

+
+ +
+
+

Secure Remote Work Infrastructure

+

Zero-trust architecture implementation for distributed teams

+
+ +
+
+

Automated DevOps Pipelines

+

Reducing deployment times by up to 85% with CI/CD automation

+
+ +
+
+

Containerized Application Deployment

+

Simplified scaling and maintenance with Kubernetes orchestration

+
+ +
+
+

Enterprise-Level System Administration

+

99.98% uptime across critical infrastructure components

+
+ +
+
+

Network Infrastructure Optimization

+

40% reduced latency and improved throughput for business applications

+
+ +
+
+

Responsive Technical Support

+

Average ticket resolution time reduced by 68% through process optimization

+
+ +
+
+

Server Consolidation & Virtualization

+

35% cost reduction while improving redundancy and disaster recovery

+
+
+ +
+ + + + + + + + +
+
+
+ + +
+
+
+

Expert Services

+

+ Comprehensive IT solutions tailored to your business needs, from network infrastructure to cloud migration. +

+
+ +
+ +
+
+ +
+

System Administration

+

+ Expert management of Windows & Linux servers, virtualization, and cloud infrastructure. Ensuring your systems remain secure, optimized and reliable. +

+
+ Windows Server + Linux + VMware + Proxmox +
+
+ + +
+
+ +
+

Network Engineering

+

+ Design and implementation of robust network infrastructures. Specializing in routing, switching, firewalls, and network security solutions. +

+
+ pfSense + OPNsense + VPN + VLAN +
+
+ + +
+
+ +
+

Cloud & Virtualization

+

+ Implementation of virtualization technologies and cloud solutions. From VMware and Proxmox to containerization with Docker and Kubernetes. +

+
+ Docker + Kubernetes + K3s + Azure +
+
+ + +
+
+ +
+

M365 Migrations

+

+ Seamless migration to Microsoft 365 environments. From email and SharePoint to Teams and OneDrive, ensuring minimal disruption to your business. +

+
+ Exchange + SharePoint + Azure AD + Teams +
+
+ + +
+
+ +
+

IT Security

+

+ Comprehensive security solutions to protect your business. Including firewall configuration, VPN setup, security audits, and best practices implementation. +

+
+ Zero Trust + Cloudflare + Endpoint Security + Auditing +
+
+ + +
+
+ +
+

DevOps & Automation

+

+ Infrastructure as code, CI/CD pipelines, and automation solutions using industry-standard tools and best practices to streamline your operations. +

+
+ Ansible + Python + PowerShell + Bash +
+
+
+
+
+ + +
+
+
+

Live Infrastructure Lab

+

+ I maintain a production-grade homelab that serves as both a testing ground and showcase for my technical skills. +

+
+ +
+
+

Lab Architecture

+

+ My lab consists of multiple physical and virtual machines running Proxmox, Docker, and Kubernetes (K3s), all secured behind Cloudflare Zero Trust. +

+ +

Current Infrastructure:

+
    +
  • Proxmox Hypervisor Cluster
    • +
  • OPNsense Router (Physical + VM)
    • +
  • K3s Kubernetes Cluster
    • +
  • Traefik Ingress Controller
    • +
  • Gitea, VSCode Server, NAS
    • +
  • Cloudflared Zero Trust Tunnel
    • +
+ +
+ + + + View Live Dashboard + + + Try Ansible Sandbox +
+
+ +
+

Real-Time Metrics

+ +
+
+ CPU Usage + 42% +
+
+
+
+
+ +
+
+ Memory + 57% +
+
+
+
+
+ +
+
+ Storage + 63% +
+
+
+
+
+ +
+
+ Network + 28% +
+
+
+
+
+ +

Active Services:

+
+
Gitea
+
VSCode Server
+
rTorrent
+
NAS
+
Traefik
+
K3s
+
Cloudflared
+
FileBrowser
+
+
+
+ + +
+

How I'm Running Services

+

+ Here's a sample of how I deploy and manage services in my infrastructure: +

+ +
+ + # K3s deployment for Gitea with persistent storage
+ apiVersion: apps/v1
+ kind: Deployment
+ metadata:
+   name: gitea
+   namespace: argobox
+ spec:
+   replicas: 1
+   selector:
+     matchLabels:
+       app: gitea
+   template:
+     metadata:
+       labels:
+         app: gitea
+     spec:
+       containers:
+       - name: gitea
+         image: gitea/gitea:latest
+         ports:
+         - containerPort: 3000
+         volumeMounts:
+         - name: gitea-data
+           mountPath: /data
+ +
+
+
+
+ + +
+
+
+

Featured Projects

+

+ A showcase of technical solutions I've built and deployed. +

+
+ +
+
+
+ +
+

TerraTracer

+

+ A GIS mapping tool for prospectors to automate mining claim boundary plotting, terrain analysis, and compliance with BLM/state regulations. +

+
+ Python + Node.js + JavaScript + GIS +
+
+ +
+
+ +
+

Zero Trust Lab

+

+ A secure home lab infrastructure using Cloudflare Zero Trust tunnels, network segmentation, and security best practices. +

+
+ Cloudflare + OPNsense + VLAN + VPN +
+
+ +
+
+ +
+

Ansible Sandbox

+

+ An interactive demo environment where users can spin up preconfigured services using Ansible automation. +

+
+ Ansible + Proxmox + Python + Docker +
+
+
+
+
+ + +
+
+
+

Professional Experience

+

+ A history of delivering reliable IT infrastructure and solutions. +

+
+ +
+
+
+
+

Inovin LLC

+

Freelance Consultant – GIS, Infrastructure & Security Solutions

+
April 2023 – Present
+

+ Providing specialized consulting services in virtualization, containerization, network security, and custom GIS solutions. +

+
+
+ +
+
+
+

Previous Roles

+

System & Network Engineering Positions

+
Prior Experience
+

+ Extensive experience in MSPs, network engineering, and diverse IT environments. +

+
+
+
+
+
+ + +
+
+
+

Let's Connect

+

+ Have a project in mind? Reach out to discuss how I can help. +

+
+ +
+
+
+
+ +
+

Email

+

daniel.laforce@argobox.com

+
+ +
+
+ +
+

LinkedIn

+

linkedin.com/in/danlaforce

+
+ +
+
+ +
+

GitHub

+

github.com/keyargo

+
+
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/resume.html b/resume.html new file mode 100644 index 0000000..97489c8 --- /dev/null +++ b/resume.html @@ -0,0 +1,836 @@ + + + + + + Daniel LaForce | Resume + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Daniel LaForce

+

Infrastructure & Systems Engineer

+ +
+
+ + Colorado Springs, Colorado +
+
+ + 720-310-0064 +
+
+ + daniel.laforce@argobox.com +
+
+ + linkedin.com/in/danlaforce +
+
+ + github.com/keyargo +
+
+
+ + +
+

Professional Experience

+ +
+
+

Freelance Consultant – GIS, Infrastructure & Security Solutions

+
Inovin LLC
+
April 2023 – Present | Colorado Springs, CO
+
+
+
+ + Developed TerraTracer, a GIS mapping platform used by independent mining claim prospectors to automate boundary plotting, terrain-informed site selection, and BLM/state compliance, reducing manual research by 85%. +
+
+ + Consulted on virtualization and DevOps projects for SMB clients, implementing Proxmox/VMware solutions, containerizing legacy apps with Docker, and orchestrating microservices with Kubernetes. +
+
+ + Built secure cloud environments integrating Azure AD, SSO, and VPN/firewall solutions, increasing operational resilience while aligning with HIPAA and zero-trust principles. +
+
+ + Automated infrastructure tasks via PowerShell, Python, and Bash, optimizing system deployment, backup routines, and monitoring pipelines. +
+
+
+ +
+
+

Project Engineer

+
Anchor Point IT Solutions
+
December 2023 - June 2024
+
+
+
+ + Executed 5 Microsoft 365 and SharePoint migrations with downtime reduced by 60%. +
+
+ + Implemented comprehensive security stack including BlueMira & DUO (Identity), SentinelOne (Endpoint), ConnectSecure (Network), and Email Mesh Security. +
+
+ + Reduced security incidents by 83% through security implementations and improved system updates by 60%. +
+
+ + Managed approximately 235 clients with environment sizes ranging from 30 to 1000 people. +
+
+
+ +
+
+

Interim Virtual Chief Security Officer

+
Technology Response Team, LLC
+
August 2023 - September 2023
+
+
+
+ + Served as temporary VCSO for ~120 clients, conducting penetration testing using BURP Professional. +
+
+ + Managed enterprise security stack deployment including Blackpoint & Webroot (Endpoint), DNSFilter (Network), and ThreatLocker (Application Control). +
+
+ + Administered Azure AD security policies and MFA enforcement, reducing monthly vulnerabilities by at least 20%. +
+
+
+ +
+
+

Network Engineer II

+
NOVUS Professional Services, Inc.
+
August 2022 - March 2023
+
+
+
+ + Designed and implemented a WiFi testing cage for remote firmware testing of router models (Wave2, WiFi6). +
+
+ + Developed Python automation for Plume device registration and Ansible scripts for network tasks. +
+
+ + Managed RF testing and signal verification across 9 headends and maintained network connectivity for ~100 routers across two sites. +
+
+
+ +
+
+

Field Engineer

+
COMPUTEK Dental Systems
+
December 2021 - August 2022
+
+
+
+ + Managed IT infrastructure for 300+ dental practices (3700+ workstations, ~300 Windows Servers). +
+
+ + Developed VSA Deployer application (Kaseya VSA RMM) for agent installation, reducing deployment time by 80%. +
+
+ + Maintained server, Hyper-V VM, and MySQL/MSSQL backups using N-Able Backups, Windows Server Backups and AIS. +
+
+
+ +
+
+

End-to-End Systems Engineer

+
Lockheed Martin
+
June 2018 - December 2019
+
+
+
+ + Maintained 2 IRON databases (AIMS and RAPID) with ~1800 configurations each, ensuring 100% database accuracy. +
+
+ + Collaborated with engineering team to implement Remote Tracking Station (RTS) configurations. +
+
+ + Identified and documented an average of 27 critical defects every month. +
+
+
+
+ + +
+

Technical Skills

+ +
+
+

Cloud & Infrastructure

+
+ Microsoft Azure + Azure AD + SharePoint + Teams + AWS + EC2 + S3 + GCP + VMware ESXi/vSphere + Hyper-V + Docker + Kubernetes (K3s) + ProxMox + Traefik + CI/CD +
+
+ +
+

Networking

+
+ LAN/WAN + VPN + OSPF + EIGRP + STP + HSRP + VTP + IPv4/IPv6 + ACLs + NAT/PAT + DNS/DHCP + VLANs + QoS + Cisco Routers + Catalyst Switches + ASA Firewalls + UniFi Systems + pfSense + OPNsense +
+
+ +
+

Programming/Scripting

+
+ Python + JavaScript (Node.js) + PowerShell + Bash + C/C++ + SQL + MySQL/MSSQL + AutoHotkey + Ansible +
+
+ +
+

Security

+
+ Penetration Testing + BURP Professional + SentinelOne + Blackpoint + Webroot + ThreatLocker + Zero-Trust Architecture + HIPAA Compliance + BlueMira + DUO + DNSFilter + Email Mesh Security + MFA +
+
+ +
+

Operating Systems

+
+ Windows Server + Active Directory + Group Policy + Exchange Server + Linux + Ubuntu + CentOS + Debian + Fedora + Kali Linux + Cisco IOS +
+
+ +
+

GIS & Data Science

+
+ Geospatial Mapping + GeoPandas + GDAL/OGR + KML Generation + Data Visualization + Machine Learning + TensorFlow + PyTorch + Scikit-learn + Pandas + NumPy + Matplotlib + Seaborn +
+
+ +
+

Management & PSA Tools

+
+ N-able N-central + Kaseya VSA + ConnectWise Automate + ConnectWise PSA + PRTG + SolarWinds + Addigy + ImmyBot + Commit Ticket CRM +
+
+
+
+ + +
+

Education

+ +
+

Bachelor of Science, Computer Science

+
Western Governors University
+
June 2019 - April 2023
+
+
+ + Activities and societies: Sigma Alpha Pi Honors Society (The National Society of Leadership and Success) +
+
+
+ Skills: Python (Programming Language) · Project Management · Machine Learning · Team Leadership +
+
+ +
+

Cyber Ops

+
Cisco Networking Academy
+
2018
+
+ Skills: Networking · Cyber-security · Cisco Technologies +
+
+ +
+

Computer Science and Innovation

+
University of Colorado Colorado Springs (UCCS)
+
January 2017 - December 2017
+
Grade: 4.0
+
+ Skills: C++ · Team Leadership +
+
+ +
+

Associate's degree, General Studies

+
Pikes Peak State College
+
2015 - 2018
+
Grade: 4.0
+
+
+ + Activities and societies: Phi Theta Kappa Honor Society +
+
+
+ Skills: Linux · Virtual Server · C++ · System Administration · Wireless +
+
+ +
+

Associate's Degree, Computer Wide Area Networks

+
Front Range Community College
+
2014 - 2016
+
Grade: 3.87
+
+
+ + Activities and societies: Phi Theta Kappa Honor Society +
+
+ + Magna Cum Laude honors +
+
+
+ Skills: Virtual Server · C++ · Networking · Wireless +
+
+
+ + +
+

Certifications

+ +
+
+ + Project+ (CompTIA) +
+
+ + Network+ (FRCC) +
+
+ + A+ (FRCC) +
+
+ + CCNA Cyber Ops (2021) +
+
+ + CCNA Routing & Switching (2021) +
+
+ + Virtual Cyber Security Officer Training (vCSO Advanced) +
+
+
+ + +
+

Notable Projects

+ +
+
+

Full-Access Wi-Fi Testing Cage

+

Designed and implemented a comprehensive testing environment for router firmware validation with remote access capabilities. Engineered cable modem/SONU configurations for MAP-T and dual-stack testing with automated relay and RF switcher control.

+
+ RF Engineering + Network Testing + CAD Prototyping + Serial Interface + Automation +
+
+ +
+

TerraTracer GIS Platform

+

A GIS mapping platform used by mining claim prospectors to automate boundary plotting and compliance verification, reducing manual research by 85% and improving claim success rates by 40%.

+
+ Python + Node.js + GeoPandas + KML + GDAL/OGR +
+
+ +
+

VSA Deployer

+

Custom application for streamlining Kaseya VSA RMM agent installation, reducing deployment time by 80% across dental practice environments. Implemented for 300+ practices with 3700+ workstations.

+
+ PowerShell + AutoHotkey + RMM + Kaseya VSA +
+
+ +
+

AI-Driven Car Price Prediction

+

Developed machine learning model for predicting used car prices with over 90% accuracy using Random Forest Regression and comprehensive feature engineering.

+
+ Python + Scikit-learn + Pandas + Random Forest + Jupyter +
+
+
+
+ +
+ + + Download Full Resume (PDF) + +
+
+ + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3083be5 --- /dev/null +++ b/styles.css @@ -0,0 +1,1497 @@ +/* +* Main stylesheet for argobox.com +* Modern tech portfolio design with animation effects +*/ + +:root { + /* Main Colors */ + --primary-bg: #0f172a; + --secondary-bg: #1e293b; + --accent: #3b82f6; + --accent-darker: #2563eb; + --accent-gradient: linear-gradient(135deg, #2563eb, #3b82f6); + --accent-glow: 0 0 15px rgba(59, 130, 246, 0.5); + + /* Text Colors */ + --text-primary: #e2e8f0; + --text-secondary: #94a3b8; + --text-accent: #3b82f6; + + /* Status Colors */ + --success: #10b981; + --warning: #f59e0b; + --error: #ef4444; + --info: #0ea5e9; + + /* UI Elements */ + --border: rgba(71, 85, 105, 0.5); + --card-bg: rgba(30, 41, 59, 0.8); + --card-hover-bg: rgba(30, 41, 59, 0.95); + --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); + --glass-effect: saturate(180%) blur(10px); + + /* Animation Timing */ + --transition-fast: 0.2s ease; + --transition-normal: 0.3s ease; + --transition-slow: 0.5s ease; +} + +/* Reset & Base Styles */ +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: 80px; +} + +body { + font-family: 'Inter', system-ui, -apple-system, sans-serif; + background-color: var(--primary-bg); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; + min-height: 100vh; + background-image: + radial-gradient(circle at 20% 35%, rgba(29, 78, 216, 0.15) 0%, transparent 50%), + radial-gradient(circle at 75% 60%, rgba(14, 165, 233, 0.1) 0%, transparent 50%); +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + line-height: 1.2; +} + +a { + text-decoration: none; + color: var(--accent); + transition: color var(--transition-normal); +} + +a:hover { + color: var(--accent-darker); +} + +/* Layout */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; +} + +section { + padding: 6rem 0; + position: relative; +} + +/* Button Styles */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1.5rem; + font-weight: 600; + border-radius: 0.5rem; + transition: all var(--transition-normal); + cursor: pointer; + position: relative; + overflow: hidden; + border: none; + outline: none; + gap: 0.75rem; +} + +.btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.1); + transform: translateX(-100%) rotate(45deg); + transition: transform 0.6s; +} + +.btn:hover::before { + transform: translateX(100%) rotate(45deg); +} + +.btn-primary { + background: var(--accent-gradient); + color: white; + box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2), 0 2px 4px -1px rgba(59, 130, 246, 0.1); +} + +.btn-primary:hover { + box-shadow: var(--accent-glow), 0 10px 15px -3px rgba(59, 130, 246, 0.3); + transform: translateY(-2px); +} + +.btn-outline { + background-color: transparent; + border: 2px solid var(--accent); + color: var(--accent); +} + +.btn-outline:hover { + background-color: var(--accent); + color: white; + box-shadow: var(--accent-glow); + transform: translateY(-2px); +} + +.btn-icon { + font-size: 0.9rem; + transition: transform 0.3s ease; +} + +.btn:hover .btn-icon { + transform: translateX(4px); +} + +/* Featured button with pulse effect */ +.btn-featured { + position: relative; +} + +.pulse-ring { + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border-radius: 0.5rem; + border: 2px solid var(--accent); + opacity: 0; + animation: pulse-border 2s infinite; +} + +@keyframes pulse-border { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(1.1); + opacity: 0; + } +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; + backdrop-filter: var(--glass-effect); + -webkit-backdrop-filter: var(--glass-effect); + background-color: rgba(15, 23, 42, 0.8); + border-bottom: 1px solid var(--border); + transition: all var(--transition-normal); +} + +.navbar.scrolled { + background-color: rgba(15, 23, 42, 0.95); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; + height: 4.5rem; +} + +.logo { + display: flex; + align-items: center; + font-weight: 700; + font-size: 1.5rem; +} + +.logo-text { + color: var(--accent); +} + +.logo-dot { + color: var(--text-primary); +} + +.nav-menu { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-link { + position: relative; + color: var(--text-secondary); + font-weight: 500; + padding: 0.5rem; + transition: color var(--transition-normal); +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background: var(--accent-gradient); + transition: width var(--transition-normal); + border-radius: 1px; +} + +.nav-link:hover, .nav-link.active { + color: var(--text-primary); +} + +.nav-link:hover::after, .nav-link.active::after { + width: 100%; +} + +.nav-buttons { + display: flex; + align-items: center; + gap: 1rem; +} + +.dashboard-link { + display: flex; + align-items: center; + gap: 0.5rem; + background: rgba(59, 130, 246, 0.15); + color: var(--text-primary); + padding: 0.5rem 1rem; + border-radius: 9999px; + font-weight: 500; + transition: all var(--transition-normal); +} + +.dashboard-link:hover { + background: rgba(59, 130, 246, 0.3); + color: var(--text-primary); + transform: translateY(-1px); +} + +.menu-toggle { + display: none; + background: transparent; + border: none; + color: var(--text-primary); + cursor: pointer; + font-size: 1.5rem; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + position: relative; + overflow: hidden; + padding-top: 6rem; + padding-bottom: 0; +} + +.hero-content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: + "intro dashboard" + "cta cta"; + gap: 2.5rem; + align-items: start; +} + +/* Background particles and floating icons */ +.particles-container, .floating-icons { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: -1; +} + +.particle { + position: absolute; + background-color: rgba(59, 130, 246, 0.2); + border-radius: 50%; + pointer-events: none; +} + +.floating-icon { + position: absolute; + color: rgba(59, 130, 246, 0.05); + animation: float-icon 15s linear infinite; + opacity: 0.3; +} + +@keyframes float-icon { + 0% { + transform: translateY(100vh) rotate(0deg); + } + 100% { + transform: translateY(-100px) rotate(360deg); + } +} + +/* Name and role section styling */ +.intro-section { + grid-area: intro; + animation: fadeIn 1s ease forwards; +} + +.name-section { + display: flex; + align-items: baseline; + margin-bottom: 0.5rem; + flex-wrap: wrap; /* Allow wrapping on small screens */ +} + +.name { + font-size: 2.5rem; + font-weight: 700; + color: var(--text-primary); + margin-right: 0.5rem; + position: relative; + display: inline-block; + background: linear-gradient(to right, #fff, #e2e8f0); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.your-text { + font-size: 1.25rem; + font-weight: 400; + color: var(--text-secondary); + font-style: italic; + opacity: 0.8; +} + +.hero-title { + font-size: 3.25rem; + margin-bottom: 2.5rem; /* Increase from 1.5rem to 2.5rem for more space */ + line-height: 1.2; /* Slightly increased from 1.1 for better spacing */ + min-height: 9rem; /* Increased from 7rem to provide more space */ +} + +.role-wrapper { + position: relative; + display: block; + height: 100%; + width: 100%; +} + +.role { + position: absolute; + top: 0; + left: 0; + width: 100%; + opacity: 0; + transform: translateY(20px); + transition: opacity 0.8s ease, transform 0.8s ease; + padding-bottom: 1rem; /* Add padding at the bottom of each role */ +} + +.role.active { + opacity: 1; + transform: translateY(0); +} + +.highlight { + background: var(--accent-gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + position: relative; +} + +.highlight::after { + content: ''; + position: absolute; + width: 100%; + height: 5px; + bottom: 5px; + left: 0; + background: var(--accent-gradient); + border-radius: 5px; + opacity: 0.3; + z-index: -1; +} + +.hero-description { + font-size: 1.2rem; + color: var(--text-secondary); + margin-top: 1.5rem; /* Add explicit top margin */ + margin-bottom: 2rem; + max-width: 550px; + position: relative; /* Make it position relative */ + z-index: 1; /* Ensure it's above the role titles */ +} + +/* Terminal text that appears directly on the page */ +.inline-terminal { + display: block; + margin-bottom: 2rem; + font-family: 'JetBrains Mono', monospace; + font-size: 1.1rem; + color: var(--accent); + background-color: rgba(15, 23, 42, 0.2); + padding: 0.75rem 1rem; + border-radius: 0.5rem; + border-left: 3px solid var(--accent); + position: relative; + width: 100%; /* Full width */ + height: 3.5rem; /* Fixed height */ + overflow: hidden; /* Hide overflow */ +} + +.terminal-text { + display: inline-block; + position: relative; + white-space: nowrap; + width: 100%; /* Make it take up full width */ + overflow: hidden; + text-overflow: ellipsis; +} + +.terminal-text::after { + content: '|'; + position: absolute; + right: -0.5rem; + top: 0; + animation: cursor-blink 1s step-end infinite; +} + +@keyframes cursor-blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +/* Dashboard section styling */ +.dashboard-section { + grid-area: dashboard; + position: relative; + animation: fadeIn 1s ease 0.3s forwards; + opacity: 0; +} + +.status-pill { + position: absolute; + top: -0.5rem; + right: 0.5rem; + display: flex; + align-items: center; + background: rgba(16, 185, 129, 0.15); + padding: 0.4rem 0.8rem; + border-radius: 9999px; + font-size: 0.85rem; + z-index: 10; + box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); +} + +.live-indicator { + width: 10px; + height: 10px; + background-color: var(--success); + border-radius: 50%; + display: inline-block; + margin-right: 0.5rem; + position: relative; +} + +.live-indicator::after { + content: ''; + position: absolute; + top: -3px; + left: -3px; + width: 16px; + height: 16px; + border-radius: 50%; + background-color: var(--success); + animation: pulse 2s infinite; + opacity: 0.7; + z-index: -1; +} + +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 0.7; + } + 70% { + transform: scale(1.5); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 0; + } +} + +.tech-dashboard { + max-width: 100%; + border-radius: 0.75rem; + overflow: hidden; + border: 1px solid var(--border); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); + position: relative; + transform: perspective(1000px) rotateY(-5deg) rotateX(5deg); + transition: all 0.5s ease; + background-color: var(--card-bg); + animation: float 6s ease-in-out infinite; +} + +.tech-dashboard:hover { + transform: perspective(1000px) rotateY(0deg) rotateX(0deg); + box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.1), 0 0 15px 5px rgba(59, 130, 246, 0.15); +} + +@keyframes float { + 0% { transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(0px); } + 50% { transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(-10px); } + 100% { transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(0px); } +} + +.data-stream { + height: 60px; + position: relative; + overflow: hidden; + background-color: var(--secondary-bg); + background-image: + linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); + background-size: 20px 20px; +} + +.data-line { + position: absolute; + height: 1px; + background: linear-gradient(90deg, var(--accent), transparent); + opacity: 0.7; + top: 50%; + left: -100%; + width: 50%; + animation: streamData 3s linear infinite; +} + +.data-line:nth-child(1) { + animation-duration: 3s; + animation-delay: 0s; + width: 70%; +} +.data-line:nth-child(2) { + animation-duration: 2.5s; + animation-delay: 0.5s; + opacity: 0.5; + top: 30%; + width: 40%; +} +.data-line:nth-child(3) { + animation-duration: 2s; + animation-delay: 1s; + top: 70%; + width: 60%; +} +.data-line:nth-child(4) { + animation-duration: 4s; + animation-delay: 1.5s; + opacity: 0.6; + top: 20%; + width: 50%; +} +.data-line:nth-child(5) { + animation-duration: 3.5s; + animation-delay: 2s; + top: 80%; + width: 30%; +} + +@keyframes streamData { + 0% { left: -100%; } + 100% { left: 100%; } +} + +.monitoring-terminal { + padding: 0.75rem; + background-color: rgba(11, 17, 32, 0.98); + max-height: 200px; + overflow: hidden; + font-family: 'JetBrains Mono', monospace; + font-size: 0.8rem; + color: var(--text-secondary); + line-height: 1.6; +} + +.terminal-line { + margin-bottom: 0.4rem; + white-space: nowrap; +} + +.terminal-line:first-child { + color: var(--accent); + font-weight: 500; +} + +.success { + color: var(--success); +} + +.warning { + color: var(--warning); +} + +.info { + color: var(--info); +} + +/* Call to action buttons */ +.cta-buttons { + grid-area: cta; + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 1rem; + animation: fadeIn 1s ease 0.6s forwards; + opacity: 0; +} + +/* Solutions Showcase Section */ +.solutions-showcase { + background: linear-gradient(180deg, var(--primary-bg) 0%, rgba(30, 41, 59, 0.8) 100%); + padding: 3rem 0; + margin-top: -1rem; + border-top: 1px solid rgba(59, 130, 246, 0.1); + border-bottom: 1px solid rgba(59, 130, 246, 0.1); + position: relative; +} + +.solutions-showcase::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100px; + background: linear-gradient(to bottom, rgba(59, 130, 246, 0.05), transparent); + opacity: 0.5; +} + +.solutions-header { + text-align: center; + margin-bottom: 2rem; +} + +.solutions-title { + font-size: 1.5rem; + color: var(--text-primary); + position: relative; + display: inline-block; + margin-bottom: 0.5rem; +} + +.solutions-title::after { + content: ''; + position: absolute; + bottom: -0.5rem; + left: 10%; + width: 80%; + height: 3px; + background: var(--accent-gradient); + border-radius: 3px; +} + +.solutions-carousel { + position: relative; + height: 160px; /* Increased height to accommodate larger content */ + margin: 0 auto; + max-width: 700px; +} + +.solution-slide { + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: 1rem; + padding: 1.5rem 2rem; + position: absolute; + top: 0; + left: 0; + right: 0; + opacity: 0; + transform: translateX(50px); + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + text-align: left; /* Ensure text alignment is consistent */ +} + +.solution-slide.active { + opacity: 1; + transform: translateX(0); +} + +.solution-slide h4 { + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.solution-slide p { + color: var(--text-secondary); + font-size: 0.95rem; +} + +.solution-icon { + font-size: 1.5rem; + color: var(--accent); + margin-bottom: 0.75rem; +} + +.slider-controls { + display: flex; + justify-content: center; + flex-wrap: wrap; /* Allow dots to wrap on small screens */ + gap: 0.75rem; + margin-top: 1.5rem; + padding: 0 0.5rem; /* Add some padding for mobile */ +} + +.slider-dot { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: rgba(59, 130, 246, 0.3); + border: none; + cursor: pointer; + transition: all 0.3s ease; + padding: 0; +} + +.slider-dot.active { + background-color: var(--accent); + transform: scale(1.2); +} + +/* Fade-in animation */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Services Section */ +.services { + background-color: var(--secondary-bg); + position: relative; + isolation: isolate; +} + +.services::before { + content: ''; + position: absolute; + width: 200%; + height: 200px; + top: -100px; + left: -50%; + background-color: var(--secondary-bg); + transform: rotate(-2deg); + z-index: -1; +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-title { + font-size: 2.5rem; + margin-bottom: 1rem; + position: relative; + display: inline-block; +} + +.section-title::after { + content: ''; + position: absolute; + bottom: -0.5rem; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 4px; + background: var(--accent-gradient); + border-radius: 2px; +} + +.section-description { + max-width: 700px; + margin: 0 auto; + color: var(--text-secondary); + font-size: 1.1rem; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; +} + +.service-card { + background-color: var(--card-bg); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 2rem; + transition: all var(--transition-normal); + position: relative; + overflow: hidden; + z-index: 1; +} + +.service-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 0; + background: var(--accent-gradient); + opacity: 0.1; + transition: height var(--transition-slow); + z-index: -1; +} + +.service-card:hover { + transform: translateY(-10px); + box-shadow: var(--card-shadow); + border-color: var(--accent); +} + +.service-card:hover::before { + height: 100%; +} + +.service-icon { + font-size: 2.5rem; + color: var(--accent); + margin-bottom: 1.5rem; + transition: all var(--transition-normal); +} + +.service-card:hover .service-icon { + transform: scale(1.1); + text-shadow: var(--accent-glow); +} + +.service-title { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.service-description { + color: var(--text-secondary); + margin-bottom: 1.5rem; + transition: color var(--transition-normal); +} + +.service-card:hover .service-description { + color: var(--text-primary); +} + +.tech-badges { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.tech-badge { + background-color: rgba(59, 130, 246, 0.1); + border: 1px solid rgba(59, 130, 246, 0.3); + color: var(--accent); + font-size: 0.8rem; + font-weight: 500; + padding: 0.25rem 0.75rem; + border-radius: 9999px; + transition: all var(--transition-normal); +} + +.service-card:hover .tech-badge { + background-color: rgba(59, 130, 246, 0.2); + border-color: var(--accent); +} + +/* Lab Section */ +.lab-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.lab-card { + background-color: var(--card-bg); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 2rem; + height: 100%; + transition: all var(--transition-normal); +} + +.lab-card:hover { + transform: translateY(-5px); + box-shadow: var(--card-shadow); + border-color: var(--accent); +} + +.lab-card-title { + font-size: 1.5rem; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.lab-card-description { + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.lab-subtitle { + font-size: 1.1rem; + font-weight: 600; + color: var(--accent); + margin-bottom: 1rem; +} + +.lab-list { + margin-bottom: 1.5rem; + list-style-type: none; +} + +.lab-list li { + display: flex; + align-items: center; + margin-bottom: 0.75rem; + color: var(--text-secondary); +} + +.bullet { + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + background-color: var(--accent); + margin-right: 0.75rem; +} + +.lab-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; + margin-top: 2rem; +} + +.flex-center { + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Metrics */ +.metric { + margin-bottom: 1.5rem; +} + +.metric-header { + display: flex; + justify-content: space-between; + margin-bottom: 0.5rem; +} + +.metric-name { + color: var(--text-secondary); +} + +.metric-value { + color: var(--accent); + font-weight: 500; +} + +.metric-bar { + height: 0.5rem; + background-color: rgba(59, 130, 246, 0.1); + border-radius: 9999px; + overflow: hidden; +} + +.metric-progress { + height: 100%; + background: var(--accent-gradient); + border-radius: 9999px; + position: relative; + overflow: hidden; +} + +.metric-progress::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, + transparent 0%, + rgba(255, 255, 255, 0.2) 50%, + transparent 100%); + animation: shimmer 2s infinite; +} + +@keyframes shimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +.services-grid-small { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 0.75rem; +} + +.service-tag { + display: flex; + align-items: center; + gap: 0.5rem; + background-color: rgba(59, 130, 246, 0.1); + padding: 0.5rem; + border-radius: 0.5rem; + font-size: 0.85rem; +} + +.status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: var(--success); + margin-right: 0.5rem; +} + +/* Code Section */ +.code-card { + background-color: var(--card-bg); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 2rem; + margin-bottom: 2rem; + transition: all var(--transition-normal); +} + +.code-card:hover { + box-shadow: var(--card-shadow); + border-color: var(--accent); +} + +.code-card-title { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.code-card-description { + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.code-block { + background-color: rgb(15, 20, 30); + border-radius: 0.5rem; + padding: 1.5rem; + font-family: 'JetBrains Mono', monospace; + font-size: 0.85rem; + line-height: 1.6; + overflow-x: auto; +} + +.comment { color: #8b949e; } +.keyword { color: #ff7b72; } +.function { color: #d2a8ff; } +.string { color: #a5d6ff; } + +/* Projects Section */ +.projects { + background-color: var(--secondary-bg); +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; +} + +.project-card { + background-color: var(--card-bg); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 2rem; + transition: all var(--transition-normal); + height: 100%; + display: flex; + flex-direction: column; +} + +.project-card:hover { + transform: translateY(-10px); + box-shadow: var(--card-shadow); + border-color: var(--accent); +} + +.project-icon { + font-size: 2.5rem; + color: var(--accent); + margin-bottom: 1.5rem; +} + +.project-title { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.project-description { + color: var(--text-secondary); + margin-bottom: 1.5rem; + flex-grow: 1; +} + +/* Experience Section */ +.timeline { + position: relative; + max-width: 800px; + margin: 0 auto; +} + +.timeline::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + width: 2px; + background-color: var(--border); + left: 25px; +} + +.timeline-item { + position: relative; + padding-left: 4rem; + margin-bottom: 3rem; +} + +.timeline-dot { + position: absolute; + left: 0; + top: 0; + width: 16px; + height: 16px; + background: var(--accent-gradient); + border-radius: 50%; + transform: translateX(-7px); + z-index: 1; +} + +.timeline-content { + background-color: var(--card-bg); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 1.5rem; + transition: all var(--transition-normal); +} + +.timeline-content:hover { + transform: translateY(-5px); + box-shadow: var(--card-shadow); + border-color: var(--accent); +} + +.timeline-title { + font-size: 1.25rem; + margin-bottom: 0.5rem; +} + +.timeline-subtitle { + color: var(--accent); + font-weight: 500; + margin-bottom: 0.5rem; +} + +.timeline-date { + font-size: 0.85rem; + color: var(--text-secondary); + margin-bottom: 1rem; +} + +/* Contact Section */ +.contact-grid { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 3rem; +} + +.contact-info { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.contact-item { + background-color: var(--card-bg); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 1.5rem; + transition: all var(--transition-normal); +} + +.contact-item:hover { + transform: translateY(-5px); + box-shadow: var(--card-shadow); + border-color: var(--accent); +} + +.contact-icon { + font-size: 2rem; + color: var(--accent); + margin-bottom: 1rem; +} + +.contact-title { + font-size: 1.2rem; + margin-bottom: 0.5rem; +} + +.contact-form-container { + background-color: var(--card-bg); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 2rem; + transition: all var(--transition-normal); +} + +.contact-form-container:hover { + box-shadow: var(--card-shadow); + border-color: var(--accent); +} + +.contact-form { + display: grid; + gap: 1.5rem; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.form-group label { + font-weight: 500; + color: var(--text-primary); +} + +.form-group input, +.form-group textarea { + padding: 0.75rem; + background-color: rgba(15, 23, 42, 0.6); + border: 1px solid var(--border); + border-radius: 0.5rem; + color: var(--text-primary); + font-family: 'Inter', sans-serif; + transition: all var(--transition-normal); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); +} + +/* Footer */ +.footer { + background-color: var(--secondary-bg); + padding: 4rem 0 1rem; + margin-top: 6rem; +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 3rem; + flex-wrap: wrap; + gap: 2rem; +} + +.footer-logo { + font-weight: 700; + font-size: 1.5rem; +} + +.footer-links { + display: flex; + gap: 2rem; +} + +.footer-links a { + color: var(--text-secondary); + transition: color var(--transition-normal); +} + +.footer-links a:hover { + color: var(--text-primary); +} + +.footer-social { + display: flex; + gap: 1.5rem; +} + +.footer-social a { + color: var(--text-secondary); + font-size: 1.25rem; + transition: all var(--transition-normal); +} + +.footer-social a:hover { + color: var(--accent); + transform: translateY(-3px); +} + +.footer-bottom { + text-align: center; + color: var(--text-secondary); + font-size: 0.9rem; + padding-top: 2rem; + border-top: 1px solid var(--border); +} + +/* Reveal animations on scroll */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: all 0.8s ease; +} + +.reveal.active { + opacity: 1; + transform: translateY(0); +} + +/* Responsive Styles */ +@media (max-width: 1024px) { + .hero-content { + grid-template-columns: 1fr; + grid-template-areas: + "intro" + "dashboard" + "cta"; + } + + .hero-title { + font-size: 2.75rem; + min-height: auto; /* Let it adjust naturally on smaller screens */ + margin-bottom: 2rem; + } + + .role { + position: relative; + } + + .solutions-carousel { + height: 180px; /* More space on tablets */ + } +} + +@media (max-width: 768px) { + .hero-title { + font-size: 2.3rem; + } + + .name { + font-size: 2rem; + } + + .solutions-carousel { + height: 200px; /* More space on mobile */ + } + + .solution-slide { + padding: 1.25rem; /* Less padding on mobile */ + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 1.9rem; /* Smaller on phones */ + } + + .hero-description { + font-size: 1rem; + } + + .name { + font-size: 1.7rem; + } + + .your-text { + font-size: 1rem; + } + + .terminal-text { + font-size: 0.9rem; /* Smaller terminal text on phones */ + } + + .solutions-carousel { + height: 220px; /* Even more space on small phones */ + } +} + +/* Accessibility Enhancements */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* Print styles for resume/CV page */ +@media print { + .navbar, .footer, .cta-buttons { + display: none !important; + } + + body { + background-color: white; + color: black; + } + + .container { + width: 100%; + max-width: none; + } + + a { + color: black; + text-decoration: none; + } + + .section { + break-inside: avoid; + page-break-inside: avoid; + } +} \ No newline at end of file