typescript(og-website): finished projects page

Signed-off-by: prescientmoon <git@moonythm.dev>

typescript/og-website/src/components/Blog.ts

@@ -0,0 +1,9 @@
+import { html } from '@popeindustries/lit-html-server'
+import { withCss } from '../helpers/withCss'
+
+export const Blog = () => html`
+    ${withCss('blog')}
+    <div class="full center">
+        <div id="blog-title">This page is still in construction!</div>
+    </div>
+`

typescript/og-website/src/components/Projects.ts

@@ -7,11 +7,23 @@ export const Project = (project: ProjectConfig) => {
     const style = `background-image: url(/static/assets/${project.thumbail})`
     return html`
         <div class="project">
+            <a href=${project.demo || project.docs || project.source}>
                 <div class="project-thumbail background" style=${style}></div>
+            </a>
             <div class="project-name">${project.name}</div>
             <div class="project-links">
                 <a class="project-source" href=${project.source}>Source</a>
+
+                ${project.demo
+                    ? html`
                           <a class="project-demo" href=${project.demo}>Demo</a>
+                      `
+                    : ''}
+                ${project.docs
+                    ? html`
+                          <a class="project-demo" href=${project.docs}>Docs</a>
+                      `
+                    : ''}
             </div>
         </div>
     `

typescript/og-website/src/constants/navButtons.ts

@@ -1,7 +1,7 @@
 import { UrlConfig } from '../types/UrlConfig'
 import { Home } from '../components/Home'
 import { Projects } from '../components/Projects'
-import { html } from '@popeindustries/lit-html-server'
+import { Blog } from '../components/Blog'
 
 export const buttons: UrlConfig[] = [
     {
@@ -17,6 +17,6 @@ export const buttons: UrlConfig[] = [
     {
         url: '/blog',
         name: 'Blog',
-        component: () => html``
+        component: Blog
     }
 ]

typescript/og-website/src/constants/projects.ts

@@ -12,5 +12,11 @@ export const projects: ProjectConfig[] = [
         demo: 'https://visual-studio-paint.herokuapp.com/',
         source: 'https://github.com/Mateiadrielrafael/visual-studio-paint',
         thumbail: 'paint.jpg'
+    },
+    {
+        name: 'Reix',
+        docs: 'https://mateiadrielrafael.github.io/reix/',
+        source: 'https://github.com/Mateiadrielrafael/reix',
+        thumbail: 'gears.jpg'
     }
 ]

typescript/og-website/src/static/css/blog.css

@@ -0,0 +1,4 @@
+div#blog-title {
+    font-size: 3rem;
+    font-family: var(--title-font);
+}

typescript/og-website/src/static/css/config.css

@@ -9,5 +9,8 @@
     --glow-color-1: white;
     --glow-color-2: cyan;
     --glow-color-3: blue;
-    --glow-duration: 2s;
+    --transition-duration: 1s;
+    --project-var-multiplier: 3;
+    --project-thumbail-scale: 1.1;
+    --project-thumbail-size: 200px;
 }

typescript/og-website/src/static/css/nav.css

@@ -14,6 +14,7 @@ a.nav-button {
 }
 
 a.nav-button:hover {
-    animation: glow var(--glow-duration, 1s) ease-in-out infinite alternate;
+    animation: glow var(--transition-ruration, 1s) ease-in-out infinite
+        alternate;
     --glow-color-3: red;
 }

typescript/og-website/src/static/css/projects.css

@@ -1,7 +1,21 @@
 div.project-thumbail {
-    width: 200px;
-    height: 200px;
+    width: var(--project-thumbail-size, 100px);
+    height: var(--project-thumbail-size, 100px);
     display: block;
+    transition: transform
+            calc(var(--transition-duration) / var(--project-var-multiplier, 3)),
+        border-radius
+            calc(var(--transition-duration) / var(--project-var-multiplier, 3));
+}
+
+div.project-thumbail:hover {
+    transform: scale(
+        var(--project-thumbail-scale, 1),
+        var(--project-thumbail-scale, 1)
+    );
+    border-radius: calc(
+        var(--spacing, 1rem) / var(--project-var-multiplier, 3)
+    );
 }
 
 div.project {
@@ -10,10 +24,11 @@ div.project {
     border-radius: var(--spacing, 1rem);
 }
 
-div.project > div {
+div.project > * {
     margin: var(--spacing, 1rem);
     text-align: center;
     box-sizing: border-box;
+    display: block;
 }
 
 div.project-name {
@@ -34,5 +49,6 @@ div#projects {
 }
 
 div.project-links *:hover {
-    animation: glow var(--glow-duration, 1s) ease-in-out infinite alternate;
+    animation: glow var(--transition-ruration, 1s) ease-in-out infinite
+        alternate;
 }

typescript/og-website/src/static/css/utility.css

@@ -17,7 +17,8 @@
 }
 
 .glow {
-    animation: glow var(--glow-duration, 1s) ease-in-out infinite alternate;
+    animation: glow var(--transition-ruration, 1s) ease-in-out infinite
+        alternate;
 }
 
 @keyframes glow {

typescript/og-website/src/types/Project.ts

@@ -1,6 +1,7 @@
 export interface ProjectConfig {
     name: string
     source: string
-    demo: string
+    demo?: string
+    docs?: string
     thumbail: string
 }