loading...
Cover image for Showing my Awesomeness

Showing my Awesomeness

vickilanger profile image Vicki (she/her) ・3 min read

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.

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

and a preview from Twitter Card Validator
screenshot of the validated twitter card showing the correct image, the description, and title from the meta tags

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">
Enter fullscreen mode Exit fullscreen mode

and a preview from Facebook Sharing Debugger
screenshot of the debugged Facebook shared post showing the correct image, the description, and title from the meta tags

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.

Pixelated view of my profile picture


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

"""
my_portfolio.md: a introductory page about me and my awesomeness
13 January 2020
@vicki_langer
"""
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide
Collapse
reritom profile image
Tomas Sheers

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.

Collapse
vickilanger profile image
Vicki (she/her) Author

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

Collapse
abdurrkhalid333 profile image
Abdur Rehman Khalid

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.

  1. 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.

  2. 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.

  3. 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.

Collapse
vickilanger profile image
Vicki (she/her) Author

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.

Collapse
abdurrkhalid333 profile image
Abdur Rehman Khalid

That is Very Kind of you.

Collapse
eleftheriabatsou profile image
Eleftheria Batsou

I think it looks cool and definitely different from other personal-sites!
Good job :)

Collapse
vickilanger profile image
Collapse
nyamador profile image
Desmond

Awesome one Vicki!
This is one impressive way of showcasing your portfolio.

Collapse
vamsikrish profile image
Vamsi Krishna

This looks really good. Now I want to make something for myself inspired by this.

Collapse
vickilanger profile image
Vicki (she/her) Author

Thanks 😊

I look forward to seeing what you come up with.

Collapse
molecula451 profile image
Paul

Good job

Collapse
vickilanger profile image
Vicki (she/her) Author

Oh yeah! I forgot that was there. Thank you. I’ll use that.