Skip to content

Commit adb84a9

Browse files
TaskManagerOLTaskManagerOL
committed
feat:init
1 parent eb466bd commit adb84a9

File tree

2 files changed

+141
-94
lines changed

2 files changed

+141
-94
lines changed

‎app/globals.css

+22
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,28 @@
1919
}
2020
}
2121

22+
@font-face {
23+
font-family: Backso;
24+
src: url(/fonts/Backso.otf);
25+
font-weight: normal;
26+
font-style: normal;
27+
}
28+
29+
@font-face {
30+
font-family: SuperLobster;
31+
src: url(/fonts/SuperLobster.ttf);
32+
font-weight: normal;
33+
font-style: normal;
34+
}
35+
36+
@font-face {
37+
font-family: KGPerfectPenmanship;
38+
src: url(/fonts/KGPerfectPenmanship.otf);
39+
font-weight: normal;
40+
font-style: normal;
41+
}
42+
43+
2244
body {
2345
background: var(--background);
2446
color: var(--foreground);

‎app/page.tsx

+119-94
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,128 @@
1-
import Image from "next/image";
21

3-
export default function Home() {
2+
"use client";
3+
import React, { useState, useEffect } from 'react';
4+
5+
const IndexBox = () =>{
6+
const [visibleBoxes, setVisibleBoxes] = useState([]);
7+
const [visibleMainBox, setvisibleMianBox] = useState(false)
8+
const boxWidthArr = Array.from({ length: 10 }, (_, index) => index / 2 + 0.5);
9+
useEffect(() => {
10+
const promise = new Promise<void>((resolve) => {
11+
boxWidthArr.forEach((_, index) => {
12+
setTimeout(() => {
13+
setVisibleBoxes((prev) => [...prev, index]);
14+
if(index === boxWidthArr.length-1)setTimeout(()=>resolve(),50)
15+
}, index * 150);
16+
})
17+
})
18+
promise.then(()=>{
19+
setvisibleMianBox(true)
20+
})
21+
}, [boxWidthArr]);
422
return (
5-
<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)]">
6-
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={180}
12-
height={38}
13-
priority
14-
/>
15-
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
16-
<li className="mb-2 tracking-[-.01em]">
17-
Get started by editing{" "}
18-
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
19-
app/page.tsx
20-
</code>
21-
.
22-
</li>
23-
<li className="tracking-[-.01em]">
24-
Save and see your changes instantly.
25-
</li>
26-
</ol>
23+
<div className="w-4/5 h-screen min-h-[600px] flex items-center">
24+
{boxWidthArr.map((item, index) => (
25+
<div
26+
key={index}
27+
style={{
28+
width: `${item}%`,
29+
height: `${item * 14 + 5}%`,
30+
opacity: visibleBoxes.includes(index) ? 1 : 0,
31+
transition: 'opacity 0.5s ease',
32+
background: `rgb(${-item*20+150},${-item*20+150},${-item*20+150})`,
33+
margin: `0 ${item+2}px 0 0`
34+
}}
35+
className="rounded-l-3xl"
36+
></div>
37+
))}
38+
{
39+
<div
40+
className="w-2/3 h-4/5 bg-[#303030] rounded-3xl flex flex-col justify-around items-center"
41+
style={{
42+
opacity:visibleMainBox?1:0,
43+
transition: 'opacity 0.5s ease'
44+
}}
45+
>
2746

28-
<div className="flex gap-4 items-center flex-col sm:flex-row">
29-
<a
30-
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] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
31-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
32-
target="_blank"
33-
rel="noopener noreferrer"
47+
<div
48+
className='text-[#eee] text-[clamp(8px,7vw,120px)] select-none flex flex-col justify-center mt-[15vh]'
49+
style={{
50+
fontFamily:'SuperLobster',
51+
}}
3452
>
35-
<Image
36-
className="dark:invert"
37-
src="/vercel.svg"
38-
alt="Vercel logomark"
39-
width={20}
40-
height={20}
41-
/>
42-
Deploy now
43-
</a>
44-
<a
45-
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 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
46-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
47-
target="_blank"
48-
rel="noopener noreferrer"
53+
<div className='flex'>Hi <div className='hover:rotate-60 transition'>👋</div> Here,</div>
54+
<div>TaskManagerOL.</div>
55+
</div>
56+
<div
57+
className='text-[#eee] flex select-none flex-wrap'
58+
style={{
59+
fontFamily:'Backso'
60+
}}
4961
>
50-
Read our docs
51-
</a>
62+
<div className='mx-2.5'>Gentler</div> / <div className='mx-2.5'>Faster</div> / <div className='mx-2.5'>More passionate</div>
63+
</div>
5264
</div>
53-
</main>
54-
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
55-
<a
56-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
57-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
<Image
62-
aria-hidden
63-
src="/file.svg"
64-
alt="File icon"
65-
width={16}
66-
height={16}
67-
/>
68-
Learn
69-
</a>
70-
<a
71-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
72-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
73-
target="_blank"
74-
rel="noopener noreferrer"
75-
>
76-
<Image
77-
aria-hidden
78-
src="/window.svg"
79-
alt="Window icon"
80-
width={16}
81-
height={16}
82-
/>
83-
Examples
84-
</a>
85-
<a
86-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
87-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
88-
target="_blank"
89-
rel="noopener noreferrer"
90-
>
91-
<Image
92-
aria-hidden
93-
src="/globe.svg"
94-
alt="Globe icon"
95-
width={16}
96-
height={16}
97-
/>
98-
Go to nextjs.org →
99-
</a>
100-
</footer>
65+
}
66+
</div>
67+
)
68+
}
69+
70+
const BlogBox = () => {
71+
return (
72+
<div
73+
className="w-4/5 my-15 bg-[#a9a9a9] relative flex flex-wrap"
74+
>
75+
<div
76+
className='absolute top-[-6rem] left-2 text-[100px] font-bold'
77+
style={{
78+
fontFamily:'KGPerfectPenmanship'
79+
}}
80+
>
81+
Blog.
82+
</div>
83+
<div
84+
className='w-1/2 min-w-[300px] h-[600px] bg-[#616161]'
85+
>
86+
87+
</div>
88+
<div
89+
className='w-1/2 min-w-[300px] h-[600px] bg-[#616161]'
90+
>
91+
92+
</div>
93+
</div>
94+
)
95+
}
96+
97+
const ProjectBox = () => {
98+
return (
99+
<div
100+
className="w-4/5 h-[700px] my-15 bg-[#a9a9a9] relative flex flex-wrap"
101+
>
102+
<div
103+
className='absolute top-[-6rem] left-2 text-[100px] font-bold'
104+
style={{
105+
fontFamily:'KGPerfectPenmanship'
106+
}}
107+
>
108+
Project.
109+
</div>
110+
<div
111+
className='w-1/2 min-w-[300px] bg-[#616161]'
112+
>
113+
114+
</div>
115+
</div>
116+
)
117+
}
118+
119+
120+
export default function Home() {
121+
return (
122+
<div className="w-full h-auto flex justify-center items-center bg-[#fefbf5] flex-col">
123+
<IndexBox/>
124+
<BlogBox/>
125+
<ProjectBox/>
101126
</div>
102127
);
103128
}

0 commit comments

Comments
 (0)