I wanted a resume website that wasn’t just a boring PDF, but something interactive, modern, and—let’s be honest—a little bit nerdy. So, I rolled up my sleeves and built my own “Cloud Resume.” Here’s how I did it, explained in plain English, with a few code snippets to show what’s going on behind the scenes.

Step 1: Designing the Website

I started by making a website using something called React (it helps you build websites in pieces, like LEGO blocks). I also used TailwindCSS, which is just a fancy way to make things look good without writing a ton of custom styles.

How I organized my site:

Each section (like Experience, Education, Skills) is its own “component” (think: mini webpage).
I used a “context” to keep all my resume info in one place, so if I update my job history, it updates everywhere.

Step 2: Adding a Visitor Counter (Because Why Not?)

I thought it’d be cool to show how many people have visited my site. But I didn’t want to just fake the number—I wanted it to be real! So, I made a tiny “backend” (a program running on a server) that counts visitors.

How it works:

Every time someone visits, the site asks my backend, “Hey, what’s the latest count?”
The backend adds one, saves it, and sends the new number back.

Here’s a super simple version of the code that runs on my backend:


@app.get("/api/counter")
async def get_visitor_count():
    # Look up the current count in the database, add 1, and return it
    result = await counter_collection.find_one_and_update(
        {"_id": "visitorCounter"},
        {"$inc": {"count": 1}},
        upsert=True,
        return_document=True
    )
    return {"count": result.get("count", 0)}

And here’s how my website asks for the number:


const fetchVisitorCount = async () => {
  const response = await fetch('/api/counter');
  const data = await response.json();
  setCount(data.count); // Show the number on the page
};

Step 3: Making It All Work Everywhere

I didn’t want my site to only work on my laptop, so I put it “in the cloud” using a service called Digital Ocean. This way, anyone in the world can visit!

How I did it:

I packaged everything up using Docker (think: putting your website and all its parts in a shipping container).
I used Nginx (like a traffic cop) to make sure visitors get to the right place and that the site is secure (with HTTPS!).
I set up automatic deployment, so whenever I update my code, the site updates itself. No more manual uploads!

Step 4: Keeping Things Safe and Smooth

I keep my secrets (like database passwords) in hidden files so no one can see them.
I use automated tests to make sure I don’t break anything by accident.
I set up logs so I can see what’s happening if something goes wrong.

Step 5: The Final Result

Now, my resume site is:

Fast and pretty (thanks, React and Tailwind!).
Always up-to-date (thanks, automation!).
Shows a real visitor count (thanks, backend!).
Easy to update and maintain.
You can check it out live here: https://cloudenoch.com

Why Did I Do All This?

Honestly? Because it’s fun! But also because it shows off my skills in a real, living project. Plus, it’s a great conversation starter with recruiters and fellow techies.

Want to Build Your Own?

If you’re curious or want to try something similar, here’s what you need:

A bit of curiosity and patience (Google is your friend!)
Free accounts on Digital Ocean and MongoDB Atlas
Some basic knowledge of web development (or a willingness to learn!)

Thanks for reading!

How I Built My Cloud Resume