home page

floraorg · Dec 14, 2024 · bd6fbac · bd6fbac
1 parent d20c672
commit bd6fbac
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 95 deletions.
diff --git a/public/aster.png b/public/aster.png
diff --git a/public/image.png b/public/image.png
diff --git a/public/imagewbg.png b/public/imagewbg.png
diff --git a/shell.nix b/shell.nix
@@ -0,0 +1,22 @@
+{ 
+  nixpkgs ? fetchTarball "https://github.com/NixOS/nixpkgs/tarball/nixos-24.05",
+  pkgs ? import nixpkgs { config = {}; overlays = []; }
+}:
+
+pkgs.mkShellNoCC {
+  packages = with pkgs; [
+    cowsay
+
+    bun
+    nodePackages.typescript
+    nodePackages.typescript-language-server
+    nodePackages.prettier
+    emmet-ls
+  ];
+
+  # Hook to install requirements when entering the shell
+  shellHook = ''
+    cowsay "Nix Shell Activated!"
+  '';
+}
+
diff --git a/src/app.css b/src/app.css
@@ -1,10 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 * {
-  font-family: "Geist", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 h1 {
@@ -27,9 +27,6 @@ body {
   @apply w-full md:w-3/5 lg:w-1/2 leading-9 text-neutral-200 text-[16px] md:text-[18px];
 }
 
-.main {
-  @apply p-8;
-}
 
 ol {
   @apply list-decimal ml-4;
@@ -50,7 +47,3 @@ a {
 .team-avatar {
   @apply transition-transform duration-200 hover:scale-110;
 }
-
-.mdx-content > * {
-  @apply my-6;
-}
diff --git a/src/app.tsx b/src/app.tsx
@@ -9,33 +9,9 @@ export default function App() {
       base={import.meta.env.SERVER_BASE_URL}
       root={(props) => (
         <main class="main min-h-screen flex flex-col">
-          <div class="flex w-full items-center justify-between">
-            <div class="flex text-neutral-300 gap-4 items-center">
-              <a href="/" class="group">
-                <img src="https://sakura.rex.wf/linear/flora.tf" class="w-10 rounded-full transition-transform duration-200 group-hover:scale-110" alt="Flora logo" />
-              </a>
-              <a class="text-neutral-300 hover:text-neutral-100 transition-colors duration-200" href="/blog">
-                blog
-              </a>
-            </div>
-            <a class="text-neutral-300 hover:text-neutral-100 transition-colors duration-200" href="https://github.com/floraorg">
-              github
-            </a>
-          </div>
-          <div class="divider"></div>
           <div class="grow mdx-content">
             <Suspense fallback={<div class="flex items-center justify-center min-h-screen"></div>}>{props.children}</Suspense>
           </div>
-          <div class="divider"></div>
-          <div class="flex w-full items-center justify-between">
-            <div class="flex w-full items-center justify-between">
-              <a class="text-neutral-300 hover:text-neutral-100 transition-colors duration-200" href="https://github.com/floraorg">
-                floraorg
-              </a>
-              {/* idk change this, built with ❤️ by ___ maybe */}
-              <span class="text-neutral-300">built with ❤️</span>
-            </div>
-          </div>
         </main>
       )}>
       <FileRoutes />

diff --git a/src/components/Art.tsx b/src/components/Art.tsx
@@ -1,4 +1,4 @@
-import {Component, createSignal, onMount} from "solid-js";
+import { Component, createSignal, onMount } from "solid-js";
 
 interface AsciiArtComponentProps {
   imagePath: string;
@@ -13,11 +13,17 @@ const AsciiArtComponent: Component<AsciiArtComponentProps> = (props) => {
     const img = new Image();
     img.src = props.imagePath;
     img.onload = () => {
-      setAsciiArt(imageToAscii(img, props.maxWidth ?? 500, props.maxHeight ?? 1000));
+      setAsciiArt(
+        imageToAscii(img, props.maxWidth ?? 500, props.maxHeight ?? 1000),
+      );
     };
   });
 
-  const imageToAscii = (img: HTMLImageElement, maxWidth: number, maxHeight: number) => {
+  const imageToAscii = (
+    img: HTMLImageElement,
+    maxWidth: number,
+    maxHeight: number,
+  ) => {
     const chars = ["@", "#", "S", "%", "?", "*", "+", ";", ":", ",", "."];
     const canvas = document.createElement("canvas");
     const width = Math.min(img.width, maxWidth);
@@ -39,7 +45,8 @@ const AsciiArtComponent: Component<AsciiArtComponentProps> = (props) => {
         if (a === 0) {
           art += " ";
         } else {
-          art += chars[Math.floor(((r + g + b) / 3 / 255) * (chars.length - 1))];
+          art +=
+            chars[Math.floor(((r + g + b) / 3 / 255) * (chars.length - 1))];
         }
       }
       art += "\n";
@@ -48,7 +55,7 @@ const AsciiArtComponent: Component<AsciiArtComponentProps> = (props) => {
   };
 
   return (
-    <div class="ascii-art-container h-screen flex justify-center flex-col items-center w-full text-[3.2px] leading-[1.6px] text-rose-400/80 text-center">
+    <div class="ascii-art-container absolute text-[2.5px] leading-[1.2px] text-rose-700/80 text-center">
       <pre class="ascii-art select-none">{asciiArt()}</pre>
     </div>
   );

diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
@@ -1,9 +1,9 @@
 // @refresh reload
-import {createHandler, StartServer} from "@solidjs/start/server";
+import { createHandler, StartServer } from "@solidjs/start/server";
 
 export default createHandler(() => (
   <StartServer
-    document={({assets, children, scripts}) => (
+    document={({ assets, children, scripts }) => (
       <html lang="en">
         <head>
           <meta charset="utf-8" />
@@ -17,19 +17,25 @@ export default createHandler(() => (
           <meta property="og:type" content="website" />
           <meta property="og:url" content="https://flora.tf" />
           <meta property="og:title" content="~/org/flora" />
-          <meta property="og:description" content="random utilities for the web" />
+          <meta
+            property="og:description"
+            content="random utilities for the web"
+          />
           <meta property="og:image" content="/og-image.png" />
 
           <meta property="twitter:card" content="summary_large_image" />
           <meta property="twitter:url" content="https://flora.tf" />
           <meta property="twitter:title" content="~/org/flora" />
-          <meta property="twitter:description" content="random utilities for the web" />
+          <meta
+            property="twitter:description"
+            content="random utilities for the web"
+          />
           <meta property="twitter:image" content="/og-image.png" />
 
           <meta name="theme-color" content="#000000" />
           {assets}
         </head>
-        <body>
+        <body class="overflow-x-hidden">
           <div id="app">{children}</div>
           {scripts}
         </body>

diff --git a/src/routes/blog/(blog).mdx b/src/routes/blog/(blog).mdx
diff --git a/src/routes/blog/hello.mdx b/src/routes/blog/hello.mdx
diff --git a/src/routes/index.mdx b/src/routes/index.mdx
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -0,0 +1,46 @@
+import Art from "../components/Art.tsx";
+
+export default function Home() {
+  return (
+    <div class="w-full flex justify-center overflow-x-hidden">
+      <div class="h-screen w-full p-6 md:w-2/3 flex flex-col items-center justify-center">
+        <Art imagePath="/public/imagewbg.png" />
+        <div class="flex w-full items-center gap-4">
+          <img src="/public/image.png" alt="logo" class="h-12" />
+          <h1 class="text-white text-2xl md:text-3xl font-bold">Flora</h1>
+        </div>
+        <p class="text-white z-[10] self-start text-left text-lg md:text-xl leading-8 mt-6 mb-3">
+          Flora is a team of developers aiming to create practical and useful
+          solutions for real problems.
+        </p>
+        <div class="text-white z-[400] text-left self-start text-lg md:text-xl leading-8">
+          Our current projects:{" "}
+          <div className="inline-block group relative">
+            <a href="https://orchid.rex.wf">orchid</a>
+            <img
+              src="/orchid.png"
+              class="absolute scale-[5] lg:scale-[9] z-[500] md:group-hover:opacity-100 opacity-0 transition  pointer-events-none top-[5rem] lg:top-[8.8rem] my-2 left-[2rem] lg:left-[4rem]"
+              alt=""
+            />
+          </div>{" "}
+          and{" "}
+          <div className="inline-block group relative">
+            <a href="#">aster</a>
+            <img
+              src="/aster.png"
+              class="absolute scale-[7] lg:scale-[11] z-[500] md:group-hover:opacity-100 opacity-0 transition  pointer-events-none top-[5rem] lg:top-[8.8rem] my-2 left-[-4rem] lg:left-[4rem]"
+              alt=""
+            />
+          </div>
+          {"."}
+        </div>
+        <div class="divider px-2 pt-[1px] bg-neutral-800 my-3"></div>
+        <p class="text-sm text-left self-start z-[10]">
+          Founded by <a href="https://namishh.me">nam</a> and{" "}
+          <a href="https://rex.me">rex</a>. Follow us on{" "}
+          <a href="https://github.com/floraorg">github</a>.
+        </p>
+      </div>
+    </div>
+  );
+}