Skip to content

Commit dec9933

Browse files
document10document10
committed
Simplified Website,Improved Responsiveness
1 parent 7903285 commit dec9933

5 files changed

Lines changed: 134 additions & 106 deletions

File tree

‎img/ds.png‎

279 KB
Loading

‎img/result.png‎

-418 KB
Binary file not shown.

‎img/sss.png‎

-9.25 KB
Binary file not shown.

‎index.html‎

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -20,74 +20,49 @@
2020
</head>
2121
<body>
2222
<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">
23+
<div id="title">
24+
<img src="img/pfp.png" alt="My profile picture" id="pfp">
25+
<h1>document10</h1>
26+
</div>
27+
<div id="aboutme">
28+
<p class="aboutme">Linux Enthusiast</p>
29+
<p class="aboutme">Software and Web Developer (JS,Python,C++,GO)</p>
30+
<p class="aboutme">Graphics Designer,Artist (Blender,Inkscape)</p>
31+
</div>
32+
<div id="social">
33+
<a href="https://github.com/document10" class="social" id="gh">
5434
<img src="https://github.com/fluidicon.png" alt="Github" class="linkicon">
5535
<p class="desc">Github</p>
5636
<p class="accent">(document10)</p>
5737
</a>
58-
<a href="https://replit.com/@document10" class="links">
38+
<a href="https://replit.com/@document10" class="social" id="ri">
5939
<img src="https://replit.com/public/icons/favicon-prompt-192.png" alt="Replit" class="linkicon">
6040
<p class="desc">Replit</p>
6141
<p class="accent">(document10)</p>
6242
</a>
63-
<a href="https://www.instagram.com/document10_/" class="links">
43+
<a href="https://www.instagram.com/document10_/" class="social" id="in">
6444
<img src="https://static.cdninstagram.com/rsrc.php/v3/yI/r/VsNE-OHk_8a.png" alt="Instaggram" class="linkicon">
6545
<p class="desc">Instagram</p>
6646
<p class="accent">(document10_)</p>
6747
</a>
68-
<a href="https://imgur.com/user/dxvk10/posts" class="links">
48+
<a href="https://imgur.com/user/dxvk10/posts" class="social" id="im">
6949
<img src="https://s.imgur.com/images/favicon-32x32.png" alt="Imgur" class="linkicon">
7050
<p class="desc">Imgur</p>
7151
<p class="accent">(dxvk10)</p>
7252
</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>
53+
<a href="https://discordapp.com/users/332934999173234688" class="social" id="ds">
54+
<img src="./img/ds.png" alt="Discord" class="linkicon">
55+
<p class="desc">Discord</p>
56+
<p class="accent">(document10)</p>
8957
</a>
90-
</section>
58+
</div>
59+
<div id="footer">
60+
<a href="https://replit.com/@STARSHIPSTUDIOS/Linktree-v2?v=1" class="link">Inspiration</a>
61+
<a href="https://imgur.com/gallery/YdMlsh9" class="link">Background (AI generated)</a>
62+
<a href="https://fonts.googleapis.com/css2?family=Dosis&family=Playpen+Sans&family=Roboto&family=Source+Code+Pro&display=swap" class="link">Fonts used</a>
63+
<a href="https://ctrsv.ro/" class="link">Highschool : CTR (graduated)</a>
64+
<a href="https://fiesc.usv.ro/" class="link">University : FIESC-USV (ongoing)</a>
65+
</div>
9166
</div>
9267
</body>
9368
</html>

‎styles.css‎

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

3-
* {
4-
box-sizing: border-box;
5-
}
6-
73
body{
4+
box-sizing: border-box;
85
background-color: #00ffff;
96
background-image: url('img/vvww.png');
10-
background-repeat: no-repeat;
11-
background-origin: border-box;
12-
background-clip: border-box;
137
background-size: cover;
14-
}
15-
16-
section{
17-
text-decoration: none;
18-
list-style-type: none;
19-
padding: 10px;
20-
display: flex;
21-
flex-direction: column;
8+
padding: 0%;
9+
margin: 0%;
2210
}
2311

