Skip to content

Commit 5a47816

Browse files
emilie-chenemilie-chen
committed
refactoring
1 parent 28a2850 commit 5a47816

File tree

8 files changed

+128
-112
lines changed

8 files changed

+128
-112
lines changed

‎README.md

-23
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,10 @@
1-
<div align="center">
2-
<a href="https://chronark.com"><h1 align="center">chronark.com</h1></a>
3-
4-
My personal website, built with [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/), [Upstash](https://upstash.com?ref=chronark.com), [Contentlayer](https://www.contentlayer.dev/) and deployed to [Vercel](https://vercel.com/).
5-
6-
</div>
7-
8-
<br/>
9-
10-
11-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/upstash/clone?demo-title=Next.js%20Portfolio%20with%20Pageview%20Counter&demo-description=Portfolio%20site%20with%20pageview%20counter%2C%20built%20with%20Next.js%2013%20App%20Router%2C%20Contentlayer%2C%20and%20Upstash%20Redis.&demo-url=https%3A%2F%2Fchronark.com%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1DA8n5a6WaP9p1FXf9LmUY%2Fc6264fa2732355787bf657df92dda8a1%2FCleanShot_2023-04-17_at_14.17.37.png&project-name=Next.js%20Portfolio%20with%20Pageview%20Counter&repository-name=nextjs-portfolio-pageview-counter&repository-url=https%3A%2F%2Fgithub.com%2Fchronark%2Fchronark.com&from=templates&integration-ids=oac_V3R1GIpkoJorr6fqyiwdhl17)
121

132
## Running Locally
143

