Systems & Code Portfolio
A behind-the-scenes look at the systems engineering and clean, human-written code powering this site.
Python Utilities & Automation
Clean Python scripts for log parsing, automation, and system utilities. Type-hinted, well-documented, and production-ready.
Log Parser
Extract errors and warnings from system logs
#!/usr/bin/env python3
"""Parse system logs and extract error patterns."""
import re
from datetime import datetime
from pathlib import Path
def extract_timestamp(line: str) -> str:
"""Try to extract timestamp from log line."""
# Common log timestamp pattern: YYYY-MM-DD HH:MM:SS
match = re.search(r'\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2}', line)
return match.group(0) if match else ''
def parse_log_file(log_path: str) -> dict:
"""Extract errors and warnings from log file."""
errors = []
warnings = []
with open(log_path, 'r') as f:
for line_num, line in enumerate(f, 1):
if 'ERROR' in line.upper():
errors.append({
'line': line_num,
'timestamp': extract_timestamp(line),
'message': line.strip()
})
elif 'WARNING' in line.upper():
warnings.append({
'line': line_num,
'timestamp': extract_timestamp(line),
'message': line.strip()
})
return {
'total_errors': len(errors),
'total_warnings': len(warnings),
'errors': errors[:10], # Top 10 errors
'warnings': warnings[:10] # Top 10 warnings
}SQL Query Patterns & Data Handling
Clean SQL queries for data retrieval, joins, and safe database operations. Optimized, indexed, and secure.
User Activity Query
Retrieve active users with recent activity
-- Retrieve active users with recent activity
SELECT
u.id,
u.username,
u.email,
u.created_at,
COUNT(a.id) as activity_count,
MAX(a.timestamp) as last_activity
FROM users u
LEFT JOIN activities a ON u.id = a.user_id
WHERE
u.status = 'active'
AND u.created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY)
GROUP BY u.id, u.username, u.email, u.created_at
HAVING activity_count > 0
ORDER BY last_activity DESC
LIMIT 100;
-- Find users with specific role
SELECT
u.id,
u.username,
u.email,
r.role_name,
r.permissions
FROM users u
INNER JOIN user_roles ur ON u.id = ur.user_id
INNER JOIN roles r ON ur.role_id = r.id
WHERE r.role_name IN ('admin', 'moderator')
ORDER BY u.username ASC;Semantic HTML & Structure
Clean, accessible markup with proper meta tags, Open Graph integration, and semantic structure. Every element is thoughtfully chosen for both search engines and screen readers.
Head Structure
Optimized HTML head with proper meta tags and structured data
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Anthony Lopez | IT Systems & Support Engineer</title>
<meta name="description" content="Enterprise IT leadership..." />
<!-- Preconnect for performance -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Canonical URL -->
<link rel="canonical" href="https://theanthonylopez.com/" />
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Anthony Lopez" />
<meta property="og:url" content="https://theanthonylopez.com/" />
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Anthony Lopez",
"jobTitle": "IT Systems & Support Engineer"
}
</script>
</head>Tailwind CSS Utilities
Responsive design patterns using Tailwind's utility classes for consistent spacing and typography. Modern, maintainable styling without writing custom CSS.
Component Patterns
Reusable card components with hover effects
<!-- Card with hover effects and responsive padding -->
<div class="card group transition-transform hover:scale-[1.02]">
<header class="flex items-start justify-between gap-4 mb-4">
<h2 class="text-2xl">Project Title</h2>
<span class="chip">Technology</span>
</header>
<p class="muted mb-4">Description text</p>
<ul class="muted space-y-2 list-disc list-inside mb-6">
<li>Feature one</li>
<li>Feature two</li>
</ul>
<a href="#" class="btn-link link-underline focus-outline">
Learn more →
</a>
</div>JavaScript Enhancements
Clean JavaScript for smooth scrolling, navigation helpers, and accessibility improvements. Progressive enhancement ensures the site works without JavaScript.
Smooth Scrolling
Vanilla JavaScript anchor link smooth scrolling
// Smooth scroll to anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});Performance & SEO Practices
Lighthouse-optimized with proper meta tags, structured data, and performance best practices. Every decision prioritizes speed and discoverability.
Resource Hints & Preloading
Optimize page load with strategic resource hints
<!-- DNS resolution happens early, before fonts are needed -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Critical CSS loads first to prevent render blocking -->
<link rel="preload" href="assets/css/site.css" as="style" />
<link rel="stylesheet" href="assets/css/site.css" />
<!-- Fonts load with display=swap to show fallback text immediately -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@600;700&display=swap" rel="stylesheet" />
<!-- Print styles only load when printing -->
<link rel="stylesheet" href="assets/css/print.css" media="print" />
<!-- Favicon as SVG for sharp display at any size -->
<link rel="icon" href="favicon.svg" type="image/svg+xml" />Security & Best Practices
Privacy-first architecture with minimal dependencies and secure deployment practices. No tracking, no third-party scripts, just clean code.
Security Headers
Netlify configuration for secure HTTP headers
# netlify.toml - Security headers configuration
[[headers]]
for = "/*"
[headers.values]
# Prevent clickjacking attacks
X-Frame-Options = "DENY"
# Disable MIME type sniffing
X-Content-Type-Options = "nosniff"
# Enable XSS protection in older browsers
X-XSS-Protection = "1; mode=block"
# Control what the browser can load
Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; script-src 'self';"
# Enforce HTTPS connections
Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
# Control browser features and APIs
Permissions-Policy = "geolocation=(), microphone=(), camera=()"
# Control referrer information sent to other sites
Referrer-Policy = "strict-origin-when-cross-origin"Xcode • Swift Development
Clean Swift code for iOS development with SwiftUI and modern patterns. Declarative UI, type safety, and native performance.
SwiftUI Component
Reusable profile card with async image loading
import SwiftUI
struct ProfileCard: View {
let name: String
let role: String
let avatarURL: URL?
var body: some View {
HStack(spacing: 16) {
AsyncImage(url: avatarURL) { image in
image
.resizable()
.aspectRatio(contentMode: .fill)
} placeholder: {
Circle()
.fill(Color.gray.opacity(0.2))
}
.frame(width: 60, height: 60)
.clipShape(Circle())
VStack(alignment: .leading, spacing: 4) {
Text(name)
.font(.headline)
.foregroundColor(.primary)
Text(role)
.font(.subheadline)
.foregroundColor(.secondary)
}
Spacer()
}
.padding()
.background(Color(.systemBackground))
.cornerRadius(12)
.shadow(color: .black.opacity(0.1), radius: 5)
}
}VS Code Workflow & Configuration
Optimized editor settings and recommended extensions for productive development. Consistent formatting, powerful tooling.
Settings Configuration
Optimized VS Code settings.json for development
{
"editor.fontSize": 14,
"editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.minimap.enabled": false,
"editor.renderWhitespace": "boundary",
"editor.rulers": [80, 120],
"files.autoSave": "onFocusChange",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"workbench.colorTheme": "GitHub Dark Default",
"workbench.iconTheme": "material-icon-theme",
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.formatOnSave": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}Bash & Command-Line Automation
Shell scripts for system administration, automation, and DevOps workflows. Safe, documented, and production-tested.
Log Cleanup Script
Automated log rotation and compression
#!/bin/bash
# Clean old log files and compress archives
set -euo pipefail
LOG_DIR="/var/log/myapp"
ARCHIVE_DIR="$LOG_DIR/archive"
DAYS_TO_KEEP=7
COMPRESS_DAYS=30
# Create archive directory if it doesn't exist
mkdir -p "$ARCHIVE_DIR"
echo "Starting log cleanup..."
# Find and compress logs older than 7 days
find "$LOG_DIR" -name "*.log" -type f -mtime +$DAYS_TO_KEEP | while read -r logfile; do
if [ -f "$logfile" ]; then
filename=$(basename "$logfile")
gzip -c "$logfile" > "$ARCHIVE_DIR/${filename}.gz"
rm "$logfile"
echo "Compressed and archived: $filename"
fi
done
# Delete compressed logs older than 30 days
find "$ARCHIVE_DIR" -name "*.gz" -type f -mtime +$COMPRESS_DAYS -delete
echo "Log cleanup complete!"
echo "Current disk usage: $(du -sh $LOG_DIR)"