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. 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 suggested Prism.js as I was not looking forward to attemtping to make this look nice.
Liquid error: internal
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. 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.
<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)
<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.
@vicki_langer Looks good! I like the style. Only critiques would be to add necessary <head> tags including title, and relevant viewport and metatags.02:06 AM - 14 Jan 2020
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.
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
/
vickilanger.com
A bit about Vicki
"""
my_portfolio.md: a introductory page about me and my awesomeness
13 January 2020
@vicki_langer
"""
Top comments (12)
I like this a lot. I wouldn't have thought about making a portfolio site in an IDE/code format. It's a fun way of presenting yourself.
Though I agree a bit with Abdur that my_name and what_I_code could be printed instead because the variables are misleading. I would expect the content of a variable called 'my_name' to be just your name, not an introduction string. Oh, the variable could be 'my_introduction' or something.
Either way this is cool and I haven't heard of prism.js, so thanks for introducing that.
I’m definitely going to address that part. Thank you for the suggestions.
I remember wanted to print those statements. I’m not sure why I didn’t, but that’s what I’m going to do. Thank you
That is Very Nice to have a Very Nice Portfolio But there are some things that I want to tell you and you should keep in mind those things as well.
It is very Good Thing to learn Stuff, but in this World there are 3 steps to do a work, first step is to understand what you want to do, the next step is to do what you really want to do and the final step is to do in a perfect manner that you have already dome.
By Making a Coding website, you forgot to practice the best way of writing the clean code, what does it mean? It means that there is repetition in your code for example 'name' and 'my_name' doesn't it means the same thing, if it means the same thing then why you are using two variables for same purpose.
If you are a beginner then it is okay not to follow 'The Professional Way' of writing the code, so try to read more books and practice more as well. It will help you to grow as well.
Thank you for taking time to read my this comment. I hope that it has motivated you to do the work better than you have already done.
I really appreciate your feedback. I will take address the unnecessary duplication.
I would consider myself a beginner, but I would definitely prefer to make sure my code is clean.
That is Very Kind of you.
I think it looks cool and definitely different from other personal-sites!
Good job :)
Thanks 😊
Awesome one Vicki!
This is one impressive way of showcasing your portfolio.
This looks really good. Now I want to make something for myself inspired by this.
Thanks 😊
I look forward to seeing what you come up with.
Good job
Oh yeah! I forgot that was there. Thank you. I’ll use that.