Merge pull request #54 from YuanSamuel/blog-posts

Adding section for blog posts
MLH-Fellowship · Feb 4, 2021 · 4e6a0b3 · 4e6a0b3
2 parents 4eb5aec + c05377e
commit 4e6a0b3
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 70 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -9,7 +9,9 @@ GEM
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
+    eventmachine (1.2.7-x64-mingw32)
     ffi (1.13.1)
+    ffi (1.13.1-x64-mingw32)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
     i18n (1.8.5)
@@ -53,13 +55,22 @@ GEM
     safe_yaml (1.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
+    sassc (2.4.0-x64-mingw32)
+      ffi (~> 1.9)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    tzinfo (1.2.9)
+      thread_safe (~> 0.1)
+    tzinfo-data (1.2021.1)
+      tzinfo (>= 1.0.0)
     unicode-display_width (1.7.0)
+    wdm (0.1.1)
     webrick (1.7.0)
 
 PLATFORMS
   ruby
+  x64-mingw32
 
 DEPENDENCIES
   jekyll (~> 4.1.1)

diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ Achievement example.
   date: Jan 2021
 ```
 
-## Add project posts
+## Add project/blog posts
 
 1. Make a new `.md` file inside of `projects`.
 2. Add the header to your markdown file (see below) and change the title to the name of your blog post.
@@ -66,7 +66,7 @@ layout: page
 - title: Machine Learning Project
   event: MLH Fellowship Explorer Sprint 3 - Batch 1
   date: Fall 2020
-  page-name: sprint1
+  page-name: Sprint1
 ```
 ## Add Contact Us form
 

diff --git a/_data/projects.yml b/_data/projects.yml
@@ -13,8 +13,9 @@
 - title: Fun Game
   event: MLH Fellowship Explorer Sprint 2
   date: Fall 2020 - Batch 1
+  page-name: Sprint2
 
 - title: Flash Card Generator
   event: MLH Fellowship Explorer Sprint 1
   date: Fall 2020 - Batch 1
-  page-name: sprint1
+  page-name: Sprint1
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -2,8 +2,12 @@
     <div class="nav-content">
         <a href="{{ '/' | relative_url }}">
             <div class="nav-logo">
-                <img src="./assets/img/logo.svg" />
-                <a class="nav-link" href="{{ site.url }}/cv/resume.pdf">Resume</a>                
+                <img src="{{ site.url }}/assets/img/logo.svg" />
+            </div>
+            <div class="nav-links">
+                <a class="nav-link" href="{{ site.url }}/">Home</a>
+                <a class="nav-link" href="{{ site.url }}/blog">Blog</a>                
+                <a class="nav-link" href="{{ site.url }}/cv/resume.pdf">Resume</a>
             </div>
         </a>        
     </div>

diff --git a/_includes/template.html b/_includes/template.html
@@ -8,7 +8,7 @@ <h2>{{include.title}}</h2>
       </div>
     {% else %}
         {% if item.page-name %}
-            <a href="{{ site.url }}/projects/{{ item.page-name }}">
+            <a href="{{ site.url }}/projects/{{ item.page-name }}" class="link-card">
         {% else %}
             <a>
         {% endif %}
@@ -19,6 +19,9 @@ <h2>{{include.title}}</h2>
         <p class="location">{% if include.title == "Education" %}{{ item.institute }}{% elsif include.title == "Work Experience" %}{{item.company}}{% else %}{{item.event}}{% endif %}</p>
         <p class="dates">{{ item.dates }}</p>
       </div>
+      {% if item.page-name %}
+      <object type="image/svg+xml" data="./assets/img/launch.svg" class="launch-icon"></object>
+      {% endif %}
     </div>
     {% if include.title == "Projects" %}
         </a>

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -1,20 +1,17 @@
 ---
 layout: default
 ---
-
-<div class="banner">
-    <div class="container">
-        <div class="logo">
-            <a href="{{ site.url }}">
-                <img src="{{ site.url }}/assets/img/logo.svg"/>
-            </a>
-        </div>
-        <div class="title">
-            {{ page.title }}
+<body>
+    {% include navbar.html %}
+    <div class="banner">
+        <div class="container">
+            <div class="title">
+                {{ page.title }}
+            </div>
         </div>
     </div>
-</div>
-
-<div class="container page">
-    {{ content }}
-</div>
+    
+    <div class="container page">
+        {{ content }}
+    </div>
+</body>
diff --git a/_sass/all.scss b/_sass/all.scss
@@ -30,63 +30,82 @@
   }
 }
 
