Skip to content

Commit dc9bb51

Browse files
document10document10
committed
Website rework,more socials and better usability
1 parent d87bbaf commit dc9bb51

8 files changed

Lines changed: 90 additions & 126 deletions

File tree

‎img/discord.webp‎

-302 Bytes
Loading

‎img/google.webp‎

7.74 KB
Loading

‎img/imgur.webp‎

7.82 KB
Loading

‎img/instagram.webp‎

-2 KB
Loading

‎img/replit.webp‎

-694 Bytes
Loading

‎img/threads.webp‎

9.92 KB
Loading

‎index.html‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@
77
<meta name="description" content="Personal Portofolio Website">
88
<meta name="author" content="document10">
99
<meta name="keywords" content="HTML,CSS,JS,PY,GO,USV,CTR,Personal,Portofolio,Website,Abilities,Skills">
10-
<meta name="theme-color" content="#00ffff">
10+
<meta name="theme-color" content="#00aaaa">
1111
<meta property="og:url" content="https://document10.github.io">
1212
<meta property="og:site_name" content="document10.github.io">
1313
<meta property="og:title" content="Document10">
14-
<meta property="og:description" content="Linux Enthusiast,Web developer,University student,Currently learning go">
14+
<meta property="og:description" content="I am a 18 years old developer,currently in university and I have a lot of experience with languages like JS,Python,CSS,and more.I use Linux on a daily basis,and I learn more things about it every day.">
1515
<meta property="og:image" content="https://raw.githubusercontent.com/document10/document10.github.io/main/img/pfp.webp">
1616
<meta property="og:image:type" content="image/png">
1717
<meta property="og:image:width" content="256">
1818
<meta property="og:image:height" content="256">
19+
<meta property="og:image:alt" content="My profile picture">
1920
<link rel="stylesheet" href="styles.css">
2021
<link rel="icon" type="image/x-icon" href="./img/bwpfp.ico">
2122
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -29,44 +30,35 @@
2930
<img src="img/pfp.webp" alt="My profile picture" id="pfp">
3031
<h1>document10</h1>
3132
</div>
32-
<div id="aboutme">
33-
<p class="aboutme">Linux Enthusiast</p>
34-
<p class="aboutme">Software and Web Developer (JS,Python,C++,GO)</p>
35-
<p class="aboutme">Graphics Designer,Artist (Blender,Inkscape)</p>
36-
<a href="https://ctrsv.ro/" class="aboutme">Highschool : CTR (graduated)</a>
37-
<a href="https://fiesc.usv.ro/" class="aboutme">University : FIESC-USV (ongoing)</a>
38-
</div>
33+
<p id="aboutme">
34+
I am a 18 years old developer,currently in university and I have a lot of experience with languages like JS,Python,CSS,and more.I use Linux on a daily basis,and I learn more things about it every day.
35+
</p>
3936
<div id="social">
40-
<a href="https://github.com/document10" class="social" id="gh">
41-
<img src="./img/github.webp" alt="Github" class="linkicon" loading="lazy">
42-
<p class="desc">Github</p>
43-
<p class="accent">(document10)</p>
37+
<a href="https://github.com/document10" class="social">
38+
<img src="./img/github.webp" alt="Github" class="linkicon" >
39+
</a>
40+
<a href="https://replit.com/@document10" class="social">
41+
<img src="./img/replit.webp" alt="Replit" class="linkicon" >
42+
</a>
43+
<a href="https://www.instagram.com/document10_/" class="social">
44+
<img src="./img/instagram.webp" alt="Instagram" class="linkicon" >
4445
</a>
45-
<a href="https://replit.com/@document10" class="social" id="ri">
46-
<img src="./img/replit.webp" alt="Replit" class="linkicon" loading="lazy">
47-
<p class="desc">Replit</p>
48-
<p class="accent">(document10)</p>
46+
<a href="https://imgur.com/user/dxvk10/posts" class="social">
47+
<img src="./img/imgur.webp" alt="Imgur" class="linkicon" >
4948
</a>
50-
<a href="https://www.instagram.com/document10_/" class="social" id="in">
51-
<img src="./img/instagram.webp" alt="Instagram" class="linkicon" loading="lazy">
52-
<p class="desc">Instagram</p>
53-
<p class="accent">(document10_)</p>
49+
<a href="https://discordapp.com/users/332934999173234688" class="social">
50+
<img src="./img/discord.webp" alt="Discord" class="linkicon" >
5451
</a>
55-
<a href="https://imgur.com/user/dxvk10/posts" class="social" id="im">
56-
<img src="./img/imgur.webp" alt="Imgur" class="linkicon" loading="lazy">
57-
<p class="desc">Imgur</p>
58-
<p class="accent">(dxvk10)</p>
52+
<a href="https://g.dev/document10" class="social">
53+
<img src="./img/google.webp" alt="Google Developer" class="linkicon">
5954
</a>
60-
<a href="https://discordapp.com/users/332934999173234688" class="social" id="ds">
61-
<img src="./img/discord.webp" alt="Discord" class="linkicon" loading="lazy">
62-
<p class="desc">Discord</p>
63-
<p class="accent">(document10)</p>
55+
<a href="https://www.threads.net/@document10_" class="social">
56+
<img src="./img/threads.webp" alt="Threads.net" class="linkicon">
6457
</a>
6558
</div>
6659
<div id="footer">
67-
<a href="https://replit.com/@STARSHIPSTUDIOS/Linktree-v2?v=1" class="footer">Inspiration</a>
6860
<a href="https://imgur.com/gallery/YdMlsh9" class="footer">Background (AI generated)</a>
69-
<a href="https://fonts.google.com/share?selection.family=Dosis|Playpen+Sans|Roboto|Source+Code+Pro" class="footer">Fonts used</a>
61+
<a href="https://fonts.google.com/share?selection.family=Playpen+Sans|Ubuntu" class="footer">Fonts used</a>
7062
<a href="https://www.iconfinder.com/" class="footer">Icons source</a>
7163
</div>
7264
</div>

