Dev team application

apps/blade/src/app/anthony_calabrese/page.tsx

@@ -0,0 +1,87 @@
+export default function Application() {
+  return (
+    <>
+      <div className="curtain1 pointer-events-none fixed z-30 h-[100dvh] w-[100dvw] bg-black"></div>
+
+      <div>
+        <div className="curtain3 pointer-events-none fixed flex h-[100dvh] w-[100dvw] flex-col items-center justify-center">
+          <p className="khfont mb-20 text-4xl md:text-6xl">
+            Dev Application for...
+          </p>
+          <img src="/banner.png" alt="khbanner" className="h-[80%] w-[80%]" />
+        </div>
+      </div>
+
+      <div className="curtain2">
+        <div className="tkfactory tkfactorymove pointer-events-none fixed bottom-0 z-10 h-[50dvh] w-[100vw]" />
+        <div className="piping pipingmove pointer-events-none fixed z-0 h-[100dvh] w-[100dvw]" />
+        <img
+          src="/gear.png"
+          alt="gear"
+          className="gearmoveright fixed right-6 top-6 z-10 h-64 md:h-80"
+        />
+        <img
+          src="/gear.png"
+          alt="gear"
+          className="gearmoverightbottom fixed right-6 top-28 z-10 h-48 md:top-32 md:h-64"
+        />
+        <img
+          src="/gear.png"
+          alt="gear"
+          className="gearmoveleft fixed left-6 top-6 z-10 h-64 md:h-80"
+        />
+
+        <img
+          src="/gear.png"
+          alt="gear"
+          className="gearmoveleftbottom fixed left-6 top-28 z-10 h-48 md:top-32 md:h-64"
+        />
+
+        <div className="flex h-[10dvh] w-[100dvw] flex-col items-center justify-center md:h-[20dvh]">
+          <p className="title-animate khfont z-20 rounded-full bg-gray-400 bg-opacity-80 p-3 text-2xl text-blue-800 md:text-4xl">
+            Anthony Calabrese
+          </p>
+        </div>
+        <div className="box-pulse z-10 flex h-[60dvh] w-[100dvw] flex-col items-center justify-center md:h-[40dvh]">
+          <a
+            href="/resume.pdf"
+            target="_blank"
+            className="khfont mb-10 scale-100 transform rounded-full bg-gray-400 bg-opacity-80 p-3 text-lg text-blue-600 transition duration-150 hover:scale-[1.2] hover:text-yellow-500 md:text-xl"
+          >
+            Resume
+          </a>
+
+          <a
+            href="https://www.linkedin.com/in/anthony-calabrese-b4453930b/"
+            target="_blank"
+            className="khfont mb-10 scale-100 transform rounded-full bg-gray-400 bg-opacity-80 p-3 text-lg text-blue-600 transition duration-150 hover:scale-[1.2] hover:text-yellow-500 md:text-xl"
+          >
+            Linkedin
+          </a>
+          <a
+            href="https://github.com/cala28124-sketch"
+            target="_blank"
+            className="khfont mb-10 scale-100 transform rounded-full bg-gray-400 bg-opacity-80 p-3 text-lg text-blue-600 transition duration-150 hover:scale-[1.2] hover:text-yellow-500 md:text-xl"
+          >
+            Github
+          </a>
+          <a
+            href="https://anthonycalabrese.dev/"
+            target="_blank"
+            className="khfont mb-10 scale-100 transform rounded-full bg-gray-400 bg-opacity-80 p-3 text-lg text-blue-600 transition duration-150 hover:scale-[1.2] hover:text-yellow-500 md:text-xl"
+          >
+            Portfolio
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}
+
+/* unused stuff
+
+<p className="mb-10 scale-100 transform text-xl transition duration-150 hover:scale-[1.2] hover:text-yellow-500">
+            application
+          </p>
+
+          */

apps/blade/src/app/globals.css

@@ -1,10 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@font-face {
+  font-family: "khfont";
+  src: url("/fonts/animeace2_reg.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.khfont{
+  font-family: "khfont", Arial, sans-serif;
+
+}
 
 @layer base {
+
   :root {
-    --background: 0 0% 100%;
+    --background: 244 45% 10%;
     --foreground: 224 71.4% 4.1%;
     --card: 0 0% 100%;
     --card-foreground: 224 71.4% 4.1%;
@@ -33,7 +47,7 @@
   }
 
   .dark {
-    --background: 224 71.4% 4.1%;
+    --background: 244 45% 10%;
     --foreground: 210 20% 98%;
     --card: 224 71.4% 4.1%;
     --card-foreground: 210 20% 98%;
@@ -61,6 +75,10 @@
   }
 }
 
+body {
+  overflow: hidden;
+}
+
 .moving-border {
   animation: moving-border 10s linear infinite;
 }
@@ -102,3 +120,226 @@
     opacity: 1;
   }
 }
