Block Library – MINIML Blocks

Dynamic Resume – CV

Written by Isaac on February 26, 2022. Posted in Block Library. Leave a Comment

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: /resume

Now 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 serve

The 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!

Portfolio Collection

Written by Isaac on February 20, 2022. Posted in Block Library, Collections. Leave a Comment

A portfolio site block for miniml. I use this for my personal portfolio hosted for free on GitHub. Check it out here for reference: https://isaacjosephhorton.github.io/portfolio There is some nice javascript gallery functionality and its of course responsive and looks great on mobile.

Start by adding the following code to your existing _config.yml file. (What we are doing is adding a collection to our site and the collection type is portfolio_items linked to /portfolio/:path/.)

# 5. Collections
collections:
  portfolio_items:
    output: true
    permalink: /portfolio/:path/

Under #Build Settings in the _config.yml add the build for the portfolio items by copying the code below:

  - scope:
      path: ""
      type: "portfolio_items"
    values:
      layout: "portfolio"

It should look something like this (your configuration may differ):

# Build settings

markdown: kramdown
defaults:
  -
    scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      comments: true  # add comments to all blog posts
  -
    scope:
      path: "" # all files
    values:
      layout: "page"
      show-avatar: true

  - scope:
      path: ""
      type: "portfolio_items"
    values:
      layout: "portfolio"

Now create a new page located under _pages called portfolio.html and copy in this code:

---
layout: page
title: Portfolio
subheading: The works of IJH
permalink: /portfolio
---

<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid uk-height-match="target: > div > .uk-card > .uk-card-media-top">
  {% for portfolio_item in site.portfolio_items reversed %}

  <div class="uk-animation-toggle" tabindex="0">
    <div class="uk-card uk-card-default uk-card-hover">
      <div class="uk-card-media-top uk-background-cover uk-height-large uk-border-rounded" style="background-image:url({{portfolio_item.image}});">
        <a href="{{site.baseurl}}/portfolio/{{portfolio_item.slug}}/" class="uk-display-block uk-height-large"></a>
      </div>
    </div>
  </div>


  {% endfor %}

</div>

Now create a directory called _portfolio_items and this is where your items will be stored. Start by creating an example.md file.

---
date: 2022-02-12 12:37:18 -0800
tags:
- photography
- design
title: American Mother
client: Black History Month
image: "/assets/img/uploads/african-mother.jpg"
---
Linocut Illustration of American Mother.

This is just an example and you can use any front matter you like. The front matter contains the portfolio details as would pertain to a post.

Now create a new file called portfolio.html in your _layouts directory and copy in the following code:

---
layout: default
---

<hr class="uk-margin-remove-top">

<div>
  <div class="uk-section-xsmall">
	  <div class="uk-container">
		  <div uk-grid>
	    <article class="uk-article uk-width-3-4@l">
		    <div uk-lightbox>
		    {% if page.svg %}
		     <a href="{{ page.image }}" data-alt="Image"><img src="{{ page.image }}" alt="{{ page.title | downcase }}"></a>
		    {% else %}
		   <a href="{{ page.image }}" data-alt="Image"><img src="{{ page.image }}" alt="{{ page.title | downcase }}"></a>
		    {% endif %}

		    </div>
	    </article>

	    <div class="uk-width-1-4@l ">
		    <div class="uk-card">
			     <h6 class="uk-margin-remove-bottom">Title:</h6> <h5 class="uk-margin-remove-top">{{page.title}}</h5>
			     {% if page.client %}<h6 class="uk-margin-remove-bottom">Client:</h6><h5 class="uk-margin-remove-top">{{page.client}}</h5>{% endif %}
			     {% if page.subheading %}<h5 class="uk-margin-small-bottom">{{page.subheading}}</h5>{% endif %}
			      <h6 class="uk-margin-remove-bottom">Date:</h6> <h5 class="uk-margin-remove-top"><span class="date">{{page.date | date: "%b %d, %Y "}}</span></h5>
		    {{content}}
		    </div>
		      {% include post-pagination.html %}
	    </div>

		  </div>
     </div>
  </div>
  {% include totop.html %}
</div>

Once complete run this command in your cli to test your site:

bundle exec jekyll serve

If all looks good then you can publish and make some decisions on how youre going to create and edit files.

Using forestry.io

I have found that forestry.io is an interesting free way of adding content management. Just sync it up by adding your front matter to its backend and then you can edit and create pages like a regular cms.

Category: Block Library

Dynamic Resume – CV

Portfolio Collection

Using forestry.io