Skip to content

Commit 291afe2

Browse files
namangupta1399namangupta1399
authored
Merge pull request #251 from namangupta1399/master
Update: Minor fixes in projects section
2 parents 49ddce9 + 46f22b5 commit 291afe2

File tree

4 files changed

+74
-59
lines changed

4 files changed

+74
-59
lines changed

‎index.html

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -102,55 +102,55 @@ <h2 class="text-primary">Our Vision</h2>
102102
</header>
103103
<main>
104104

105-
<section id="projects" class="projects">
106-
<h2>Projects</h2>
105+
<!-- Projects -->
106+
<section id="projects" class="projects">
107+
<h2>Projects</h2>
107108

108-
<div class="flex-col-2" id="githubprojects">
109-
<!-- GitHub Projects from scripts.js goes here -->
110-
</div>
109+
<div class="flex-items" id="githubprojects">
110+
<!-- GitHub Projects from scripts.js goes here -->
111+
</div>
111112

112-
<!-- Not needed if we go to api call in the js -->
113-
<!-- <div class="flex-items">
114-
<a href="#">
115-
<div class="item project">
116-
<h4 class="text-secondary">Chryz-Hub Website</h4>
117-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quos consequatur atque perferendis
118-
sapiente consectetur iusto tempora temporibus, sequi maxime.</p>
119-
<div>
120-
<span class="fab fa-html5"></span>
121-
<span class="fab fa-css3-alt"></span>
122-
<span class="fab fa-js"></span>
123-
</div>
113+
<!-- Not needed if we go to api call in the js -->
114+
<!-- <div class="flex-items">
115+
<a href="#">
116+
<div class="item project">
117+
<h4 class="text-secondary">Chryz-Hub Website</h4>
118+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quos consequatur atque perferendis
119+
sapiente consectetur iusto tempora temporibus, sequi maxime.</p>
120+
<div>
121+
<span class="fab fa-html5"></span>
122+
<span class="fab fa-css3-alt"></span>
123+
<span class="fab fa-js"></span>
124124
</div>
125-
</a>
126-
127-
<a href="#">
128-
<div class="item project">
129-
<h4 class="text-secondary">Project X</h4>
130-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa corrupti, officia labore quibusdam
131-
adipisci! Ducimus perspiciatis corrupti dolore accusamus?</p>
132-
<div>
133-
<span class="fab fa-python"></span>
134-
<span class="fab fa-bootstrap"></span>
135-
<span class="fab fa-js"></span>
136-
</div>
125+
</div>
126+
</a>
127+
128+
<a href="#">
129+
<div class="item project">
130+
<h4 class="text-secondary">Project X</h4>
131+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa corrupti, officia labore quibusdam
132+
adipisci! Ducimus perspiciatis corrupti dolore accusamus?</p>
133+
<div>
134+
<span class="fab fa-python"></span>
135+
<span class="fab fa-bootstrap"></span>
136+
<span class="fab fa-js"></span>
137137
</div>
138-
</a>
139-
140-
<a href="#">
141-
<div class="item project">
142-
<h4 class="text-secondary">Project Y</h4>
143-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa corrupti, officia labore quibusdam
144-
adipisci! Ducimus perspiciatis corrupti dolore accusamus?</p>
145-
<div>
146-
<span class="fab fa-react"></span>
147-
<span class="fab fa-js"></span>
148-
</div>
138+
</div>
139+
</a>
140+
141+
<a href="#">
142+
<div class="item project">
143+
<h4 class="text-secondary">Project Y</h4>
144+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa corrupti, officia labore quibusdam
145+
adipisci! Ducimus perspiciatis corrupti dolore accusamus?</p>
146+
<div>
147+
<span class="fab fa-react"></span>
148+
<span class="fab fa-js"></span>
149149
</div>
150-
</a>
151-
</div> -->
152-
</section>
153-
</main>
150+
</div>
151+
</a>
152+
</div> -->
153+
</section>
154154
<!-- JAVASCRIPT -->
155155
<script src="./src/assets/javascript/script.js"></script>
156156
</body>

‎src/assets/css/global.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ textarea:focus {
155155

156156
.flex-items a {
157157
display: block;
158-
margin: 0 20px;
158+
margin: 0 20px 2rem;
159159
transition: all 0.4s ease-in-out;
160160
}
161161

‎src/assets/css/styles.css

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -240,9 +240,11 @@ nav ul li a:focus {
240240
}
241241

242242
.project {
243+
height: 100%;
243244
padding: 40px;
244-
margin-bottom: 2rem;
245245
background: #fff url(../images/under-construction.jpg) no-repeat center center/cover;
246+
background-size: cover;
247+
background-position: left;
246248
}
247249

248250
.project p {
@@ -262,10 +264,18 @@ nav ul li a:focus {
262264
color: var(--secondaryBtn);
263265
}
264266

265-
.flex-col-2 {
267+
#githubprojects {
268+
align-items: stretch;
269+
}
270+
271+
#githubprojects a {
272+
width: 33%;
273+
}
274+
275+
.flex-col-3 {
266276
width: 100%;
267277
height: auto;
268-
columns: 2;
278+
columns: 3;
269279
}
270280

271281
@media (max-width: 768px) {

‎src/assets/javascript/script.js

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,42 +32,47 @@ var githubprojectsdomelement = document.getElementById('githubprojects');
3232
let githubprojects = [
3333
{
3434
name: 'chryz-hub/chryz-hub.github.io',
35+
background: 'community-website.jpg',
3536
},
3637
{
37-
name: 'chryz-hub/chryz-hub.github.io',
38+
name: 'chryz-hub/js-projects',
39+
background: 'js-projects.PNG'
40+
},
41+
{
42+
name: 'chryz-hub/py-projects',
43+
background: 'py-projects.PNG'
3844
},
3945
// Here can be added some more projets if needed
4046
];
4147

4248
githubprojects.forEach((project) => {
43-
getproject(project.name);
49+
getproject(project);
4450
});
4551

46-
function getproject(project) {
47-
fetch(`https://api.github.com/repos/${project}`)
52+
function getproject({name, background}) {
53+
fetch(`https://api.github.com/repos/${name}`)
4854
.then((response) => {
4955
return response.json();
5056
})
5157
.then((project) => {
5258
// we add the project card directly to the html dom
53-
githubprojectsdomelement.innerHTML += createprojectcard(project);
59+
githubprojectsdomelement.innerHTML += createprojectcard(project, background);
5460
});
5561
}
5662

57-
function createprojectcard(project) {
63+
function createprojectcard(project, background) {
5864
// removing github emojis cause they are not usable in html
5965
project.description = project.description.replace(/:[^}]*:/, '');
6066

6167
// TODO: add Project Card
68+
6269
let projectcard = `<a href="${project.html_url}">
63-
<div class="item project">
70+
<div class="item project" style="background-image: url(https://raw.githubusercontent.com/chryz-hub/chryz-hub.github.io/master/src/assets/images/projects/${background})">
6471
<h4 class="text-secondary">${project.name}</h4>
6572
<p>${project.description}</p>
6673
<div>
67-
<!-- TODO add icons -->
68-
<!-- <span class="fab fa-html5"></span>
69-
<span class="fab fa-css3-alt"></span>
70-
<span class="fab fa-js"></span> -->
74+
<span class="fab fa-react"></span>
75+
<span class="fab fa-js"></span>
7176
</div>
7277
</div>
7378
</a>`;

0 commit comments

Comments
 (0)