Dynamic Resume – CV
The Dynamic Resume block is an easy to use container for all your resume elements and has some really nice show/hide features for work history as well as breaking up the resume into easy to include segments which help to organize the nested structure of content into a readily usable and viewable resume that is sure to knock the socks of your competitors auto generated mumbo jumbo. Watch peoples eyes roll as you explain how easy it is to build with miniml. I built this for my own online resume and you can see how it works here: https://isaacjosephhorton.github.io/resume
Lets get started by creating a new link in the navigation at _data/navigation.yml. Add this code to both the main and mobile sections of the YAML file.
- title: "Resume"
url: /resumeNow create a new markdown document at _pages/resume.md and copy in the following content and edit to suit your needs.
---
layout: page
title: Resume
subheading: Isaac Joseph Horton
permalink: /resume
---
## Designer, Engineer, UI/UX, Prototyping, Product Design, Animation
Build it, break it, make it better.
<hr>
# Professional Summary
<div uk-grid><div class="uk-width-1-2@m">
Accomplished Designer offering 20 years of experience developing and designing print, websites, back-end interfaces and e-commerce for very large brands. Diligent in building and maintaining relationships with many clients serving nearly every industry with a focus on music brands, motorsports, ski and boutique businesses. Expertise in marketing strategies for e-commerce and conversion rate maximization. Successful record of expanding network connections through persuasive marketing and messaging.
</div>
<div class="uk-width-1-2@m">
<img class="uk-width-1-1" src="{{ "/assets/img/resume-preview.jpg" | relative_url }}" width="800" height="200">
</div></div>
# Client List
{% include clientlist.html %}
# Work History
{% include workhistory.html %}
# Education
Completed some schooling although most of my learning comes from real world experience doing jobs over the past 20+ years. Much of my education comes from the people who inspire me and the artists that mean something to me. Formally all my schooling was in Cuesta Community College in San Luis Obispo.
# References
Due to privacy concerns, please contact Isaac directly for references.
You can clearly see that there is a combination of markdown and html on the page. Change the subheading to your name and adjust the summary content and title/subtitle.
Create a new page titled workhistory.html located in _includes directory and paste in the following snippet of code.
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<li><a href="#">2017-2021 IJH</a></li>
<li><a href="#">2016-2017 Live Eyewear</a></li>
<li><a href="#">2008-2015 Shopatron</a></li>
<li><a href="#">2003-2008 Liquid Ratio</a></li>
<li><a href="#">1999-2003 New Image Technologies</a></li>
<li><a href="#">1996–1999 Record Grafix</a></li>
</ul>
<hr>
<ul class="uk-switcher uk-margin">
<li>
{% include workhistory/ijh.html %}
</li>
<li>
{% include workhistory/le.html %}
</li>
<li>
{% include workhistory/shopatron.html %}
</li>
<li>
{% include workhistory/liquidratio.html %}
</li>
<li>
{% include workhistory/nit.html %}
</li>
<li>
{% include workhistory/recordgrafix.html %}
</li>
</ul>
<hr>
Edit this content to suit your needs. Each list item on top has a corresponding include below. You can easily remove or add more of these to suit your needs.
Create a new directory titled “workhistory” in the _includes directory. You can see the reference being made by each include. Make sure to create a separate file for each of your past jobs that is located in the directory you just created for example _includes/workhistory/shopatron.html
Use the following code block in each page changing only the contents and not altering the html.
<h2>Role: Graphic Designer, Animator, Illustrator</h2>
<h3 class="uk-margin-remove-top">Mostly building websites for old clients</h3>
<hr>
<div uk-grid>
<div class="uk-width-1-3@m">
<img class="" src="{{ "/assets/img/h-logo.svg" | relative_url }}" width="150" uk-svg>
<h3>IJH</h3>
<p>Design, Animation, Branding</p>
<p>Building and rebuilding web architectures using design standards. Application of responsive web layouts using frameworks like Bootstrap and UiKit. Animation for feature video clips used in live performances on Resolume by Light Eyes.</p>
</div>
<div class="uk-width-2-3@m">
<img class="uk-margin-bottom" src="{{ "/assets/img/workexamples/girl-in-grass.jpg" | relative_url }}">
<img class="uk-margin-bottom" src="{{ "/assets/img/workexamples/Faye-Hunter.jpg" | relative_url }}">
<img class="uk-margin-bottom" src="{{ "/assets/img/workexamples/Ella-Fontaine.jpg" | relative_url }}">
<img class="uk-margin-bottom" src="{{ "/assets/img/workexamples/black-vogue.jpg" | relative_url }}">
</div>
</div>
Make sure to add any content referenced in the work examples to the /assets/img directory.
Once you have all the work examples built, create a new page called clientlist.html and save it to the _includes directory.
Paste in the following making changes as needed to content:
<div class="uk-column-1-2@m uk-column-1-3@l">
<ul class="uk-nav uk-nav-primary">
<li><a href="https://www.pacificdrums.com/">Pacific Drums & Percussion</a></li>
<li><a href="https://kawaius.com">Kawai</a></li>
<li><a href="https://www.gretschdrums.com/">Gretsch Drums</a></li>
<li><a href="https://www.katpercussion.com/">KAT Percussion</a></li>
<li><a href="https://meinlpercussion.com/en/home">Meinl</a></li>
<li><a href="https://www.klipsch.com/">Klipsch</a></li>
<li><a href="https://www.kicker.com/">Kicker</a></li>
<li><a href="https://jbl.com">JBL</a></li>
</ul>
</div>
<hr>Make sure to add in only the clients you’ve worked with in the past.
Now you can run a build to test the new page.
bundle exec jekyll serveThe way everything is broken up makes it very easy to understand. You can easily create new sections in the resume.md file and add corresponding files to the _includes directory to keep things organized. This makes it easy to add an expanded education section or a skills section etc.
Once you are done, push your changes to github and pat yourself on the back. Please send me links to anything you’ve made using this resume block. I would love to see it!