2412
h1{
@@ -27,59 +15,129 @@ h1{
2715
color: #eeeeee;
2816
text-shadow: 2px 3px 5px #888888;
2917
font-size: 50px;
18+
padding: 0%;
19+
margin: 0%;
20+
}
21+
22+
a {
23+
text-decoration: none;
24+
}
25+
26+
#main{
27+
display: flex;
28+
flex-direction: column;
29+
padding: 0%;
30+
margin: 0%;
31+
background-image: linear-gradient(#00000099,#00000000);
32+
}
33+
34+
#title{
35+
display: flex;
36+
flex-flow: column wrap;
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: center;
47+
align-content: center;
48+
padding: 0%;
49+
margin: 0%;
50+
}
51+
52+
#social{
53+
padding: 0%;
54+
margin: 0%;
55+
display: flex;
56+
flex-direction: column;
57+
}
58+
59+
#pfp{
60+
border: 3px solid #000000;
61+
border-radius: 100%;
62+
width: 256px;
63+
height: 256px;
64+
align-self: center;
65+
padding: 0%;
66+
margin: 0.5%;
67+
}
68+
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 {
90+
display: flex;
91+
flex-flow: row wrap;
92+
justify-content: center;
93+
align-content: center;
3094
background-color: #00000099;
3195
border-radius: 10px;
3296
padding: 0%;
33-
margin: 0% 0% 1% 0%;
97+
margin: 1%;
3498
}
3599

36-
h2{
37-
font-family: 'Roboto', sans-serif;
100+
.aboutme{
38101
text-align: center;
102+
font-size: 25px;
103+
font-family: 'Roboto', sans-serif;
39104
color: #b7ff00;
40105
text-shadow: 2px 3px 5px #9999ff;
41-
font-size: 40px;
42-
background-color: #00000055;
43-
padding: 0%;
44-
margin: 0%;
106+
background-color: #000000aa;
45107
border-radius: 10px;
108+
padding: 0.25%;
109+
margin: 0.5%;
46110
}
47111

48-
a {
112+
.social{
49113
color: #222222;
50114
font-family: 'Source Code Pro', monospace;
51-
text-shadow: 1px 2px 5px #444444;
52115
text-align: center;
53116
border: #000000 solid 2px;
54117
border-radius: 15px;
55-
padding: 10px;
56-
margin: 10px;
118+
padding: 0.5%;
119+
margin: 0.5%;
57120
font-size: 30px;
58-
text-decoration: none;
59121
display: flex;
60-
flex-flow: row nowrap;
122+
flex-flow: row wrap;
61123
justify-content: center;
62124
align-items: center;
63125
transition: all 0.5s;
64126
}
65127

66-
a:hover {
128+
.social:hover{
67129
color: #000000;
68130
border: 2px solid #ffffff;
69131
border-radius: 10px;
132+
box-shadow: 3px 3px 5px #000000;
70133
}
71134

72-
#main{
73-
display: flex;
74-
flex-direction: column;
75-
}
76-
77-
#pfp{
78-
border: 3px solid #000000;
79-
border-radius: 100%;
80-
width: 256px;
81-
height: 256px;
82-
align-self: center;
135+
.linkicon {
136+
display: inline;
137+
width: 32px;
138+
height: 32px;
139+
padding: 0%;
140+
margin: 0%;
83141
}
84142

85143
.desc{
@@ -99,22 +157,17 @@ a:hover {
99157
margin: 0%;
100158
}
101159

102-
.linkicon {
103-
display: inline;
104-
width: 32px;
105-
height: 32px;
160+
.link {
161+
color: #ffb700;
162+
text-shadow: 5px 5px 5px #000000;
163+
font-size: 20px;
164+
font-family: 'Roboto', sans-serif;
106165
padding: 0%;
107-
margin: 0%;
108-
}
109-
110-
.abm{
111-
background-image: linear-gradient(#00aaee,#0077ff);
112-
}
113-
114-
.links{
115-
background-image: linear-gradient(#aa00ee,#7700ff);
166+
margin: 0.75%;
167+
transition: all 0.5s;
116168
}
117169

118-
.credits{
119-
background-image: linear-gradient(#eeaa00,#ff7700);
170+
.link:hover {
171+
color: #aaff00;
172+
text-shadow: 6px 6px 5px #666666;
120173
}

0 commit comments

Comments
 (0)