The creation of this site was the first project I worked on post-graduation. I wanted a centralized hub to showcase my projects, link to my GitHub and LinkedIn, and demonstrate practical DevOps skills. What started as a simple static site evolved into a comprehensive learning experience in web hosting, infrastructure management, and secure API integration.
Technologies: GitHub Pages, Static HTML/CSS/JavaScript
I started with GitHub Pages as it was familiar territory from college coursework. This provided a solid foundation for understanding static site deployment and version control integration.
What I learned: Git-based deployment workflows, Jekyll basics, DNS configuration for custom domains, limitations of static hosting.
Technologies: Raspberry Pi, Nginx web server, Cloudflare Tunnel, Linux server administration
To gain hands-on experience with server management, I transitioned to local hosting. This phase taught me the most about infrastructure:
Challenges solved: ISP residential connection limitations, dynamic IP management, securing a publicly accessible home server.
Why I moved on: While successful, the Raspberry Pi lacked a UPS (uninterruptible power supply), leading to potential downtime during power fluctuations. Additionally, I wanted to repurpose the Pi for other projects and IoT experiments.
Technologies: Cloudflare Pages, Cloudflare Workers, Git integration, Serverless functions
Moving to Cloudflare Pages provided enterprise-grade hosting with minimal operational overhead:
I integrated the OpenWeather API to display real-time weather data, providing practical experience with external API consumption and asynchronous JavaScript.
The primary challenge with client-side API calls is exposure of API keys in browser developer tools. I solved this using Cloudflare Workers:
// Direct API call from client - EXPOSES API KEY
fetch(`https://api.openweathermap.org/data/2.5/weather?q=London&appid=${API_KEY}`);I created a serverless function that acts as a secure intermediary:
// Cloudflare Worker (runs on edge servers)
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const url = new URL(request.url)
const city = url.searchParams.get('city')
// API key stored in Worker environment variables (secure)
const apiKey = OPENWEATHER_API_KEY
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
const response = await fetch(apiUrl)
const data = await response.json()
return new Response(JSON.stringify(data), {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
}
})
}How it works:
Benefits of this approach:
In college, I used dotenv for environment variables in Node.js applications running on a server. However, this doesn't work for static sites where JavaScript runs entirely in the browser. The Cloudflare Worker solution provides server-side execution in a serverless environment, bridging the gap between static hosting and secure API access.
Deployment Pipeline:
Performance optimizations:
This site serves as my ongoing web development practice ground and project management hub. I plan to continuously update it as I learn new technologies and complete new projects.