‎styles.css‎

Lines changed: 67 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Dosis&family=Playpen+Sans&family=Roboto&family=Source+Code+Pro&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans&family=Ubuntu&display=swap');
22

33
html,body{
44
box-sizing: border-box;
5-
background-color: #00ffff;
6-
background-image: url('img/bg.webp');
5+
background-color: #00aaaa;
6+
background-image: url('./img/bg.webp');
77
background-size: cover;
88
padding: 0%;
99
margin: 0%;
10+
width: 100%;
11+
height: 100%;
12+
display: flex;
13+
flex-direction: column;
14+
align-content: center;
15+
justify-content: center;
1016
}
1117

1218
h1{
1319
font-family: 'Playpen Sans', cursive;
1420
text-align: center;
1521
color: #ffffff;
1622
text-shadow: 2px 3px 5px #888888;
17-
font-size: 50px;
23+
font-size: 7vh;
1824
padding: 0%;
19-
margin: 0%;
25+
margin: 1%;
26+
justify-self: center;
27+
align-self: center;
2028
}
2129

2230
a {
@@ -26,128 +34,98 @@ a {
2634
#main{
2735
display: flex;
2836
flex-direction: column;
37+
align-content: center;
38+
justify-content: center;
2939
padding: 0%;
3040
margin: 0%;
31-
background-image: linear-gradient(#00000099,#00000000);
41+
background-image: linear-gradient(#00000000,#00000099,#00000000);
42+
width: 100%;
43+
height: 100%;
3244
}
3345

3446
#title{
3547
display: flex;
3648
flex-direction: column;
37-
justify-content: center;
38-
align-content: center;
39-
padding: 0%;
40-
margin: 0%;
41-
}
42-
43-
#aboutme {
44-
display: flex;
45-
flex-flow: row wrap;
46-
justify-content: space-evenly;
49+
justify-content: flex-start;
4750
align-content: center;
4851
padding: 0%;
4952
margin: 0%;
5053
}
5154

5255
#social{
5356
padding: 0%;
54-
margin: 0%;
57+
margin: 2%;
5558
display: flex;
56-
flex-direction: column;
59+
flex-direction: row;
60+
flex-wrap: wrap;
61+
align-content: center;
62+
justify-content: center;
5763
}
5864

5965
#pfp{
6066
border: 3px solid #000000;
6167
border-radius: 100%;
62-
width: 256px;
63-
height: 256px;
68+
width: 30vh;
69+
height: 30vh;
6470
align-self: center;
6571
padding: 0%;
6672
margin: 0%;
6773
}
6874

69-
#gh {
70-
background-image: linear-gradient(#ffffff,#bbbbbb);
71-
}
72-
73-
#ri {
74-
background-image: linear-gradient(#eeaa00,#ff7700);
75-
}
76-
77-
#in{
78-
background-image: linear-gradient(#ee00aa,#ff0077);
79-
}
80-
81-
#im{
82-
background-image: linear-gradient(#aa00ee,#7700ff);
83-
}
84-
85-
#ds {
86-
background-image: linear-gradient(#00aaee,#0077ff);
87-
}
88-
89-
#footer {
75+
#aboutme{
9076
display: flex;
91-
flex-flow: row wrap;
77+
flex-direction: column;
9278
justify-content: space-evenly;
9379
align-content: center;
94-
background-image: linear-gradient(#00000099,#000000dd);
95-
backdrop-filter: blur(5px);
96-
border-radius: 10px;
9780
padding: 0%;
98-
margin: 0%;
99-
}
100-
101-
.aboutme{
81+
margin: 5%;
82+
text-wrap: balance;
10283
text-align: center;
103-
font-size: 25px;
104-
font-family: 'Roboto', sans-serif;
84+
font-size: 3.5vh;
85+
font-family: 'Ubuntu', sans-serif;
10586
color: #b7ff00;
10687
text-shadow: 2px 3px 5px #9999ff;
107-
background-color: #000000aa;
10888
border-radius: 10px;
10989
padding: 0.25%;
11090
margin: 0% 0% 1% 1%;
111-
backdrop-filter: blur(3px);
11291
transition: all 0.25s;
11392
}
11493

