Skip to content

Commit 1844ecf

Browse files
TaskManagerOLTaskManagerOL
committed
feat:top finish
1 parent caab6e8 commit 1844ecf

File tree

4 files changed

+215
-19
lines changed

4 files changed

+215
-19
lines changed

‎app/globals.css

Lines changed: 122 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
}
2222
}
2323

24+
25+
body::-webkit-scrollbar {
26+
display: none; /* 隐藏滚动条 */
27+
}
28+
2429
@font-face {
2530
font-family: Backso;
2631
src: url(/fonts/Backso.otf);
@@ -255,22 +260,124 @@
255260
}
256261

257262
.rollship {
258-
width: 80px;
259-
height: 58px;
260-
background-image: url(/svg/ship.svg);
261-
background-repeat: no-repeat;
262-
transform-origin: center center;
263-
animation: rollship 5s linear infinite;
263+
width: 80px;
264+
height: 58px;
265+
background-image: url(/svg/ship.svg);
266+
background-repeat: no-repeat;
267+
transform-origin: center center;
268+
animation: rollship 5s linear infinite;
264269
}
265270

266271
.lighter {
267-
position: absolute;
268-
right: -140px;
269-
bottom: -30px;
270-
z-index: 4;
271-
width: 600px;
272-
height: 400px;
273-
background-image: url(/svg/lighter.svg);
274-
background-repeat: no-repeat;
275-
scale:0.5;
272+
position: absolute;
273+
right: -140px;
274+
bottom: -30px;
275+
z-index: 4;
276+
width: 600px;
277+
height: 400px;
278+
background-image: url(/svg/lighter.svg);
279+
background-repeat: no-repeat;
280+
scale:0.5;
281+
}
282+
283+
@keyframes sayhi {
284+
0%{
285+
transform: scale(1);
286+
}
287+
100%{
288+
transform: scale(100);
289+
}
290+
}
291+
292+
@keyframes saybye {
293+
0%{
294+
transform: scale(100);
295+
}
296+
100%{
297+
transform: scale(0.001);
298+
}
299+
}
300+
301+
.animate-sayhi {
302+
animation: sayhi 0.8s ease-out forwards;
303+
transform-origin: center;
304+
border-radius: 10000px;
305+
}
306+
307+
.animate-saybye {
308+
animation: saybye 0.8s ease-out forwards;
309+
transform-origin: center;
310+
border-radius: 10000px;
311+
}
312+
313+
@keyframes changeIcon {
314+
0%{
315+
background-color: #303030;
316+
clip-path: path("M31 0a30.7 30.7 0 0 0-9.8 59.9c1.55.3 2.116-.6 2.116-1.4s-.026-2.7-.042-5.3c-8.622 1.9-10.44-4.1-10.44-4.1-1.414-3.5-3.448-4.5-3.448-4.5-2.815-1.9.213-1.9.213-1.9a6.74 6.74 0 0 1 4.746 3.2c2.766 4.7 7.254 3.3 9.023 2.6a6.3 6.3 0 0 1 1.966-4.1c-6.88-.8-14.12-3.5-14.12-15.2a11.964 11.964 0 0 1 3.193-8.3 10.9 10.9 0 0 1 .3-8.1s2.6-.9 8.525 3.1a30.617 30.617 0 0 1 15.522 0c5.92-4 8.517-3.1 8.517-3.1a10.886 10.886 0 0 1 .308 8.1 11.946 11.946 0 0 1 3.186 8.3c0 11.8-7.248 14.4-14.155 15.1a7.52 7.52 0 0 1 2.1 5.7c0 4.1-.04 7.5-.04 8.5 0 .8.56 1.7 2.13 1.4A30.708 30.708 0 0 0 31 0");
317+
}
318+
50%{
319+
transform: rotate(180deg);
320+
clip-path: polygon(30% 20%,30% 20%,30% 20%, 80% 70%,80% 70%,80% 70%, 70% 80%,70% 80%,70% 80%, 20% 30%,20% 30%,20% 30%);
321+
}
322+
100%{
323+
transform: rotate(270deg);
324+
background-color: #a1a1a1;
325+
clip-path: polygon(
326+
20% 30%,30% 20%,
327+
50% 42.5%,
328+
70% 20%,80% 30%,
329+
57.5% 50%,
330+
80% 70%, 70% 80%,
331+
50% 57.5%,
332+
30% 80%,20% 70%,
333+
42.5% 50%);
334+
}
335+
}
336+
337+
338+
.animate-changeIcon1 {
339+
transform: scale(0.8);
340+
background-color: #303030;
341+
clip-path: path("M31 0a30.7 30.7 0 0 0-9.8 59.9c1.55.3 2.116-.6 2.116-1.4s-.026-2.7-.042-5.3c-8.622 1.9-10.44-4.1-10.44-4.1-1.414-3.5-3.448-4.5-3.448-4.5-2.815-1.9.213-1.9.213-1.9a6.74 6.74 0 0 1 4.746 3.2c2.766 4.7 7.254 3.3 9.023 2.6a6.3 6.3 0 0 1 1.966-4.1c-6.88-.8-14.12-3.5-14.12-15.2a11.964 11.964 0 0 1 3.193-8.3 10.9 10.9 0 0 1 .3-8.1s2.6-.9 8.525 3.1a30.617 30.617 0 0 1 15.522 0c5.92-4 8.517-3.1 8.517-3.1a10.886 10.886 0 0 1 .308 8.1 11.946 11.946 0 0 1 3.186 8.3c0 11.8-7.248 14.4-14.155 15.1a7.52 7.52 0 0 1 2.1 5.7c0 4.1-.04 7.5-.04 8.5 0 .8.56 1.7 2.13 1.4A30.708 30.708 0 0 0 31 0");
342+
}
343+
344+
.animate-changeIcon2 {
345+
transform: scale(0.8);
346+
animation: changeIcon 0.6s ease-in forwards;
347+
}
348+
349+
.animate-changeIcon3 {
350+
transform: scale(0.8);
351+
animation: changeIcon 0.6s ease-out forwards reverse;
352+
}
353+
354+
.telegram {
355+
width: 64px;
356+
height: 64px;
357+
background-image: url(/svg/telegram.svg);
358+
transform: scale(0.9);
359+
background-repeat: no-repeat;
276360
}
361+
362+
@keyframes havetext {
363+
0%{
364+
opacity: 0;
365+
}
366+
100%{
367+
opacity: 1;
368+
}
369+
}
370+
371+
.notext {
372+
opacity: 0;
373+
}
374+
375+
.animate-havetext{
376+
opacity: 0;
377+
animation: havetext 0.4s 0.4s ease-out forwards;
378+
}
379+
380+
.animate-notext{
381+
opacity: 1;
382+
animation: havetext 0.3s ease-out forwards reverse;
383+
}

