Skip to content

Commit dfeec0d

Browse files
sieurinsieurin
committed
better responsiveness and more design
1 parent 805e083 commit dfeec0d

6 files changed

Lines changed: 126 additions & 28 deletions

File tree

‎code/chart.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// font family for chart
2+
Chart.defaults.font.family = "Poppins";
3+
14
// DOM-selector for the chart
25
const ctx = document.getElementById("chart").getContext("2d");
36

@@ -9,18 +12,23 @@ const renderChart = (projects) => {
912
labels: labels,
1013
datasets: [
1114
{
12-
label: "My First dataset",
15+
data: [projects, 19 - projects],
1316
backgroundColor: ["#2FC5EE", "#FF1E00"],
1417
borderColor: "#FEFBF3",
15-
data: [projects, 19 - projects],
18+
hoverOffset: 8,
19+
hoverBorderColor: ["#FF1E00"],
1620
},
1721
],
1822
};
1923

2024
const config = {
2125
type: "doughnut",
2226
data: data,
23-
options: {},
27+
options: {
28+
font: {
29+
size: 10,
30+
},
31+
},
2432
};
2533

2634
new Chart(document.getElementById("chart"), config);

‎code/icons8-favorite-30.png‎

561 Bytes
Loading

‎code/icons8-star-48.png‎

1.23 KB
Loading

‎code/index.html‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,35 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Project GitHub Tracker</title>
8+
<!-- Link to stylesheet -->
89
<link rel="stylesheet" href="./style.css" />
10+
<!-- Link to google font -->
11+
<link rel="preconnect" href="https://fonts.googleapis.com" />
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13+
<link
14+
href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Poppins:wght@400;600&display=swap"
15+
rel="stylesheet"
16+
/>
17+
<!-- Link to favicon -->
18+
<link rel="icon" type="image/x-icon" href="/code/icons8-star-48.png" />
919
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1020
</head>
1121
<body>
1222
<div id="header"></div>
1323
<h2 class="project-header">my github projects</h2>
1424
<main id="projects"></main>
1525

16-
<!-- Here I draw the chart -->
26+
<h2 class="process-header">bootcamp status</h2>
27+
<!-- Chart sektion -->
1728
<div class="chart-wrapper" id="chartWrapper">
1829
<canvas id="chart"></canvas>
1930
</div>
2031

32+
<footer>
33+
<p class="footer-text">© Åsa Sieurin</p>
34+
</footer>
35+
36+
<!-- My scripts -->
2137
<script src="./chart.js"></script>
2238
<script src="./token.js"></script>
2339
<script src="./script.js"></script>

‎code/script.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ fetch(API_USER, options)
2424
<img src="${json.avatar_url}" alt= "avatar">
2525
<p class="user-name">${json.login}</p>
2626
</div>
27+
<div class="circles">
28+
<div class="circle"></div>
29+
<div class="circle"></div>
30+
<div class="circle"></div>
31+
<div class="circle"></div>
32+
<div class="circle"></div>
33+
<div class="circle"></div>
34+
</div>
2735
<p class="bio"><span>HI!</span> ${json.bio}</p>
2836
`;
2937
});
@@ -56,20 +64,20 @@ fetch(API_REPOS, options)
5664
<p class="branch-name">${project.default_branch} branch</p>
5765
<a class="project-url" href="${
5866
project.html_url
59-
}" alt="link to git" target="_blank">link to project</a>
67+
}" alt="link to git" target="_blank">link to repo</a>
6068
</div>
6169
<div class="test"> <h1>TESTAR LITE</h1> </div>
6270
</div>
6371
<div>
6472
`;
65-
66-
//toggle function that add the class active and
73+
74+
//toggle function that add the class active to a section
6775
function toggle() {
6876
this.classList.toggle("active");
6977
}
7078

71-
// calls a function which will be executed when the element, project section, is clicked.
72-
document.getElementById(`${project.name}`).onclick = toggle;
79+
// calls a function which will be executed when the element, project section, is clicked
80+
document.getElementById(project.name).onclick = toggle;
7381

7482
// fetch all the pull requests and print them out
7583
const reponame = project.name;

‎code/style.css‎

Lines changed: 85 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&family=Poppins:wght@400;600&display=swap");
2-
31
/* CSS below is to reset default values such as margin, padding and box-sizing
42
and increase the resolution of the text */
3+
:root {
4+
--main-bg-color: #fbf9eb;
5+
--my-black: #333;
6+
--main-accent-color: #ff1e00;
7+
--sec-accent-color: #2fc5ee;
8+
}
59

610
* {
711
margin: 0;
@@ -14,8 +18,8 @@
1418
}
1519