115-
.aboutme:hover{
116-
color: #b7ff00;
117-
text-shadow: 2px 3px 5px #ff99ff;
118-
background-color: #000000ff;
119-
border-radius: 5px;
94+
#footer {
95+
display: flex;
96+
flex-flow: row wrap;
97+
justify-content: space-evenly;
98+
align-content: center;
99+
background-image: linear-gradient(#00000099,#000000dd);
100+
backdrop-filter: blur(5px);
101+
border: #000000 1px solid;
102+
border-radius: 10px;
103+
padding: 0%;
104+
margin: 0% 3% 0% 3%;
120105
}
121106

122107
.social{
123-
color: #222222;
124-
font-family: 'Source Code Pro', monospace;
125108
text-align: center;
126-
border: #000000 solid 2px;
127-
border-radius: 15px;
128109
padding: 0.5%;
129-
margin: 0.25%;
130-
font-size: 30px;
110+
margin: 0.5% 3% 0.5% 3%;
131111
display: flex;
132-
flex-direction: row;
112+
flex-flow: row nowrap;
133113
justify-content: center;
134114
align-items: center;
115+
filter: invert(100%);
135116
transition: all 0.5s;
136117
}
137118

138119
.social:hover{
139-
color: #000000;
140-
border: 2px solid #ffffff;
141-
border-radius: 10px;
142-
box-shadow: 3px 3px 5px #000000;
120+
filter: invert(80%) sepia(9%) saturate(5245%) hue-rotate(104deg) brightness(98%) contrast(106%);
143121
}
144122

145123
.linkicon {
146124
display: inline;
147-
width: 40px;
148-
height: 40px;
125+
width: 6vh;
126+
height: 6vh;
149127
padding: 0%;
150-
margin: 0%;
128+
margin: 10%;
151129
}
152130

153131
.desc{
@@ -170,8 +148,8 @@ a {
170148
.footer {
171149
color: #ffb700;
172150
text-shadow: 5px 5px 5px #000000;
173-
font-size: 20px;
174-
font-family: 'Roboto', sans-serif;
151+
font-size: 2vh;
152+
font-family: 'Ubuntu', sans-serif;
175153
padding: 0%;
176154
margin: 0.75%;
177155
transition: all 0.5s;
@@ -184,42 +162,36 @@ a {
184162

185163
@media screen and (max-width: 700px) {
186164
h1 {
187-
font-size: 60px;
188-
padding: 0%;
189-
margin: 0%;
190-
}
191-
#pfp{
192-
width: 50%;
193-
height: 50%;
165+
font-size: 8vh;
194166
padding: 0%;
195167
margin: 0%;
196168
}
169+
197170
#aboutme {
198-
flex-direction: column;
199-
justify-content: center;
200-
align-content: center;
171+
font-size: 2.5vh;
172+
text-align: center;
201173
padding: 0%;
202174
margin: 1%;
203175
}
176+
177+
#pfp {
178+
width: 50vw;
179+
height: 50vw;
180+
}
181+
204182
#footer{
205183
flex-direction: column;
206184
justify-content: center;
207185
align-content: center;
208186
padding: 0%;
209-
margin: 1%;
210-
}
211-
.aboutme {
212-
font-size: 30px;
213-
text-align: center;
214-
padding: 0.5%;
215-
margin: 0.5% 0% 0.5% 0%;
187+
margin: 1% 4% 1% 4%;
216188
}
217189
.social {
218-
font-size: 40px;
219190
justify-content: space-between;
191+
margin: 2%;
220192
}
221193
.footer{
222-
font-size: 25px;
194+
font-size: 3vh;
223195
text-align: center;
224196
padding: 0%;
225197
margin: 1.5% 0% 1.5% 0%;
@@ -229,7 +201,7 @@ a {
229201
font-size: 20px;
230202
}
231203
.linkicon {
232-
width: 45px;
233-
height: 45px;
204+
width: 5vh;
205+
height: 5vh;
234206
}
235207
}

0 commit comments

Comments
 (0)