Skip to content

Commit

Permalink
Homepage update
Browse files Browse the repository at this point in the history
  • Loading branch information
@capncapes
capncapes committed Jul 19, 2024
1 parent 53b2996 commit 7691fc1
Show file tree
Hide file tree
Showing 13 changed files with 275 additions and 841 deletions.
126 changes: 60 additions & 66 deletions _layouts/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,87 +10,81 @@
{% endif %}
{% include header.html %}

<!-- Tabs Section : START -->
<section class="tabs-section">
<div class="mt-10">
<header>
<h2>Blogs</h2>
<p>This is where I organize the things I've learned, whether marketing technology skills or journeys in faith. Don't expect lengthy blog posts, but I do hope to publish often.</p>
</header>
<div class="tabs-container md:shadow">
<div class="tabs">
<input type="radio" name="tabs" id="tab-1" aria-controls="tab-one" checked="checked">
<label class="bold" for="tab-1">Faith</label>

<input type="radio" name="tabs" id="tab-2" aria-controls="tab-two">
<label class="bold" for="tab-2">MarTech</label>

<!-- Tab 1 : START -->
<div class="tab" id="tab-one">
<div class="cards-gallery">
<!-- Hero Section : START -->
<section class="hero-section pt-20 bg-blue">
<video autoplay muted loop>
<source src="/assets/vid/coverr-typing-macbook_2389.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="pb-10">
<div class="text-white sm:px-0 md:px-16">
<h1>Senior Email Developer</h1>
<p class="mb-10">Versatile developer excelling in HTML email engineering and frontend web development, mastering the nuances of each.</p>
<a href="/assets/downloads/senior_sfmc_email_developer_brandon_caples_resume.pdf" download="Brandon_Caples_Senior_Email_Developer_Resume" class="splendid-button" role="button">Download résumé</a>
</div>
</div>
</section>
<!-- Hero Section : END -->

{% for post in site.categories["Faith"] %}
<article itemscope itemtype="https://schema.org/BlogPosting" title="{{ post.title }}" class="card relative{% if post.featured == true %} featured{% endif %} rounded bg-yellow shadow">
<a href="{{ post.url }}">
<div>
<div class="absolute inset-0 w-full h-full z-0">
<picture>
<img class="w-full h-full object-cover rounded" src="{{ site.url }}/assets/img/{{ post.category | downcase }}/{{ post.featured_image.src }}" alt="{{ post.featured_image.alt }}">
</picture>
</div>
</div>
<div class="info absolute w-full h-full top-0 p-0 splendid-flex flex-col justify-end items-end flex-nowrap rounded">
<h4 itemprop="name" class="title w-90 mb-4 mx-auto p-0 text-lg normal">{{ post.title | truncate: 50 }}</h4>
<div class="splendid-flex w-90 mb-3 mx-auto p-0 flex-row justify-between flex-nowrap">
<time itemprop="datePublished" datetime="{{ post.date | date: '%Y-%m-%dT%H:%M:%S-05:00' }}" class="p-0 text-xs normal">{{ post.date | date: "%b %d, %Y" }}</time>
</div>
</div>
</a>
</article>
{% endfor %}
<!-- Cards Gallery : START -->
<section class="posts-section pb-20 md:pb-0">
<header class="pt-20 pb-8 px-7 xl:px-0">
<h2>MarTech Blog</h2>
<p>Welcome to the MarTech blog, home to the latest trends, tips, and tutorials in marketing technology to help you stay ahead in the fast-paced digital landscape. Whether you're looking to enhance your skills or keep up with industry developments, you'll find valuable insights and resources here.</p>
</header>
<div class="cards-gallery mt-0">

{% for post in site.categories["MarTech"] limit:8 %}
<article itemscope itemtype="https://schema.org/BlogPosting" title="{{ post.title }}" class="card relative rounded bg-red shadow">
<a href="{{ post.url }}">
<div>
<div class="absolute inset-0 w-full h-full z-0">
<img class="w-full h-full object-cover rounded" src="{{ site.url }}/assets/img/{{ post.category | downcase }}/{{ post.featured_image.src }}" alt="{{ post.featured_image.alt }}">
</div>
</div>
<!-- Tab 1 : END -->

<!-- Tab 2 : START -->
<div class="tab" id="tab-two">
<div class="cards-gallery">

{% for post in site.categories["MarTech"] %}
<article itemscope itemtype="https://schema.org/BlogPosting" title="{{ post.title }}" class="card relative{% if post.featured == true %} featured{% endif %} rounded bg-yellow shadow">
<a href="{{ post.url }}">
<div>
<div class="absolute inset-0 w-full h-full z-0">
<picture>
<img class="w-full h-full object-cover rounded" src="{{ site.url }}/assets/img/{{ post.category | downcase }}/{{ post.featured_image.src }}" alt="{{ post.featured_image.alt }}">
</picture>
</div>
</div>
<div class="info absolute w-full h-full top-0 p-0 splendid-flex flex-col justify-end items-end flex-nowrap rounded">
<h4 itemprop="name" class="title w-90 mb-4 mx-auto p-0 text-lg normal">{{ post.title | truncate: 50 }}</h4>
<div class="splendid-flex w-90 mb-3 mx-auto p-0 flex-row justify-between flex-nowrap">
<time itemprop="datePublished" datetime="{{ post.date | date: '%Y-%m-%dT%H:%M:%S-05:00' }}" class="p-0 text-xs normal">{{ post.date | date: "%b %d, %Y" }}</time>
</div>
</div>
</a>
</article>
{% endfor %}
<div class="info absolute w-full h-full top-0 p-0 splendid-flex flex-col justify-end items-end flex-nowrap rounded">
<h3 itemprop="name" class="title w-90 mb-6 mx-auto p-0 text-lg normal">{{ post.title | truncate: 50 }}</h3>
<div class="splendid-flex w-90 mb-3 mx-auto p-0 flex-row justify-between flex-nowrap">
<time itemprop="datePublished" datetime="{{ post.date | date: '%Y-%m-%dT%H:%M:%S-05:00' }}" class="p-0 text-xs normal">{{ post.date | date: "%b %d, %Y" }}</time>
</div>
</div>
</a>
</article>
{% endfor %}

