diff --git a/content/_index.md b/content/_index.md
index cd97cd6..6b6972f 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -2,7 +2,7 @@
title: Home
---
-## About me
+<!-- ## About me
By day I am a <strong>Pipeline Software Developer</strong> at Toronto-based animation studio
<a target="_blank" href="https://www.industrialbrothers.com">Industrial Brothers</a>
@@ -22,10 +22,10 @@ I am currently working on a few projects, including:
<!-- I am also working on an Internet-Draft:
- [draft-evan-amateur-radio-ipv6](https://datatracker.ietf.org/doc/html/draft-evan-amateur-radio-ipv6) - Globally Unique IPv6 Addressing for Amateur Radio -->
-
+<!--
## Previous work
Some of the more notable things I've worked on in the past are:
- The animated TV series [Daniel Spellbound](https://www.imdb.com/title/tt13983670/)
-- A [fleet of robots at *Raider Robotics*](/robotics/5024)
+- A [fleet of robots at *Raider Robotics*](/robotics/5024) -->
diff --git a/sass/styles/layout.scss b/sass/styles/layout.scss
index 0b4e78b..e2ad2d6 100644
--- a/sass/styles/layout.scss
+++ b/sass/styles/layout.scss
@@ -62,3 +62,102 @@
max-width: unset !important;
}
}
+
+.home-page {
+ .hello {
+ margin-top: 7em;
+ text-align: center;
+ h1 {
+ font-size: 3em;
+ font-weight: bold;
+ }
+ }
+
+ .home-big-cards {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ padding: unset;
+ margin: unset;
+
+ li {
+ list-style: none;
+ max-width: 300px;
+ // max-height: ;
+ width: 100%;
+ margin: 2em;
+ }
+
+ .big-card {
+ height: 400px;
+
+ border: 1px solid grey;
+ border-radius: 5px;
+
+ transition: box-shadow 0.2s ease-in-out;
+
+ &:hover {
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+ }
+
+ $title-height: 2em;
+ .card-image {
+ height: calc(400px - #{$title-height} - 2em);
+ background-color: grey;
+ }
+
+ .card-title {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: $title-height;
+ padding: 1em;
+
+ color:black;
+ font-weight: bold;
+ // background-color: black;
+ }
+ }
+ }
+
+ .home-small-cards {
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ padding: unset;
+ margin: unset;
+
+ li {
+ list-style: none;
+ max-width: 200px;
+ width: 100%;
+ margin: 1.5em;
+ }
+
+ .small-card {
+ border: 1px solid grey;
+ border-radius: 5px;
+
+ transition: box-shadow 0.2s ease-in-out;
+
+ &:hover {
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+ }
+
+ .card-title {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ padding: 1em;
+
+ color:black;
+ font-weight: bold;
+ }
+ }
+ }
+}
diff --git a/sass/styles/typography.scss b/sass/styles/typography.scss
index f86f50c..208df83 100644
--- a/sass/styles/typography.scss
+++ b/sass/styles/typography.scss
@@ -15,6 +15,8 @@
// font-family: "Rubik", sans-serif;
// font-weight: normal;
// }
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;0,800;1,400;1,700;1,800&display=swap');
a {
text-decoration: none;
color: blue !important;
@@ -30,7 +32,8 @@ a {
body {
margin: 0;
- font-family: serif;
+ // font-family: serif;
+ font-family: 'Poppins', sans-serif;
text-align: justify;
}
diff --git a/templates/base.html b/templates/base.html
index 4850b83..277abdc 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -57,10 +57,10 @@
<div class="page">
{# Allow pages to override the content before the navbar #}
- {% block page_start %}{% endblock page_start %}
+ {# {% block page_start %}{% endblock page_start %} #}
{# Navbar #}
- <div class="container">
+ {# <div class="container">
{% include "components/navbar.html" %}
{% if announcement %}
@@ -68,41 +68,19 @@
{% else %}
<br>
{% endif %}
- </div>
+ </div> #}
{# Actual content #}
<div class="page-body">
- <div class="left-side">
- {% block left_side %}
- {% endblock left_side %}
- </div>
- <div>
- {% if redirect_target %}
- <div class="container" style="text-align:center;">
- <h2>Redirection Notice</h2>
- <p>
- You are being redirected to another page.<br>
- Click <a href="{{redirect_target}}">here</a> if this does not happen automatically.
- </p>
- </div>
- {% else %}
- <article id="content" class="container markdown-body">
- {% block content %}{% endblock content %}
- </article>
- {% endif %}
+
+ {% block content %}{% endblock content %}
+
+ {# Footer #}
+ {% include "components/footer.html" %}
- {# Footer #}
- {% include "components/footer.html" %}
- </div>
</div>
</div>
- {# External scripts #}
- {#
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
- integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
- crossorigin="anonymous"></script> #}
-
{# Brid.gy h-card #}
<a href="https://ewpratten.com" class="h-card" rel="me" hidden>Evan Pratten</a>
diff --git a/templates/components/footer.html b/templates/components/footer.html
index c15a01a..41f3bff 100644
--- a/templates/components/footer.html
+++ b/templates/components/footer.html
@@ -1,4 +1,4 @@
-{% block component_styles %}
+{# {% block component_styles %}
{{ super() }}
<link rel="stylesheet" href="/styles/components/footer.css">
{% endblock component_styles %}
@@ -16,10 +16,5 @@
Copyright © 2017 - {{ now() | date(format="%Y") }}
<strong>Evan Warren Pratten</strong>
</p>
- {# <p>
- <a href="/press">Press Kit</a>
- ·
- <a href="/contact">Contact</a>
- </p> #}
<br>
-</div>
\ No newline at end of file
+</div> #}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index fb2fb1e..9487a9b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -43,8 +43,73 @@
{# Page content #}
{% block page_start %}
-{% include "components/about-card.html" %}
+{# {% include "components/about-card.html" %} #}
{% endblock page_start %}
{% block content %}
-{{ section.content | safe }}
+{# {{ section.content | safe }} #}
+
+<div class="home-page">
+ <div class="hello">
+ <h1>Hi, I'm Evan Pratten</h1>
+ </div>
+
+ <div class="home-cards">
+ <ul class="home-big-cards">
+ <li>
+ <a href="/software">
+ <div class="big-card">
+ <div class="card-image"></div>
+ <div class="card-title"><span>Software</span></div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a href="/blog">
+ <div class="big-card">
+ <div class="card-image"></div>
+ <div class="card-title"><span>Blog</span></div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a href="/music">
+ <div class="big-card">
+ <div class="card-image"></div>
+ <div class="card-title"><span>Music</span></div>
+ </div>
+ </a>
+ </li>
+ </ul>
+ <ul class="home-small-cards">
+ <li>
+ <a href="/radio">
+ <div class="small-card">
+ <div class="card-title">
+ <span>Radio</span>
+ </div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a href="/network">
+ <div class="small-card">
+ <div class="card-title">
+ <span>Network</span>
+ </div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a href="/photos">
+ <div class="small-card">
+ <div class="card-title">
+ <span>Photography</span>
+ </div>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </div>
+</div>
+
{% endblock content %}
\ No newline at end of file