Skip to content

Commit 032eac2

Browse files
Rajangupta09Rajangupta09
committed
MODIFY: team-section
faculty and member details are added
1 parent 076d47a commit 032eac2

10 files changed

Lines changed: 199 additions & 58 deletions

File tree

‎assets/css/style.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -556,4 +556,124 @@ main {
556556
.welcome-msg {
557557
font-size: 14px;
558558
}
559+
}
560+
561+
/* Team */
562+
563+
.team-container h4 {
564+
font-family: "Raleway", sans-serif;
565+
font-size: 18px;
566+
font-weight: bold;
567+
color: #fff;
568+
text-transform: uppercase;
569+
position: relative;
570+
padding-bottom: 12px;
571+
text-align: center;
572+
}
573+
574+
.team-container h4::before,
575+
.team-container h4::after {
576+
content: "";
577+
position: absolute;
578+
left: 0;
579+
bottom: 0;
580+
height: 2px;
581+
}
582+
583+
.team-container h4::before {
584+
right: 0;
585+
left: 0;
586+
background: #555555;
587+
}
588+
589+
.team-container h4::after {
590+
background: #FF5722;
591+
left: 20%;
592+
width: 60%;
593+
}
594+
595+
596+
.faculty-container{
597+
margin-left: 22% !important;
598+
}
599+
.member-container{
600+
margin-left: 13% !important;
601+
}
602+
603+
.member-container, .faculty-container {
604+
margin: 0px 25px;
605+
padding: 12px;
606+
display: inline-block;
607+
width: 155px;
608+
position: relative;
609+
z-index: 0;
610+
}
611+
612+
613+
.member-container:hover, .faculty-container:hover {
614+
z-index: 100;
615+
}
616+
617+
.member-container:hover > .outer-circle, .faculty-container:hover > .outer-circle {
618+
animation: fade 0.5s ease 0s 1 forwards;
619+
620+
}
621+
622+
.faculty-container:hover > .basic-details > h3, .member-container:hover > .basic-details > h3{
623+
color: #ff5622e1;
624+
}
625+
626+
.basic-details {
627+
position: relative;
628+
z-index: 20;
629+
}
630+
631+
.basic-details .member-image, .faculty-image {
632+
border-radius: 50%;
633+
width: 131px;
634+
height: 131px;
635+
}
636+
637+
.basic-details .member-name, .faculty-name {
638+
color: white;
639+
padding: 11% 0% 0px 9px;
640+
font-size: 15px;
641+
642+
}
643+
644+
.outer-circle {
645+
position: absolute;
646+
background-color:#ff5622c0;
647+
padding-top: 135px;
648+
padding-bottom: 20px;
649+
width: 100%;
650+
top: 0px;
651+
left: 0px;
652+
z-index: 15;
653+
opacity: 0;
654+
border-radius: 100%;
655+
}
656+
657+
@media only screen and (max-width: 550px) {
658+
.outer-circle {
659+
padding-top: 140px;
660+
}
661+
662+
663+
}
664+
665+
.outer-circle h5 {
666+
color: white;
667+
font-weight: 100;
668+
}
669+
670+
@keyframes fade {
671+
from {
672+
opacity: 0;
673+
transform: translateY(1px);
674+
}
675+
to {
676+
opacity: 1;
677+
transform: translateY(0px);
678+
}
559679
}

‎assets/img/AbhineshKumar.jpg‎

378 KB
Loading

‎assets/img/PokalaAnirudh.png‎

571 KB
Loading

‎assets/img/PratyayKuila.jpeg‎

46.4 KB
Loading

‎assets/img/PrinceRaj.jpg‎

359 KB
Loading

‎assets/img/TarunBiswas.jpeg‎

77.6 KB
Loading

‎assets/img/avatar.jpg‎

91.9 KB
Loading

‎assets/js/main.js‎

Lines changed: 32 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,9 @@ function updateRepos(data){
142142
}
143143

144144
function fetchTeam(force = false) {
145-
fetch("https://api.github.com/orgs/devCANS/public_members", {
145+
fetch("./assets/js/members.json", {
146146
headers: {
147-
"Accept": "application/vnd.github.v3+json",
147+
"Accept": "*",
148148
"If-None-Match": ls.getKey("team-etag")
149149
}
150150
}).then(
@@ -172,68 +172,37 @@ function fetchTeam(force = false) {
172172
} catch (e) {
173173
console.log("[FETCH Team] ETag Missing");
174174
}
175-
176175
updateTeam(data);
177176
});
178-
}
179-
).catch(function(err) {
180-
console.log("[FETCH Team] Fetch Error!", err);
177+
}
178+
).catch(function(err) {
179+
console.log("[FETCH Team] Fetch Error!", err);
181180
});
182181
}
183182

