Cloud Resume Challenge pt 2: Building and Hosting my Resume.

Please check out my resume at resume.allmark.me!
All feedback, good or bad is appreciated 😄

Progress thus far:

1. Certification ✔️
2. HTML 🚧
3. CSS 🚧
4. Static Website 🚧
5. HTTPS 🚧
6. DNS 🚧
7. JavaScript ❌
8. Database ❌
9. API ❌
10. Python ❌
11. Python Tests ❌
12. Infrastructure as Code ❌
13. Source Control ❌
14. Backend CI/CD ❌
15. Frontend CI/CD ❌
16. Blog Post 🚧

TL;DR
The user is creating an HTML version of their resume.
They started with a structured approach, using generative AI to help with HTML and asking specific questions to understand the generated content. They added CSS to their resume, implemented a dark mode, and hosted their resume on Azure using a Storage Account Static website, a custom domain, and HTTPS. They noticed some compatibility issues with auto-formatted text from Word but decided to ignore it for now. They found unlearning the preconception that CSS and JavaScript elements had to live outside of the HTML file to be the most difficult part. If they had more time, they would add more JavaScript and CSS, including a progress bar, sticky headings, and a dark mode toggle that remembers settings. They enjoyed the exercise and are excited for what comes next.

Getting Started

As I started, the nervous thoughts began flooding in. Is this going to be much harder than I imagined? Where do I even begin? Will I even end up finishing this? Have I bitten off more than I can chew?

This was exacerbated by the fact that I decided that if I were to host my resume in Html form, I would need to be faithful to the Docx version. This rule made me nervous because I genuinely had no idea how difficult that would be, and I was worried I’d hit a hard-stop right at the beginning.

Personal growth has taught me that this nervousness is usually triggered by a lack of structure. If I can build structure, I can focus. I learned this early on in my career and it helped me thrive in the chaotic world of MSPs. At work, this takes the form of colour coding and managing my calendar like a To-Do list.

1. Blue = To do.
2. Green = Done.
3. Red = Recurring.
4. Purple = Team Meeting.
5. Yellow = This schedule cannot be bumped and if you forget it you are in trouble.

Obvious Redactions Applied...

When working on personal projects or any large complicated task, adding structure is usually just a series of accumulative steps.
In this case:

1. Find and install useful HTML extensions in VS Code.
2. Create the headings.
3. Add two placeholder dot points under each.
4. Add some bolded words.
5. Add the resume content in plaintext.
6. Begin styling with CSS.

HTML

Getting started with HTML was easy enough with the help of generative AI. I use Edge’s Copilot as I have access to the enterprise license. This also meant I had to work on this using my company laptop. This was fine because I find I work more productively on it anyways.
I used the following prompt to generate the first draft of my website:

I'm looking to create a resume for my website. I want it to be written in only HTML. For now I just want to have 3 headings - personal details, work history, education and skills. Keep it as simple as possible as I want to build iteratively to ensure I understand each component. Also explain each component to someone who does not have any professional experience in HTML

Not Bad.

Doing it this way got me off to a running start and keeping it simple meant I was able to understand everything that was being generated. From here, I used Copilot like they were a more senior team member, just asking them simple questions such as:

1. How do I do a line break?
2. How do I do dot points, tab spaces and bold words?
3. What does “p style” mean and why do I need it?
4. What is a div? What happens if I remove it?
5. Is there a better way to add dot points than "li"?

I’ve always felt that generative AI was at its best as a force multiplier. That is, you need to give it some level of your own expertise if you are to get the most out of it. If you start with no expertise, then ask for everything in the simplest form and don't progress until you understand what it's generated. Doing it this way improved my prompting as I was learning how to specifically ask for what I wanted. I.E I was able to contribute increasingly more expertise which meant increasingly better results.
After a couple hours I had finished the RAW HTML outline of my resume. A very satisfying result.

I also took the liberty of adding 'Basic HTML & CSS' to my skills section.

CSS

The next part was adding CSS, which should be simple because my resume is mostly flavourless apart from the font and a couple headings like this one:

Still, it was tricky because I genuinely had no idea how to ask for this. My first attempt was simply sending the above screenshot to Copilot and telling it to “do that in css” which results in something.. not quite right:
Luckily, the legacy technology of old was still available and I was able to produce some spice after 10 minutes of google:

To feel authentic to me, it needed two more things though.

1. Margins because that is what I'm used to.
2. Dark Mode because good first impressions are important.

Both were relatively easy to implement but dark mode left much to be desired when comparing my Docx version to my Html version.


I needed the headings and Hyperlinks to update too.
The great thing about this task is that it gave an opportunity to prompt AI in my favourite way:

1. This is my code
2. This is what my code does
3. This is what I want it to also do
4. Explain each change to me so I can understand what you've done.

I told it to create a class called 'brandon mode' that set my background to yellow when I pressed a button.

Hilarious typos aside, it taught me something cool - You can have nested classes. After learning this, it wasn't too hard to figure the rest out:

I used PowerToys to rip the colours from Word. Thanks Microsoft!

Once dark mode was configured, I added a toggle button by ripping code from Stack Overflow. Just like the pros.

Don't ask me how this works..

Hosting in Azure

Uploading it to a Storage Account Static website, adding a custom domain and enabling HTTPS was fairly uneventful. I've done this previously and the Microsoft Learn documentation on it is solid. I use Cloudflare for my domain hosting and DNS.

Once it was hosted in Azure I noticed some compatibility issues with some of the auto-formatted text from Word. I ignored VS Code's warnings about these characters so this was coming back to haunt me.

I opted to continue ignoring it as there would be opportunities to fix this later down the track. It was time to wrap this one up.

Reflecting…

What aspect of Chunk 1's work did you find the most difficult?

The most difficult part was unlearning the preconception that CSS and JavaScript elements had to live outside of the html file. Things began to fall into place once I understood that.

What's something you'd have done differently, or added, if you'd had more time?

More JavaScript and more CSS. I'd like one of those tiny bars that progresses the further you get down the page. I'd also like headings to following you down until you get to the next one.
I'd like the dark mode toggle to remember your settings.

Overall this was a really fun exercise and I found myself eager to return each time I stepped away. It's very satisfying to view my resume in a form that is free from Word's page limits. Also, getting a resume pixel perfect is much easier in Html than it is in Word.

One thing is for certain – this has got me excited for what comes next!