Skip to content

Commit 7687420

Browse files
sarincasmsarincasm
committed
day-34
1 parent 25a3826 commit 7687420

File tree

3 files changed

+78
-1
lines changed

3 files changed

+78
-1
lines changed

‎components/Featured.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const featuredComponents = {
2020
23: dynamic(() => import('../pages/day-23')),
2121
27: dynamic(() => import('../pages/day-27')),
2222
28: dynamic(() => import('../pages/day-28')),
23+
33: dynamic(() => import('../pages/day-33')),
2324
}
2425

2526
const featuredDays = Object.keys(featuredComponents)

‎pages/day-34.jsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/** @format */
2+
3+
import styled, {keyframes} from 'styled-components'
4+
5+
import Layout from '../components/Layout'
6+
import Frame from '../components/Frame'
7+
import Center from '../components/Center'
8+
9+
const BG_COLOR = '#EA4C89'
10+
const MyFrame = styled(Frame)`
11+
background: ${BG_COLOR};
12+
`
13+
14+
const LineAnimation = keyframes`
15+
from {
16+
transform: scaleX(0);
17+
}
18+
to {
19+
transform: scaleX(1);
20+
}
21+
`
22+
const Line = styled.div`
23+
width: 225px;
24+
height: 2px;
25+
background: #fff;
26+
margin: 15px 0;
27+
animation: ${LineAnimation} 1s ease-out 0s 1 normal both;
28+
`
29+
30+
const Text = styled.svg`
31+
stroke: ${BG_COLOR};
32+
stroke-dasharray: 270;
33+
stroke-dashoffset: 0;
34+
`
35+
36+
const FillAnimation = keyframes`
37+
from {
38+
stroke-dashoffset: 0;
39+
}
40+
to {
41+
stroke-dashoffset: 270;
42+
}
43+
`
44+
const PathA = styled.path`
45+
fill: #fff;
46+
stroke-width: 6;
47+
animation: ${FillAnimation} 1.2s ease-in-out both;
48+
`
49+
const PathB = styled.path`
50+
fill: none;
51+
stroke-width: 12;
52+
animation: ${FillAnimation} 1.7s ease-in-out both;
53+
`
54+
const PathC = styled.path`
55+
fill: none;
56+
stroke-width: 18;
57+
animation: ${FillAnimation} 2.2s ease-in-out both;
58+
`
59+
60+
export default function Day() {
61+
return (
62+
<Layout titleFragment="Day 34 - Hello">
63+
<MyFrame>
64+
<Center>
65+
<Line />
66+
<Text width="224px" height="53px" viewBox="0 0 224 53">
67+
<PathA d="M43.4389648,51.4819336 L29.6757812,51.4819336 L29.6757812,30.8198242 L13.7631836,30.8198242 L13.7631836,51.4819336 L0,51.4819336 L0,0.797363281 L13.7631836,0.797363281 L13.7631836,19.5874023 L29.6757812,19.5874023 L29.6757812,0.797363281 L43.4389648,0.797363281 L43.4389648,51.4819336 Z M84.4858398,51.4819336 L54.394043,51.4819336 L54.394043,0.797363281 L84.4858398,0.797363281 L84.4858398,11.7871094 L68.0878906,11.7871094 L68.0878906,19.7607422 L83.2724609,19.7607422 L83.2724609,30.7504883 L68.0878906,30.7504883 L68.0878906,40.3188477 L84.4858398,40.3188477 L84.4858398,51.4819336 Z M93.3608398,51.4819336 L93.3608398,0.797363281 L107.054688,0.797363281 L107.054688,40.4228516 L126.572754,40.4228516 L126.572754,51.4819336 L93.3608398,51.4819336 Z M134.685059,51.4819336 L134.685059,0.797363281 L148.378906,0.797363281 L148.378906,40.4228516 L167.896973,40.4228516 L167.896973,51.4819336 L134.685059,51.4819336 Z M223.435059,26.0703125 C223.435059,34.5986755 221.343445,41.0815208 217.160156,45.519043 C212.976867,49.9565652 206.852254,52.175293 198.786133,52.175293 C190.835572,52.175293 184.739849,49.9450093 180.498779,45.484375 C176.25771,41.0237407 174.137207,34.5293395 174.137207,26.0009766 C174.137207,17.565062 176.246154,11.1226622 180.464111,6.67358398 C184.682069,2.22450575 190.81246,0 198.855469,0 C206.92159,0 213.034647,2.20717194 217.194824,6.62158203 C221.355001,11.0359921 223.435059,17.5188375 223.435059,26.0703125 L223.435059,26.0703125 Z M188.559082,26.0703125 C188.559082,35.8698407 191.968065,40.7695312 198.786133,40.7695312 C202.252947,40.7695312 204.824129,39.5792762 206.499756,37.1987305 C208.175383,34.8181847 209.013184,31.1087492 209.013184,26.0703125 C209.013184,21.0087638 208.163827,17.2704385 206.465088,14.8552246 C204.766349,12.4400107 202.229835,11.2324219 198.855469,11.2324219 C191.991177,11.2324219 188.559082,16.178336 188.559082,26.0703125 L188.559082,26.0703125 Z" />
68+
<PathB d="M43.4389648,51.4819336 L29.6757812,51.4819336 L29.6757812,30.8198242 L13.7631836,30.8198242 L13.7631836,51.4819336 L0,51.4819336 L0,0.797363281 L13.7631836,0.797363281 L13.7631836,19.5874023 L29.6757812,19.5874023 L29.6757812,0.797363281 L43.4389648,0.797363281 L43.4389648,51.4819336 Z M84.4858398,51.4819336 L54.394043,51.4819336 L54.394043,0.797363281 L84.4858398,0.797363281 L84.4858398,11.7871094 L68.0878906,11.7871094 L68.0878906,19.7607422 L83.2724609,19.7607422 L83.2724609,30.7504883 L68.0878906,30.7504883 L68.0878906,40.3188477 L84.4858398,40.3188477 L84.4858398,51.4819336 Z M93.3608398,51.4819336 L93.3608398,0.797363281 L107.054688,0.797363281 L107.054688,40.4228516 L126.572754,40.4228516 L126.572754,51.4819336 L93.3608398,51.4819336 Z M134.685059,51.4819336 L134.685059,0.797363281 L148.378906,0.797363281 L148.378906,40.4228516 L167.896973,40.4228516 L167.896973,51.4819336 L134.685059,51.4819336 Z M223.435059,26.0703125 C223.435059,34.5986755 221.343445,41.0815208 217.160156,45.519043 C212.976867,49.9565652 206.852254,52.175293 198.786133,52.175293 C190.835572,52.175293 184.739849,49.9450093 180.498779,45.484375 C176.25771,41.0237407 174.137207,34.5293395 174.137207,26.0009766 C174.137207,17.565062 176.246154,11.1226622 180.464111,6.67358398 C184.682069,2.22450575 190.81246,0 198.855469,0 C206.92159,0 213.034647,2.20717194 217.194824,6.62158203 C221.355001,11.0359921 223.435059,17.5188375 223.435059,26.0703125 L223.435059,26.0703125 Z M188.559082,26.0703125 C188.559082,35.8698407 191.968065,40.7695312 198.786133,40.7695312 C202.252947,40.7695312 204.824129,39.5792762 206.499756,37.1987305 C208.175383,34.8181847 209.013184,31.1087492 209.013184,26.0703125 C209.013184,21.0087638 208.163827,17.2704385 206.465088,14.8552246 C204.766349,12.4400107 202.229835,11.2324219 198.855469,11.2324219 C191.991177,11.2324219 188.559082,16.178336 188.559082,26.0703125 L188.559082,26.0703125 Z" />
69+
<PathC d="M43.4389648,51.4819336 L29.6757812,51.4819336 L29.6757812,30.8198242 L13.7631836,30.8198242 L13.7631836,51.4819336 L0,51.4819336 L0,0.797363281 L13.7631836,0.797363281 L13.7631836,19.5874023 L29.6757812,19.5874023 L29.6757812,0.797363281 L43.4389648,0.797363281 L43.4389648,51.4819336 Z M84.4858398,51.4819336 L54.394043,51.4819336 L54.394043,0.797363281 L84.4858398,0.797363281 L84.4858398,11.7871094 L68.0878906,11.7871094 L68.0878906,19.7607422 L83.2724609,19.7607422 L83.2724609,30.7504883 L68.0878906,30.7504883 L68.0878906,40.3188477 L84.4858398,40.3188477 L84.4858398,51.4819336 Z M93.3608398,51.4819336 L93.3608398,0.797363281 L107.054688,0.797363281 L107.054688,40.4228516 L126.572754,40.4228516 L126.572754,51.4819336 L93.3608398,51.4819336 Z M134.685059,51.4819336 L134.685059,0.797363281 L148.378906,0.797363281 L148.378906,40.4228516 L167.896973,40.4228516 L167.896973,51.4819336 L134.685059,51.4819336 Z M223.435059,26.0703125 C223.435059,34.5986755 221.343445,41.0815208 217.160156,45.519043 C212.976867,49.9565652 206.852254,52.175293 198.786133,52.175293 C190.835572,52.175293 184.739849,49.9450093 180.498779,45.484375 C176.25771,41.0237407 174.137207,34.5293395 174.137207,26.0009766 C174.137207,17.565062 176.246154,11.1226622 180.464111,6.67358398 C184.682069,2.22450575 190.81246,0 198.855469,0 C206.92159,0 213.034647,2.20717194 217.194824,6.62158203 C221.355001,11.0359921 223.435059,17.5188375 223.435059,26.0703125 L223.435059,26.0703125 Z M188.559082,26.0703125 C188.559082,35.8698407 191.968065,40.7695312 198.786133,40.7695312 C202.252947,40.7695312 204.824129,39.5792762 206.499756,37.1987305 C208.175383,34.8181847 209.013184,31.1087492 209.013184,26.0703125 C209.013184,21.0087638 208.163827,17.2704385 206.465088,14.8552246 C204.766349,12.4400107 202.229835,11.2324219 198.855469,11.2324219 C191.991177,11.2324219 188.559082,16.178336 188.559082,26.0703125 L188.559082,26.0703125 Z" />
70+
</Text>
71+
<Line />
72+
</Center>
73+
</MyFrame>
74+
</Layout>
75+
)
76+
}

‎pages/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const StyledA = styled.a`
6666
`
6767

6868
export default function Index() {
69-
const daysDone = 33
69+
const daysDone = 34
7070
const days = [0].concat([...Array(daysDone).keys()])
7171
const links = days.map((_, index) => (
7272
<Link key={index} href={`/day-${index}`} passHref>

0 commit comments

Comments
 (0)