Guestbook Logic

When you sign the guestbook, the frontend grabs the current JSON array directly from the Cloudflare Worker, adds your new signature to the top, and fires an instant POST request to rewrite the KV storage.

frontend-api.js

// Optimistic Rendering
guestbookData.unshift(newEntry);
if (guestbookData.length > 50) guestbookData.pop();

// Fetch latest data to prevent overwriting
const res = await fetch(WORKER_URL);
const current = await res.json();
const payload = current.data || {};

// Inject new array and save to Edge
payload.guestbook = guestbookData;
await fetch(WORKER_URL, {
    method: 'POST',
    body: JSON.stringify(payload)
});

Under the Hood

Tech Stack

HTML5 Tailwind CSS Vanilla JS Cloudflare Workers Cloudflare KV EmailJS DummyJSON API

How Cloudflare Works

This site doesn't use a traditional database or server like Node.js + MongoDB. Instead, it relies on Cloudflare Workers and Cloudflare KV (Key-Value storage) to operate entirely at the "Edge" (the network of servers closest to you).

When you view this page, it makes a simple GET request to a serverless API (the Worker). The Worker reads the latest edits and the global hit count from the ultra-fast KV store, updates the visit count instantly, and sends the content back to your browser.

When the admin logs in and edits the page, a POST request sends the new HTML blocks back to the Worker, overwriting the KV storage so the next visitor instantly sees the updated site.

Backend Worker Code

worker.js

export default {
  async fetch(request, env, ctx) {
    const corsHeaders = {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type",
    };

    if (request.method === "OPTIONS") {
      return new Response(null, { headers: corsHeaders });
    }

    if (!env.PORTFOLIO_DB) {
      return new Response(
        JSON.stringify({ error: "KV DB not bound!" }), 
        { status: 500, headers: corsHeaders }
      );
    }

    try {
      if (request.method === "GET") {
        let hits = parseInt(await env.PORTFOLIO_DB.get("page_hits")) || 0;
        hits += 1;
        ctx.waitUntil(env.PORTFOLIO_DB.put("page_hits", hits.toString()));

        const rawData = await env.PORTFOLIO_DB.get("site_data");
        const data = rawData ? JSON.parse(rawData) : {};
        
        return new Response(JSON.stringify({ data: data, hits: hits }), {
          headers: { ...corsHeaders, "Content-Type": "application/json" }
        });
      }

      if (request.method === "POST") {
        const body = await request.text();
        await env.PORTFOLIO_DB.put("site_data", body);
        return new Response(JSON.stringify({ success: true }), { headers: corsHeaders });
      }

      return new Response("Not found", { status: 404, headers: corsHeaders });
    } catch (err) {
      return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: corsHeaders });
    }
  }
};

How Live GitHub Works

The Live from GitHub section and the stats bar in About Me both hit the public GitHub REST API — zero auth, zero config, zero backend needed. On every page load two fetch calls fire: one for your user profile (followers, following, repo count) and one for your public repos. Results are sorted stars-first, then by most recently pushed, and rendered into the page using your existing neo-brutalist card styles. No API key is required for public data up to 60 requests/hour per IP.

The Fetch Logic

github-integration.js

const GITHUB_USERNAME = 'sawyerbobk563-code';

async function fetchGitHubData() {
  // 1️⃣  User profile — followers, following, repo count
  const user = await fetch(
    `https://api.github.com/users/${GITHUB_USERNAME}`
  ).then(r => r.json());

  renderStatPills(user.followers, user.following, user.public_repos);

  // 2️⃣  Public repos — sorted by stars then push date
  const repos = await fetch(
    `https://api.github.com/users/${GITHUB_USERNAME}/repos` +
    `?sort=updated&per_page=12&type=owner`
  ).then(r => r.json());

  const sorted = [...repos].sort((a, b) => {
    if (b.stargazers_count !== a.stargazers_count)
      return b.stargazers_count - a.stargazers_count;
    return new Date(b.pushed_at) - new Date(a.pushed_at);
  });

  // 3️⃣  Render each repo as a neo-brutalist card
  githubReposGrid.innerHTML = sorted.map(repo => `
    <div class="brutal-card">
      <h3>${repo.name}</h3>
      <p>${repo.description}</p>
      <span>⭐ ${repo.stargazers_count}</span>
      <a href="${repo.html_url}">Open on GitHub</a>
    </div>
  `).join('');
}

fetchGitHubData(); // fires on every page load

Rate Limits & Caching

60 req/hr unauthenticated Public repos only No API key needed Graceful error fallback

Menu

Systems Dashboard

Opened Sites Guestbook About Me Recent Drops In The Lab Send Me an Email Hit Me Up

Genjutsu

100% CODE

Hello World, I'm #udnowknow

Sawyer
Schulz

D1 committed Vibe Coder

About Me

I'm a developer obsessed with creating web experiences that aren't boring. I specialize in React, Node.js, and chaotic good design principles (as you can tell).

When I'm not writing code, I'm probably optimizing my mechanical keyboard switches, drinking too much iced coffee, or trying to convince people that CSS is a real programming language.

GitHub Stats @sawyerbobk563-code ↗

Recent Drops

HOT

Genjustsu Live Feed

A dynamic live feed application pulling real-time data.

Live Data

Sliky Os

A fun, quirky web-based operating system experiment.

OS Web

URL Save

A handy utility for saving and managing your favorite web links.

Tools Utility

Live from GitHub

View More on GitHub

In The Lab

WIP

Full HTML Web Browser

Building a completely custom web browser UI using HTML, CSS, and JS. It's a massive challenge but coming together perfectly.

Planning

Brutalist UI Library

Packaging all these components into an open-source React component library for the masses.

✉️ Send Me An Email

Shoot me a message and it will go directly to my inbox!

🤝 Hit Me Up

Have a project in mind, want to collaborate, or just want to yell at me about my CSS choices?

Email Strava Genjutsu GitHub Athletic.net LinkedIn

Page Visits ...

"

"

Loading wisdom...

- The Internet