Skip to content

Commit 83ce26f

Browse files
author
Smartlinuxcoder
committed
big change!
1 parent 43b2898 commit 83ce26f

File tree

1 file changed

+256
-89
lines changed

1 file changed

+256
-89
lines changed

‎index.html‎

Lines changed: 256 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,278 @@
1+
12
<!DOCTYPE html>
23
<html>
3-
4-
<head>
5-
<title>GitHub Profile</title>
4+
<head>
5+
<title>Smartlinuxcoder ;)</title>
66
<style>
7-
/* Add styles for the page */
8-
body {
9-
font-family: Arial, sans-serif;
10-
}
7+
/* Global styles */
8+
* {
9+
box-sizing: border-box;
10+
font-family: Arial, sans-serif;
11+
}
12+
body {
13+
margin: 0;
14+
padding: 0;
15+
background-color: #f2f2f2;
16+
}
1117

12-
h1 {
13-
font-size: 36px;
14-
text-align: center;
15-
}
18+
/* Navbar styles */
19+
.navbar {
20+
background-color: #3B8EA5; /* blue */
21+
overflow: hidden;
22+
/* border-radius: 25px; */
23+
}
24+
.navbar a {
25+
float: left;
26+
display: block;
27+
color: #f2f2f2;
28+
text-align: center;
29+
padding: 14px 16px;
30+
text-decoration: none;
31+
border-radius: 25px;
32+
}
33+
.navbar a:hover {
34+
background-color: #91C3D3; /* light blue */
35+
color: #333;
36+
}
1637

17-
.container {
18-
display: flex;
19-
flex-wrap: wrap;
20-
justify-content: center;
21-
align-items: center;
22-
margin: 50px 0;
23-
}
38+
/* Button styles */
39+
.button {
40+
background-color: #00B28B; /* green */
41+
color: #fff;
42+
border: none;
43+
padding: 10px 20px;
44+
border-radius: 25px;
45+
cursor: pointer;
46+
transition: background-color 0.3s ease-in-out;
47+
}
48+
.button:hover {
49+
background-color: #009A74; /* dark green */
50+
}
2451

25-
.card {
26-
width: 300px;
27-
height: 450px;
28-
border: 4px solid #434566;
29-
box-shadow: 8px 8px #92DCE5;
30-
margin: 20px;
31-
text-align: center;
32-
padding: 20px;
33-
}
52+
/* Header styles */
53+
.header {
54+
background-color: #1D7874; /* cyan */
55+
color: #fff;
56+
text-align: center;
57+
padding: 80px;
58+
border-bottom-left-radius: 50px;
59+
border-bottom-right-radius: 50px;
60+
}
3461

