Built a new page to host my portfolio.

stickyweather · Dec 5, 2024 · b85ca09 · b85ca09
1 parent c720d5a
commit b85ca09
Show file tree

Hide file tree

Showing 6 changed files with 303 additions and 1 deletion.
diff --git a/_includes/portfolio-items.html b/_includes/portfolio-items.html
@@ -0,0 +1,71 @@
+<div class="featured_content">
+  <div id="content1">
+      <a rel="nofollow" href="https://www.resilientroadways.com/blog/climate-resilient-roads" target="_blank" >
+        <img src="https://www.resilientroadways.com/hubfs/resilience%20road%20sign%20shutterstock_215232757.jpg" alt="">
+        <div class="client-attribution"><strong>Client:</strong> Tensar via Creative Influence</div>
+        <h3>Laying The Foundation For Climate Resilient Roads</h3>
+        <div>Ghostwritten piece for a global infrastructure materials manufacturer.</div>
+        <div class="content-date">September 10, 2020</div>
+      </a>
+  </div>
+
+  <div id="content2">
+      <a rel="nofollow" href="https://workonclimate.org/2022/02/08/ready-to-make-climate-change-your-career-heres-how/" target="_blank" >
+        <img src="https://workonclimate.org/wp-content/uploads/2022/02/Ready-to-Make-Climate-Your-Career-1.jpeg" alt="">
+        <div class="client-attribution"><strong>Client:</strong> Work on Climate</div>
+        <h3>Ready to Make Climate Change Your Career? Here's How.</h3>
+        <div>I interviewed six people who used Work on Climate, at one point or another, to find a new job in a sustainability-related field.</div>
+        <div class="content-date">February 8, 2022</div>
+      </a>
+  </div>
+
+  <div id="content3">
+      <a rel="nofollow" href="https://workonclimate.org/2022/06/02/renewable-energy-careers-how-to-get-started/" target="_blank" >
+        <img src="https://workonclimate.org/wp-content/uploads/2022/06/Renewable-Energy-Careers-How-to-Get-Started_1.jpeg" alt="">
+        <div class="client-attribution"><strong>Client:</strong> Work on Climate</div>
+        <h3>Renewable Energy Careers: How to Get Started</h3>
+        <div>A "how-to" article targeting jobseekers with the goal of getting them to join the Slack community.</div>
+        <div class="content-date">June 2, 2022</div>
+      </a>
+  </div>
+
+  <div id="content4">
+    <a rel="nofollow" href="https://drive.google.com/file/d/1GSfImToCF0sQegWWmYg3DG1c5MYxSsgd/view?usp=sharing" target="_blank" >
+      <img src="/assets/media/Screen Shot 2024-12-05 at 2.29.59 PM.png" alt="">
+      <div class="client-attribution"><strong>Client:</strong> NerdRabbit</div>
+      <h3>AWS Engineer Recruitment Guide</h3>
+      <div>Gated, high-value offer I made during my time as Content Marketing Manager at NerdRabbit to generate inbound leads.</div>
+      <div class="content-date">2022</div>
+    </a>
+  </div>
+
+  <div id="content5">
+    <a rel="nofollow" href="https://nerdrabbit.com/blogs/2022/12/13/data-center-sustainability/" target="_blank" >
+      <img src="https://nerdrabbit.com/wp-content/uploads/2022/12/Data-Center-Sustainability.jpeg" alt="">
+      <div class="client-attribution"><strong>Client:</strong> NerdRabbit</div>
+      <h3>Data Center Sustainability: Making the Internet Green</h3>
+      <div>Informational article I wrote about the sustainability of data centers to convince IT leaders that moving to the cloud can help organizations with their climate goals.</div>
+      <div class="content-date">Decebmer 13, 2022</div>
+    </a>
+  </div>
+
+  <div id="content6">
+    <iframe style="max-width: 100%;" width="560" height="315" src="https://www.youtube.com/embed/7sv6IZGMqpA?si=-aQOQysUJdU1xXhj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      <div class="client-attribution"><strong>Client:</strong> NerdRabbit</div>
+      <h3>How to Find (H)opportunities and Get Paid on Nerdly</h3>
+      <div>Instructional video I made for Nerdly users seeking contract work.</div>
+      <div class="content-date">May 24, 2022</div>
+    </a>
+  </div>
+
+  <div id="content7">
+    <a rel="nofollow" href="https://drive.google.com/file/d/1voHPVU1qdiTOO5hN5eh1_uLQIp20eA3s/view?usp=sharing" target="_blank" >
+      <img src="/assets/media/Screen Shot 2024-12-05 at 2.49.40 PM.png" alt="">
+      <div class="client-attribution"><strong>Client:</strong> EPI-USE</div>
+      <h3>Optimizing our SAP Environment by Migrating to AWS</h3>
+      <div>Ebook I wrote for organizations looking to migrate from legacy, on-prem SAP deployments to cloud-based SAP S/4HANA.</div>
+      <div class="content-date">Decebmer 13, 2022</div>
+    </a>
+  </div>
+
+  </div>
diff --git a/_layouts/portfolio.html b/_layouts/portfolio.html
@@ -0,0 +1,32 @@
+---
+layout: base
+---
+<article class="post">
+
+  <header class="post-header">
+    <div class="profile-header">
+      {%- if page.featured_image -%}
+      <figure class="portfolio-photo">
+        <picture>
+          <source type="image/webp" srcset="{{ page.featured_image }}">
+          <source type="image/jpeg" srcset="{{ page.featured_image }}">
+          <img src="{{ page.featured_image }}" alt="{{ page.alt }}" style="border-radius: 50%;">
+        </picture>
+      </figure>
+      {%- endif -%}
+    <div class="profile-details">
+      <h1 class="portfolio-title">{{ page.title | escape }}</h1>
+      <div class="portfolio-bio">{{ page.description | escape }}</div>
+      <div class="portfolio-linkedin"><strong><span style="padding-right: 0.5em;">Connect:</span></strong><a rel="me" href="{{ page.linkedin | escape }}" target="_blank"><svg class="svg-icon" xmlns="http://www.w3.ord/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="17px" viewBox="0 0 16 17">{% include /social-icons/linkedin.svg %}</svg></a></div>
+      <div class="portfolio-contact">
+        <a href="mailto:{{ page.contact | escape }}"><button>Contact</button></a>
+      </div>
+    </div>
+    </div>
+  </header>
+  <h2>Portfolio</h2>
+  <div>
+    {% include /portfolio-items.html %}
+  </div>
+
+</article>
diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss
@@ -208,6 +208,194 @@ footer {
 
   }
 
