Skip to content

Commit 7903285

Browse files
document10document10
committed
Reorganised code,improved styling,credits section
1 parent f39f35f commit 7903285

5 files changed

Lines changed: 128 additions & 57 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ This is the repository for my personal website containing info about me as well
55
## Credits
66

77
[Inspiration](https://replit.com/@STARSHIPSTUDIOS/Linktree-v2)
8-
[Background image generated using AI (looked cool)](https://imgur.com/gallery/YdMlsh9)
8+
[Background image generated using AI (looked cool)](https://imgur.com/gallery/YdMlsh9)
9+
[Fonts used](https://fonts.googleapis.com/css2?family=Dosis&family=Playpen+Sans&family=Roboto&family=Source+Code+Pro&display=swap)

‎img/result.png‎

418 KB
Loading

‎img/sss.png‎

9.25 KB
Loading

‎index.html‎

Lines changed: 70 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,75 @@
1919
<link rel="icon" type="image/x-icon" href="./img/bwpfp.ico">
2020
</head>
2121
<body>
22-
<img src="img/pfp.png" alt="My profile picture" id="pfp">
23-
<h1>document10</h1>
24-
<h2>About me</h2>
25-
<section id="aboutme">
26-
<a class="abm"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/800px-Tux.svg.png" alt="Linux" class="linkicon"> Linux Enthusiast</a>
27-
<a class="abm"> <img src="https://static.frontendmasters.com/assets/courses/2022-09-05-web-development-v3/thumb.webp" alt="Web dev" class="linkicon"> Fluent in Javascript,Python and Bash</a>
28-
<a class="abm" href="https://go.dev/"> <img src="https://go.dev/images/go-logo-white.svg" alt="GOLANG" class="linkicon"> Currently learning Go</a>
29-
<a class="abm" href="https://ctrsv.ro/"> <img src="https://ctrsv.ro/wp-content/uploads/2022/05/logo-ctr-300x300.png" alt="CTR" class="linkicon"> Graduated from highschool <p class="accent">(CTR)</p></a>
30-
<a class="abm" href="https://fiesc.usv.ro/"> <img src="https://usv.ro/wp-content/uploads/2019/12/favicon.ico" alt="USV" class="linkicon"> University student <p class="accent">(FIESC-USV)</p></a>
31-
</section>
32-
<h2>My Links</h2>
33-
<section id="links">
34-
<a href="https://github.com/document10" class="links"><img src="https://github.com/fluidicon.png" alt="Github" class="linkicon"> Github <p class="accent">(document10)</p></a>
35-
<a href="https://replit.com/@document10" class="links"><img src="https://replit.com/public/icons/favicon-prompt-192.png" alt="Replit" class="linkicon"> Replit <p class="accent">(document10)</p></a>
36-
<a href="https://www.instagram.com/document10_/" class="links"><img src="https://static.cdninstagram.com/rsrc.php/v3/yI/r/VsNE-OHk_8a.png" alt="Instaggram" class="linkicon"> Instagram <p class="accent">(document10_)</p></a>
37-
<a href="https://imgur.com/user/dxvk10/posts" class="links"><img src="https://s.imgur.com/images/favicon-32x32.png" alt="Imgur" class="linkicon"> Imgur <p class="accent">(dxvk10)</p></a>
38-
</section>
22+
<div id="main">
23+
<img src="img/pfp.png" alt="My profile picture" id="pfp">
24+
<h1>document10</h1>
25+
<h2>About me</h2>
26+
<section id="aboutme">
27+
<a href="https://endeavouros.com/" class="abm">
28+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/800px-Tux.svg.png" alt="Linux" class="linkicon">
29+
<p class="desc">Linux Enthusiast</p>
30+
<p class="accent">(using EndeavourOS)</p>
31+
</a>
32+
<a class="abm">
33+
<img src="https://static.frontendmasters.com/assets/courses/2022-09-05-web-development-v3/thumb.webp" alt="Web dev" class="linkicon">
34+
<p class="desc">Fluent in Javascript,Python and Bash</p>
35+
</a>
36+
<a class="abm" href="https://go.dev/">
37+
<img src="https://go.dev/images/go-logo-white.svg" alt="GOLANG" class="linkicon">
38+
<p class="desc">Currently learning Go</p>
39+
</a>
40+
<a class="abm" href="https://ctrsv.ro/">
41+
<img src="https://ctrsv.ro/wp-content/uploads/2022/05/logo-ctr-300x300.png" alt="CTR" class="linkicon">
42+
<p class="desc">Graduated from highschool</p>
43+
<p class="accent">(CTR)</p>
44+
</a>
45+
<a class="abm" href="https://fiesc.usv.ro/">
46+
<img src="https://usv.ro/wp-content/uploads/2019/12/favicon.ico" alt="USV" class="linkicon">
47+
<p class="desc">University student</p>
48+
<p class="accent">(FIESC-USV)</p>
49+
</a>
50+
</section>
51+
<h2>My Links</h2>
52+
<section id="links">
53+
<a href="https://github.com/document10" class="links">
54+
<img src="https://github.com/fluidicon.png" alt="Github" class="linkicon">
55+
<p class="desc">Github</p>
56+
<p class="accent">(document10)</p>
57+
</a>
58+
<a href="https://replit.com/@document10" class="links">
59+
<img src="https://replit.com/public/icons/favicon-prompt-192.png" alt="Replit" class="linkicon">
60+
<p class="desc">Replit</p>
61+
<p class="accent">(document10)</p>
62+
</a>
63+
<a href="https://www.instagram.com/document10_/" class="links">
64+
<img src="https://static.cdninstagram.com/rsrc.php/v3/yI/r/VsNE-OHk_8a.png" alt="Instaggram" class="linkicon">
65+
<p class="desc">Instagram</p>
66+
<p class="accent">(document10_)</p>
67+
</a>
68+
<a href="https://imgur.com/user/dxvk10/posts" class="links">
69+
<img src="https://s.imgur.com/images/favicon-32x32.png" alt="Imgur" class="linkicon">
70+
<p class="desc">Imgur</p>
71+
<p class="accent">(dxvk10)</p>
72+
</a>
73+
</section>
74+
<h2>Credits</h2>
75+
<section id="credits">
76+
<a href="https://replit.com/@STARSHIPSTUDIOS/Linktree-v2?v=1" class="credits">
77+
<img src="./img/sss.png" alt="STARSHIPSTUDIOS" class="linkicon">
78+
<p class="desc">Inspiration from Linktree-v2</p>
79+
<p class="accent">(by STARSHIPSTUDIOS on Replit)</p>
80+
</a>
81+
<a href="https://imgur.com/gallery/YdMlsh9" class="credits">
82+
<img src="./img/result.png" alt="AI" class="linkicon">
83+
<p class="desc">Background image generated using AI</p>
84+
</a>
85+
<a href="https://fonts.googleapis.com/css2?family=Dosis&family=Playpen+Sans&family=Roboto&family=Source+Code+Pro&display=swap" class="credits">
86+
<img src="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg" alt="Google Fonts" class="linkicon">
87+
<p class="desc">Source Code Pro ,Playpen Sans ,Dosis ,Roboto</p>
88+
<p class="accent">(from Google Fonts)</p>
89+
</a>
90+
</section>
91+
</div>
3992
</body>
4093
</html>

‎styles.css‎

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,120 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Dosis&family=Playpen+Sans&family=Roboto&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Dosis&family=Playpen+Sans&family=Roboto&family=Source+Code+Pro&display=swap');
2+
23
* {
34
box-sizing: border-box;
45
}
56

67
body{
78
background-color: #00ffff;
8-
text-align: center;
99
background-image: url('img/vvww.png');
1010
background-repeat: no-repeat;
1111
background-origin: border-box;
1212
background-clip: border-box;
1313
background-size: cover;
1414
}
1515

16-
a {
17-
font-family: monospace;
18-
color: #ffffff;
19-
padding: 10px;
20-
margin: 10px;
21-
font-size: 30px;
16+
section{
2217
text-decoration: none;
18+
list-style-type: none;
19+
padding: 10px;
2320
display: flex;
24-
justify-content: center;
25-
align-items: center;
21+
flex-direction: column;
2622
}
2723

28-
2924
h1{
3025
font-family: 'Playpen Sans', cursive;
26+
text-align: center;
3127
color: #eeeeee;
32-
background-color: #00000099;
28+
text-shadow: 2px 3px 5px #888888;
3329
font-size: 50px;
30+
background-color: #00000099;
31+
border-radius: 10px;
3432
padding: 0%;
3533
margin: 0% 0% 1% 0%;
36-
border-radius: 10px;
3734
}
3835

3936
h2{
4037
font-family: 'Roboto', sans-serif;
38+
text-align: center;
4139
color: #b7ff00;
42-
background-color: #00000055;
40+
text-shadow: 2px 3px 5px #9999ff;
4341
font-size: 40px;
42+
background-color: #00000055;
4443
padding: 0%;
4544
margin: 0%;
4645
border-radius: 10px;
4746
}
4847

49-
section{
50-
text-decoration: none;
51-
list-style-type: none;
48+
a {
49+
color: #222222;
50+
font-family: 'Source Code Pro', monospace;
51+
text-shadow: 1px 2px 5px #444444;
52+
text-align: center;
53+
border: #000000 solid 2px;
54+
border-radius: 15px;
5255
padding: 10px;
56+
margin: 10px;
57+
font-size: 30px;
58+
text-decoration: none;
59+
display: flex;
60+
flex-flow: row nowrap;
61+
justify-content: center;
62+
align-items: center;
63+
transition: all 0.5s;
64+
}
65+
66+
a:hover {
67+
color: #000000;
68+
border: 2px solid #ffffff;
69+
border-radius: 10px;
70+
}
71+
72+
#main{
5373
display: flex;
5474
flex-direction: column;
5575
}
5676

5777
#pfp{
5878
border: 3px solid #000000;
5979
border-radius: 100%;
80+
width: 256px;
81+
height: 256px;
82+
align-self: center;
83+
}
84+
85+
.desc{
86+
padding: 0%;
87+
margin: 0%;
88+
display: inline;
89+
align-self: center;
6090
}
6191

6292
.accent{
93+
display: inline;
6394
font-size: 25px;
95+
font-family: 'Dosis', sans-serif;
6496
color: #aaffee;
97+
text-shadow: 3px 3px 5px #111111;
6598
padding: 0%;
6699
margin: 0%;
67-
display: inline;
68-
font-family: 'Dosis', sans-serif;
69100
}
101+
70102
.linkicon {
71-
width: 30px;
72-
height: 30px;
73103
display: inline;
104+
width: 32px;
105+
height: 32px;
74106
padding: 0%;
75107
margin: 0%;
76108
}
109+
77110
.abm{
78111
background-image: linear-gradient(#00aaee,#0077ff);
79-
color: #222222;
80-
border: #000000 solid 2px;
81-
border-radius: 15px;
82-
transition: all 0.5s;
83-
}
84-
85-
.abm:hover{
86-
color: #000000;
87-
border: 2px solid #ffffff;
88-
border-radius: 10px;
89112
}
90113

91114
.links{
92115
background-image: linear-gradient(#aa00ee,#7700ff);
93-
color: #222222;
94-
border: #000000 solid 2px;
95-
border-radius: 15px;
96-
transition: all 0.5s;
97116
}
98117

99-
.links:hover{
100-
color: #000000;
101-
border: 2px solid #ffffff;
102-
border-radius: 10px;
118+
.credits{
119+
background-image: linear-gradient(#eeaa00,#ff7700);
103120
}

0 commit comments

Comments
 (0)