The video is really a Creative Agency webpage, but I followed along and repurposed it for my own ends. I got this out during the time of the #CloudResumeChallenge on LI!
The parameters for the challenge are here. I found this page after I created the site. Hey, still learned something. Isn't the entire point of tech thinking outside the box and figuring stuff out anyway?
Resources: Tyler Potts' Creative Agency webpage with edits to make it an online portfolio - resume.
Why Make a Landing Site?
It's a brief site where a potential client or employer can quickly get the idea of what I do. You see it, and it's less overwhelming than a LinkedIn profile, or a blog with long posts.
I had a similar site made in Webflow, and a links landing page made in Canva. Fine options, however -
- I couldn't get the Webflow elements lined up properly - An issue you'll see in a different form here
- The Canva page kept hiding my borders
+ I wanted to make something myself and host it somewhere. Normally, I use Azure to make closed virtual networks and publicly reachable servers for small production environments - Why not use it for this?
I've done this before in 2019, and there seems to be more features added, like Azure Storage integrated with VS Code and GitHub. Amazing!
(Or they escaped my notice the first time.)
Making The Site
I just copied and pasted the pages and changed the contents on everything but the hamburger menu. A lot of the content is justified-centered under the same <section> header as the opening paragraph and H1. I traded fanciness for a small site.
The Center of It All
On the Services pages, I wanted to center the image in their div boxes.
They would be centered if the viewport was smaller than 980px. When the viewport is the full size, they align to the left in their (margins?). If I disable the width: 250px in the developer tools, it works no matter the screen size. Removing the option in the code does not. The discrepancies in image sizes in the demo did not help, so I adjusted them.
Div HellList components (UL, OL) did not play nicely within the divs on the resume page. I added 'homemade' bullets instead.
Hosting on Azure Static Sites - The Second Time Around
I'm working on updating the Tourism page with new images and a new layout.
When you do this, it takes a few minutes for GitHub to do whatever to make the site work ("We're waiting for the content"). When it works, It's quite speedy, with no delay on the initial images.
I could host all of the code and images in a storage blob on Azure. I'll use GitHub, so I can move everything to a free service later.
I tried to host the site with everything hosted from Azure - no dice.
Some of Microsoft's offerings can be frustrating, but every time I've talked vaguely into the void on Twitter, someone from the appropriate team has always helped me figure it out, and that's the mark of people who want to improve their product. A big thank you to Anthony Chu on the Static Apps and Functions Azure team.
This time it was my fault (Though I did uncover some unclear documentation that's been flagged to be updated).
The file paths for everything were incorrect in the actual code. Even when I put the appropriate files in the main branch, the code kept linking to them via .../agency/js/script.js, for example.
I'm pretty sure we can upload entire directories and various folders in GitHub, I'll double check in the future.
I also learned how to manage the deployment token and update the secret file in my GitHub project's directory.
The other pages (resume, projects) did not display images at first either, so I left the project alone for a few days. When I came back, they were loaded up. Probably took a bit of time from GitHub to work with Azure.
The Site in Action
What Did I Learn?
- Ask for help.
- Check your file paths.
Check out the video here.