+// End homepage styling
 
+// Begin portfolio styling
 
-// End homepage styling
+.profile-header {
+  display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-rows: auto;
+    column-gap: 10%;
+  border-bottom: solid dimgray 1px;
+  padding-bottom: 2%;
+
+  @include media-query($on-palm) {
+    padding-bottom: 5em;
+  }
+
+}
+
+.profile-details {
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0.5fr 1fr 0.5fr 0.5fr;
+  row-gap: 2%;
+
+  @include media-query($on-palm) {
+    grid-template-rows: 15% 70% 15%;
+  }
+
+}
+
+.portfolio-photo {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+}
+
+.portfolio-title {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.portfolio-bio {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.portfolio-linkedin {
+  grid-column: 1 / 2;
+  grid-row: 3 / 4;
+}
+
+.portfolio-contact {
+  grid-column: 1 / 2;
+  grid-row: 4 / 5;
+
+  button {
+    background-color: $brand-color;
+    font-family: $base-font-family;
+    font-size: $base-font-size;
+    font-weight: 700;
+    color: black;
+    border: none;
+    padding: 1% 2% 1%;
+    border-radius: 8px;
+  }
+
+  button:hover {
+    background-color: #FFB219;
+    cursor: pointer;
+  }
+
+  @include media-query($on-palm) {
+    button {
+      padding: 3% 10% 3%;
+    }
+  }
+
+}
+
+.featured_content {
+  display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: auto;
+      column-gap: 3%;
+      row-gap: 3%;
+      padding-bottom: 2em;
+
+  @include media-query($on-palm) {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+
+  .client-attribution {
+    color: dimgray;
+    font-size: $base-font-size*0.9;
+  }
+
+  .content-date {
+    color: dimgray;
+    font-size: $base-font-size*0.9;
+  }
+
+  div {
+
+    a {
+      color: black;
+      }
+
+    }
+
+  #content1 {
+    grid-column: 1;
+    grid-row: 1;
+
+    @include media-query($on-palm) {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+  }
+
+  #content2 {
+    grid-column: 2;
+    grid-row: 1;
+
+    @include media-query($on-palm) {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+  }
+
+  #content3 {
+    grid-column: 3;
+    grid-row: 1;
+
+    @include media-query($on-palm) {
+      grid-column: 1;
+      grid-row: 3;
+    }
+
+  }
+
+  #content4 {
+    grid-column: 1;
+    grid-row: 2;
+
+    @include media-query($on-palm) {
+      grid-column: 1;
+      grid-row: 4;
+    }
+
+  }
+
+  #content5 {
+    grid-column: 2;
+    grid-row: 2;
+
+    @include media-query($on-palm) {
+      grid-column: 1;
+      grid-row: 5;
+    }
+
+  }
+
+  #content6 {
+    grid-column: 3;
+    grid-row: 2;
+
+    @include media-query($on-palm) {
+      grid-column: 1;
+      grid-row: 6;
+    }
+
+  }
+
+  #content7 {
+    grid-column: 1;
+    grid-row: 3;
+
+    @include media-query($on-palm) {
+      grid-column: 1;
+      grid-row: 7;
+    }
+
+  }
+
+}
+
+// End portfolio styling
diff --git a/assets/media/Screen Shot 2024-12-05 at 2.29.59 PM.png b/assets/media/Screen Shot 2024-12-05 at 2.29.59 PM.png
diff --git a/assets/media/Screen Shot 2024-12-05 at 2.49.40 PM.png b/assets/media/Screen Shot 2024-12-05 at 2.49.40 PM.png
diff --git a/portfolio.md b/portfolio.md
@@ -0,0 +1,11 @@
+---
+layout: portfolio
+title: Forrest Brown
+featured_image: https://media.licdn.com/dms/image/v2/C4D03AQG1vCNIfhyfVg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1648646401284?e=1738800000&v=beta&t=ABsjwLpwzwYP2nMKVnuN6HkAFgtDZoyOjyY_pQa5J7U
+alt: Professional headshot of Forrest Brown.
+contact: [email protected]
+linkedin: https://www.linkedin.com/in/forrest-brown/
+permalink: /portfolio/
+description: View my portfolio, featuring select pieces of long form content writing, usually for a B2B tech audience, from my 6+ years as a marketing content writer and manager.
+bio: Driven content manager with over six years of experience in applying exceptional writing skills to produce effective and tailored written and visual content. Adept at utilizing SEO best practices to enhance and grow relevant website traffic and drive conversions. Highly competent in managing the development and execution of projects and integrated campaign strategies.
+---