My personal site hosted @ https://indexx.dev
indexx.dev
1/* ---------------------------------------------------
2 VARIABLES & PROPERTIES
3--------------------------------------------------- */
4@import url("https://fonts.googleapis.com/css2?family=Jua&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
5
6:root {
7 --line: transparent;
8 --line-active: #ffffff;
9 --bg-gradient: linear-gradient(
10 45deg,
11 rgb(0, 29, 36),
12 rgb(0, 35, 44),
13 rgb(0, 29, 36)
14 );
15 --ring-center-x: 50%;
16 --ring-pattern: repeating-radial-gradient(
17 circle at var(--ring-center-x) center,
18 transparent 0px,
19 transparent 113px,
20 rgba(0, 27, 34, 0.3) 203px,
21 rgba(0, 74, 92, 0.136) 206px
22 );
23
24 transition: --ring-center-x 0.5s ease;
25}
26
27@property --animatedBorder {
28 syntax: "<angle>";
29 inherits: false;
30 initial-value: 0deg;
31}
32
33/* ---------------------------------------------------
34 GLOBAL STYLES
35--------------------------------------------------- */
36html,
37body {
38 font-family: "Nunito Sans", sans-serif;
39 width: 100%;
40 height: 100%;
41 background: var(--ring-pattern), var(--bg-gradient);
42 background-blend-mode: normal;
43}
44
45:root:has(main#page.side) {
46 --ring-center-x: 35%;
47}
48
49a {
50 color: rgb(0, 151, 188) !important;
51 text-decoration: none;
52}
53
54a:hover .project-card {
55 border-color: rgb(0, 83, 104);
56}
57
58.unselectable {
59 user-select: none;
60 -webkit-user-select: none;
61 -moz-user-select: none;
62 -ms-user-select: none;
63}
64
65/* ---------------------------------------------------
66 PAGE LAYOUT
67--------------------------------------------------- */
68main#page {
69 position: absolute;
70 top: 50%;
71 left: 0;
72 width: 100%;
73 margin-top: -100px;
74 color: rgb(0, 151, 188);
75 transition: width 0.5s ease;
76}
77
78main#page.side {
79 width: 70%;
80}
81
82/* ---------------------------------------------------
83 TEXT STYLES
84--------------------------------------------------- */
85h1 {
86 color: #fff;
87 margin-bottom: 0;
88 font-family: "Jua", sans-serif;
89 font-weight: 400;
90 font-style: normal;
91 font-size: 4rem;
92}
93
94h1.spin {
95 animation: textSpin 4.5s linear infinite;
96 position: relative;
97}
98
99h1.spin::before,
100h1.spin::after {
101 content: "index" !important;
102}
103
104/* ---------------------------------------------------
105 PROJECTS SIDE PANE
106--------------------------------------------------- */
107#projects-pane {
108 position: absolute;
109 top: 0;
110 right: 0;
111 width: 30%;
112 height: 97%;
113 margin: 15px;
114 padding: 20px;
115 border-radius: 10px;
116 background: rgba(0, 23, 29, 0.48);
117 opacity: 0;
118 pointer-events: none;
119 visibility: hidden;
120}
121
122#projects-pane ul {
123 height: 100%;
124 padding-bottom: 20px;
125 overflow-y: scroll;
126 overflow-x: hidden;
127
128 scrollbar-width: none;
129 -ms-overflow-style: none;
130}
131
132#projects-pane ul::-webkit-scrollbar {
133 display: none;
134}
135
136.project-card {
137 background: rgba(0, 23, 29, 0.641);
138 border: 1px solid rgb(0, 44, 55);
139 padding: 10px;
140 border-radius: 10px;
141 margin-bottom: 10px;
142 color: #fff !important;
143}
144
145/* ---------------------------------------------------
146 NOW PLAYING WIDGET
147--------------------------------------------------- */
148#now-playing {
149 position: fixed;
150 bottom: 20px;
151 left: 20px;
152 display: flex;
153 align-items: center;
154 gap: 12px;
155 padding: 8px;
156 background-color: rgba(0, 0, 0, 0.271);
157 border-radius: 8px;
158 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
159 color: #fff;
160 text-align: left;
161 text-decoration: none;
162 width: 300px;
163 transition: opacity 0.2s, left 0.5s ease;
164}
165
166#now-playing img {
167 width: 64px;
168 height: 64px;
169 border-radius: 4px;
170 object-fit: cover;
171}
172
173#now-playing #content {
174 width: 100%;
175}
176
177/* ---------------------------------------------------
178 ANIMATED BORDER EFFECT
179--------------------------------------------------- */
180.animated-border::before,
181.animated-border::after {
182 content: "";
183 position: absolute;
184 top: 50%;
185 left: 50%;
186 transform: translate(-50%, -50%);
187 font-size: 70px;
188 z-index: 1;
189 background: conic-gradient(
190 from var(--animatedBorder),
191 transparent,
192 transparent,
193 transparent,
194 blue
195 );
196 background-clip: text;
197 -webkit-text-fill-color: transparent;
198 animation: animatedBorder 3s linear infinite;
199}
200
201.animated-border::before {
202 filter: blur(20px);
203 opacity: 0.5;
204}
205
206/* ---------------------------------------------------
207 ANIMATIONS
208--------------------------------------------------- */
209@keyframes textSpin {
210 0% {
211 transform: rotateY(0deg);
212 }
213 100% {
214 transform: rotateY(359deg);
215 }
216}
217
218@keyframes animatedBorder {
219 from {
220 --animatedBorder: 0deg;
221 }
222 to {
223 --animatedBorder: 360deg;
224 }
225}