Supposedly a portfolio can be helpful when you're looking for a job and it can be useful when trying showing off your projects.
This week’s goal was to build a site for my portfolio. I’ve started to do this many times but I kept getting hung up on front end and design stuff. So, I decided I was just going to do something simple with a bit of markdown and a list.
I simply wanted a list of ways to contact me, what I do, and what I've done.
I didn’t end up with just a list. I decided to use a code snippet and defined some variables to show my projects, articles, and links.
I'll be honest, I didn't expect to learn much when just building a site that says "I know some things".
Once I was done writing everything in the
README.md in my github repo, I realized it was ugly and the syntax highlighting was subpar. So, I asked on Twitter, about making it look like my VS Code theme and was told about Prism.js. So, I went on to learn new JS things.
I'm so happy Adam suggested Prism.js as I was not looking forward to attemtping to make this look nice.
Liquid error: internal
I had never needed nor desired to use syntax highlingthing outside of what sites already did for me. I was excited to find out about Prism.js. It was a bit confusing at first, but wasn't too hard to use. Just choose your language, download the js and css files, and add the link and script to your head.
I will say, I didn't want to use the built in color theme, so I had to scour the web for the colors I have in my VS Code theme. It's pretty close now. The only part of the syntax that isn't colored right is the
f in my f-strings.
At a minimum an HTML head should include
viewport, and a
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vicki Langer - Portfolio</title> </head>
Thankfully, Mike reminded me to add these or I would likely have forgotten.
In addition to the required
head tags, I also found ones to make my site look good when posted on Twitter and Facebook.
Here are the added meta tags for Twitter
<meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@vicki_langer"> <meta name="twitter:url" content="https://vickilanger.com/"> <meta name="twitter:title" content="Vicki Langer's Portfolio"> <meta name="twitter:description" content="Quick review of Vicki's coding history"> <meta name="twitter:image" content="https://vickilanger.com/portfolio_preview.jpg"> <meta name="twitter:image:alt" content="Python script with variables declaring name as Vicki, language as Python, and links around the web for github, dev.to, and twitter">
and a preview from Twitter Card Validator
Here are the added meta tags for Facebook
<meta property="og:title" content="Vicki Langer's Portfolio"> <meta property="og:image" content="https://vickilanger.com/portfolio_preview.jpg"> <meta property="og:image:alt" content="Python script with variables declaring name as Vicki, language as Python, and links around the web for github, dev.to, and twitter"> <meta property="og:description" content="Quick review of Vicki's coding history">
and a preview from Facebook Sharing Debugger
Lastly, I needed to add a favicon. I used Favicon.cc to pixelize my profile picture. Though, it looks like you can use them to animate and do other neat things.
- I would like to figure out how to use some sort of liquid tag to pull the contents of my python file into the html
- I am working make this screenreader accessible.
- I'd like to find a way to test the screenreader ability
A link to my Portfolio