Hello & Welcome! 👋

You have found the readme for the rehanbutt.com codebase. Feel free to explore the code and see how my site is built.

I use Jekyll as my static site templating engine and Foundation for Site as my CSS and JS framework. Current using Version 6.6.3

Curious how the site has evolved over time? Check out the releases over the years. Pretty fun to time travel! Like my own personal waybackmachine. 😉

Production Notes

Run Jekyll with --livereload automatically refresh the page with each change you make to the source files jekyll s --livereload or --port 4500 to run a couple Jekyll sites in parallel. When using --livereload for concurrent sites make sure to set a port for --livereload like jekyll s --livereload --livereload-port 8080 --port 4001

Jekyll uses the Kramdown markdown parser allowing for extended functionality, such as adding classes to elements.

• Styling Jekyll Markdown
• Kramdown - Quick Reference

Jekyll also uses the Liquid language as its templating language. Here are a couple great references:

• Shopify Cheat Sheet
• Liquid Cheat Sheet
• Jekyll Cheat Sheet
• Liquid for Designs Wiki
• cloudcannon Tutorial Directory
• Generating an array with Liquid

Content Notes

Projects

• When a project is featured an additional tile image is needed
• Tile Titles should be _____
• Tile Descriptions should say something along the lines of a one-liner around the central theme of the project
• Page Titles should be very similar to Tile Titles with but may be a longer phrase of the project

Photography

• Hero images for photosets should be 2x1 in aspect ratio
• Map View should follow the Figma template
• Detailed map should be exported as 1x1 and tightly bound
  • https://www.amcharts.com/svg-maps/
• Images should be at max 1400px wide and size less then 1mb
• Flag SVG template in Figma

Dribbble Share Links

<a href="https://rehanbutt.com">My Website</a> | <a href="https://twitter.com/naher94/">Twitter</a> | <a href="https://instagram.com/naher94">Instagram</a> | <a href="https://500px.com/naher94">500px</a> | <a href="https://www.pinterest.com/naher94/">Pinterest</a> | <a href="https://github.com/naher94">Github</a>

.MOV to .MP4

ffmpeg -i demo.mov -vcodec h264 demo.mp4 Convert .mov to .mp4 on a Mac

Development Notes

General

• Foundation Grid XY reference for centering and other special properties:

  • https://get.foundation/sites/docs/flexbox-utilities.html
  • https://zurb.com/university/lessons/176

• Internal links using custom collections <a href="https://github.com/naher94/rehanbutt.com/blob/gh-pages/{% link _projects/file.markdown %}">click here</a>

• To fix a whitespace issue when using a Jekyll includes remove the - on either end of the tag. {% include external-link.html %} instead of {%- include external-link.html -%}

Code Snippets are helpful in populating common sections such as a resource's frontmatter. For information on available option within a VSCode Snippets reference their development documentation.

External Links

• External links should use the external-link component via {{% include external-link.html %}} which includes a non-visual tag noting it goes external for enhanced accessibility <a target="_blank" href="https://rehanbutt.com/">Rehan Butt<span class="visually-hidden">Opens a new window</span></a>

2D Array Hack

In some cases using a 2D array is cleaner and easier than setting up a collection. Even though its not formally supported in Liquid it is possible with this hack.

1. Create a string with 2 sets of unique dividing characters in the case below , and |
2. Assign and split that string to generate an array
3. Loop through that array to generate the 2nd degree element
4. Use that content of the 2nd degree element!
5. Done!

   {% assign array-list = "(A|B|C),(D|E|F),(H|I|J)" | remove: "(" | remove: ")" | split: ',' %}
   {% for item in array-list %}
   {% assign each = item | split: '|' %}
   <p>{{each[0]}}</p>
   <p>{{each[1]}}</p>
   <p>{{each[2]}}</p>
   {% endfor %}

<!-- example from 2020.rehanbutt.com -->
<!-- devices -->
<div class="devices cell grid-x">
  <div class="cell">
    <h3>Device breakdown</h3>
  </div>
  {% assign device-list = "(🇺🇸|73%|Desktop),(🇨🇳|26%|Mobile),(🇩🇪|1%|Tablet)" | remove: "(" | remove: ")" | split: ',' %}

  {% for device in device-list %}
  {% assign each = device | split: '|' %}
  <div class="cell small-6 medium-4 device-container">
    <div class="device-wrapper">
      <p class="flag">{{each[0]}}</p>
      <p class="percentage">{{each[1]}}</p>
      <p class="device-type">{{each[2]}}</p>
    </div>
  </div>
  {% endfor %}
</div>

_projects Frontmatter Tags

Type post

Type post-hero

Some additional Frontmatter Tags when using the post-hero template

Type post-photo

Type post-article

note that there is a separate file for article styling articles.scss

_resources Frontmatter Tags

_work-experience Frontmatter Tags

_speaking Frontmatter Tags

Reference

Places that Link to Me