184183
function updateTeam(data){
185-
data.forEach((member) => {
186-
if (ls.getKey(member.node_id) != null) {
187-
// Fetching member info from local storage
188-
info = JSON.parse(ls.getKey(member.node_id));
189-
setMember(info);
190-
} else {
191-
// Fetching member info from github api
192-
fetch(member.url, {
193-
headers: {
194-
"Accept": "application/vnd.github.v3+json",
195-
"If-None-Match": ls.getKey("team-etag")
196-
}
197-
}).then((response) => {
198-
if(response.status != 200){
199-
console.log("[Fetch Member Info] Status code" + response.status);
200-
}
201-
202-
response.json().then((info) => {
203-
// Saving member info to local storage
204-
ls.setKey(info.node_id, JSON.stringify(info));
205-
setMember(info)
206-
});
207-
}).catch(function(err) {
208-
console.log("[FETCH Team] Fetch Error!", err);
209-
});
210-
}
184+
Object.entries(data).forEach((val) => {
185+
val[1].forEach((key)=> {
186+
setMember(key);
187+
})
188+
})
189+
}
211190

212-
});
213-
}
214191

215192
function setMember(info){
216-
// Creating member card
217-
const teamContainer = document.querySelector(".team-container");
218-
let outerDiv = createElement("div", {class: "col-lg-2 col-md-4"});
219-
let member = createElement("div", {class: "member"});
220-
let img = createElement("img",{class: "img-fluid", src: info.avatar_url});
221-
let memberInfo = createElement("div", {class: "member-info"});
222-
let memberInfoContent = createElement("div", {class: "member-info-content"});
223-
let h4 = createElement("h4");
224-
h4.innerHTML = info.name;
225-
memberInfoContent.appendChild(h4);
226-
let social = createElement("div", {class: "social"});
227-
social.innerHTML = `
228-
<a href="${info.html_url}" target="_"><i class="fa fa-github"></i></a>
229-
`;
230-
memberInfoContent.appendChild(social);
231-
memberInfo.appendChild(memberInfoContent);
232-
member.appendChild(img);
233-
member.appendChild(memberInfo);
234-
outerDiv.appendChild(member);
193+
let teamContainer = document.querySelector('#'+info.profile+'-container');
194+
let outerDiv = createElement("div", {class: info.profile+"-container"});
195+
let basicdetails = createElement("div", {class: "basic-details"});
196+
let img = createElement("img",{class: info.profile+"-image", src: info.img});
197+
let h3 = createElement("h3", {class: info.profile+"-name"});
198+
let innerdetails = createElement("div", {class: "outer-circle"});
199+
h3.innerHTML = info.name;
200+
basicdetails.appendChild(img);
201+
basicdetails.appendChild(h3);
202+
outerDiv.appendChild(basicdetails);
203+
outerDiv.appendChild(innerdetails);
235204
teamContainer.appendChild(outerDiv);
236-
}
205+
};
237206

238207
function createElement(tag, options = {}, html = "") {
239208
let e = document.createElement(tag);
@@ -248,6 +217,9 @@ function createElement(tag, options = {}, html = "") {
248217
return e;
249218
}
250219

220+
221+
222+
251223
function getMaterialIcon(icon, addClasses = "", DOMElement = true) {
252224
if (DOMElement) {
253225
return createElement("i", {class: "material-icons " + addClasses}, icon);
@@ -324,3 +296,9 @@ function init() {
324296

325297
new TypeWriter(textElement, words, wait);
326298
}
299+
300+
301+
302+
303+
304+

‎assets/js/members.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"faculty":[
3+
{
4+
"profile": "faculty",
5+
"img": "/assets/img/PratyayKuila.jpeg",
6+
"name": "Dr. Pratyay Kuila",
7+
"designation" : "Faculty advisors"
8+
},
9+
{
10+
"profile": "faculty",
11+
"img": "/assets/img/TarunBiswas.jpeg",
12+
"name": "Dr. Tarun Biswas",
13+
"designation" : "Faculty advisors"
14+
}
15+
],
16+
"2021": [
17+
{
18+
"profile": "member",
19+
"img": "/assets/img/PokalaAnirudh.png",
20+
"name": "Pokala Anirudh"
21+
},
22+
{
23+
"profile": "member",
24+
"img": "/assets/img/PrinceRaj.jpg",
25+
"name": "Prince Raj"
26+
},
27+
{
28+
"profile": "member",
29+
"img": "/assets/img/AbhineshKumar.jpg",
30+
"name": "Abhinesh Kumar"
31+
}
32+
]
33+
}

‎index.html‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,19 @@ <h3 class="title">resources</h3>
110110
<div class="container">
111111
<header class="section-header">
112112
<h3 class="title">Our Team</h3>
113-
</header>
114-
115-
<div class="row team-container"></div>
116-
113+
</header>
114+
<header class="team-container">
115+
<h4 class="title">Faculty</h4>
116+
</header>
117+
<div id="faculty-container" class="m-5">
118+
119+
</div>
120+
<header class="team-container" class="m-2">
121+
<h4 class="title">Cordinator</h4>
122+
</header>
123+
<div id="member-container" class="m-5">
124+
125+
</div>
117126
</div>
118127
</section>
119128
</main>
@@ -168,6 +177,7 @@ <h4>Feedback</h4>
168177
<script src="assets/js/main.js"></script>
169178
<script src="assets/vendor/particles.min.js"></script>
170179
<script src="assets/js/particle.js"></script>
180+
<script src="assets/js/members.js"></script>
171181
</body>
172182

173183
</html>

0 commit comments

Comments
 (0)