Added new layout for landing page and updated about page

Finally circling back on this pull request after letting it sit for 2 years! I'm going to try to get the rest of the content moved over so I can EOL my WordPress instance and finally have content updates for the website
bsclifton · Feb 27, 2023 · 0b151ef · 0b151ef
1 parent bbccd83
commit 0b151ef
Show file tree

Hide file tree

Showing 22 changed files with 109 additions and 30 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -71,4 +71,4 @@ DEPENDENCIES
   tzinfo-data
 
 BUNDLED WITH
-   1.17.2
+   2.2.25
diff --git a/_includes/header.html b/_includes/header.html
@@ -20,7 +20,7 @@
           {%- for path in page_paths -%}
             {%- assign my_page = site.pages | where: "path", path | first -%}
             {%- if my_page.title -%}
-            <a class="page-link{% if page.url == my_page.url %} active{% endif %}" href="{{ my_page.redirect_url | my_page.url | relative_url }}">{{ my_page.nav_title | my_page.title | escape }}</a>
+            <a class="page-link{% if page.url == my_page.url %} active{% endif %}" href="{{ my_page.url | relative_url }}">{{ my_page.nav_title | my_page.title | escape }}</a>
             {%- endif -%}
           {%- endfor -%}
         </div>

diff --git a/_layouts/default-landing.html b/_layouts/default-landing.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body>
+
+    {%- include header.html -%}
+
+    <main class="page-content landing-page-content" aria-label="Content">
+      <div class="wrapper landing-wrapper">
+        {{ content }}
+      </div>
+    </main>
+
+    {%- include footer.html -%}
+
+  </body>
+
+</html>
diff --git a/about.md b/about.md
@@ -2,10 +2,22 @@
 layout: page
 title: About me
 nav_title: About
+url: /about/
 permalink: /about/
 ---
 