15-
16-
```sh-session
17-
git clone https://github.com/chronark/chronark.com.git
18-
cd chronark.com
19-
```
20-
21-
224
Create a `.env` file similar to [`.env.example`](https://github.com/chronark/chronark.com/blob/main/.env.example).
235

246
Then install dependencies and run the development server:
257
```sh-session
268
pnpm install
279
pnpm dev
2810
```
29-
30-
31-
## Cloning / Forking
32-
33-
Please remove all of my personal information (projects, images, etc.) before deploying your own version of this site.

‎app/_components/Countdown.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, {useEffect, useState} from "react";
2+
3+
const Countdown = () => {
4+
const formatWithLeadingZero = (value: any) => (value < 10 ? `0${value}` : value);
5+
const [timeLeft, setTimeLeft] = useState({
6+
months: 0,
7+
days: 0,
8+
hours: 0,
9+
minutes: 0,
10+
seconds: "0.00"
11+
});
12+
useEffect(() => {
13+
const targetDate = new Date('January 19, 2024 17:00:00 EST');
14+
const interval = setInterval(() => {
15+
const now = new Date().getTime();
16+
const distance = targetDate.getTime() - now;
17+
18+
const months = Math.floor(distance / (1000 * 60 * 60 * 24 * 30.44)); // Average month length
19+
const days = Math.floor((distance % (1000 * 60 * 60 * 24 * 30.44)) / (1000 * 60 * 60 * 24));
20+
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
21+
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
22+
const seconds = (Math.floor((distance % (1000 * 60)) / 1000) + (distance % 1000) / 1000).toFixed(0);
23+
24+
setTimeLeft({ months, days, hours, minutes, seconds });
25+
if (distance < 0) {
26+
clearInterval(interval);
27+
setTimeLeft({
28+
months: 0,
29+
days: 0,
30+
hours: 0,
31+
minutes: 0,
32+
seconds: "0.00"
33+
});
34+
}
35+
}, 1);
36+
37+
return () => clearInterval(interval);
38+
}, []);
39+
40+
return (
41+
<>
42+
<div className="flex items-center space-x-2 text-lg font-medium w-72">
43+
<div><span className="text-2xl pr-2">{timeLeft.months}</span><span>M</span></div>
44+
<div><span className="text-2xl pr-2">{formatWithLeadingZero(timeLeft.days)}</span><span>D</span></div>
45+
<div><span className="text-2xl pr-2">{formatWithLeadingZero(timeLeft.hours)}</span><span>H</span></div>
46+
<div><span className="text-2xl pr-2">{formatWithLeadingZero(timeLeft.minutes)}</span><span>MIN</span></div>
47+
<div className="flex items-baseline">
48+
<span className="text-2xl w-10 text-left">{formatWithLeadingZero(timeLeft.seconds)}</span>
49+
<span>S</span>
50+
</div>
51+
</div>
52+
<div className="flex items-center space-x-4 text-md font-medium justify-center pr-6">
53+
<span className="whitespace-nowrap">until the game jam</span>
54+
</div>
55+
</>
56+
)
57+
}
58+
59+
export default Countdown;

‎app/_components/FloatingNav.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import Countdown from "@/app/_components/Countdown";
2+
3+
const FloatingNav = (props: any) => {
4+
const isExpanded = props.isExpanded === undefined ? false : props.isExpanded;
5+
6+
return (
7+
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 bg-white rounded-xl shadow-lg flex space-x-4">
8+
{
9+
isExpanded ? (
10+
<Countdown />
11+
) : (
12+
<></>
13+
)
14+
}
15+
{
16+
isExpanded ? (
17+
<></>
18+
) : (
19+
<>
20+
<a href="/about" className="inline-flex justify-center items-center py-3 px-3 lg:px-10 text-base font-medium text-center text-black rounded-lg bg-amber-100 hover:bg-amber-200 focus:bg-amber-200 dark:focus:bg-amber-400">
21+
Learn More
22+
</a>
23+
</>
24+
)
25+
}
26+
<a href="#" className="inline-flex justify-center items-center py-3 px-3 lg:px-10 text-base font-medium text-center text-white rounded-lg bg-amber-900 hover:bg-amber-700 focus:bg-amber-700 animate-pulse">
27+
Buy Tickets
28+
<svg className="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
29+
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
30+
</svg>
31+
</a>
32+
33+
</div>
34+
)
35+
}
36+
37+
export default FloatingNav;

‎app/about/page.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use client'
2+
3+
import FloatingNav from "@/app/_components/FloatingNav";
4+
5+
const Home = () => {
6+
return (
7+
<>
8+
<FloatingNav isExpanded={true}/>
9+
</>
10+
);
11+
}
12+
13+
export default Home;

‎app/layout.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import "../global.css";
22
import { Inter } from "@next/font/google";
33
import LocalFont from "@next/font/local";
4+
import Image from "next/image";
5+
import {px} from "framer-motion";
46

57
// export const metadata: Metadata = {
68
// title: {
@@ -63,11 +65,18 @@ export default function RootLayout({
6365
<body
6466
className={`${
6567
process.env.NODE_ENV === "development" ? "debug-screens" : undefined
66-
}`} style={{
67-
backgroundColor: "rgb(190, 180, 169)",
68-
}}
68+
}`}
6969
>
70-
{children}
70+
<div style={
71+
{
72+
backgroundImage: "url(/cork.png)",
73+
backgroundRepeat: "repeat",
74+
backgroundSize: "150px 150px",
75+
}
76+
}>
77+
78+
{children}
79+
</div>
7180
</body>
7281
</html>
7382
);

‎app/page.tsx

+6-85
Original file line numberDiff line numberDiff line change
@@ -3,95 +3,16 @@
33
import Link from "next/link";
44
import React from "react";
55
import Image from "next/image";
6+
import FloatingNav from "@/app/_components/FloatingNav";
67
//import banner from "/Banner_Unbranded_2024.png";
7-
import { useState, useEffect } from 'react';
88

9-
const navigation = [
10-
{ name: "Projects", href: "/projects" },
11-
{ name: "Contact", href: "/contact" },
12-
];
139

14-
const Nav = (props: any) => {
15-
const isExpanded = props.isExpanded === undefined ? false : props.isExpanded;
16-
const formatWithLeadingZero = (value: any) => (value < 10 ? `0${value}` : value);
17-
const [timeLeft, setTimeLeft] = useState({
18-
months: 0,
19-
days: 0,
20-
hours: 0,
21-
minutes: 0,
22-
seconds: "0.00"
23-
});
24-
useEffect(() => {
25-
const targetDate = new Date('January 19, 2024 17:00:00 EST');
26-
const interval = setInterval(() => {
27-
const now = new Date().getTime();
28-
const distance = targetDate.getTime() - now;
10+
// const navigation = [
11+
// { name: "Projects", href: "/projects" },
12+
// { name: "Contact", href: "/contact" },
13+
// ];
2914

30-
const months = Math.floor(distance / (1000 * 60 * 60 * 24 * 30.44)); // Average month length
31-
const days = Math.floor((distance % (1000 * 60 * 60 * 24 * 30.44)) / (1000 * 60 * 60 * 24));
32-
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
33-
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
34-
const seconds = (Math.floor((distance % (1000 * 60)) / 1000) + (distance % 1000) / 1000).toFixed(0);
3515

36-
setTimeLeft({ months, days, hours, minutes, seconds });
37-
if (distance < 0) {
38-
clearInterval(interval);
39-
setTimeLeft({
40-
months: 0,
41-
days: 0,
42-
hours: 0,
43-
minutes: 0,
44-
seconds: "0.00"
45-
});
46-
}
47-
}, 1);
48-
49-
return () => clearInterval(interval);
50-
}, []);
51-
return (
52-
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 bg-white rounded-xl shadow-lg flex space-x-4">
53-
{
54-
isExpanded ? (
55-
<>
56-
<div className="flex items-center space-x-2 text-lg font-medium w-72">
57-
<div><span className="text-2xl pr-2">{timeLeft.months}</span><span>M</span></div>
58-
<div><span className="text-2xl pr-2">{formatWithLeadingZero(timeLeft.days)}</span><span>D</span></div>
59-
<div><span className="text-2xl pr-2">{formatWithLeadingZero(timeLeft.hours)}</span><span>H</span></div>
60-
<div><span className="text-2xl pr-2">{formatWithLeadingZero(timeLeft.minutes)}</span><span>MIN</span></div>
61-
<div className="flex items-baseline">
62-
<span className="text-2xl w-10 text-left">{formatWithLeadingZero(timeLeft.seconds)}</span>
63-
<span>S</span>
64-
</div>
65-
</div>
66-
<div className="flex items-center space-x-4 text-md font-medium justify-center pr-6">
67-
<span className="whitespace-nowrap">until the game jam</span>
68-
</div>
69-
</>
70-
) : (
71-
<></>
72-
)
73-
}
74-
{
75-
isExpanded ? (
76-
<></>
77-
) : (
78-
<>
79-
<a href="/about" className="inline-flex justify-center items-center py-3 px-3 lg:px-10 text-base font-medium text-center text-black rounded-lg bg-amber-100 hover:bg-amber-200 focus:ring-4 focus:bg-amber-200 dark:focus:bg-amber-400">
80-
Learn More
81-
</a>
82-
</>
83-
)
84-
}
85-
<a href="#" className="inline-flex justify-center items-center py-3 px-3 lg:px-10 text-base font-medium text-center text-white rounded-lg bg-amber-900 hover:bg-amber-700 focus:ring-4 focus:bg-amber-700 animate-pulse">
86-
Buy Tickets
87-
<svg className="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
88-
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
89-
</svg>
90-
</a>
91-
92-
</div>
93-
)
94-
}
9516

9617
export default function Home() {
9718
return (
@@ -102,7 +23,7 @@ export default function Home() {
10223
sizes="100vw"
10324
className="w-full h-auto"/>
10425

105-
<Nav isExpanded={false}/>
26+
<FloatingNav isExpanded={false}/>
10627
</div>
10728
);
10829
}

‎public/og.png

-141 KB
Binary file not shown.

‎public/planetfall.png

-645 KB
Binary file not shown.

0 commit comments

Comments
 (0)