add freelancing work

_data/projects.yml

@@ -10,6 +10,29 @@ large:
       generate: 'linear-gradient(120deg, #4179f4, #f4a941)'
       background_color: '#4179f4'
 
+
+apps:
+  - name: Food Sense
+    role: Contributor
+    description:
+      primary: Identify your potential food sensitivities and minimize reactions.
+    link: https://apps.apple.com/us/app/food-sense-guide/id1457896728
+    image:
+      url: /assets/img/food-sense.png
+      alt: Food Sense icon
+      background_color: '#F8F2FF'
+
+  - name: Mideo
+    role: Contributor
+    description:
+      primary: Play music while you record video.
+    link: https://apps.apple.com/us/app/mideo-record-video-with-music/id1358135284
+    image:
+      url: /assets/img/mideo.png
+      alt: Mideo icon
+      background_color: '#F2F2F7'
+
+
 hackathons:
   - name: SiriQuery
     description:

_sass/layouts/_index.scss

@@ -1,5 +1,5 @@
 body {
-  max-width: 1300px;
+  max-width: 1200px;
   margin: 0 auto !important;
   float: none !important;
 }
@@ -275,21 +275,29 @@ hr {
       overflow: hidden;
     }
 
-    h2, p, a {
-      padding: 0 6%;
-    }
-
     h2 {
-      margin: 0;
-      padding: 5px 0px;
+      margin: 5% 6% 3%;
+      line-height: 0;
+    }
+
+    .role {
+      margin: 0 0 0 5px;
+      font-size: 12pt;
+      display: inline;
+      font-weight: normal;
+      @include themed() {
+        color: t($secondary-text-color);
+      }
     }
 
     p {
+      margin: 0 6%;
       font-size: 12pt;
       margin-bottom: 3px;
     }
 
     a {
+      line-height: 1.3;
       font-size: 14pt;
     }
 

index.html

@@ -44,6 +44,33 @@ <h1>My Projects</h1>
   </ul>
 </section>
 
+<hr>
+<section class="projects">
+  <h1>Freelancing</h1>
+  <ul class="project-grid">
+
+    {% assign projects = site.data.projects.apps %}
+    {% for project in projects %}
+    <li class="project-small clickable card">
+      <div role="img" alt="{{ project.image.alt }}" style="
+      background-image: url('{{ site.baseurl }}{{ project.image.url }}');
+      background-size: auto 175px;
+      background-color: {{ project.image.background_color }}
+      ">
+    </div>
+    <h2>
+      <a class="main-link" href="{{ project.link }}">{{ project.name }}</a>
+      {% if project.role %}
+      <p class="role">{{ project.role }}</p>
+      {% endif %}
+    </h2>
+    <p>{{ project.description.primary }}</p>
+    <p>{{ project.description.secondary }}</p>
+  </li>
+  {% endfor %}
+</ul>
+</section>
+
 <hr>
 <section class="projects">
   <h1>Hackathons</h1>