Animation-heavy personal portfolio on Next.js: a custom cursor, a page-transition loader, and canvas backgrounds.
canvas-animationscss-modulesdark-themehandcodednextjspersonal-websiteportfolioreact
1.nav {
2 background-color: white;
3 color: black;
4 display: flex;
5 flex-direction: column;
6 justify-content: space-between;
7 width: 60px;
8 top: 0;
9 left: 0;
10 bottom: 0;
11 position: fixed;
12 z-index: 100;
13 border-right: 1px solid rgba(125, 125, 125, 0.2);
14}
15
16@media (max-width: 1023.98px) {
17 .nav {
18 bottom: auto;
19 left: 0;
20 flex-direction: row;
21 width: 100%;
22 height: 60px;
23 border-right: none;
24 }
25}
26
27.navLogo {
28 display: flex;
29 align-items: center;
30 justify-content: center;
31 background-image: linear-gradient(
32 135deg,
33 var(--color-blue) 0%,
34 var(--color-purple) 100%
35 );
36 width: 40px;
37 height: 40px;
38 border-radius: 3px;
39 z-index: 3;
40 margin-left: 10px;
41 margin-top: 10px;
42 transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
43 text-decoration: none;
44}
45
46.navLogo span {
47 display: flex;
48 align-items: center;
49 justify-content: center;
50 padding-bottom: 3px;
51}
52
53.navLogo span::after {
54 content: ">_";
55 font-family: monospace;
56 font-weight: 700;
57 font-size: 14px;
58 color: rgba(255, 255, 255, 0.9);
59 line-height: 1;
60}
61
62.navLogo:hover {
63 transform: rotate(12deg) scale(1.08);
64 box-shadow: 0 0 14px rgba(132, 43, 255, 0.3);
65}
66
67@media (max-width: 767.98px) {
68 .navLogo {
69 left: 35px;
70 }
71}
72
73.navContact {
74 font-weight: 700;
75 writing-mode: vertical-rl;
76 transform: rotate(180deg);
77 text-decoration: none;
78 font-size: 1.2em;
79 line-height: 1.5em;
80 margin: 15px;
81 color: black;
82 position: relative;
83 overflow: hidden;
84}
85
86.navContact::before {
87 content: "";
88 display: block;
89 position: absolute;
90 z-index: -1;
91 right: 100%;
92 width: 100%;
93 height: 100%;
94 background: rgba(14, 64, 244, 0.3);
95 transition: right 250ms;
96}
97
98.navContact:hover::before {
99 right: 60%;
100}
101
102@media (max-width: 1023.98px) {
103 .navContact {
104 writing-mode: horizontal-tb;
105 transform: none;
106 }
107}
108
109@media (max-width: 767.98px) {
110 .navContact {
111 writing-mode: horizontal-tb;
112 transform: none;
113 display: none;
114 }
115}
116
117.navCurrent {
118 font-family: monospace;
119 background-color: black;
120 text-align: center;
121 padding: 5px;
122 color: white;
123}
124
125@media (max-width: 1023.98px) {
126 .navCurrent {
127 writing-mode: vertical-rl;
128 transform: rotate(180deg);
129 }
130}