Animation-heavy personal portfolio on Next.js: a custom cursor, a page-transition loader, and canvas backgrounds.
canvas-animationscss-modulesdark-themehandcodednextjspersonal-websiteportfolioreact
1.gridArea {
2 display: grid;
3 grid-template-columns: 60px 15% 1fr 1fr 15% 60px;
4 grid-template-rows: 1fr auto 1fr;
5 grid-template-areas:
6 ". . . . . ."
7 ". . main main . ."
8 ". . . . . .";
9 min-height: 100vh;
10 width: 100%;
11}
12
13@media (max-width: 1023.98px) {
14 .gridArea {
15 grid-template-columns: 10px 5% 1fr 1fr 5% 10px;
16 }
17}
18
19.gridLines {
20 position: fixed;
21 pointer-events: none;
22 display: grid;
23 grid-template-columns: 60px 15% 1fr 1fr 15% 60px;
24 grid-template-rows: 1fr auto 1fr;
25 grid-template-areas:
26 ". . . . . ."
27 ". . main main . ."
28 ". . . . . .";
29 min-height: 100vh;
30 width: 100%;
31}
32
33@media (max-width: 1023.98px) {
34 .gridLines {
35 display: none;
36 }
37}
38
39.gridLine {
40 border-right: 1px solid rgba(125, 125, 125, 0.2);
41 grid-row: 1 / -1;
42}