C# — Converting a resume to HTML with Blazor WASM and ChatGPT
My quest on converting a resume into a webpage with AI’s assistance
Table of Contents
- Disclaimer
- Rationale
- The Resume
— Breaking it down
— Milestone 1: replicating the header
— Milestone 2: replicating the body
— Milestone 3: add the HTML template to Blazor - Critical Points
— AI tools
— Final consideration
— End Result
1. Disclaimer
This is neither a “10 ChatGPT prompts…” nor a “10 ChatGPT plugins that will make you 100x …” blog post. Instead, this is a practical opinion article with a use case on ‘how can AI tools be used as rubber ducks while coding’.
2. Rationale
This was a thought I came across after .NET Conf 2022, more explicitly, while assisting the .NET Conf 2022 — Student Zone.
Watching some of the presentations and the ideas being shared, there was something, in particular, that caught my attention. Matt Soucoup gifted the crowd with a presentation about Blazor WASM, where he went through the basics of it by creating a resume.
Being able to create webpages is an underrated skill
A good website can potentially add lots of value. In extreme cases, it might even save businesses. Believe it or not, most people working in the IT industry are unable to satisfy this need, even with all the existing available technology. In fact, this was a gap I felt I had in professional terms, being something I proactively intend to improve on.
With the proper use case and the motivation to learn Blazor, by applying some C# knowledge, it made sense to take advantage of the circumstances and focus on improving my ability to manipulate HTML and CSS.
So, I set myself to learn Blazor the right way. By replicating a resume I designed with Canva in my college years, that serves me to this day. The sole conditions were mirroring as much as possible exactly what I had, while doing my best to maintain the styling and layout.
3. The resume
The resume itself isn’t that complex, but it does have a bit of detail and quirky customization that could be tricky to reproduce with code. Those can easily turn a one week endeavor into a couple of months of work, which meant that I needed help — this was when ChatGPT came along.
Fortunately for me, ChatGPT was pretty much exploding by that time, in late 2022. Honestly, it gave me a lot of momentum, in motivation terms, to keep things flowing. I felt that I actually had help.
Breaking it down
“When you’re stuck with a problem, break it down into smaller problems, and those into even smaller problems, until you can solve all the small problems, one by one…”
With that in mind, I decided to approach the resume replication by breaking it down into small problems, and those into even smaller ones, and so on. All this while keeping all information in a single page.
- Milestone 1: replicating the header:
- Background image;
- Horizontal bar with transparency;
- Profile image; - Milestone 2: replicating the body:
- Body split into two columns;
- Sections;
- Customize each section; - Milestone 3: add the HTML template to Blazor:
- Move the HTML file to a Blazor WASM app;
- Icons and hobbies;
- Create and publish a docker image of the app;
Milestone 1: replicating the header
Getting started is usually the toughest barrier to break. For me, this is one of the strongest points of ChatGPT. Since it doesn’t overthink, and usually provides the simplest entry point for you to get started on something, ChatGPT excels at making you kick-off your projects. I recall typing a simple “Hi Chat”, and shortly after I had something to look at.
Summarizing the goals of this milestone, it took me longer to browse the web for the image used on my resume’s header when it was created, than the actual time spent setting it as a background image. Surprisingly, I found it more challenging to create the horizontal bar where the text would sit on, than creating the circle that’d serve as a placeholder for my profile picture.
By midst March, this milestone had been achieved.
Milestone 2: replicating the body
This was a challenge. The goal of this milestone was to replicate the body while having all the information of two pages condensed into a single page, so things became a bit messy. Dividing the body into two columns was the easy bit. With that done, I rushed from section to section, defining consistent styles for all sorts of headings, for the paragraphs, the colors, the fonts, for the font weights, and so on.
There were moments in which it was clear that I had to prompt ChatGPT in order to get unblocked, but there were other moments I felt like I didn’t quite need it. Overall, this stage had a lot of back and forth with the prompt, but I also had lots of moments where I just tried to use my own creativity to solve problems.
For instance, on the right column of the body I found it easier to just use triangles to mimic the white effect of the background. To me, that was the most natural way of imitating the layout.
The small circles that I used to quantify my level of understanding of an idiom, or the incidence of a specific skill within each working context, were replicated almost fully resorting to ChatGPT. My only concerns were positioning and coloring them accordingly.
This milestone was set as finished once I had only the icons and the hobbies sections’ images remaining.
Milestone 3: add the HTML template to Blazor
In this milestone ChatGPT felt a bit off. With Blazor being a relatively recent, quickly evolving, framework, which is sustained by an ecosystem that changes quite often, AI tools like ChatGPT seem to lack context.
The docker image wasn’t that hard to create. I had already created a docker image of the template I initially created. The first version of the containerized application image worked fine, served with NGINX. But the second version, with all the custom HTML and CSS, was not that easy, I must say. For some reason, I added PrivateAssets="All" to the project’s dependencies. This resulted in me having trouble displaying the contents of the latest version of the app, after containerizing it into an image. ChatGPT wasn’t helpful at all, despite my best attempts to feed it with context.
Eventually I posted on r/Blazor in Reddit, and someone did help me. But I lost quite a bit of time trying to figure if this was either a server or a deployment problem. I feel I wouldn’t have been able to figure it with ChatGPT’s assistance.
Mudblazor was the tool I chose to render the icons. Its fantastic documentation, left almost no margin for doubts, when it came to decide which framework to use. Highly advise trying it out.
The hobbies were laborious, mainly because they didn’t all have the same size, and had to be aligned in the proper positions, with their heights, sizes, and margins being meticulously adjusted to fit appropriately.
The image was eventually pushed to docker hub, and I’ll do my best to keep it up-to-date. It can be found here.
4. Critical Points
AI tools
- Maybe this is not the best use case to explore the potential of AI tools but it does help you improve and learn about what you are doing.
- Code that writes itself is pointless. You have to put in the hours and the manual labor if you want to be able to control the solutions you create.
- If an AI tool does all the work for you, you’ll quickly become engulfed by lack of context and, if the solution becomes too large, you’ll slowly but surely drown in cognitive complexity.
- To avoid that, I’d rather look at AI tools as something that I can rely on as a productivity booster, rather than some sort of black magic that I can resort to whenever I’m feeling lazy.
- AI tools might be permeable to bad input. If you think of AI tools as Data ingestion, Data processing, and Predictive modelling tools — which by the way they are — you’ll probably realize that ingesting poisoned data can eventually lead to poisonous predictions. This might end up in really, really bad decisions.
- Having the PDF produced prior to this project, helped a lot.
- Overall, I saved time by having a clear idea of what I wanted to do. Prompts weren’t so vague and the responses were more objective.
- I fed my original two-paged resume to another tool, ChatPDF, to see whether would it produce something similar to what I ended up achieving. It failed brilliantly.
- Being a custom layout with custom stylings, its mobile friendliness was rendered obsolete. This means additional future work.
Final consideration
I consider the goal as accomplished. There’s a lot of dynamic resumes out there, with lots of good ideas, but this is my own and I want to have an easy way of keeping it up-to-date, while being able to showcase it with a few clicks.
End Result
I had to collapse sections, shift hobbies from the right side to the left, and remove more information than what I initially intended to. Even with all that, I stayed true to the original style and layout:
Looks better than I expected. If you’re wondering, or think it might be of use, below is the full log of the conversation I had with ChatGPT.
As for the next steps, I’ll follow up by having this template mobile friendly(er). I’ll link that second blog here:
Don’t forget to follow me and leave some claps for those updates if you fancied the post!