1620
body {
17-
background: #fefbf3;
18-
border: solid #2fc5ee 8px;
21+
background: var(--main-bg-color);
22+
border: solid var(--sec-accent-color) 8px;
1923
width: 100%;
2024
font-family: "Poppins";
2125
}
@@ -28,7 +32,7 @@ a {
2832
text-decoration: none;
2933
font-family: "poppins";
3034
font-size: 8px;
31-
color: #ff1e00;
35+
color: var(--main-accent-color);
3236
}
3337

3438
.header {
@@ -45,25 +49,42 @@ img {
4549
writing-mode: vertical-rl;
4650
font-family: "Playfair Display";
4751
font-size: 13vw;
48-
color: #ff1e00;
52+
color: var(--main-accent-color);
4953
}
5054

5155
span {
52-
color: #ff1e00;
56+
color: var(--main-accent-color);
5357
font-size: 5vw;
5458
}
5559

60+
.circles {
61+
display: flex;
62+
flex-direction: row;
63+
justify-content: space-between;
64+
width: 45%;
65+
font-family: 'poppins';
66+
color: var(--main-bg-color);
67+
}
68+
69+
.circle {
70+
width: 5vw;
71+
height: 9vw;
72+
margin: 2px;
73+
border-radius: 50%;
74+
background-color: var(--sec-accent-color);
75+
}
76+
5677
.bio {
5778
display: block;
58-
color: black;
79+
color: var(--my-black);
5980
font-family: "Playfair Display";
6081
font-size: 2vw;
6182
font-style: normal;
6283
font-weight: normal;
6384
text-align: center;
64-
margin: 3rem 5rem;
65-
border-top: 0.5px solid #333;
66-
border-bottom: 0.5px solid #333;
85+
margin: 5rem;
86+
border-top: 0.5px solid var(--my-black);
87+
border-bottom: 0.5px solid var(--my-black);
6788
padding: 20px 0;
6889
}
6990

@@ -74,11 +95,11 @@ span {
7495
text-transform: uppercase;
7596
padding-bottom: 20px;
7697
margin-top: 50px;
77-
border-bottom: 3px solid #333;
98+
border-bottom: 3px solid var(--my-black);
7899
}
79100

80101
.projects {
81-
border-bottom: 1px solid #333;
102+
border-bottom: 1px solid var(--my-black);
82103
}
83104

84105
.projects-right {
@@ -88,6 +109,7 @@ span {
88109
display: flex;
89110
flex-direction: column;
90111
align-items: end;
112+
text-align: -webkit-right;
91113
}
92114

93115
.projects-left {
@@ -105,8 +127,8 @@ span {
105127
}
106128

107129
.projects:hover {
108-
background-color: #333;
109-
color: #2fc5ee;
130+
background-color: var(--my-black);
131+
color: var(--sec-accent-color);
110132
transition: all 1.5s ease;
111133
cursor: pointer;
112134
}
@@ -137,25 +159,53 @@ span {
137159
line-height: 12px;
138160
}
139161

162+
.process-header {
163+
font-size: 4vw;
164+
font-weight: 500;
165+
text-align: center;
166+
text-transform: uppercase;
167+
margin-top: 50px;
168+
}
169+
140170
.chart-wrapper {
141171
width: 57%;
142-
margin: 70px auto;
172+
margin: 22px auto;
173+
margin-bottom: 60px;
143174
}
144175

145-
/* On screens that are 768px or more (tablet) */
176+
.footer-text {
177+
font-size: 12px;
178+
font-family: "poppins";
179+
font-weight: normal;
180+
text-align: center;
181+
margin: 2rem 0 1rem 0;
182+
color: var(--my-black);
183+
}
146184

185+
footer {
186+
height: 80px;
187+
background-color: var(--sec-accent-color);
188+
display: flex;
189+
justify-content: center;
190+
}
191+
192+
/* Media Query - Tablet */
147193
@media screen and (min-width: 768px) {
148194
body {
149-
border: 22px solid #2fc5ee;
195+
border: solid var(--sec-accent-color) 22px;
150196
}
151197

152198
a,
153199
p {
154200
font-size: 10px;
155201
}
156202

203+
.circle {
204+
205+
}
206+
157207
.bio {
158-
margin: 20rem 15rem;
208+
margin: 15rem 8rem;
159209
padding: 50px;
160210
font-size: 2.5vw;
161211
}
@@ -171,4 +221,20 @@ span {
171221
.project-info {
172222
height: 120px;
173223
}
224+
225+
.process-header {
226+
margin-top: 100px;
227+
}
228+
229+
.chart-wrapper {
230+
width: 30%;
231+
}
232+
233+
footer {
234+
height: 80px;
235+
}
236+
}
237+
238+
/* Media Query - Desktop */
239+
@media screen and (min-width: 992px) {
174240
}

0 commit comments

Comments
 (0)