-
- 
- 
-
-
-
-
-
- Blank
-
+
+
+
@@ -53,6 +59,22 @@
const overview = "Give us a brief overview"
const display = "Display?"
+ const badgeIcons = {
+ "I got a new job": "badge-new-job.svg",
+ "I produced something for my portfolio": "badge-file.svg",
+ "I improved my LinkedIn": "badge-linkedin.svg",
+ "I learned how to work better on a team": "badge-team.svg",
+ "I increased the number of commits on my Github profile": "badge-github.svg",
+ "I learned a new language": "badge-code.svg",
+ "I setup 2FA": "badge-twofa.svg",
+ "I worked on an enterprise project": "badge-enterprise.svg",
+ "I worked on a project that will help the people of Los Angeles": "badge-giving.svg",
+ "I worked on two or more projects": "badge-hammers.svg",
+ "I taught or mentored a person on my team": "badge-mentor.svg",
+ "I taught or mentored a person on another team": "badge-mentor.svg",
+ "My team delivered software to a stakeholder": "badge-software-delivered.svg",
+ "My team launched our MVP": "badge-launch.svg"
+ }
function main() {
{% assign localData = site.data.wins-data | jsonify %}
let localData = {{ localData }};
@@ -90,7 +112,6 @@
if (document.querySelectorAll('.wins-card').length == 0) {
const page = document.querySelector('.wins-page-contain');
const p = document.createElement('p');
- //p.classList.add("project-card");
page.appendChild(p);
p.innerHTML = "No one has shared a win yet...be the first!";
}
@@ -150,57 +171,63 @@
let cardElement = makeElement('li', list, "project-card");
cardElement.classList.add("wins-card");
- let leftDiv = makeElement('div', cardElement, "wins-card-left");
+ let topDiv = makeElement('div', cardElement, "wins-card-top");
- let profileImg = makeElement('img', leftDiv, "wins-card-profile-img");
+ let profileImg = makeElement('img', topDiv, "wins-card-profile-img");
profileImg.setAttribute("src", profileImgSrc);
+ let topRightDiv = makeElement('div', topDiv, "wins-card-top-right");
+
+ let bottomDiv = makeElement('div', cardElement, "wins-card-bottom");
+ // bottomDiv.classList.add("project-card-inner");
- let quote = makeElement('img', leftDiv, "wins-card-big-quote");
+ let quote = makeElement('img', bottomDiv, "wins-card-big-quote");
quote.setAttribute("src", "/assets/images/wins-page/quote-icon.svg");
- let rightDiv = makeElement('div', cardElement, "wins-card-content");
- rightDiv.classList.add("project-card-inner");
-
+
+ // let bottomRightDiv = makeElement('div', bottomDiv, "wins-card-content");
+
+
//makes the top of thecard name and icons
- let topDiv = makeElement('div', rightDiv, "project-inner");
- topDiv.classList.add("wins-card-top");
- let nameElement = makeElement('span', topDiv, "wins-card-name");
- nameElement.innerHTML = card[name];
- let icons = makeElement('span', topDiv, "wins-card-icons");
- if (card[linkedin_url].length > 0) {
- makeIcon(card[linkedin_url], icons, 'linkedin-icon', '/assets/images/wins-page/icon-linkedin-small.svg');
- } if (card[github_url].length > 0) {
- makeIcon(card[github_url], icons, 'github-icon', '/assets/images/wins-page/icon-github-small.svg');
- }
-
+ let titleDiv = makeElement('div', topRightDiv, "project-inner");
+ titleDiv.classList.add("wins-card-title");
+ let nameElement = makeElement('span', titleDiv, "wins-card-name");
+ nameElement.innerHTML = card[name];
+ let icons = makeElement('span', titleDiv, "wins-card-icons");
+ if (card[linkedin_url].length > 0) {
+ makeIcon(card[linkedin_url], icons, 'linkedin-icon', '/assets/images/wins-page/icon-linkedin-small.svg');
+ } if (card[github_url].length > 0) {
+ makeIcon(card[github_url], icons, 'github-icon', '/assets/images/wins-page/icon-github-small.svg');
+ }
+
//makes the team and roles portion in the middle
- let nameDiv = makeElement('div', rightDiv, "project-inner");
- nameDiv.classList.add("wins-card-team");
- nameDiv.innerHTML = `Team(s): ${card[team]}`;
- if (card[role].length > 0) {
- let roleDiv = makeElement('div', rightDiv, "project-inner");
- roleDiv.classList.add("wins-card-team");
- roleDiv.innerHTML = `Role(s): ${card[role]}`;
- }
+ let nameDiv = makeElement('div', topRightDiv, "project-inner");
+ nameDiv.classList.add("wins-card-team");
+ nameDiv.innerHTML = `Team(s): ${card[team]}`;
+ if (card[role].length > 0) {
+ let roleDiv = makeElement('div', topRightDiv, "project-inner");
+ roleDiv.classList.add("wins-card-team");
+ roleDiv.innerHTML = `Role(s): ${card[role]}`;
+ }
//makes the win and info text on the bottom of the card
- let winDiv = makeElement('div', rightDiv, "project-inner");
- winDiv.classList.add("wins__card-text");
- let overviewElement = makeElement('p', winDiv, "wins-card-overview");
- overviewElement.innerHTML = card[overview];//description
- let winElement = makeElement('p', winDiv, "wins-card-info");
- winElement.innerHTML = formatMessage(card[win]); //win
+ let winDiv = makeElement('div', bottomDiv, "project-inner");
+ winDiv.classList.add("wins-card-text");
+ let overviewElement = makeElement('p', winDiv, "wins-card-overview");
+ overviewElement.innerHTML = card[overview];//description
+ let winElement = makeElement('p', winDiv, "wins-card-info");
+ winElement.innerHTML = formatMessage(card[win]); //win
- let innerHeight = Array.from(rightDiv.childNodes).reduce((acc, el) => el.offsetHeight + acc, 0)
+ let innerHeight = Array.from(winDiv.childNodes).reduce((acc, el) => el.offsetHeight + acc, 0)
//makes the see more span on the bottom of the card
- if(innerHeight > rightDiv.offsetHeight){ //checks if see more is needed.
- let seeMoreDiv = makeElement('div', rightDiv, "project-inner");
- seeMoreDiv.classList.add("wins__see-more-div")
- seeMoreDiv.innerHTML = `...see more`
+ if(innerHeight > winDiv.offsetHeight){ //checks if see more is needed.
+ let seeMoreDiv = makeElement('div', winDiv, "wins-see-more-div");
+ // seeMoreDiv.classList.add("wins-see-more-div")
+ seeMoreDiv.innerHTML = `...see more`
}
- idNum++
+ idNum++
})
- }
+ }
+
function seeMore(id){
screenWidth = window.innerWidth;
if (screenWidth > 960){
@@ -221,36 +248,54 @@
}
}
function updateOverlay(i) {
- let stringData = window.localStorage.getItem("data");
- let data = JSON.parse(stringData).reverse();
-
- const overlayIcons = document.querySelector('#overlay-icons');
- overlayIcons.innerHTML = "";
-
- if (data[i][linkedin_url].length > 0) {
- makeIcon(data[i][linkedin_url], overlayIcons, 'linkedin-icon', '/assets/images/wins-page/icon-linkedin-small.svg');
- } if (data[i][github_url].length > 0) {
- makeIcon(data[i][github_url], overlayIcons, 'github-icon', '/assets/images/wins-page/icon-github-small.svg');
- }
+ let stringData = window.localStorage.getItem("data");
+ let data = JSON.parse(stringData).reverse();
+
+ const overlayIcons = document.querySelector('#overlay-icons');
+ overlayIcons.innerHTML = "";
+
+ if (data[i][linkedin_url].length > 0) {
+ makeIcon(data[i][linkedin_url], overlayIcons, 'linkedin-icon', '/assets/images/wins-page/icon-linkedin-small.svg');
+ } if (data[i][github_url].length > 0) {
+ makeIcon(data[i][github_url], overlayIcons, 'github-icon', '/assets/images/wins-page/icon-github-small.svg');
+ }
- const overlayName = document.querySelector('#overlay-name');
- overlayName.innerHTML = data[i][name];
+ const overlayName = document.querySelector('#overlay-name');
+ overlayName.innerHTML = data[i][name];
- const overlayTeams = document.querySelector('#overlay-teams');
- overlayTeams.innerHTML = `Team(s): ${data[i][team]}`;
+ const overlayTeams = document.querySelector('#overlay-teams');
+ overlayTeams.innerHTML = `Team(s): ${data[i][team]}`;
- const overlayRoles = document.querySelector('#overlay-roles');
- overlayRoles.innerHTML = `Role(s): ${data[i][role]}`;
+ const overlayRoles = document.querySelector('#overlay-roles');
+ overlayRoles.innerHTML = `Role(s): ${data[i][role]}`;
- const overlayOverview = document.querySelector('#overlay-overview');
- overlayOverview.innerHTML = data[i][overview];
+ const overlayOverview = document.querySelector('#overlay-overview');
+ overlayOverview.innerHTML = data[i][overview];
- const overlayInfo = document.querySelector('#overlay-info');
- overlayInfo.innerHTML = formatMessage(data[i][win]);
+ // const overlayInfo = document.querySelector('#overlay-badges');
+ // overlayInfo.innerHTML =
+ createBadges(data[i][win]);
- const overlayProjectCard = document.querySelector('#overlay-project-card');
- overlayProjectCard.parentNode.classList.add("display-initial");
- }
+ const overlayProjectCard = document.querySelector('#overlay-project-card');
+ overlayProjectCard.parentNode.classList.add("display-initial");
+ }
+
+ function createBadges(winStr) { // badges come in as a string with comma seperations
+ const badges = winStr.split(', ');
+ const badgeContainer = document.querySelector('#overlay-badges');
+ badgeContainer.innerHTML = ""
+
+ badges.forEach(badge => {
+ const badgeItem = makeElement('div', badgeContainer, 'badge-item')
+ const badgeIconContainer = makeElement('div', badgeItem, 'badge-icon')
+ const badgeIcon = makeElement('img', badgeIconContainer, 'badge-icon-svg');
+ badgeIcon.setAttribute("src", `/assets/images/wins-page/badges/${badgeIcons[badge] || "badge-star.svg"}`);
+ const badgeText = makeElement('div', badgeItem, 'badge-item-text')
+ badgeText.innerHTML = badge;
+ })
+ // let badge =
+ }
+
function hideOverlay(e) {
e = e || window.event;
if (e.target !== e.currentTarget)
+
+
+
-
+
+
+ Blank
+
+
+ Team(s): Blank
+ Role(s): Blank
+ Team(s): Blank
- Role(s): Blank
-
-
+
Blank
-Blank
+
+
+
+