Skip to content

Commit 6bf430b

Browse files
John220099John220099
committed
a
1 parent 54ca98d commit 6bf430b

File tree

3 files changed

+111
-15
lines changed

3 files changed

+111
-15
lines changed

‎index.html‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,29 @@
1212
<link rel="stylesheet" href="styles/side.css">
1313
<link rel="stylesheet" href="styles/main.css">
1414
<link rel="stylesheet" href="styles/about.css">
15+
<link rel="stylesheet" href="styles/skills.css">
1516
<link rel="icon" type="image/png" href="assets/favicon.png">
1617
<script src="functions/background.js"></script>
1718
<script src="functions/line.js"></script>
1819
</head>
1920
<body>
2021
<aside>
21-
<div class="profile">
22-
<img src="assets/favicon.png">
23-
</div>
24-
<h2>john220099</h2>
25-
<div class="links">
26-
<div class="github">
27-
<a href="https://github.com/John220099" target="_blank" title="Will Redirect you to my github profile.">
28-
<img src="assets/github.png"/>
29-
</a>
22+
<div class="sidestuff">
23+
<div class="profile">
24+
<img src="assets/favicon.png">
3025
</div>
31-
<div class="youtube">
32-
<a href="https://www.youtube.com/@john22009" target="_blank" title="Will Redirect you to my YT.">
33-
<img src="assets/youtube.png"/>
34-
</a>
26+
<h2>john220099</h2>
27+
<div class="links">
28+
<div class="github">
29+
<a href="https://github.com/John220099" target="_blank" title="Will Redirect you to my github profile.">
30+
<img src="assets/github.png"/>
31+
</a>
32+
</div>
33+
<div class="youtube">
34+
<a href="https://www.youtube.com/@john22009" target="_blank" title="Will Redirect you to my YT.">
35+
<img src="assets/youtube.png"/>
36+
</a>
37+
</div>
3538
</div>
3639
</div>
3740
</aside>
@@ -42,6 +45,25 @@ <h2>about me</h2>
4245
<p>i make/code stuff🛠️</p>
4346
<p>I’m currently learning kotlin, html, css and js 📒</p>
4447
</div>
48+
<div class="Skills">
49+
<h2>Skills</h2>
50+
<div class="skill">
51+
<label for="kotlin">kotlin:</label>
52+
<progress id="kotlin" value="12" max="100"></progress>
53+
</div>
54+
<div class="skill">
55+
<label for="htmls">html:</label>
56+
<progress id="htmls" value="30" max="100"></progress>
57+
</div>
58+
<div class="skill">
59+
<label for="csss">css:</label>
60+
<progress id="csss" value="20" max="100"></progress>
61+
</div>
62+
<div class="skill">
63+
<label for="js">js:</label>
64+
<progress id="js" value="8" max="100"></progress>
65+
</div>
66+
</div>
4567
<div class="code">
4668
<img src="https://github-readme-stats.vercel.app/api/top-langs?username=john220099&show_icons=true&locale=en&layout=compact" alt="john220099" />
4769
</div>

‎styles/side.css‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
22
margin: 0;
33
display: flex;
4-
height: 100vh;
4+
height: 140vh;
55
}
66

77
aside {
@@ -10,7 +10,14 @@ aside {
1010
background-color: rgba(92, 92, 92, 0.659);
1111
color: rgb(255, 255, 255);
1212
border: 4px solid hsl(240, 5%, 18%);
13-
padding: 20px;
13+
padding: 20px;
14+
}
15+
16+
.sidestuff {
17+
/*
18+
me is lazy.
19+
position: fixed;
20+
*/
1421
}
1522

1623
.profile {
@@ -21,6 +28,8 @@ aside {
2128

2229
.profile img {
2330
border: 4px solid rgb(44, 44, 48);
31+
width: 180px !important;
32+
height: auto;
2433
border-radius: 20px;
2534
}
2635

‎styles/skills.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
progress {
2+
-webkit-appearance: none;
3+
appearance: none;
4+
width: 200px;
5+
height: 8px;
6+
border-radius: 4px;
7+
overflow: hidden;
8+
}
9+
10+
progress::-webkit-progress-bar {
11+
background: #E0E0E0;
12+
border-radius: 4px;
13+
}
14+
15+
progress::-moz-progress-bar {
16+
background: #E0E0E0;
17+
}
18+
19+
/*
20+
1 should work i think maybe.
21+
*/
22+
23+
#kotlin::-webkit-progress-value { background: #7E57C2; }
24+
#htmls::-webkit-progress-value { background: #FF5722; }
25+
#csss::-webkit-progress-value { background: #03A9F4; }
26+
#js::-webkit-progress-value { background: #FFEB3B; }
27+
28+
#kotlin::-moz-progress-bar { background: #7E57C2; }
29+
#htmls::-moz-progress-bar { background: #FF5722; }
30+
#csss::-moz-progress-bar { background: #03A9F4; }
31+
#js::-moz-progress-bar { background: #FFEB3B; }
32+
33+
.skill {
34+
display: flex;
35+
align-items: center;
36+
gap: 10px;
37+
margin: 12px 0;
38+
}
39+
40+
.skill label {
41+
width: 100px;
42+
}
43+
44+
.Skills {
45+
background-color: rgba(92, 92, 92, 0.659);
46+
position: relative;
47+
padding: 20px;
48+
height: 200px;
49+
margin: 20px;
50+
border: 4px solid hsl(240, 5%, 18%);
51+
border-radius: 20px;
52+
color: rgb(255, 255, 255);
53+
}
54+
55+
.Skills h2 {
56+
text-align: center;
57+
margin: 0 auto;
58+
}
59+
60+
@media (min-width: 768px) {
61+
.Skills {
62+
margin: 20px auto;
63+
width: 250px auto;
64+
}
65+
}

0 commit comments

Comments
 (0)