Cloud Resume Challenge Azure - Part 1

I have been wanting to do this for a while. Now I have officially kicked off the Cloud Resume Challenge (Azure edition). This is a hands-on project where I wouldbuild and host my personal resume on the cloud (Azure), step by step, using modern DevOps practices.

Today was front-end day — designing, coding, and structuring my resume website as the foundation of everything else to come.

---

**

Goal**

The goal was to create a functional, modern, and responsive web page that:

• Displays my resume and portfolio details.
• Introduces me as a cloud/IT enthusiast.
• Has a clear navigation structure (Home, About, Projects, CV, Contact) I might decide to add more later on.
• Create the HTML and Style with the CSS.

---

How I Achieve this?

1. Created HTML Structure NB: I had previous experience in web-development, i.e. HTML, CSS. So it was easy to blend along. However, "ChatGPT" was a resource for the rescue.

• Wrote the main sections: Hero (intro), About, Projects, CV/Experience, and Contact.
• Used semantic HTML5 (<section>, <nav>, <footer>) to keep the page clean.

Example of my navigation bar:

   <nav class="navbar">
     <ul>
       <li><a href="#home" class="active">Home</a></li>
       <li><a href="#about">About</a></li>
       <li><a href="#projects">Projects</a></li>
       <li><a href="#cv">CV</a></li>
       <li><a href="#contact">Contact</a></li>
     </ul>
   </nav>

1. Added Styling with CSS

• Defined a dark theme with Azure-inspired colours:
  

   body {
     background-color: #111; 
     color: #fff;
     font-family: 'Segoe UI', Tahoma, sans-serif;
   }
  
   .navbar {
     background: #111;  /* matches body background */
     position: fixed;
     width: 100%;
     top: 0;
     box-shadow: 0 2px 4px rgba(0,0,0,0.5);
   }
  

1. Integrated Resume Content

• Added About Me summary, Projects, CV

1. *I Created a placeholder <span> that will later display live visitor counts: ( This was suppose to be a step further down the line, i only added a place holder now which is to be effected later)
   

    <section id="visitors" class="section">
      <h2>Visitor Counter</h2>
      <p>This page has been viewed 
         <span id="visitor-count">0</span> times.</p>
    </section>
   

• Linked a counter.js file so the counter can fetch data once the backend is live.

---

🛠 How I Achieved It

• HTML: Divided content into logical sections with unique IDs for smooth scrolling.
• CSS: Styled the navbar to match the background, applied flexbox layouts, and added responsive @media queries for smaller screens.
• Icons: Used Font Awesome for LinkedIn, GitHub, and email icons.
• Resume Data: Highlighted my Skill set, emphasizing IT and cloud-relevant skills.
• Visitor Counter: Designed the placeholder, ready for integration with Azure Functions.

---

*However, Below are Some Challenges I Faced and How I Resolved them Solutions
*

1. Navbar Transparency Issue

• Problem: The navbar text overlapped content when scrolling making it less clean.
• Solution: Applied a matching background (#111) + subtle shadow.

1. Mobile Responsiveness

• Problem: Layout broke on smaller screens. While i needed it to be responsive on all media devices

• Solution: Added @media queries like:
  

   @media (max-width: 768px) {
     .hero h1 { font-size: 2.2rem; }
     .navbar ul { flex-direction: column; }
   }
  

1. Visitor Counter Timing

• Problem: Should I implement it now or later?
• Solution: Followed the Cloud Resume Challenge steps → added the placeholder only. The backend (Azure Function + Cosmos DB) will come later.

---

What is My Next Step?

• I Would Deploy this static site to Azure Storage (Static Website).
• Configure HTTPS and set up a custom domain.
• Build an Azure Function (Python) with Cosmos DB for the visitor counter.
• Update counter.js to fetch live data from the API.
• Automate deployments using GitHub Actions and define resources with Bicep/ARM templates.

---

Reflection

This stage was about laying the foundation. I now have a working resume page that reflects my cloud journey and is ready for deployment. Later on I’ll move into Azure hosting and start tackling backend integration.

NB: Most of the parts of this stage can be tackled using the right questions on ChatGPT or any AI resource of your choice. It help and to make the job faster, however jsut be sure you understand what you are implementing.

Cloud #Azure #DevOps #CloudResumeChallenge