Animation-heavy personal portfolio on Next.js: a custom cursor, a page-transition loader, and canvas backgrounds.
canvas-animationscss-modulesdark-themehandcodednextjspersonal-websiteportfolioreact
1:root {
2 --color-primary: #20232e;
3 --color-blue: #0e3ff4;
4 --color-purple: #842bff;
5 --radius-2: 3px;
6 --transition-250: 250ms;
7 --animation-1500: 1500ms;
8}
9
10body {
11 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
12 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
13 color: white;
14 background-color: var(--color-primary);
15 min-height: 100vh;
16 width: 100%;
17 padding: 0;
18 margin: 0;
19 overflow-x: hidden;
20 text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
21 text-rendering: optimizeLegibility;
22 user-select: none;
23 cursor: none;
24}
25
26a,
27button {
28 cursor: none;
29}
30
31.transition {
32 position: absolute;
33 top: 0;
34 left: 0;
35 right: 0;
36 min-height: 100vh;
37 width: 100%;
38 transition: opacity var(--transition-250);
39 will-change: opacity;
40}
41
42.transition-enter,
43.transition-appear {
44 opacity: 0;
45}
46
47.transition-enter-active,
48.transition-appear-active,
49.transition-enter-done,
50.transition-appear-done {
51 opacity: 1;
52}
53
54.transition-exit {
55 opacity: 1;
56}
57
58.transition-exit-active,
59.transition-exit-done {
60 opacity: 0;
61}
62
63@media (prefers-reduced-motion: reduce) {
64 .transition {
65 transition: none;
66 }
67
68 .transition-enter,
69 .transition-appear,
70 .transition-exit-active,
71 .transition-exit-done {
72 opacity: 1;
73 }
74}