35-
.avatar {
62+
.avatar {
3663
width: 150px;
3764
height: 150px;
3865
border-radius: 75px;
3966
margin: 0 auto 20px;
4067
}
4168

42-
.username {
43-
font-size: 24px;
44-
font-weight: bold;
45-
}
69+
/* Main content styles */
70+
.content {
71+
padding: 50px;
72+
border-radius: 25px;
73+
background-color: #fff;
74+
}
75+
.content h1 {
76+
color: #1D7874; /* cyan */
77+
}
78+
.content p {
79+
line-height: 1.5;
80+
}
4681

47-
.bio {
48-
font-size: 16px;
49-
text-align: left;
50-
margin: 20px 0;
51-
}
82+
/* Footer styles */
83+
.footer {
84+
background-color: #3B8EA5; /* blue */
85+
color: #f2f2f2;
86+
text-align: center;
87+
padding: 20px;
88+
border-top-left-radius: 50px;
89+
border-top-right-radius: 50px;
90+
}
91+
.repositories {
92+
/* max-width: 800px; */
93+
margin: 0 auto;
94+
padding: 20px;
95+
background-color: #f8f8f8;
96+
border: 1px solid #fff;
97+
border-radius: 5px;
98+
}
5299

53-
.stats {
54-
display: flex;
55-
justify-content: space-between;
56-
margin: 20px 0;
57-
}
100+
.repositories h2 {
101+
margin-top: 0;
102+
font-size: 24px;
103+
font-weight: bold;
104+
}
58105

59-
.stat {
60-
font-size: 18px;
61-
}
106+
.repositories ul {
107+
list-style: none;
108+
margin: 0;
109+
padding: 0;
110+
}
62111

63-
.repo {
64-
font-size: 18px;
65-
font-weight: bold;
66-
}
112+
.repositories li {
113+
margin-bottom: 10px;
114+
}
115+
116+
.repositories a {
117+
display: block;
118+
padding: 10px;
119+
background-color: #fff;
120+
border: 1px solid #ccc;
121+
border-radius: 5px;
122+
text-decoration: none;
123+
color: #333;
124+
}
125+
126+
.repositories a:hover {
127+
background-color: #f5f5f5;
128+
}
129+
130+
.repositories h3 {
131+
margin-top: 0;
132+
margin-bottom: 5px;
133+
font-size: 20px;
134+
font-weight: bold;
135+
}
136+
137+
.repositories p {
138+
margin: 0;
139+
font-size: 14px;
140+
color: #666;
141+
}
142+
.container {
143+
max-width: 600px;
144+
margin: 0 auto;
145+
padding: 20px;
146+
}
147+
148+
.stats {
149+
display: flex;
150+
flex-wrap: wrap;
151+
justify-content: space-between;
152+
}
153+
154+
.stat {
155+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
156+
padding: 10px;
157+
margin-bottom: 10px;
158+
flex-basis: calc(33.33% - 20px);
159+
}
160+
161+
.stat h2 {
162+
margin-top: 0;
163+
}
164+
165+
.stat p {
166+
font-size: 2em;
167+
font-weight: bold;
168+
margin: 0;
169+
}
67170
</style>
68-
</head>
69-
70-
<body>
71-
<h1>GitHub Profile</h1>
72-
<div class="container">
73-
<div class="card">
74-
<!-- Add the GitHub profile picture -->
75-
<img class="avatar" src="https://avatars.githubusercontent.com/u/123417503?v=4" alt="Avatar">
76-
<!-- Add the GitHub username -->
77-
<div class="username">Smartlinuxcoder</div>
78-
<!-- Add a short bio about the user -->
79-
<div class="bio">- 👋 Hi, I’m @Smartlinuxcoder</br>
80-
- 👀 I’m interested in Rust and javascript</br>
81-
- 🌱 I’m currently learning javascript</br>
82-
- 💞️ I’m looking to collaborate on open-source projects</br>
83-
- 📫 How to reach me ... good question
84-
</div>
85-
<div class="stats">
86-
<!-- Add the number of followers -->
87-
<div class="stat">
88-
<span>Followers</span>
89-
<br>
90-
123
91-
</div>
92-
<!-- Add the number of following -->
93-
<div class="stat">
94-
<span>Following</span>
95-
<br>
96-
456
97-
</div>
98-
<!-- Add the number of repositories -->
99-
<div class="stat">
100-
<span>Repositories</span>
101-
<br>
102-
789
103-
</div>
104-
</div>
105-
<!-- Add a link to the user's repositories -->
106-
<a class="repo" href="https://github.com/Smartlinuxcoder">View Repositories</a>
171+
</head>
172+
<body>
173+
<!-- Navbar -->
174+
<div class="navbar">
175+
<a href="#rust">Rust</a>
176+
<a href="#python">Python</a>
177+
<a href="#about">About</a>
178+
<a href="https://github.com/Smartlinuxcoder" class="button">Github</a>
179+
</div>
180+
181+
<!-- Header -->
182+
<div class="header">
183+
<img class="avatar" src="https://avatars.githubusercontent.com/u/123417503?v=4" alt="Avatar">
184+
<h1>Hi! I'm Smartlinuxcoder</h1>
185+
<p>Welcome to my website!</p>
186+
<div class="container">
187+
<h1>My GitHub Stats</h1>
188+
<div class="stats">
189+
<div class="stat">
190+
<h2>Followers</h2>
191+
<p id="followers">Loading...</p>
107192
</div>
193+
<div class="stat">
194+
<h2>Following</h2>
195+
<p id="following">Loading...</p>
196+
</div>
197+
<div class="stat">
198+
<h2>Repositories</h2>
199+
<p id="repos">Loading...</p>
200+
</div>
201+
</div>
108202
</div>
109-
</body>
203+
<script>
204+
const url = 'https://api.github.com/users/Smartlinuxcoder';
205+
206+
// Fetch data from GitHub API
207+
fetch(url)
208+
.then(response => response.json())
209+
.then(data => {
210+
// Set follower count
211+
document.getElementById('followers').textContent = data.followers;
212+
213+
// Set following count
214+
document.getElementById('following').textContent = data.following;
110215

216+
// Fetch repository data
217+
fetch(data.repos_url)
218+
.then(response => response.json())
219+
.then(data => {
220+
// Set repository count
221+
document.getElementById('repos').textContent = data.length;
222+
});
223+
})
224+
.catch(error => console.error(error));
225+
</script>
226+
</div>
227+
228+
<!-- Main content -->
229+
<div class="content">
230+
<h1 id="rust">Rust Programming</h1>
231+
<p>I'm pretty new to rust and I don't know all of its perks but i know one thing: </br>
232+
Everything that can be written in Rust will eventually be written in Rust.</p>
233+
234+
<h1 id="python">Python Programming</h1>
235+
<p>I like its semplicity and its philosophy but it's so SLOW</p>
236+
237+
<h1 id="about">About Me</h1>
238+
<p>Hi, I'm a random programmer who loves Rust and Python! I use arch btw./s</p>
239+
240+
<div class="repositories">
241+
<h2>My best repositories</h2>
242+
<ul id="repository-list"></ul>
243+
</div>
244+
<script>
245+
const apiUrl = 'https://api.github.com/users/Smartlinuxcoder/repos';
246+
247+
fetch(apiUrl)
248+
.then(response => response.json())
249+
.then(data => {
250+
const repositoryList = document.getElementById('repository-list');
251+
data.forEach(repository => {
252+
const listItem = document.createElement('li');
253+
const link = document.createElement('a');
254+
const heading = document.createElement('h3');
255+
const description = document.createElement('p');
256+
257+
link.href = repository.html_url;
258+
heading.textContent = repository.name;
259+
description.textContent = repository.description;
260+
261+
link.appendChild(heading);
262+
link.appendChild(description);
263+
listItem.appendChild(link);
264+
repositoryList.appendChild(listItem);
265+
});
266+
})
267+
.catch(error => console.error(error));
268+
</script>
269+
</div>
270+
<!-- Footer -->
271+
<div class="footer">
272+
<p>Copyright © 2023 Smartlinuxcoder.
273+
All rights deserved.</p>
274+
</div>
275+
</body>
111276
</html>
277+
278+

0 commit comments

Comments
 (0)