core: added home page

7 files changed, 601 insertions, 128 deletions

diff --git a/app/index.css b/app/index.css
new file mode 100644
index 0000000..12bd95b
--- /dev/null
+++ b/app/index.css
@@ -0,0 +1,11 @@
+.title {
+	font-size: 7vw;
+	text-shadow: 15px 15px 15px var(--shadow-color);
+}
+
+.window {
+	top: 15%;
+	left: 10%;
+	height: 70%;
+	width: 80%;
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index a36cde0..f7adc6e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,35 +1,48 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
-
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+// import { Inter, Audiowide, Rock_Salt, Monoton, JetBrains_Mono } from 'next/font/google'
+import "./styles.css";
+import { ThemeProvider } from "@/components/theme-provider"
+import Header from "@/components/header";
+import { MonotonFont, RockSaltFont, InterFont, JetBrainsMonoFont } from "./lib/fonts";
+
+// const programFont = localFont({
+// 	src: "/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf"
+// })
+
+// const monotonFont = localFont({
+// 	src: "/fonts/Monoton.ttf"
+// })
+
+// const rocksaltFont = localFont({
+// 	src: "/fonts/RockSalt-Regular.ttf"
+// })
+
+// const audiowideFont = localFont({
+// 	src: "/fonts/audiowide.ttf"
+// })
+
+// const interFont = localFont({
+// 	src: "/fonts/Inter.ttf"
+// })
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+	title: "littleblack111",
+	description: "littleblack111 is a full stack developer, who uses arch btw",
+	keywords: ["littleblack111", "full stack", "developer", "arch", "btw"],
+	authors: [{name: "littleblack111", url: "https://littleblack111.com"}],
+	creator: "littleblack111",
+
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
+export default function RootLayout({children,}: Readonly<{children: React.ReactNode;}>) {
+		return (
+			<html lang="en">
+			<body className={`${MonotonFont.variable} ${RockSaltFont.variable} ${InterFont.variable} ${JetBrainsMonoFont.variable}`}>
+				<Header />
+				<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+					{children}
+				</ThemeProvider>
+			</body>
+			</html>
+		);
 }
diff --git a/app/lib/fonts.tsx b/app/lib/fonts.tsx
new file mode 100644
index 0000000..3edbc52
--- /dev/null
+++ b/app/lib/fonts.tsx
@@ -0,0 +1,41 @@
+import localFont from "next/font/local";
+import { Inter, Audiowide, Rock_Salt, Monoton, JetBrains_Mono } from 'next/font/google'
+
+export const InterFont = Inter({
+	variable: "--font-inter",
+	subsets: ['latin'],
+	display: 'swap',
+})
+
+export const MonotonFont = Monoton({
+	weight: ['400'],
+	variable: "--font-monoton",
+	subsets: ['latin'],
+	display: 'swap',
+})
+
+export const RockSaltFont = Rock_Salt({
+	weight: ['400'],
+	variable: "--font-rocksalt",
+	subsets: ['latin'],
+	display: 'swap',
+})
+
+export const JetBrainsMonoFont = JetBrains_Mono({
+	weight: ['400'],
+	variable: "--font-jetbrains",
+	subsets: ['latin'],
+	display: 'swap',
+})
+
+export const hackedFont = localFont({
+	src: "../fonts/Hacked-KerX.ttf"
+})
+
+export const smoothFont = localFont({
+	src: "../fonts/SmoothElegantRegular-ZLv3.ttf"
+})
+
+export const bigFont = localFont({
+	src: "../fonts/Big500-8MLOM.ttf"
+})
\ No newline at end of file
diff --git a/app/lib/isMobile.tsx b/app/lib/isMobile.tsx
new file mode 100644
index 0000000..4ad8b03
--- /dev/null
+++ b/app/lib/isMobile.tsx
@@ -0,0 +1,9 @@
+"use server"
+
+import { userAgent } from 'next/server'
+import { headers } from 'next/headers';
+
+export default async function isMobile() {
+	const { device } = userAgent({ headers: headers() });
+	return device.type === 'mobile';
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 433c8aa..c27a6f6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,101 +1,30 @@
-import Image from "next/image";
+"use client"
+
+import "./selector.css";
+import "./index.css";
+import Blob from "@/components/blob";
+import { cn } from "@/lib/utils";
+import HackType from "@/components/hacktype";
+import Parallax from "react-next-parallax";
 
-export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}
+export default function Home() {
+	return (
+		<div className={cn("h-screen w-full top-0 left-0 overflow-hidden fixed -z-6")}>
+			<section className={cn("overflow-hidden top-0 left-0 m-0 p-0 w-full h-full bg-center bg-no-repeat bg-cover text-foreground dark:text-dforground bg-background dark:bg-dbackground")}>
+				<Parallax fullPageListening spotGlareEnable={false} lineGlareEnable={false} className={cn("tilt relative top-[15%] left-[10%] h-[70%] w-[80%] bg-transparent flex justify-center items-center z-[999] overflow-visible")}>
+					<div className={cn("relative w-full h-full border border-white rounded-[1em] flex justify-center items-center text-center z-[11] shadow-[0_0_100px_rgba(5,1,13,0.4)]")}>
+						<div className="relative w-full text-center">
+							<h2 className="font-inter text-[2.5vw] " data-parallax-offset="-5">Hello! I'm</h2>
+							<div className={cn("font-monoton uppercase text-[7vw] transition-all text-shadow-[15px_15px_15px_black]")}>
+								<HackType text="littleblack111" data-parallax-offset="5"/>
+							</div>
+							<div className={cn("font-inter text-[2.5vw] transition-all text-shadow-[15px_15px_15px_black]")} data-parallax-offset="-5">welcome to my website!</div>
+						</div>
+					</div>
+				</Parallax>
+			</section>
+			<Blob blobtype="random"/>
+		</div>
+	);
+}
\ No newline at end of file
diff --git a/app/selector.css b/app/selector.css
new file mode 100644
index 0000000..0921476
--- /dev/null
+++ b/app/selector.css
@@ -0,0 +1,3 @@
+:root {
+	--text: #F4E8C1
+}
\ No newline at end of file
diff --git a/app/styles.css b/app/styles.css
new file mode 100644
index 0000000..df2ad4f
--- /dev/null
+++ b/app/styles.css
@@ -0,0 +1,467 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+	.text-balance {
+		text-wrap: balance;
+	}
+}
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+		--primary: 0 0% 9%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+		--ring: 0 0% 3.9%;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		--radius: 0.5rem;
+		--topBarHeight: 5em;
+		--neon-bg-color: #05010d;
+		--dark-background: 260 86% 3%;
+		--dark-foreground: 0 0% 98%;
+		--dark-card: 0 0% 3.9%;
+		--dark-card-foreground: 0 0% 98%;
+		--dark-popover: 0 0% 3.9%;
+		--dark-popover-foreground: 0 0% 98%;
+		--dark-primary: 0 0% 98%;
+		--dark-primary-foreground: 0 0% 9%;
+		--dark-secondary: 0 0% 14.9%;
+		--dark-secondary-foreground: 0 0% 98%;
+		--dark-muted: 0 0% 14.9%;
+		--dark-muted-foreground: 0 0% 63.9%;
+		--dark-accent: 0 0% 14.9%;
+		--dark-accent-foreground: 0 0% 98%;
+		--dark-destructive: 0 62.8% 30.6%;
+		--dark-destructive-foreground: 0 0% 98%;
+		--dark-border: 0 0% 14.9%;
+		--dark-input: 0 0% 14.9%;
+		--dark-ring: 0 0% 83.1%;
+		--dark-chart-1: 220 70% 50%;
+		--dark-chart-2: 160 60% 45%;
+		--dark-chart-3: 30 80% 55%;
+		--dark-chart-4: 280 65% 60%;
+		--dark-chart-5: 340 75% 55%;
+		--shadow-color: black;
+	}
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+
+
+/* page setup ============================================= */
+
+* {
+    padding: 0;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    font-smooth: antialiased;
+}
+
+@media (pointer:none), (pointer:coarse) {
+    * {
+        transition: all .3s;
+    }
+}
+
+body {
+    top: 0;
+    left: 0;
+    transition: background 1s ease-in-out;
+}
+
+body::-webkit-scrollbar {
+    display: none;
+}
+
+/* animation ============================================== */
+
+@keyframes slideInTop {
+    from {
+        transform: translateY(-300px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0px);
+    }
+    40% {
+        transform: translateY(30px);
+    }
+    80% {
+        transform: translateY(-15px);
+    }
+}
+
+@keyframes zoomIn {
+    0% {
+        scale: 0.01;
+    }
+    65% {
+        scale: 1.05;
+    }
+    100% {
+        scale: 1;
+        position: relative;
+    }
+}
+
+@keyframes zoomOut {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(0.01);
+    }
+}
+
+@keyframes fadeZoomIn {
+    from {
+        opacity: 0.35;
+        scale: 1.15;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes reveal {
+    from {
+        -webkit-filter: blur(32px);
+        -moz-filter: blur(32px);
+        -o-filter: blur(32px);
+        -ms-filter: blur(32px);
+        filter: blur(32px);
+        -webkit-backdrop-filter: blur(32px);
+        backdrop-filter: blur(32px);
+        transform: scale(2);
+    }
+}
+
+@keyframes shake {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(.5deg); }
+    50% { transform: rotate(0eg); }
+    75% { transform: rotate(-.5deg); }
+    100% { transform: rotate(0deg); }
+}
+
+@keyframes background-pan {
+    from {
+        background-position: 0% center;
+    }
+    to {
+        background-position: -200% center;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        scale: 0.8;
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+
+    }
+    to {
+        opacity: 0;
+        scale: 0.8
+    }
+}
+
+@keyframes scroll {
+    from {
+        opacity: 0.8;
+        scale: 0.75;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes rotate {
+    from {
+        rotate: 0deg;
+    }
+    
+    50% {
+        scale: 1 1.25;
+    }
+    
+    to {
+        rotate: 360deg;
+    }
+}
+
+@keyframes minimize {
+    from {
+        scale: 1;
+        opacity: 1;
+    }
+    to {
+        scale: 0;
+        opacity: 0;
+    }
+}
+
+
+/* animation: name duration timing-function delay iteration-count direction fill-mode; */
+
+
+/* animate class */
+.animate {
+    -webkit-animation-duration: 0.5s;
+    animation-duration: 0.5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.animate.animate--infinite {
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+}
+
+.animate.animation--delay-1s {
+    -webkit-animation-delay: 1s;
+    animation-delay: 1s;
+}
+.animate.animation--delay-p5s {
+    -webkit-animation-duration: 0.5s;
+    animation-duration: 0.5s;
+    animation-delay: 0.5s;
+}
+
+.animate.animation--delay-p3s {
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+}
+
+.animate.animation--fast {
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
+}
+
+.animate.animation--slow {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+}
+
+/* real utility classes */
+
+.animate.slideInTop {
+    animation-name: slideInTop;
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+}
+
+.animate.bounce {
+    -webkit-animation-name: bounce;
+    animation-name: bounce;
+}
+
+.animate.zoomIn {
+    -webkit-transition-timing-function: linear;
+    transition-timing-function: linear;
+    -webkit-animation-name: reveal;
+    animation-name: zoomIn;
+}
+
+.animate.zoomOut {
+    -webkit-transition-timing-function: linear;
+    transition-timing-function: linear;
+    -webkit-animation-name: zoomOut;
+    animation-name: zoomOut;
+}
+
+.animate.reveal {
+    animation-duration: 500ms;
+    -webkit-transition-timing-function: linear;
+    transition-timing-function: linear;
+    -webkit-animation-name: reveal;
+    animation-name: reveal;
+}
+
+.animate.shake {
+    -webkit-animation-name: shake;
+    animation-name: shake;
+}
+
+.animate.fadeIn {
+    -webkit-animation-name: fadeIn;
+    animation-name: fadeIn;
+}
+
+.animate.fadeOut {
+    -webkit-animation-name: fadeOut;
+    animation-name: fadeOut;
+}
+
+.animate.fadeZoomIn {
+    -webkit-animation-name: fadeZoomIn;
+    animation-name: fadeZoomIn;
+}
+
+.aniamte.persist {
+    animation-fill-mode: forwards;
+}
+
+/* transition */
+/* * {
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s; 
+} */
+
+@media (prefers-reduced-motion: no-preference) {
+    :has(:target) {
+        scroll-behavior: smooth;
+    }
+}
+
+:has(:target) {
+	scroll-padding-top: var(--topBarHeight);
+}
+
+
+.js-tilt-glare {
+    border-radius: 18px;
+    overflow: hidden;
+}
+
+/* other ================================================== */
+
+/* a {
+    outline: 3px solid currentColor;
+    outline-offset: -6px;
+} */
+
+a:hover, Button:hover {
+    font-weight: bold;
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+    -webkit-text-decoration-line: underline;
+    text-decoration-line: underline;
+    cursor: pointer;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+    text-underline-offset: 1px;
+    position: relative;
+    height: 100%;
+    /* font-size: 5mm; */
+    text-transform: capitalize;
+    text-align: center;
+    /* start */
+    margin-left: 5mm;
+    margin-right: 5mm;
+    padding-top: 3mm;
+    padding-bottom: 3mm;
+    /* end
+    these lines will make it more appearence and jigully when hovered */
+    font-weight: bold;
+    -webkit-transition: all .5s;
+    transition: all .5s;
+    /* border-radius: 8px; */
+    /* color: #F4E8C1; */
+}
+
+a:active, Button:active {
+    transform: scale(0.9);
+}
+
+.blob {
+    min-height: 75%;
+    min-width: 75%;
+    /* aspect-ratio: 1; */
+    background-color: #fff;
+    background: -webkit-gradient(linear, left top, right top, from(#00FFFF), to(mediumpurple));
+    background: linear-gradient(90deg,#0ff,#9370db);
+    border-radius: 50%;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    filter: blur(7vmax);
+    -webkit-filter: blur(7vmax);
+    height: 15vmax;
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    translate: -50% -50%;
+    width: 20vmax;
+    z-index: 0;
+    animation-fill-mode: forwards;
+}
+
+
+.sblob {
+    background-color: white;
+    height: 15vmax;
+    width: 20vmax;
+    aspect-ratio: 1;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    translate: -50% -50%;
+    border-radius: 50%;
+    background: conic-gradient(#00FFFF, mediumpurple);
+    animation: rotate 20s infinite;
+    opacity: 0.8;
+    filter: blur(7vmax);
+    -webkit-filter: blur(7vmax);
+    z-index: -1;
+}
+
+
+html.is-changing .openlink {
+    transition: all 0.5s;
+}
+
+html.is-animating .openlink {
+    /* transform: scale(1000);
+    transition: transform 100s; */
+    transition: all 0.5s;
+    height: 100%;
+    width: 100%;
+    transition-timing-function: ease-out;
+}