How do I stand out?
There comes a time in every job candidate's life when they finally realize that the job market is flooded!
Even the most niche or specialist positions have recruiters's inboxes flooded with applications from potential candidates. The modern candidate needs a way to stand out from the rest.
This is where Portfolio/Personal websites come in. They let you stand out against fellow candidates while letting you showcase your skills and projects and letting people get a dose of your personality at the same time. (Multitasking)
To separate myself from the pack I decided to code my portfolio site and host it on Azure Static Web Apps to replicate a real-world application. Instead of just making a WordPress site like a filthy casual.
This project is based on the Portfolio Workshop found here.
What is a Portfolio Website
A portfolio website is a unique way to present your work and introduce yourself to others. It functions as an evergreen platform for your initiatives, case studies, and personal data. It's also one of the finest methods to convey your personality, background, and skills.
Architecture
Project
Account Management
This relates to the setup of the Azure account's configurations to avoid unexpected mistakes.
In our Azure account, we first created two new management groups: one for our production/live environment and one for our development/testing environment.
For billing purposes, we establish a fresh "pay-as-you-go" subscription under each management group. This will make it simpler for us to keep track of how much each group's use of our resources is costing us. In order to assist us in keeping our budget, we also set up spending notifications.
Create Gatsby App
Gatsby is an open-source static website generator and framework that enables you to produce website content using React components and a variety of data sources, including JSON, Markdown, a database, an API, and more.
I created the Gatsby app on my local environment (fancy words for my laptop) making use of a starter theme. (Yay for Code Reuse)
Push to GitHub
I then created a new repository on my GitHub account called my-portfolio. After which I connected that repository to my local environment and then pushed the code. The code was now being displayed on my GitHub repository my-portfolio.
Azure Static Web Apps
Azure static web app is a service that uses a code repository to automatically generate and deploy full-stack web apps to Azure. Azure Static Web Apps' workflow is designed to fit a developer's typical daily routine. Based on code modifications, apps are built and deployed.
Azure works directly with GitHub or Azure DevOps to monitor a branch of your choosing when you establish an Azure Static Web Apps resource. Every time you accept pull requests or push commits to the monitored branch, a build is launched automatically, and your app and API are then deployed to Azure.
Static assets are supplied from locations that are spread out globally rather than from a standard web server when using static web apps. Due to the physical proximity of the files to end users, this distribution greatly speeds up file serving. A full back-end server is not even necessary because API endpoints are hosted utilizing a serverless architecture.
It also features CI/CD, asset hosting, APIs, SSL certificates, route control, etc.
Deploy to Azure Static Web Apps
Open Azure Portal.
Created a new resource group my-portfolio.
Entered name and region.
Signed into Github and selected the relevant repository and main branch.
In Build Details, choose the Gatsby build preset.
Clicked Review + Create, then clicked Create.
The Deployment Workflow
Using Github Action runs every new commit triggers a new build and deployment. You can preview changes separately using a pull request.
Added Domain Name
Mapped custom domains to the website using an external name registrar. (Namecheap) in my case. This was done by creating ALIAS, CNAME, and TXT records in Namecheap.
Created a subdomain for the blog tab since it leads to my blog which is hosted and managed on hashcode.
Created a subdomain for the resume tab since it leads to my resume page which is actually another project you can read about here.
Changed Content
Personalized the website to my tastes by adding my details and removing sections I felt were unnecessary.
Conclusion
This was a great entry-level project to get a taste of the cloud. It also left me with a great portfolio website. (If I say so myself)
The way the portfolio is structured is almost as if it has a pseudo multi-cloud structure with the blog and resume pages being entirely separate applications.
I plan to make use of the GraphQL integration of the theme to add more functionality through widgets which will be mini projects you can interact with on the main portfolio website. (Watch out for that!)
That's all from me for now...Take care.
Useful resources
One last thing before I'm fully gone. Here is the link again for the Portfolio Workshop as well as the quickstart guide from Microsoft Documentation.
Here is also a link to the Gatsby starter theme I used and view the final site here.