+
+.title-animate {
+  animation: title 30s ease-in-out infinite alternate;
+}
+
+@keyframes title {
+    0% {
+    transform: scale(1) rotate(0deg);
+  }
+  25% {
+    transform: scale(1.5) rotate(5deg);
+  }
+  50% {
+    transform: scale(1) rotate(0deg);
+  }
+  100% {
+   transform: scale(1.5) rotate(-5deg);
+  }
+}
+
+
+.box-pulse {
+  animation: box 30s ease-in-out infinite alternate
+}
+
+@keyframes box {
+     0% {
+    transform: scale(1) rotate(0deg);
+  }
+  25% {
+    transform: scale(1.2) rotate(2.5deg);
+  }
+  50% {
+    transform: scale(1) rotate(0deg);
+  }
+  100% {
+   transform: scale(1.2) rotate(-2.5deg);
+  }
+}
+
+
+.curtain1 {
+  animation: curtain1 10s ease-in forwards;
+}
+
+@keyframes curtain1 {
+  0% {
+    opacity: 1;
+  }
+  25%{
+    opacity: 0
+
+  }
+  50%{
+    opacity: 0
+  }
+  75%{
+    opacity: 1
+
+  }
+  100% {
+    opacity: 0;
+  }
+
+}
+
+.curtain2 {
+  animation: curtain2 10s ease-in forwards;
+}
+
+@keyframes curtain2 {
+  0% {
+    opacity: 0;
+  }
+  25%{
+    opacity: 0
+
+  }
+  50%{
+    opacity: 0
+  }
+  75%{
+    opacity: 0
+
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.curtain3 {
+  animation: curtain3 10s ease-in forwards;
+}
+
+@keyframes curtain3 {
+
+0% {
+    opacity: 0;
+  }
+  25%{
+    opacity: 1
+
+  }
+  50%{
+    opacity: 1
+  }
+  75%{
+    opacity: 0
+
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+
+
+.piping{
+  background-image: url('/pipefactory.png');
+  background-repeat:repeat;
+  background-size: 20rem;
+}
+
+.pipingmove{
+  animation: pipemove 20s linear infinite
+}
+
+@keyframes pipemove {
+   0%{
+    background-position: 0;
+  }
+  100%{
+    background-position: 20rem;
+  }
+
+}
+
+
+
+.tkfactory {
+
+
+    background-image: url('/tech-knight.png'), url('/sidewalk.svg');
+
+    background-repeat: repeat-x, repeat-x;
+    background-size: 25rem, 25rem;
+
+}
+
+.tkfactorymove {
+  animation: tkmove 20s linear infinite;
+}
+
+
+@keyframes tkmove {
+  0%{
+    background-position: 0 80%, 0 100%;
+  }
+  100%{
+    background-position: 25rem 80%, 25rem 100%;
+  }
+}
+
+
+.gearmoveright {
+  animation: gearmoveright 20s linear infinite
+}
+
+@keyframes gearmoveright {
+  0%{
+    transform: translate(50%, -50%) rotate(360deg);
+  }
+
+  100%{
+    transform: translate(50%, -50%) rotate(0deg);
+  }
+}
+
+.gearmoverightbottom {
+  animation: gearmoverightbottom 20s linear infinite
+}
+
+@keyframes gearmoverightbottom {
+  0%{
+    transform: translatex(65%) rotate(0deg);
+  }
+
+  100%{
+    transform: translatex(65%) rotate(360deg);
+  }
+}
+
+
+.gearmoveleftbottom {
+  animation: gearmoveleftbottom 20s linear infinite
+}
+
+@keyframes gearmoveleftbottom {
+  0%{
+    transform: translatex(-65%) rotate(360deg);
+  }
+
+  100%{
+    transform: translatex(-65%) rotate(0deg);
+  }
+}
+
+
+.gearmoveleft {
+  animation: gearmoveleft 20s linear infinite
+}
+
+@keyframes gearmoveleft {
+  0%{
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  100%{
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+

apps/blade/src/app/layout.tsx

@@ -2,15 +2,15 @@ import type { Metadata, Viewport } from "next";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
 
+// @ts-ignore
+import "./globals.css";
+
 import { cn } from "@forge/ui";
 import { ThemeProvider, ThemeToggle } from "@forge/ui/theme";
 import { Toaster } from "@forge/ui/toast";
 
-import { TRPCReactProvider } from "~/trpc/react";
-
-import "./globals.css";
-
 import { env } from "~/env";
+import { TRPCReactProvider } from "~/trpc/react";
 
 export const metadata: Metadata = {
   metadataBase: new URL(
@@ -48,7 +48,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
       >
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
           <TRPCReactProvider>{props.children}</TRPCReactProvider>
-          <div className="fixed bottom-4 right-4">
+          <div className="hidden">
             <ThemeToggle />
           </div>
           <Toaster />
@@ -57,3 +57,5 @@ export default function RootLayout(props: { children: React.ReactNode }) {
     </html>
   );
 }
+
+/* old class name */