-
 body {
-    background-color: #f5f5f9;
-    margin-bottom: 50px;
+  background-color: #f5f5f9;
+  margin-bottom: 50px;
 }
 h2 {
-    margin-bottom: 20px;
-    margin-top: 20px;
-    font-weight: 700;
-    text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  font-weight: 700;
+  text-align: center;
 }
 
 .card {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: 20px 30px;
-    background-color: white;
-    border-radius: .375rem;
-    padding: 1.5em;
-    font-size: $card_font_size;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 20px 30px;
+  background-color: white;
+  border-radius: 0.375rem;
+  padding: 1.5em;
+  font-size: 1.2em;
+  font-size: $card_font_size;
+  position: relative;
+
+  .launch-icon {
+    position: absolute;
+    right: 14px;
+    top: 14px;
+    pointer-events: none;
+  }
+}
+
+.link-card:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+.link-card {
+  .card:hover {
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+  }
 }
 
 a {
-    color: black;
+  color: black;
 }
 
 .info {
-    p {
-        margin-top: 5px;
-        margin: 0px;
-        text-align: left;
-    }
-
-    .title {
-        font-size: 500;
-        font-weight: bold;
-    }
-
-    .location {
-        font-size: medium;
-        font-weight: 400;
-    }
-
-    .dates {
-        font-size: small;
-        color: #404040;
-    }
+  p {
+    margin-top: 5px;
+    margin: 0px;
+    text-align: left;
+  }
+
+  .title {
+    font-size: 500;
+    font-weight: bold;
+  }
+
+  .location {
+    font-size: medium;
+    font-weight: 400;
+  }
+
+  .dates {
+    font-size: small;
+    color: #404040;
+  }
 }
 
 .icon {
-    width: 70px;
-    height: 70px;
-    margin-right: 20px;
-    padding: 10px;
-
-    img {
-        width: 100%;
-    }
+  width: 70px;
+  height: 70px;
+  margin-right: 20px;
+  padding: 10px;
+
+  img {
+    width: 100%;
+  }
 }
diff --git a/_sass/navbar.scss b/_sass/navbar.scss
@@ -12,14 +12,20 @@
     width: 350px;
 }
 
-.nav-link {
+.nav-links {
     position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    flex-direction: row;
+}
+
+.nav-link {
     color: white;
-    top: 10px;
-    right: 10px;
+    font-weight: 400;
 }
 
-a{
+a {
     transition: 0.5s;
 }
 
@@ -28,7 +34,6 @@ a:hover, a:focus {
     transition: 0.5s;
 }
 
-
 .nav-content .nav-logo {
     height: 60px;
     margin: auto;

diff --git a/assets/img/launch.svg b/assets/img/launch.svg
diff --git a/blog.html b/blog.html
@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+<body>
+  {% include navbar.html %}
+  <h2>BLOG POSTS</h2>
+  <div class="card-container">
+    {% for item in site.data.projects %}
+    {% if item.page-name %}
+    <a href="{{ site.url }}/projects/{{ item.page-name }}" class="link-card">
+      <div class="card">
+        <div class="info">
+          <p class="title">{{ item.page-name }}</p>
+          <p class="dates">{{ item.date }}</p>
+        </div>
+        <object type="image/svg+xml" data="./assets/img/launch.svg" class="launch-icon"></object>
+      </div>
+    </a>
+    {% endif %}
+    {% endfor %}
+</body>
diff --git a/projects/sprint1.md → projects/Sprint1.md b/projects/sprint1.md → projects/Sprint1.md
diff --git a/projects/Sprint2.md b/projects/Sprint2.md
@@ -0,0 +1,20 @@
+---
+title: Sprint 2 Project
+layout: page
+---
+
+## Inspiration
+
+Cat ipsum dolor sit amet, attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently, swipe at owner's legs and jump five feet high and sideways when a shadow moves. Pee in human's bed until he cleans the litter box groom forever, stretch tongue and leave it slightly out, blep yet sit in a box for hours scamper, so do i like standing on litter cuz i sits when i have spaces, my cat buddies have no litter i live in luxury cat life. 
+
+## What it does
+
+Cat ipsum dolor sit amet, attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently, swipe at owner's legs and jump five feet high and sideways when a shadow moves. Pee in human's bed until he cleans the litter box groom forever, stretch tongue and leave it slightly out, blep yet sit in a box for hours scamper, so do i like standing on litter cuz i sits when i have spaces, my cat buddies have no litter i live in luxury cat life.
+
+## How we built it
+
+Cat ipsum dolor sit amet, attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently, swipe at owner's legs and jump five feet high and sideways when a shadow moves. Pee in human's bed until he cleans the litter box groom forever, stretch tongue and leave it slightly out, blep yet sit in a box for hours scamper, so do i like standing on litter cuz i sits when i have spaces, my cat buddies have no litter i live in luxury cat life.
+
+## Challenge we ran into
+
+Cat ipsum dolor sit amet, attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently, swipe at owner's legs and jump five feet high and sideways when a shadow moves. Pee in human's bed until he cleans the litter box groom forever, stretch tongue and leave it slightly out, blep yet sit in a box for hours scamper, so do i like standing on litter cuz i sits when i have spaces, my cat buddies have no litter i live in luxury cat life.