Showing my Awesomeness
Tags: showdev, python
Published: 2020-01-14 21:05:58

## A Site to Show my Awesomeness

### Why build it?

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](https://vickilanger.com). 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.


### Requirements

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](http://dev.to/adam_greenough) suggested Prism.js as I was not looking forward to attemtping to make this look nice.

{% twitter 1216802854591221760 %}

### What I Learned

#### JavaScript Stuff Learned
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](https://prismjs.com/index.html). 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.

```html
<link href="prism.css" rel="stylesheet" type="text/css" />
<script src="prism.js" type="text/javascript"></script>
```

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.

#### HTML Stuff Learned

At a minimum an HTML head should include `charset`, `viewport`, and a `title`. ([reference](https://htmlhead.dev/#recommended-minimum))
```html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vicki Langer - Portfolio</title>
</head>
```

Thankfully, [Mike](https://dev.to/mikeherchel) reminded me to add these or I would likely have forgotten.
{% twitter 1216904273302315008 %}


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
```html
<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](https://cards-dev.twitter.com/validator)
![screenshot of the validated twitter card showing the correct image, the description, and title from the meta tags](https://thepracticaldev.s3.amazonaws.com/i/p6ib5nuwe2748f9nw6sj.png)

Here are the added meta tags for Facebook
```html
  <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](https://developers.facebook.com/tools/debug/)
![screenshot of the debugged Facebook shared post showing the correct image, the description, and title from the meta tags](https://thepracticaldev.s3.amazonaws.com/i/oyhcdmqivoroklbjsvku.png)

Lastly, I needed to add a favicon. I used [Favicon.cc](https://www.favicon.cc) to pixelize my profile picture. Though, it looks like you can use them to animate and do other neat things.

![Pixelated view of my profile picture](https://thepracticaldev.s3.amazonaws.com/i/739o4spomh5hg1lpqt6q.png)


---
### What Next?
- 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 `<code></code>` block.
-  I am working make this screenreader accessible.
- I'd like to find a way to test the screenreader ability


### Links

A link to [my Portfolio](VickiLanger.com)

{% github https://github.com/VickiLanger/vickilanger.com %}