added basic content to projects page - pictures, links to projects; made sure all links point to new page

src/index.py

@@ -217,8 +217,8 @@ def index():
 @route('/projects')
 def projects():
     """projects page"""
-    info = {'css': 'game', 'title': 'blessfrey - about the game', 'year': datetime.datetime.now()}
+    info = {'css': 'projects', 'title': 'chimchooree projects', 'year': datetime.datetime.now()}
-    return template('game.tpl', info)
+    return template('projects.tpl', info)
 
 # Presskit Page - Presskit Template - product, developer info
 @route('/presskit')

src/static/css/projects.css

@@ -0,0 +1,166 @@
+* {
+    padding:0;
+    margin:0;
+    font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
+}
+
+a {
+    text-decoration: none;
+}
+ul { list-style-position: inside; }
+
+.grid {
+    display: grid;
+    grid-template-columns: auto 800px auto;
+    grid-template-rows: 25px 90px repeat(2, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #900C3F;
+}
+
+.blessfrey-logo { 
+    grid-area: 1 / 2 / 2 / 3; 
+    padding-top: 5px;
+    color: #FBDAEC;
+}
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 4;
+    background-color: #900C3F;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 3;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 17px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+} 
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-link {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%)
+}
+.nav-link a {
+    font-size: 18px;
+}
+
+.nav-link a:link {
+    color: #66C7F4;
+}
+.nav-link a:visited {
+    color: #CB9CF2;
+}
+.nav-link a:hover {
+    color: #F9B3D7;auto
+}
+.nav-link a:active {
+    color: #f463ad;
+}
+
+/* Body */
+
+.body-row {
+    grid-area: 3 / 1 / 4 / 4;
+    background-color: #080410;
+}
+
+.content { 
+    grid-area: 3 / 2 / 4 / 3; 
+    display: grid;
+    grid-template-columns: repeat(2, 400px);
+    grid-template-rows: 90px repeat(2, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+}
+
+.project-header {
+    grid-area: 1 / 1 / 2 / 3;
+}
+
+.featured {
+    grid-area: 2 / 1 / 3 / 3;
+}
+
+.featured-box {
+}
+
+.more {
+    grid-area: 3 / 1 / 4 / 3;
+}
+
+.more-box {
+}
+
+.footer-row {
+    grid-area: 4 / 1 / 5 / 4;
+    background-color: #080410;
+}
+
+.footer-content {
+    background-color: #080410;
+    color: #F9B3D7;
+    padding-top: 5px;
+    text-align: right;
+    overflow: hidden;
+    box-shadow: 0 100vh 0 100vh #581845;  
+}

src/static/css/template

@@ -0,0 +1,16 @@
+.parent {
+display: grid;
+grid-template-columns: auto 800px auto;
+grid-template-rows: 25px 90px repeat(2, auto);
+grid-column-gap: 0px;
+grid-row-gap: 0px;
+}
+
+.whitespace { grid-area: 1 / 1 / 2 / 4; }
+.logo { grid-area: 1 / 2 / 2 / 3; }
+.nav-row { grid-area: 2 / 1 / 3 / 4; }
+.nav-bar { grid-area: 2 / 2 / 3 / 3; }
+.body-row { grid-area: 3 / 1 / 4 / 4; }
+.content { grid-area: 3 / 2 / 4 / 3; }
+.footer-row { grid-area: 4 / 1 / 5 / 4; }
+

src/views/nav.tpl

@@ -11,8 +11,8 @@
             </div>
         </div>
         <div class="nav-game">
-            <a href="/game">
+            <a href="/projects">
-                <img src="/static/img/btn/skillbtn.png" alt="game" style="width:85px;height:55px;">
+                <img src="/static/img/btn/skillbtn.png" alt="projects" style="width:85px;height:55px;">
             </a>
             <div class="nav-link">
                 <a href="/projects">projects</a>

src/views/projects.tpl

@@ -0,0 +1,45 @@
+% rebase('frame.tpl')
+<!--Content-->
+    <div class="content">
+    
+        <div class="project-header">
+            projects
+        </div>    
+        <div class="featured">
+            <div class="featured-box">
+                <img src="/static/img/ent/blessfrey.png" alt="(image: blessfrey screenshot)"><br>
+                <br>
+                <a href="diary/entries/200806">blessfrey - action RPG in Godot Engine</a><br>
+                <br>
+            </div>
+            <div class="featured-box">
+                <img src="/static/img/ent/CatStore_small.png" alt="(image: CatStore screenshot)"> <br>
+                <br>
+                <a href="https://gitlab.com/chimchooree/cat-store">Cat Store - text-based cat show + breeding sim in Java (IntelliJ)</a> <br>
+                <br>
+            </div>
+        </div>    
+        <div class="more">
+            <div class="more-box">
+                <img src="/static/img/ent/SmallThingThatMakesThings.png" alt="(image: Small Thing That Makes Things keyart)" width="400" height="179"> <br>
+                <br>
+                <a href="diary/entries/200903">Small Thing That Makes Things - game jam game in Godot Engine</a> <br>
+                <br>
+            </div>
+            <div class="more-box">
+                <img src="/static/img/ent/pretendOS_catchat.jpeg" alt="(image: pretendOS screenshot)" width="400" height="225"> <br>
+                <br>
+                <a href="diary/entries/201126">pretendOS - pretend desktop in Godot Engine</a> <br>
+                <br>
+            </div>
+            <div class="more-box">
+                <img src="/static/img/ent/gitlab_publicprojects.png" alt="(image: GitLab page screenshot)"> <br>
+                <br>
+                <a href="https://gitlab.com/users/chimchooree/projects">public GitLab repo</a> <br>
+                <br>
+            </div>
+        </div>    
+
+    </div>
+
+    <div class="footer-row"> </div>