Switched over to using cards in resume

ericmjl · Jan 3, 2020 · 786c42b · 786c42b
1 parent 532e443
commit 786c42b
Show file tree

Hide file tree

Showing 7 changed files with 436 additions and 513 deletions.
diff --git a/app.py b/app.py
@@ -18,7 +18,7 @@ def write_html(resume):
     """
     Write the HTML version of the resume to disk.
     """
-    t = read_template('templates/resume.html.j2')
+    t = read_template('templates/resume.html')
 
     with open('index.html', 'w+') as f:
         f.write(t.render(resume=resume))
@@ -50,7 +50,7 @@ def read_resume(markup=True):
 def index():
     resume = read_resume(markup=True)
     write_html(resume)
-    return render_template('resume.html.j2', resume=resume)
+    return render_template('resume.html', resume=resume)
 
 
 @app.route('/markdown')

diff --git a/index.html b/index.html
diff --git a/resume.md b/resume.md
diff --git a/resume.yaml b/resume.yaml
@@ -28,7 +28,7 @@ experience:
     - company: Novartis Institutes for Biomedical Research (NIBR)
       title: Investigator I
       location: Cambridge MA
-      timeperiod: September 2017-Present
+      timeperiod: September 2017-August 2018
       description: |
         - Investigator in the Scientific Data Analysis (SDA) team reporting to [Mark Borowsky](https://www.linkedin.com/in/borowsky/).
         - Performed internal consulting projects and expanded the SDA Statistical Learning initiative with colleagues.
@@ -81,16 +81,42 @@ education:
 
 skills:
     - type: Languages and Tools
-      text: Python, HTML, CSS, bash scripting, git, Illustrator, Indesign, Photoshop
+      items:
+        - Python
+        - HTML
+        - CSS
+        - bash scripting
+        - git
+        - Illustrator
+        - Indesign
+        - Photoshop
 
     - type: Packages
-      text: Pandas, PyMC3 (Bayesian statistics), Flask, scikit-learn, scikit-image, Keras, NetworkX, Mesa
+      items:
+        - Pandas
+        - PyMC3 (Bayesian statistics)
+        - Flask
+        - scikit-learn
+        - scikit-image
+        - Keras
+        - NetworkX
+        - Mesa
 
     - type: ML/Stats
-      text: Network science, variational autoencoders, random forests, Bayesian inference, graphical models, agent-based models
+      items:
+        - Network science
+        - variational autoencoders
+        - random forests
+        - Bayesian inference
+        - graphical models
+        - agent-based models
 
     - type: Life Sciences
-      text: Microbiology, virology, biochemistry, molecular biology
+      items:
+        - Microbiology
+        - virology
+        - biochemistry
+        - molecular biology
 
 publications:
     - title: Reticulate evolution is favored in influenza niche switching

diff --git a/templates/resume.html b/templates/resume.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+  <head>
+    <meta charset="utf-8">
+    <!-- Bootstrap v4 Imports -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <title>Eric J. Ma's Resume</title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="row" id="name-contact-row">
+        <div class="col-12" id="name-contact-col">
+          <h1 align="center">
+            {{ resume['details']['given_name'] }}
+            {% if resume['details']['middle_name'] %}
+            {{ resume['details']['middle_name'] }}
+            {% endif %}
+            {{ resume['details']['surname'] }}
+          </h1>
+          <p align="center">
+            <i class="fa fa-envelope" aria-hidden="true"></i>
+            <a href="{{ resume['contact']['email']}}">Email</a>
+            |
+            <i class="fa fa-phone" aria-hidden="true"></i>
+            <a href="tel:{{ resume['contact']['phone'] }}">{{ resume['contact']['phone'] }}</a>
+            |
+            <i class="fa fa-linkedin-square" aria-hidden="true"></i>
+            <a href="http://www.linkedin.com/in/yourusername">LinkedIn</a>
+            |
+            <i class="fa fa-github-square" aria-hidden="true"></i>
+            <a href="https://github.com/{{ resume['contact']['github'] }}">GitHub</a>
+            |
+            <i class="fa fa-globe" aria-hidden="true"></i>
+            <a href="{{ resume['contact']['website'] }}">Personal Website</a>
+            |
+            <i class="fa fa-map-marker" aria-hidden="true"></i>
+            {{ resume['contact']['location'] }}
+          </p>
+        </div>
+      </div>
+      <hr>
+      <div class="row" id="skills-title-row">
+        <div class="col-12" id="skills-title-col">
+          <h2>
+            <i class="fa fa-wrench" aria-hidden="true"></i>
+            Skills
+          </h2>
+        </div>
+      </div>
+      <div class="card-group">
+        {% for skill in resume['skills'] %}
+        <div class="card w-25">
+          <div class="card-body">
+            <h5 class="card-title">{{ skill["type"] }}</h5>
+            <p class="card-text"> {{ skill["items"]|join(", ") }}</p>
+          </div>
+          <div class="card-footer"></div>
+        </div>
+        {% endfor %}
+      </div>
+      <hr>
+      <div class="row" id="experience-row">
+        <div class="col-12">
+          <h2>
+            <i class="fa fa-code" aria-hidden="true"></i>
+            Experience
+          </h2>
+        </div>
+        <div class="container" id="experience-details">
+          {% for experience in resume['experience'] %}
+          <div class="card" id="{{ experience['company']}}-card">
+            <div class="card-body">
+              <h5 class="card-title">{{ experience['title'] }}, {{ experience['company'] }}</h5>
+              <small class="text-muted">{{ experience['timeperiod'] }}, {{ experience['location'] }}</small>
+              <p class="card-text">{{ experience['description'] }}</p>
+            </div>
+          </div>
+          <br>
+          {% endfor %}
+        </div>
+      </div>
+      <hr>
+      <div class="row" id="education-row">
+        <div class="col-12" id="education-title-row">
+          <h2>
+            <i class="fa fa-graduation-cap" aria-hidden="true"></i>
+            Education
+          </h2>
+        </div>
+        <div class="container">
+          {% for edu in resume['education'] %}
+          <div class="row" id="{{ edu['degree'] }}-row">
+            <div class="col-9">
+              <p align="left"><b>{{ edu['degree'] }}</b>, {{ edu['department'] }}, {{ edu['school'] }},
+                {{ edu['location'] }}</p>
+            </div>
+            <div class="col-3">
+              <p align="right">
+                <b>{{ edu['timeperiod'] }}</b>
+              </p>
+            </div>
+          </div>
+          {% endfor %}
+
+        </div>
+      </div>
+      <hr>
+      <div class="row" id="publications-row">
+        <div class="col-12" id="publications-title-row">
+          <h2><i class="fa fa-bookmark"></i> Publications</h2>
+          <ul>
+            {% for pub in resume['publications']|sort(attribute='year')|reverse %}
+            <li>
+              {{ pub['title'] }}. <i>{{ pub['journal'] }}</i> ({{ pub['year'] }}). <a href="{{ pub['url'] }}">[link]</a>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+
+    </div>
+  </body>
+  <!-- Boostrap JS imports -->
+  <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
+    integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
+    crossorigin="anonymous"></script> -->
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+  <!-- FontAwesome embed -->
+  <script src="https://use.fontawesome.com/cb9dbe8e41.js"></script>
+
+</html>