diff --git a/typescript/og-website/src/components/Blog.ts b/typescript/og-website/src/components/Blog.ts
new file mode 100644
index 0000000..1c39f80
--- /dev/null
+++ b/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>
+`
diff --git a/typescript/og-website/src/components/Projects.ts b/typescript/og-website/src/components/Projects.ts
index 11350d9..c9b3fe6 100644
--- a/typescript/og-website/src/components/Projects.ts
+++ b/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">
- <div class="project-thumbail background" style=${style}></div>
+ <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>
- <a class="project-demo" href=${project.demo}>Demo</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>
`
diff --git a/typescript/og-website/src/constants/navButtons.ts b/typescript/og-website/src/constants/navButtons.ts
index 1b5823b..4ebe1af 100644
--- a/typescript/og-website/src/constants/navButtons.ts
+++ b/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
}
]
diff --git a/typescript/og-website/src/constants/projects.ts b/typescript/og-website/src/constants/projects.ts
index cc0359c..4455478 100644
--- a/typescript/og-website/src/constants/projects.ts
+++ b/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'
}
]
diff --git a/typescript/og-website/src/static/assets/gears.jpg b/typescript/og-website/src/static/assets/gears.jpg
new file mode 100644
index 0000000..edd076d
Binary files /dev/null and b/typescript/og-website/src/static/assets/gears.jpg differ
diff --git a/typescript/og-website/src/static/css/blog.css b/typescript/og-website/src/static/css/blog.css
new file mode 100644
index 0000000..4c03b50
--- /dev/null
+++ b/typescript/og-website/src/static/css/blog.css
@@ -0,0 +1,4 @@
+div#blog-title {
+ font-size: 3rem;
+ font-family: var(--title-font);
+}
diff --git a/typescript/og-website/src/static/css/config.css b/typescript/og-website/src/static/css/config.css
index b02624b..9992dba 100644
--- a/typescript/og-website/src/static/css/config.css
+++ b/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;
}
diff --git a/typescript/og-website/src/static/css/nav.css b/typescript/og-website/src/static/css/nav.css
index e49a616..828ae5e 100644
--- a/typescript/og-website/src/static/css/nav.css
+++ b/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;
}
diff --git a/typescript/og-website/src/static/css/projects.css b/typescript/og-website/src/static/css/projects.css
index 4409e6b..6fca104 100644
--- a/typescript/og-website/src/static/css/projects.css
+++ b/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;
}
diff --git a/typescript/og-website/src/static/css/utility.css b/typescript/og-website/src/static/css/utility.css
index 50a888e..f1bdbd0 100644
--- a/typescript/og-website/src/static/css/utility.css
+++ b/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 {
diff --git a/typescript/og-website/src/types/Project.ts b/typescript/og-website/src/types/Project.ts
index f42cd33..5387674 100644
--- a/typescript/og-website/src/types/Project.ts
+++ b/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
}