Animation-heavy personal portfolio on Next.js: a custom cursor, a page-transition loader, and canvas backgrounds.
canvas-animationscss-modulesdark-themehandcodednextjspersonal-websiteportfolioreact
1.pageCursor {
2 position: fixed;
3 z-index: 100000;
4 top: 0;
5 left: 0;
6 width: 16px;
7 height: 16px;
8 margin: -8px 0 0 -8px;
9 pointer-events: none;
10 will-change: transform;
11 backface-visibility: hidden;
12}
13
14@media (max-width: 1023.98px) {
15 .pageCursor {
16 display: none;
17 }
18}
19
20.pageCursorCircle {
21 position: fixed;
22 z-index: 100000;
23 top: 0;
24 left: 0;
25 pointer-events: none;
26 margin: -25px 0 0 -26px;
27 width: 50px;
28 height: 50px;
29 border: 1px solid #ff2d2d;
30 opacity: 0.7;
31 border-radius: 50%;
32 transform-origin: center center;
33 transition: width 0.4s ease, height 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
34 will-change: transform, width, height, opacity;
35 backface-visibility: hidden;
36}
37
38.pageCursorCircle.activated,
39:global(.activated).pageCursorCircle,
40.pageCursorCircle:global(.activated) {
41 margin: -35px 0 0 -36px;
42 width: 70px;
43 height: 70px;
44 background-color: #ff2d2d;
45 opacity: 0.3;
46}
47
48@media (max-width: 1023.98px) {
49 .pageCursorCircle {
50 display: none;
51 }
52}