diff --git a/public/assets/images/background.svg b/public/assets/images/background.svg
index 135aab6..c9843c9 100644
--- a/public/assets/images/background.svg
+++ b/public/assets/images/background.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/assets/images/icons/about_us.svg b/public/assets/images/icons/about_us.svg
new file mode 100644
index 0000000..598d666
--- /dev/null
+++ b/public/assets/images/icons/about_us.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/images/icons/blog.svg b/public/assets/images/icons/blog.svg
new file mode 100644
index 0000000..f94ce9e
--- /dev/null
+++ b/public/assets/images/icons/blog.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/images/icons/mission.svg b/public/assets/images/icons/mission.svg
new file mode 100644
index 0000000..4c2126b
--- /dev/null
+++ b/public/assets/images/icons/mission.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/images/sprite.svg b/public/assets/images/sprite.svg
new file mode 100644
index 0000000..e8cc3e5
--- /dev/null
+++ b/public/assets/images/sprite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/window.ts b/src/components/window.ts
index 1795965..b97af3c 100644
--- a/src/components/window.ts
+++ b/src/components/window.ts
@@ -7,8 +7,12 @@ export const window = (
const base = document.createElement("div");
base.className =
- "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-topology-border rounded-2xl " +
- dimensions;
+ `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+ border-2 border-topology-border rounded-2xl z-10 ` + dimensions;
+ const base_shadow = document.createElement("div");
+ base_shadow.className =
+ `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+ bg-topology-border rounded-2xl ml-2 mt-2 ` + dimensions;
// Header
const header = document.createElement("div");
@@ -29,6 +33,7 @@ export const window = (
" text-topology-bg !h-6 !w-6'>X";
close.onclick = () => {
canvas.removeChild(base);
+ canvas.removeChild(base_shadow);
};
const maximize = document.createElement("button");
@@ -73,4 +78,5 @@ export const window = (
base.appendChild(header);
base.appendChild(contentArea);
canvas.appendChild(base);
+ canvas.appendChild(base_shadow);
};
diff --git a/src/index.ts b/src/index.ts
index 624bd87..954a66e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
import { open_about_us } from "./windows/about_us";
+import { open_blog } from "./windows/blog";
import { open_mission } from "./windows/mission";
const background = (canvas: HTMLSpanElement) => {
@@ -59,14 +60,15 @@ const animated_person: () => HTMLDivElement = () => {
div.className = "w-full";
const person = document.createElement("img");
- person.className = "fixed ml-[47vw] mt-[30vh] z-10";
- person.src = "assets/images/person.svg";
+ person.className = "fixed ml-[47vw] bottom-[36vh] z-10 h-[25vh]";
+ person.src = "assets/images/sprite.svg";
const scarf = document.createElement("img");
- scarf.className = "animate-scarf fixed ml-[50vw] mt-[19vh] ";
+ scarf.className =
+ "animate-scarf fixed ml-[48vw] bottom-[1vh] h-3/4 min-h-[20vh]";
scarf.src = "assets/images/scarf.svg";
- //div.appendChild(person);
+ div.appendChild(person);
div.appendChild(scarf);
return div;
@@ -77,24 +79,24 @@ const menu: () => HTMLDivElement = () => {
div.className = `fixed bottom-8 left-0 right-0 mx-auto flex gap-x-14 sm:gap-x-20 lg:gap-x-32 w-fit max-w-full`;
const items = [
{
- icon: "assets/images/icons/mock_icon.svg",
+ icon: "assets/images/icons/mission.svg",
name: "Mission",
onclick: () => {
open_mission();
},
},
{
- icon: "assets/images/icons/mock_icon.svg",
+ icon: "assets/images/icons/about_us.svg",
name: "About Us",
onclick: () => {
open_about_us();
},
},
{
- icon: "assets/images/icons/mock_icon.svg",
+ icon: "assets/images/icons/blog.svg",
name: "Blog",
onclick: () => {
- window.open("https://www.guiltygyoza.xyz/", "_blank")?.focus();
+ open_blog();
},
},
];
@@ -121,6 +123,9 @@ const render = () => {
canvas.appendChild(animated_person());
canvas.appendChild(topology_text());
canvas.appendChild(menu());
+
+ // start with mission window opened
+ open_mission();
};
render();
diff --git a/src/windows/blog.ts b/src/windows/blog.ts
new file mode 100644
index 0000000..3ede69b
--- /dev/null
+++ b/src/windows/blog.ts
@@ -0,0 +1,36 @@
+import { window } from "../components/window";
+
+const posts = [
+ {
+ title: "Topology protocol walkthrough",
+ date: "Apr 26, 2024",
+ url: "https://www.guiltygyoza.xyz/2024/04/topology-protocol-walkthrough",
+ },
+ {
+ title: "From Isaac, Mumu, Shoshin, to CRDTs",
+ date: "Apr 23, 2024",
+ url: "https://www.guiltygyoza.xyz/2024/04/from-isaac-mumu-shoshin-to-crdts",
+ },
+];
+
+export const open_blog = () => {
+ const div = document.createElement("div");
+
+ const initial_text = document.createElement("p");
+ initial_text.innerText = "Read the latest blog posts";
+
+ const posts_wrapper = document.createElement("div");
+
+ for (const post of posts) {
+ const post_element = document.createElement("a");
+ post_element.innerText = `${post.title} (${post.date})`;
+ post_element.href = post.url;
+ post_element.target = "_blank";
+ posts_wrapper.appendChild(post_element);
+ }
+
+ div.appendChild(initial_text);
+ div.appendChild(posts_wrapper);
+
+ window("w-72 h-80 md:w-96 md:h-96", "Blog", div);
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index cdf9fae..7a4e54d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,7 +16,7 @@ module.exports = {
},
},
animation: {
- scarf: "scarf 10s infinite",
+ scarf: "scarf 8s infinite",
},
},
colors: {