AderKonstantin/aderktech-chronark.com-
1
0
Fork 0
mirror of https://github.com/AderKonstantin/aderktech-chronark.com-.git synced 2025-06-08 13:48:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Andreas Thomas 2023-02-24 20:49:52 +01:00
parent 236df2e8c8
commit 68fe519e97
No known key found for this signature in database
3 changed files with 66 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/layout.tsx
View File

@ -52,7 +52,9 @@ export default function RootLayout({
return (
<html lang="en" className={[inter.variable, pangea.variable].join(" ")}>
<body
className={`bg-black ${process.env.NODE_ENV === "development" ? "debug-screens" : undefined}`}
className={`bg-black ${
process.env.NODE_ENV === "development" ? "debug-screens" : undefined
}`}
>
{children}
</body>

21
app/page.tsx
View File

@ -1,4 +1,3 @@
import Image from "next/image";
import Link from "next/link";
import React from "react";
@ -14,21 +13,13 @@ const navigation = [
export default function Home() {
return (
<div className="w-screen h-screen flex overflow-hidden flex-col items-center justify-center bg-gradient-to-tl from-black via-zinc-400/10 to-black">
<div className="hidden animate-fadeSlow md:block w-screen translate-x-[10%] animate-fade-slow h-px bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
<div className="flex items-center gap-2 ">
{"CHRONARK".split("").map((letter, index) => (
<div className="card">
<div className="hidden animate-glow md:block w-screen animate-fade-left h-px bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
<h1 className="text-edge-outline cursor-default animate-title z-10 hover:text-zinc-50 duration-1000 font-display text-4xl sm:text-6xl md:text-9xl whitespace-nowrap bg-clip-text bg-zinc-200 font-bold text-transparent ">
CHRONARK
</h1>
<h1 className="text-edge-outline cursor-default animate-fade z-10 hover:text-zinc-50 duration-1000 font-display text-4xl sm:text-6xl md:text-9xl leading-[60%] md:leading-[50%] whitespace-nowrap bg-clip-text bg-zinc-200 font-bold text-transparent ">
{letter}
</h1>
</div>
))}
</div>
<div className="hidden animate-fadeSlow md:block w-screen -translate-x-[10%] animate-fade-slow h-px bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
<nav className="mt-16">
<div className="hidden animate-glow md:block w-screen animate-fade-right h-px bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
<nav className="mt-16 animate-fade-in">
<ul className="flex items-center justify-center gap-4">
{navigation.map((item) => (
<Link

63
tailwind.config.js
View File

@ -12,16 +12,67 @@ module.exports = {
},
animation: {
fade: "fade 3s ease-in-out",
fadeSlow: "fade 7s ease-in-out",
"fade-in": "fade-in 5s ease-in-out forwards",
title: "title 5s ease-out forwards",
"fade-left": "fade-left 5s ease-in-out forwards",
"fade-right": "fade-right 5s ease-in-out forwards",
},
keyframes: {
fade: {
from: {
"fade-in": {
"0%": {
opacity: "0%",
},
"75%": {
opacity: "0%",
},
"100%": {
opacity: "100%",
},
},
"fade-left": {
"0%": {
opacity: "0%",
},
"75%": {
opacity: "100%",
},
"100%": {
opacity: "0%",
},
},
"fade-right": {
"0%": {
opacity: "0%",
},
"75%": {
opacity: "100%",
},
"100%": {
opacity: "0%",
},
},
title: {
"0%": {
"line-height": "0%",
"letter-spacing": "0.25em",
opacity: "0",
},
to: {
opacity: "100",
"70%": {
"line-height": "0%",
opacity: "0%",
},
"80%": {
opacity: "100%",
},
"100%": {
"line-height": "100%",
"letter-spacing": "0em",
opacity: "100%",
},
},
},