My personal site hosted @ https://indexx.dev
indexx.dev
1/*
2 VARIABLES & PROPERTIES
3*/
4@import url("https://fonts.googleapis.com/css2?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
10 --bg-gradient: linear-gradient(
11 45deg,
12 rgb(0, 59, 74),
13 rgb(0, 35, 44),
14 rgb(0, 29, 36)
15 );
16}
17
18@property --animatedBorder {
19 syntax: "<angle>";
20 inherits: false;
21 initial-value: 0deg;
22}
23
24/*
25 ENTIRE PAGE
26*/
27html,
28body {
29 font-family: "Nunito Sans", sans-serif;
30 width: 100%;
31 height: 100%;
32 background: var(--bg-gradient);
33}
34
35main#page {
36 position: absolute;
37 top: 50%;
38 left: 0;
39 width: 100%;
40 margin-top: -100px;
41 color: rgb(0, 92, 116);
42 transition: width 0.5s ease;
43}
44
45main#page.side {
46 width: 70%;
47}
48
49/*
50 TEXT
51*/
52h1 {
53 color: #fff;
54 margin-bottom: 0px;
55 font-weight: 1000;
56 font-size: 4rem;
57}
58
59h1.spin {
60 animation-name: textSpin;
61 animation-duration: 4.5s;
62 animation-iteration-count: infinite;
63 animation-timing-function: linear;
64
65 position: relative;
66}
67
68h1.spin::before,
69h1.spin::after {
70 content: "index" !important;
71}
72
73a {
74 color: rgb(0, 151, 188) !important;
75 text-decoration: none;
76}
77
78.circle-hover {
79 display: inline-block;
80 position: relative;
81 margin: 0 var(--spacing, 0px);
82 transition: margin 0.25s;
83
84 flex: 1;
85 min-width: 0;
86
87 svg {
88 width: 76px;
89 height: 40px;
90 position: absolute;
91 left: 50%;
92 bottom: 0;
93 transform: translate(-50%, 7px) translateZ(0);
94 fill: none;
95 stroke: var(--stroke, var(--line));
96 stroke-linecap: round;
97 stroke-width: 2px;
98 stroke-dasharray: var(--offset, 69px) 278px;
99 stroke-dashoffset: 361px;
100 transition:
101 stroke 0.25s ease var(--stroke-delay, 0s),
102 stroke-dasharray 0.35s;
103 }
104
105 &:hover {
106 --spacing: 4px;
107 --stroke: var(--line-active);
108 --stroke-delay: 0.1s;
109 --offset: 180px;
110 color: #fff !important;
111 }
112}
113
114/*
115 UTILITY
116*/
117.unselectable {
118 -webkit-user-select: none;
119 /* Safari */
120 -moz-user-select: none;
121 /* Firefox */
122 -ms-user-select: none;
123 /* Internet Explorer/Edge */
124 user-select: none;
125 /* Standard syntax */
126}
127
128/*
129 PROJECTS SIDE-PANE
130*/
131#projects-pane {
132 opacity: 0;
133 pointer-events: none;
134 visibility: hidden;
135
136 position: absolute;
137 top: 0;
138 right: 0;
139 width: 30%;
140 background: rgb(0 23 29 / 48%);
141 margin: 15px;
142 padding: 20px;
143 border-radius: 10px;
144 height: 97%;
145}
146
147/*
148 ANIMATED BORDERS UTILITY
149*/
150.animated-border::before,
151.animated-border::after {
152 content: "";
153 position: absolute;
154 top: 50%;
155 left: 50%;
156 translate: -50% -50%;
157 font-size: 70px;
158 z-index: 1;
159
160 background: conic-gradient(
161 from var(--animatedBorder),
162 transparent,
163 transparent,
164 transparent,
165 blue
166 );
167 background-clip: text;
168 -webkit-text-fill-color: transparent;
169
170 animation: 3s animatedBorder linear infinite;
171}
172
173.animated-border::before {
174 filter: blur(20px);
175 opacity: 0.5;
176}
177
178.project-card {
179 background: rgba(0, 23, 29, 0.641);
180 border: 1px solid rgb(0, 44, 55);
181 padding: 10px;
182 border-radius: 10px;
183 margin-bottom: 10px;
184 color: #fff !important;
185}
186
187#projects-pane ul {
188 overflow-x: hidden;
189 overflow-y: scroll;
190 height: 100%;
191 padding-bottom: 20px;
192}
193
194a:hover .project-card {
195 border-color: rgb(0, 83, 104);
196}
197
198@keyframes textSpin {
199 0% {
200 transform: rotateY(0deg);
201 }
202
203 100% {
204 transform: rotateY(359deg);
205 }
206}
207
208@keyframes animatedBorder {
209 from {
210 --animatedBorder: 0deg;
211 }
212
213 to {
214 --animatedBorder: 360deg;
215 }
216}