<div class="more h-100 bg-green rounded" style="box-shadow:none;">
<a href="/martech/">
<div class="splendid-flex h-100 p-4 flex-col justify-center overflow-hidden rounded">
<div class="placeholder relative w-full bg-transparent text-xl text-center rounded">
<h4 class="mb-0 text-xl normal text-white">More blog posts</h4>
</div>
</div>
<!-- Tab 2 : END -->
</a>
</div>
</div>
</section>
<!-- Cards Gallery : END -->

</div>
<!-- CTA Section : BEGIN -->
<section class="cta-section bg-sand">
<div class="md:splendid-flex pt-20 px-6 xl:px-0 pb-20 flex-row justify-between items-center">
<div class="md:w-1/3">
<h4>Brandon Caples</h4>
<p class="m-0">I'm a digital marketer, a web developer, and an email production technologist. Marketing technology is my passion.</p>
<a href="/about/" class="splendid-cta sm:mb-8">Learn more</a>
</div>
<picture class="block md:mx-12 xl:mx-0">
<source type="image/webp" srcset="/assets/img/brandon_caples_1200x630.webp" >
<img src="/assets/img/brandon_caples_1200x630.jpg" class="w-full md:w-2/3 rounded shadow" alt="Brandon Caples, digital marketer, web developer, email production technologist" />
</picture>
</div>
</section>
<!-- Tabs Section : END -->
<!-- CTA Section : END -->

<!-- Carousel Section : BEGIN -->
<section class="carousel-section pt-12 bg-blue">
<header class="mx-8 md:mx-20 pb-0 text-white">
<h2>Book reviews</h2>
<h2>Book Reviews</h2>
</header>
<div class="carousel splendid-flex relative">
<div class="pt-4 scroll-style">
Expand Down
Binary file added _site/assets/img/brandon_caples_1200x630.JPG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added _site/assets/img/brandon_caples_1200x630.webp
View file
Binary file not shown.
20 changes: 19 additions & 1 deletion _site/assets/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,13 +452,30 @@ ul.navbar-nav {
================================================================ */

.hero-section {
position: relative;
padding: 3.5rem 0;
width: 100%;
max-width: 100%;
background-color: rgb(48,71,94,0.9);
overflow: hidden;
}

.hero-section > * {
padding: 0 1.75rem;
padding: 0 2.75rem;
}

.hero-section video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
max-width: none;
background-size: cover;
transform: translate(-50%, -50%);
z-index: -1;
}

/* ================================================================
Expand Down Expand Up @@ -638,6 +655,7 @@ b.tabs-section header p {
.cta-section > * {
margin: 0 auto;
max-width: 60rem;
column-gap: 1.5rem;
font-size: inherit;
line-height: inherit;
}
Expand Down
Binary file added _site/assets/vid/coverr-typing-macbook_2389.mp4
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion _site/feed.xml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.2">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-07-16T22:53:18-04:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">capncapes.github.io</title><subtitle>A blog site built with Jekyll consisting of two blogs, a feed of book reviews, and other content pages.</subtitle><author><name>Brandon Caples</name><email>brandon.caples@gmail.com</email></author><entry><title type="html">Product photography for marketers</title><link href="http://localhost:4000/martech/2024/product-photography-for-marketers" rel="alternate" type="text/html" title="Product photography for marketers" /><published>2024-05-16T11:59:00-04:00</published><updated>2024-05-16T11:59:00-04:00</updated><id>http://localhost:4000/martech/2024/product-photography-for-marketers</id><content type="html" xml:base="http://localhost:4000/martech/2024/product-photography-for-marketers">&lt;p&gt;Product photography is more than just capturing an image of an item—it’s about telling a story and engaging potential customers. In the world of marketing collateral and digital media, different types of product photography play unique roles. Let’s explore some key photography styles and techniques that can elevate your marketing efforts.&lt;/p&gt;
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.2">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-07-19T00:21:59-04:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">capncapes.github.io</title><subtitle>A blog site built with Jekyll consisting of two blogs, a feed of book reviews, and other content pages.</subtitle><author><name>Brandon Caples</name><email>brandon.caples@gmail.com</email></author><entry><title type="html">Product photography for marketers</title><link href="http://localhost:4000/martech/2024/product-photography-for-marketers" rel="alternate" type="text/html" title="Product photography for marketers" /><published>2024-05-16T11:59:00-04:00</published><updated>2024-05-16T11:59:00-04:00</updated><id>http://localhost:4000/martech/2024/product-photography-for-marketers</id><content type="html" xml:base="http://localhost:4000/martech/2024/product-photography-for-marketers">&lt;p&gt;Product photography is more than just capturing an image of an item—it’s about telling a story and engaging potential customers. In the world of marketing collateral and digital media, different types of product photography play unique roles. Let’s explore some key photography styles and techniques that can elevate your marketing efforts.&lt;/p&gt;

&lt;h2 id=&quot;overhead--birds-eye-view&quot;&gt;Overhead / bird’s eye view&lt;/h2&gt;

Expand Down
Loading

0 comments on commit 7691fc1

Please sign in to comment.