Skip to content

Commit 6cbf02f

Browse files
Quantum-YetiQuantum-Yeti
authored
Create index.html for Quantum Yeti portfolio
Initial HTML structure for Quantum Yeti portfolio page with styling and GitHub repository loading functionality.
0 parents  commit 6cbf02f

File tree

1 file changed

+195
-0
lines changed

1 file changed

+195
-0
lines changed

‎index.html‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<title>Quantum Yeti</title>
10+
11+
<style>
12+
13+
body{
14+
margin:0;
15+
font-family:system-ui;
16+
background:linear-gradient(#000000,#0B1E3D);
17+
color:white;
18+
overflow-x:hidden;
19+
}
20+
21+
/* floating background stars */
22+
23+
.star{
24+
position:absolute;
25+
width:2px;
26+
height:2px;
27+
background:white;
28+
opacity:.6;
29+
animation:twinkle 3s infinite alternate;
30+
}
31+
32+
@keyframes twinkle{
33+
from{opacity:.2}
34+
to{opacity:1}
35+
}
36+
37+
/* header */
38+
39+
header{
40+
text-align:center;
41+
padding:120px 20px;
42+
}
43+
44+
h1{
45+
font-size:56px;
46+
margin:0;
47+
}
48+
49+
.tagline{
50+
opacity:.8;
51+
font-size:20px;
52+
margin-top:10px;
53+
}
54+
55+
/* floating icons */
56+
57+
.icon{
58+
position:absolute;
59+
font-size:28px;
60+
animation:float 10s infinite ease-in-out;
61+
}
62+
63+
@keyframes float{
64+
0%{transform:translateY(0px)}
65+
50%{transform:translateY(-20px)}
66+
100%{transform:translateY(0px)}
67+
}
68+
69+
/* sections */
70+
71+
section{
72+
max-width:900px;
73+
margin:auto;
74+
padding:60px 20px;
75+
}
76+
77+
.projects{
78+
display:grid;
79+
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
80+
gap:20px;
81+
}
82+
83+
.card{
84+
background:#111;
85+
padding:20px;
86+
border-radius:12px;
87+
transition:.2s;
88+
}
89+
90+
.card:hover{
91+
transform:translateY(-6px);
92+
background:#181818;
93+
}
94+
95+
a{
96+
color:#6ab0ff;
97+
text-decoration:none;
98+
}
99+
100+
footer{
101+
text-align:center;
102+
padding:50px;
103+
opacity:.6;
104+
}
105+
106+
</style>
107+
108+
</head>
109+
110+
<body>
111+
112+
<!-- floating icons -->
113+
114+
<div class="icon" style="top:20%;left:10%">🛸</div>
115+
<div class="icon" style="top:60%;left:85%">💻</div>
116+
<div class="icon" style="top:40%;left:75%">🎵</div>
117+
<div class="icon" style="top:70%;left:20%">⚙️</div>
118+
<div class="icon" style="top:30%;left:50%">🧮</div>
119+
120+
<header>
121+
122+
<h1>Quantum Yeti</h1>
123+
124+
<p class="tagline">
125+
Software Developer • Python • Java • Rust
126+
</p>
127+
128+
</header>
129+
130+
<section>
131+
132+
<h2>About</h2>
133+
134+
<p>
135+
Developer interested in computer science, mathematics, music, and creative software projects.
136+
I build desktop applications, Android apps, and experimental tools.
137+
</p>
138+
139+
</section>
140+
141+
<section>
142+
143+
<h2>Projects</h2>
144+
145+
<div class="projects" id="repos">
146+
147+
Loading repositories...
148+
149+
</div>
150+
151+
</section>
152+
153+
<footer>
154+
155+
<p>
156+
© 2026 Quantum Yeti
157+
</p>
158+
159+
</footer>
160+
161+
<script>
162+
163+
/* load GitHub repos */
164+
165+
fetch("https://api.github.com/users/quantum-yeti/repos")
166+
167+
.then(res => res.json())
168+
169+
.then(data => {
170+
171+
let container = document.getElementById("repos")
172+
173+
container.innerHTML=""
174+
175+
data.forEach(repo => {
176+
177+
let card = document.createElement("div")
178+
card.className="card"
179+
180+
card.innerHTML=`
181+
<h3>${repo.name}</h3>
182+
<p>${repo.description ?? "Open source project."}</p>
183+
<a href="${repo.html_url}">View Repository →</a>
184+
`
185+
186+
container.appendChild(card)
187+
188+
})
189+
190+
})
191+
192+
</script>
193+
194+
</body>
195+
</html>

0 commit comments

Comments
 (0)