Design work

src/index.py

@@ -31,11 +31,7 @@ def error(code):
         503: 'Our website is experiencing some issues and will be back shortly.',
         505: 'Your browser tried to use a HTTP version we don\'t support. Check it is up to date.'
     }
-    errorText = f'''
-        <div id='error'>
-            <h2>{code}: {error_definitions.get(int(code))}</h2>
-            <p>{error_desc.get(int(code))}</p>
-            <a href='/'>Click here to return to our homepage</a>
-        </div>
-    '''
-    return render_template('error.html', post=errorText)
+
+    return render_template('error.html', code=code,
+                           description=error_definitions.get(int(code)), 
+                           long_description=error_desc.get(int(code)))

src/projects.py

@@ -58,13 +58,13 @@ def projects():
     with open(path.join(md_directory, 'categories.json')) as categories_file:
         categories = json.load(categories_file)
 
-    return render_template('projects.html', articles=articles_to_return, all_categories=categories)
+    return render_template('projects.html', articles=articles_to_return, all_categories=categories, title='Projects', description='A selection of projects I\'ve been involved in')
 
 @app.route('/projects/category/<category>/')
 def category(category):
     with open(path.join(md_directory, 'categories.json')) as categories_file:
         categories = json.load(categories_file)
-
+    print(categories)
     the_category = categories.get(category)
 
     if the_category is None:

src/static/js/filter_projects.js

@@ -1,11 +1,10 @@
-window.onload = function () {
+function update_filter() {
     var project_filter = document.getElementById("filter_category");
-    project_filter.onchange = function () {
-        if (project_filter.value == 'all') {
-            window.location.href = '/projects';
-        }
-        else {
-            window.location.href = '/projects/category/' + project_filter.value;
-        }
+    console.log(project_filter.value)
+    if (project_filter.value == 'all') {
+        window.location.href = '/projects';
     }
-}
+    else {
+        window.location.href = '/projects/category/' + project_filter.value;
+    }
+}

src/static/js/update_copyright.js

@@ -0,0 +1,5 @@
+window.onload = function () {
+    var current_year = new Date().getFullYear();
+    var copyright = document.getElementById('cr-year');
+    copyright.textContent = current_year;
+}

src/static/style/desktop.css

@@ -48,4 +48,11 @@
         width: 20vw;
         height: 25vw;
     }
+
+    #top-nav{
+        float: right;
+        width: fit-content;
+        padding-top: 20px;
+        padding-right: 20px;
+    }
 }

src/static/style/mobile.css

@@ -5,10 +5,6 @@ body{
     background-color: rgba(23, 22, 20, 1);
 }
 
-main{
-    padding: 0 10px 0 10px;
-}
-
 h1, h2, h3{
     font-family: "Orbitron", sans-serif;
     font-optical-sizing: auto;
@@ -17,17 +13,23 @@ h1, h2, h3{
 }
 
 header{
-    width: 100%;
-    height: 25vh;
-    display: flex;
-    align-items: center;
     background-color: 4c4c4c;
+    height: 25vh;
+    width: 100%;
 }
 
 footer{
     background-color: 4c4c4c;
-    padding: 30px;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 10vh;
+}
+
+#logo-container{
+    width: 100%;
+    justify-content: center;
+    display: flex;
 }
 
 #logo{
@@ -111,4 +113,40 @@ a{
     width: 80vw;
     border: 2px solid #e5e5e5;
     margin: 10px;
+}
+
+.project-thumb{
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#filter {
+    float: right;
+}
+
+#top-nav{
+    width: 100%;
+    text-align: center;
+    padding-bottom: 30px;
+}
+
+#top-nav>a{
+    text-decoration: none;
+    padding: 0 10px 0 10px;
+    font-weight: bold;
+}
+
+#top-nav>a:hover{
+    text-decoration: underline;
+}
+
+#error-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 65vh;
+}
+
+#error{
+    text-align: center;
 }

src/templates/error.html

@@ -1,5 +1,11 @@
 {% include 'header.html' %}
-<section id="error">
-    {{ post | safe }}
-</section>
+<main>
+    <div id="error-container">
+        <div id='error'>
+            <h2>{{ code }}: {{ description }}</h2>
+            <p>{{ long_description }}</p>
+            <a href='/'>Click here to return to our homepage</a>
+        </div>
+    </div>
+</main>
 {% include 'footer.html' %}

src/templates/footer.html

@@ -1,5 +1,5 @@
 <footer>
-    <p>&copy 2024 Jake Charman. This site uses cookies.</p>
+    <p>&copy <span id="cr-year"></span> Jake Charman. This site uses cookies.</p>
 </footer>
 </body>
 </html>

src/templates/header.html

@@ -11,10 +11,17 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <script src="/static/js/filter_projects.js"></script>
+    <script src="/static/js/update_copyright.js"></script>
 </head>
 <body>
     <header>
-        <div id="logo">
-            <a href='/'><h1>Jake Charman</h1></a>
+        <nav id="top-nav">
+            <a href="/">About</a>
+            <a href="/projects/">Projects</a>
+        </nav>
+        <div id="logo-container">
+            <div id="logo">
+                <a href='/'><h1>Jake Charman</h1></a>
+            </div>
         </div>
     </header>

src/templates/projects.html

@@ -2,7 +2,7 @@
     <main>
         <nav id="filter">
             <label for="filter_category">Filter:</label>
-            <select id="filter_category" name="filter_category">
+            <select id="filter_category" name="filter_category" onchange="update_filter()">
                 <option value="all">All Categories</option>
                 {% for category in all_categories %}
                 <option {{ 'selected' if current_category == category }} value="{{ category }}">{{all_categories.get(category).get('title')}}</option>
@@ -14,7 +14,7 @@
         <section id="projects">
             {% for row in articles %}
             <div class="project">
-                <img src="{{ row.image }}">
+                <img class="project-thumb" src="/projects/image/{{ row.image }}">
                 {% if row.get('link') is not none %}
                 <a href="{{ row.link }}"><h3>{{ row.title }}</h3></a>
                 {% else %}