[ghpages] Add section

leomotors · Mar 20, 2022 · 8c4afeb · 8c4afeb
1 parent 5d3e8ce
commit 8c4afeb
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 28 deletions.
diff --git a/web/README.md b/web/README.md
@@ -0,0 +1,11 @@
+# Web Homepage for You are a failure!
+
+- Motivation and why I made this
+- App Presentation
+
+## Tech Stack
+
+- SvelteKit (Static (Client Side Only) with Prerender) -> GitHub Pages
+- TailwindCSS
+
+https://leomotors.github.io/you-are-a-failure/
diff --git a/web/package.json b/web/package.json
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^1.0.0-next.29",
-    "@sveltejs/kit": "^1.0.0-next.299",
+    "@sveltejs/kit": "^1.0.0-next.301",
     "@tailwindcss/typography": "^0.5.2",
     "@types/gh-pages": "^3.2.1",
     "@types/node": "^17.0.21",

diff --git a/web/src/app.css b/web/src/app.css
@@ -7,15 +7,3 @@
   font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
-
-/* https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */
-/* Hide scrollbar for Chrome, Safari and Opera */
-body::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-body {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
diff --git a/web/src/components/image.svelte b/web/src/components/image.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  export let img: keyof typeof Images;
+  export let img: string;
+  export let full: undefined | true = undefined;
 
   const Images = {
     "Emotional Damage GIF":
@@ -8,11 +9,19 @@
     "Levi to Erwin": "https://i.ytimg.com/vi/0Hp-U63b56s/maxresdefault.jpg",
     "Zeke Monke":
       "https://sportshub.cbsistatic.com/i/2022/01/11/e3a2e49e-5b45-48f7-a406-2a094aceb6b4/attack-on-titan-season-4-zeke-survives.jpg",
-    "My Set Goal": "MySetGoal.webp",
-    "Failure Failure": "FailureApp1.webp",
     "Eren Manipulates Grisha":
       "https://i.ytimg.com/vi/W2R4aOkT7cc/maxresdefault.jpg",
   };
+
+  function getImage(key: string) {
+    return Images[key] ?? key;
+  }
 </script>
 
-<img class="mx-auto" src={Images[img]} alt="" width="640" {...$$restProps} />
+<img
+  class="mx-auto"
+  src={getImage(img)}
+  alt=""
+  width={full ? 960 : 640}
+  {...$$restProps}
+/>
diff --git a/web/src/routes/index.svelte b/web/src/routes/index.svelte
@@ -3,7 +3,7 @@
   import Youtube from "$components/youtube.svelte";
 </script>
 
-<main class="prose prose-2xl">
+<main class="prose prose-2xl pb-20">
   <div class="t-30" />
   <h1>You are a Failure!</h1>
   <p class="text-lg text-slate-700">(with Asian Accent)</p>
@@ -106,11 +106,11 @@
 
   <p>
     I proudly present to you, The Asian Solution. <b>An Insult</b>, delivering
-    <i>emotional damage</i> that will push you forward
+    maximum <i>emotional damage</i> that will push you forward.
   </p>
 
   <h3>So, I have set my goal.</h3>
-  <Image img="My Set Goal" width="960" />
+  <Image img="MySetGoal.webp" full />
 
   <div class="t-10" />
 
@@ -119,21 +119,33 @@
 
   <div class="t-40" />
 
-  <h1 class="text-5xl sm:text-6xl">Introducing...</h1>
+  <h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl">Introducing...</h1>
   <div class="t-5" />
   <h2>You are a Failure!</h2>
   <div class="t-10" />
-  <Image img="Failure Failure" width="960" />
+  <Image img="FailureApp1.webp" full />
 
-  <div class="t-10" />
+  <div class="t-5" />
   <h3>
     An App that will help you on keeping motivation and fire, with unique
     technique from Asian Descendant
   </h3>
   <p>
-    Log in to this app daily, watch some <i>motivational videos</i> by Steven He,
+    Log in to this app daily to watch some <i>motivational videos</i> by Steven He,
     keep doing this until you accomplished your goal!
   </p>
+  <p>And big 🙇‍♂️ to him for creating a very <i>cultured</i> meme.</p>
+
+  <h2>✨Feature: Statistics</h2>
+  <p>
+    Show your friend how consistent you are into accomplishing your set goal!
+  </p>
+  <Image img="Statistics.webp" full />
+
+  <h2>Download now for 🪟Windows</h2>
+  <h4>✅ Support from Windows 10 2004 (10.0.19041)</h4>
+  <h4>✅ Support Windows 11's New Mica Material</h4>
+  <p><i>Will</i> be available in Microsoft Store (If they don't reject)</p>
 </main>
 
 <style lang="postcss">

diff --git a/web/static/Statistics.webp b/web/static/Statistics.webp
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -88,10 +88,10 @@
   dependencies:
     tiny-glob "^0.2.9"
 
-"@sveltejs/kit@^1.0.0-next.299":
-  version "1.0.0-next.299"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.299.tgz#9fb4645944cb010e69a082739f6b4a6a84ef316c"
-  integrity sha512-m8VBccfX3ozgHjjz193pZbfTK02P47bqdhj07cveUEhVLwbujOVWbgblPCrNh0rkTER7z1k5hRZnWrFYaDjQJA==
+"@sveltejs/kit@^1.0.0-next.301":
+  version "1.0.0-next.301"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.301.tgz#d5c6b3fde3682bbab835d31d9acf2470248b210f"
+  integrity sha512-F/XP1VEu+fpvgY04JekNxAFupccNMKOyXtbox0LwNJvBulL15/Tzy6tf4g+9t2Jy7mprwI3h0ZC9G/nVujRFnQ==
   dependencies:
     "@sveltejs/vite-plugin-svelte" "^1.0.0-next.32"
     sade "^1.7.4"