From 433e08f2f798b4c04d57cd2d61b16a58aa5196be Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sun, 13 Oct 2024 00:38:37 +0800 Subject: core: added home page --- app/index.css | 11 ++ app/layout.tsx | 71 ++++---- app/lib/fonts.tsx | 41 +++++ app/lib/isMobile.tsx | 9 + app/page.tsx | 127 +++----------- app/selector.css | 3 + app/styles.css | 467 +++++++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 601 insertions(+), 128 deletions(-) create mode 100644 app/index.css create mode 100644 app/lib/fonts.tsx create mode 100644 app/lib/isMobile.tsx create mode 100644 app/selector.css create mode 100644 app/styles.css (limited to 'app') 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 ( - - - {children} - - - ); +export default function RootLayout({children,}: Readonly<{children: React.ReactNode;}>) { + return ( + + +

+ + {children} + + + + ); } 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 ( -

- Get started by editing{" "} - - app/page.tsx - - . -
Save and see your changes instantly.

- - Vercel logomark

- Deploy now - - - Read our docs - -

- -

- ); -} +export default function Home() { + return ( +

+ +

Hello! I'm

+ +

welcome to my website!

+ +

+ ); +} \ 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; +} -- cgit v1.2.3