-I'm a developer at [Brave Software](https://brave.com) and enjoy taking part in the open source community.
+I joined **Brave** in 2016 where I work on the [Brave web browser](https://brave.com).
+As the VP of Engineering, I get to manage development on the Desktop, Android, and iOS versions of the product.
+It's been amazing seeing our company and product grow!
+
+<div class="about-pictures">
+  <image src="/assets/about-brave-together-2017.png" />
+
+  <image src="/assets/about-brave-brendan.jpg" height="200px" />
+  <image src="/assets/about-brave-chrome-cake.jpg" height="200px" />
+  <image src="/assets/about-brave-cake-cut.jpg" height="200px" />
+
+</div>
 
 -----
 
@@ -16,11 +28,11 @@ I'm a developer at [Brave Software](https://brave.com) and enjoy taking part in
     </td>
     <td>
 <div markdown="1">
-  Before joining Brave in 2016, I spent 8 years as a developer at GoDaddy working on different hosting products (2008 - 2016). These included dedicated hosting, VPS (virtual private server), shared hosting, and their associated UIs.
+  Before **Brave**, I spent 8 years as a developer at **GoDaddy** working on different hosting products (2008 - 2016). These included dedicated hosting, VPS (virtual private server), shared hosting, and their associated UIs.
 
-  Before GoDaddy, I was in the manufacturing (TMG) organization at Intel (2005 – 2008). I worked on middleware products (COM/DCOM, guaranteed delivery services, etc) used at the D1D factory in Hillsboro, Oregon. D1D is/was the flagship factory where the ground-breaking process engineering took place for processors. Products I worked on were used in the 1264 (65nm), 1266 (45nm) and 1268 (32nm) processes.
+  Before **GoDaddy**, I was in the manufacturing (TMG) organization at **Intel** (2005 – 2008). I worked on middleware products (COM/DCOM, guaranteed delivery services, etc) used at the D1D factory in Hillsboro, Oregon. D1D is/was the flagship factory where the ground-breaking process engineering took place for processors. Products I worked on were used in the 1264 (65nm), 1266 (45nm) and 1268 (32nm) processes.
 
-  Before Intel and GoDaddy, I also worked for several small businesses in the payment processing industry.
+  Before **Intel** and **GoDaddy**, I also worked for several small businesses in the payment processing industry.
 </div>
     </td>
     <td>
@@ -29,10 +41,26 @@ I'm a developer at [Brave Software](https://brave.com) and enjoy taking part in
   </tr>
 </table>
 
+<div class="about-pictures">
+  <image src="/assets/about-intel.png" height="250px" />
+  <image src="/assets/about-godaddy.jpg" height="250px" />
+</div>
+
 -----
 
-Some friends and I formed *Morgopolis Studios, LLC* in 2012 and released our first video game, [Magicians &amp; Looters](http://mal-game.com/), for the Xbox 360 Indie Games marketplace. It’s also available [for PC on Steam](https://store.steampowered.com/app/284180/Magicians__Looters/).
+Some friends and I formed **Morgopolis Studios, LLC** in 2012 and released our first video game, [Magicians &amp; Looters](http://mal-game.com/), for the Xbox 360 Indie Games marketplace. It’s also available [for PC on Steam](https://store.steampowered.com/app/284180/Magicians__Looters/).
+
+<div class="about-pictures">
+  <image src="/assets/about-mal-uat.jpg" height="140px" />
+  <image src="/assets/about-mal-screencap.jpg"  height="140px" />
+  <image src="/assets/about-mal-team.jpg" height="140px" />
+</div>
 
 -----
 
-I’ve been writing software since the early 1990s (when I was 10 or 11 years old) and I still love it. I attended and got a bachelor's degree from UAT (University of Advancing Technology) here in the valley (Tempe, AZ).
+I’ve been writing software since the early 1990s (when I was 10 or 11 years old) and I still love it. I attended and got a bachelor's degree from **UAT** (University of Advancing Technology) here in the valley (Tempe, Arizona, USA).
+
+<div class="about-pictures">
+  <image src="/assets/about-old-performa-476.png" height="250px" />
+  <image src="/assets/about-old-apartment-tempe.jpg" height="250px" />
+</div>
diff --git a/assets/about-badges.png b/assets/about-badges.png
diff --git a/assets/about-brave-brendan.jpg b/assets/about-brave-brendan.jpg
diff --git a/assets/about-brave-cake-cut.jpg b/assets/about-brave-cake-cut.jpg
diff --git a/assets/about-brave-chrome-cake.jpg b/assets/about-brave-chrome-cake.jpg
diff --git a/assets/about-brave-together-2017.png b/assets/about-brave-together-2017.png
diff --git a/assets/about-godaddy.jpg b/assets/about-godaddy.jpg
diff --git a/assets/about-intel.png b/assets/about-intel.png
diff --git a/assets/about-mal-museum.jpg b/assets/about-mal-museum.jpg
diff --git a/assets/about-mal-screencap.jpg b/assets/about-mal-screencap.jpg
diff --git a/assets/about-mal-team.jpg b/assets/about-mal-team.jpg
diff --git a/assets/about-mal-uat.jpg b/assets/about-mal-uat.jpg
diff --git a/assets/about-old-apartment-tempe.jpg b/assets/about-old-apartment-tempe.jpg
diff --git a/assets/about-old-performa-476.png b/assets/about-old-performa-476.png
diff --git a/assets/landing-portrait.jpg b/assets/landing-portrait.jpg
diff --git a/assets/main.scss b/assets/main.scss
@@ -4,6 +4,10 @@
 
 @import "minima";
 
+/***********************************
+Tweaks to minima
+***********************************/
+
 body {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 14px;
@@ -87,29 +91,44 @@ hr {
   margin-top: 20px;
   margin-bottom: 20px;
   border: 0;
-  border-top: 1px solid #eee;
+  border-top: 1px solid #e7e7e7;
 }
 
-/* landing page */
-#portrait-jumbo {
+/***********************************
+Landing page styles
+
+- used on layout `default-landing`
+- only used on `index.md`
+***********************************/
+
+.landing-page-content {
+  padding-top: 0;
+}
+.landing-wrapper {
+  max-width: 100%;
+  padding: 0;
+}
+.landing-portrait-jumbo {
+  background-color: #000;
   text-align: center;
   padding: 0px;
   margin-bottom: 0px;
+  h1 {
+    color: #fff;
+    font-size: 24pt;
+    margin-top: 15px;
+  }
+  border-bottom: 5px solid #337ab7;
+  margin-bottom: 20px;
 }
-.portrait {
-  display: inline-block;
-  background-image: url(sprite-index.jpg);
-  background-position: 0px 0px;
-  width: 322px;
-  height: 322px;
-  margin: 0px;
-  border: 0px;
-}
-#intro {
+.landing-intro {
   text-align: center;
+  font-size: 14pt;
 }
 
-/* /about/ page */
+/***********************************
+About page styles
+***********************************/
 table#about-me {
   border: 0px;
   padding: 0 15px;
@@ -118,12 +137,20 @@ table#about-me {
   }
   margin-bottom: 0;
 }
+.about-pictures {
+  text-align: center;
+  width: 100%;
+  img {
+    border: 1px solid #e7e7e7;
+    margin: 5px;
+  }
+}
 .badge {
-  background-image: url(sprite-badges.png);
+  background-image: url(about-badges.png);
   width: 116px;
   height: 181px;
   margin: 0px;
-  border: 0px;
+  border: 1px solid #e7e7e7;
 }
 .badge-godaddy {
   background-position: 0px 0px;
@@ -133,9 +160,11 @@ table#about-me {
 }
 @media (min-width: 800px) {
   .badge { display: block; }
+  .about-pictures { display: inline-block; }
 }
 @media (max-width: 799px) {
   .badge { display: none !important; }
+  .about-pictures { display: none !important; }
   .media-left,
   .media-right { padding: 0 !important; }
 }
diff --git a/blog.md b/blog.md
@@ -4,6 +4,7 @@
 
 layout: home
 title: Blog
-redirect_url: https://blog.clifton.io
 nav_title: Blog
+url: /blog/
+permalink: /blog/
 ---
diff --git a/index.md b/index.md
@@ -2,20 +2,20 @@
 # Feel free to add content and custom Front Matter to this file.
 # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
 
-layout: page
+layout: default-landing
 ---
 
-<div id="portrait-jumbo">
-  <div class="icons portrait"></div>
+<div class="landing-portrait-jumbo">
+  <img src="/assets/landing-portrait.jpg" width="240px" />
   <h1>Hi, I'm Brian :)</h1>
 </div>
 
-<div id="intro" markdown="1">
+<div class="landing-intro" markdown="1">
   My goal is to make a difference in people's lives.
 
   I've been writing code since 1993 and I want to share all the things I've learned along the way.
 
   I'm always learning new things, <a title="My GitHub profile" href="https://github.com/{{site.github_username}}" rel="me nofollow noopener" target="_blank">contributing on GitHub</a>,
   <a title="My Twitter account" href="https://www.twitter.com/{{site.twitter_username}}" rel="me nofollow noopener" target="_blank">tweeting about coding</a>,
   and <a title="My blog" href="{{site.blog}}">blogging</a>.
-</div>
+</div>
diff --git a/learn.md b/learn.md
@@ -2,6 +2,7 @@
 layout: page
 title: Learn programming
 nav_title: Learn
+url: /learn/
 permalink: /learn/
 ---
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,4 +71,4 @@ DEPENDENCIES @@
       tzinfo-data
     BUNDLED WITH
-.17.2
+.2.25