fun

yunitdev/fun

Public fun tools and experiments by Phillip Aubrey.

Live URL

https://yunitdev.github.io/fun/

Tools

Type like Phillip

URL: https://yunitdev.github.io/fun/type-like-phillip.html

A text transformation tool that converts formal language into casual, authentic “Phillip-style” communication.

Features:

Example:

Input:  "I apologize for the delay. I will let you know when it's ready."
Output: "my bad on the delay. ill lmk when its ready"

Compound Calculator

URL: https://yunitdev.github.io/fun/compound

Wealth calculator that shows how much money you can make from investing. Used in Benson app share links.

Features:

KimG Tech Stack

URL: https://yunitdev.github.io/fun/KimG%20Tech%20Stack/

Visual slide deck proposing tech solutions for Make Tech Easy - a nonprofit teaching seniors digital skills.

Features:

Use Case: Template for proposing tech solutions to help someone scale their work.

File Structure

fun/
├── type-like-phillip.html    # Text transformation tool
├── live-notifications.html   # Live notification display
├── compound/                 # Wealth calculator (folder-based for clean URL)
│   ├── index.html
│   ├── assets/
│   ├── scripts/
│   └── styles/
├── KimG Tech Stack/          # Make Tech Easy proposal deck
│   └── index.html
└── README.md                 # This file

Adding New Tools

Naming Convention (Required)

Every tool must have a descriptive filename. No index.html files.

Good Bad
type-like-phillip.html index.html
live-notifications.html tool.html
word-counter.html new.html

Rules:

URL pattern: https://yunitdev.github.io/fun/[tool-name].html

Quick Start

cd /Users/phillipaubrey/fun-repo
# Create your new tool with descriptive name
cp type-like-phillip.html my-new-tool.html
# Edit my-new-tool.html
git add . && git commit -m "Add my-new-tool" && git push
# Live at: https://yunitdev.github.io/fun/my-new-tool.html

Step-by-Step

  1. Create the file
    • Name it descriptively: [what-it-does].html
    • Use type-like-phillip.html as a template if helpful
  2. Follow the design system
    • Background: #0a0a0a (dark)
    • Accent: #00ff88 (neon green)
    • Font: Space Mono or system monospace
    • Keep it single-file (HTML + embedded CSS/JS)
  3. Update this README
    • Add your tool under the “Tools” section
    • Include: name, URL, description, features
  4. Deploy 
    git add . && git commit -m "Add [tool-name]" && git push

    GitHub Pages auto-deploys within ~1 minute.

File Organization

Template Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tool Name</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Space Mono', monospace;
      background: #0a0a0a;
      color: #fff;
      min-height: 100vh;
    }
    /* Accent color: #00ff88 */
  </style>
</head>
<body>
  <!-- Your tool here -->
  <script>
    // Your JS here
  </script>
</body>
</html>

Tech Stack

Contact

Phillip Aubrey - phillipaubrey.com