‎app/layout.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,14 @@ export default function RootLayout({
6868
background-repeat: no-repeat;
6969
scale:0.5;
7070
}
71+
72+
.telegram {
73+
width: 64px;
74+
height: 64px;
75+
background-image: url(./svg/telegram.svg);
76+
transform: scale(0.9);
77+
background-repeat: no-repeat;
78+
}
7179
`}</style>
7280
{children}
7381
</body>

‎app/page.tsx

Lines changed: 84 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const BlogBox = () => {
9393
className="w-4/5 mt-[5rem] mb-[15rem] bg-[#a9a9a9] relative flex flex-wrap justify-center"
9494
>
9595
<div
96-
className='absolute top-[-4.5rem] md:top-[-6rem] left-2 text-[70px] md:text-[100px] font-bold z-50'
96+
className='absolute top-[-4.5rem] md:top-[-6rem] left-2 text-[70px] md:text-[100px] font-bold z-30'
9797
style={{
9898
fontFamily:'KGPerfectPenmanship'
9999
}}
@@ -150,7 +150,7 @@ const ProjectBox = () => {
150150
className="w-4/5 my-[3rem] bg-[#a9a9a9] relative flex flex-wrap mb-[15rem]"
151151
>
152152
<div
153-
className='absolute top-[-5rem] left-2 text-[80px] font-bold md:text-[100px] md:top-[-6rem] z-50'
153+
className='absolute top-[-5rem] left-2 text-[80px] font-bold md:text-[100px] md:top-[-6rem] z-30'
154154
style={{
155155
fontFamily:'KGPerfectPenmanship'
156156
}}
@@ -172,7 +172,7 @@ const ProjectBox = () => {
172172
<div className='animate-tasklist'>T</div>
173173
</div>
174174
<div className='w-3/5 text-[#000] tracking-[-0.3px] transition-all group-hover:mt-2 text-center mb-[40px]'>
175-
Can I complete all ddl's while suffering from amnesia.A TODO site.
175+
Can I complete all deadline while suffering from amnesia.A TODO site.
176176
</div>
177177
<div className='absolute bg-black w-[80px] md:w-[120px] h-[40px] md:h-[60px] right-[10px] md:right-[40px] top-[-60px] transition-all ease-in-out duration-200 text-[#fff] flex justify-center items-center group-hover:top-0'>
178178
<div className='mb-[20px] opacity-0 transition-all duration-200 ease-in group-hover:opacity-100 group-hover:mb-0 text-[12px] tracking-[-0.3px]'>view project</div>
@@ -223,9 +223,89 @@ const BottomWave = () => {
223223
);
224224
};
225225

226+
const GithubIcon = ({ onClick, value }: { onClick: () => void, value: boolean }) => {
227+
const [firstTime,setFirstTime] = useState(false)
228+
useEffect(()=>{
229+
if(value)setFirstTime(true)
230+
},[value])
231+
return (
232+
<div
233+
className='absolute top-[1vw] right-[2vw] cursor-pointer z-50 flex justify-center items-center'
234+
onClick={onClick}
235+
style={{position:value?'fixed':'absolute'}}
236+
>
237+
<div
238+
className={`${!firstTime?'animate-changeIcon1':(value?'animate-changeIcon2':'animate-changeIcon3')} w-[64px] h-[64px] transition-all`}
239+
key={value?'ani1':'ani2'}
240+
></div>
241+
</div>
242+
)
243+
}
244+
245+
const HoverLever = ({ value,styleArr }: { value: Boolean,styleArr: Array }) => {
246+
return (
247+
<div
248+
className={`fixed bg-[#1f4954] z-40 animate-sayhi ${
249+
value ? 'animate-sayhi' : 'animate-saybye'
250+
}`}
251+
style={{
252+
top: `${styleArr[1] - styleArr[2] / 80}px`,
253+
left: `${styleArr[0] - styleArr[2] / 80}px`,
254+
width: `${styleArr[2] / 40}px`,
255+
height: `${styleArr[2] / 40}px`,
256+
}}
257+
key={value ? 'sayhi' : 'saybye'}
258+
></div>
259+
)
260+
}
261+
262+
const HoverText = ({value}:{value:Boolean}) => {
263+
const [firstTime,setFirstTime] = useState(false)
264+
useEffect(()=>{
265+
if(value)setFirstTime(true)
266+
},[value])
267+
return(
268+
<div
269+
className='absolute w-screen h-screen top-0 left-0 z-50 flex justify-center items-center'
270+
>
271+
<div
272+
className={`${!firstTime?'notext':value?'animate-havetext':'animate-notext'}`}
273+
key={value?'text':'no'}
274+
>
275+
<div className='flex justify-center items-center relative w-[200px] h-[80px] rounded-[1000px] bg-[#285d6d]'>
276+
<a href="https://github.com/TaskManagerOL" target='_blank'>
277+
<div className='animate-changeIcon1 w-[64px] h-[64px] transition-all'></div>
278+
</a>
279+
<a href="https://t.me/TaskManagerOL" target='_blank'>
280+
<div className='telegram'></div>
281+
</a>
282+
</div>
283+
</div>
284+
</div>
285+
)
286+
}
287+
226288
export default function Home() {
289+
const [hoverValue, setHoverValue] = useState(false);
290+
const [mouseclick,setMouseclick] = useState(['0','0','0'])
291+
const handleIconClick = (e: MouseEvent) => {
292+
setHoverValue(!hoverValue);
293+
const mouseX = e.clientX;
294+
const mouseY = e.clientY;
295+
const length = Math.max(window.innerWidth,window.innerHeight)
296+
setMouseclick([
297+
mouseX,
298+
mouseY,
299+
length,
300+
])
301+
};
227302
return (
228-
<div className="w-full h-auto flex justify-center items-center bg-[#fefbf5] flex-col overflow-hidden relative">
303+
<div
304+
className="w-full h-auto flex justify-center items-center bg-[#fefbf5] flex-col overflow-hidden relative"
305+
>
306+
<HoverLever value={hoverValue} styleArr={mouseclick}/>
307+
<HoverText value={hoverValue} />
308+
<GithubIcon onClick={handleIconClick} value={hoverValue}/>
229309
<IndexBox/>
230310
<BlogBox/>
231311
<ProjectBox/>

‎public/svg/telegram.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)