added Collab Lab, changed skills section, updated ifu link

index.html

@@ -34,36 +34,57 @@ <h1 class="intro">Hi. I'm a web developer based in Washington, D.C.</h1>
   <img src="./pictures/skyline-fixed-2.png" class="heading-pic">
 </div>
 
-<section class="skills-wrapper" id="skills-wrapper">
-  <h2>Skills</h2>
-  <div class="skills-text-left">
-    <span>Front-End Web Development</span>
-    <br>React
-    <br>Hooks
-    <br>Bootstrap
-    <br>Vue.js
-    <br>Javascript
-    <br>HTML
-    <br>CSS/SCSS
+<h1 class="heading" id="skills-wrapper">Skills</h1>
+
+<section class="skills-wrapper" >
+
+  <div >
 
-    <br>Git
+    <ul>
+      <li>Javascript</li>
+      <li>React</li>
+      <li>Redux</li>
+
+      <li>Vue.js</li>
+    </ul>
+
+  </div>
+  <div>
+    <ul>
+      <li>HTML</li>
+      <li>CSS</li>
+      <li>SASS</li>
+    </ul>
   </div>
-  <div class="skills-text-right">
-    <span>Other</span>
-    <br>Social Media (Hootsuite, Buffer)
-    <br>Copywriting
-    <br>Client and Account Management
+  <div >
+    <ul>
+      <li>Firebase</li>
+      <li>Git</li>
+      <li>Bootstrap</li>
+    </ul>
+
   </div>
 
 </section>
 
-<h1 id="experience-title">Experience</h1>
 
-<h2 id="ifu-title">International Family Union - Front-End Developer (Volunteer)</h2> 
 
+<h1 id="experience-title" class="heading">Experience</h1>
+
+<h2 class="subtitle">The Collab Lab - Developer</h2> 
 
 <div class="experience">
-  <p>International Family Union (IFU) is an international NGO which provides various types of aide and assistance to international students who study abroad in America. As part of the development team, I coordinate with UI/UX designers to implement responsive layouts and optimize the site.<br><br> IFU's website is developed using Vue.js and Nuxt.js. Click <a href="https://ifu-china.com/" target="_blank">here</a> to visit IFU's website.</p>
+  <a href="https://tcl-26-shopping-list.web.app/" target="blank" ><img src="pictures/peasy.png" alt="peasy app"></a>
+  <p id="peasy-graph"> <a href="https://the-collab-lab.codes/" target="blank">The Collab Lab</a>  is a program to help early-career developers gain practical experience with mentorship from professional engineers. During the cohort I participated in, my team built an app called Peasy. Peasy is a shopping list that learns your buying habits over time and suggests future purchases based on your history. <br><br> The app was developed primarily in pair-programming sessions, and uses React and Firebase. <br><br> Click <a href="https://tcl-26-shopping-list.web.app/" target="_blank">here</a> to try out Peasy for yourself.</p>
+
+
+</div>
+
+<h2 class="subtitle">International Family Union - Front-End Developer (Volunteer)</h2> 
+
+
+<div class="experience">
+  <p>International Family Union (IFU) is an international NGO which provides various types of aide and assistance to international students who study abroad in America. As part of the development team, I coordinate with UI/UX designers to implement responsive layouts and optimize the site.<br><br> IFU's website is developed using Vue.js and Nuxt.js. Click <a href="https://ifuglobal.org/" target="_blank">here</a> to visit IFU's website.</p>
   <div class="ifucontainer"><img id="open-image" src="/pictures/IFU logo-BlueText-Vertical.png"></div>
   <div id="ifu-modal" class="modal">
     <div class="modal-content">
@@ -75,6 +96,8 @@ <h2 id="ifu-title">International Family Union - Front-End Developer (Volunteer)<
 
 </div>
 
+
+
 <!-- PORTFOLIO --------------------------------------------------------------------->
 
 
@@ -87,7 +110,7 @@ <h1 id="projects-title">Projects</h1>
 
   <div class="portfolio-item">
     <div>
-      <h4 class="individual-project-title">Giovannis Restaurant</h4> 
+      <h4 class="individual-project-title">Giovanni's Restaurant</h4> 
       <a href="https://giovannis.netlify.app/" target="_blank"><img src="./pictures//giovannis-2.png" class="images"></a>
       <span><img src="./pictures/iconfinder_React.js_logo_1174949.png" style="width:40px; height:40px;"></span>
       <span class="devicons devicons-javascript" style="font-size: 2.5em; width: auto;"></span>

styles.css

@@ -55,6 +55,13 @@ a {
   background-color: white;
 }
 
+.heading {
+  text-align: center;
+  margin: 55px 0;
+  font-size: 4em;
+  font-weight: 100;
+}
+
 /* NAV BAR *//* NAV BAR *//* NAV BAR *//* NAV BAR *//* NAV BAR *//* NAV BAR *//* NAV BAR */
 
 .nav-bar {
@@ -89,45 +96,31 @@ a {
 }
 
 .skills-wrapper{
-  display: grid;
-  grid-template-columns: 30% 35% 35%;
-  grid-auto-rows: minmax(128px, auto);
-  margin: 0 0 150px 0;
-}
-
-.skills-wrapper > h2 {
-  grid-column: 1 / 2;
-  color:#61dbfb; 
-  font-size: 1.2em; 
-}
-
-.skills-text-left, .skills-text-right {
+  display: flex;
+  justify-content: space-around;
+  margin: 0 25% 0 25%;
   font-size: 1.2em;
   line-height: 150%;
 }
 
-.skills-text-left > span, .skills-text-right > span {
+h2 {
   color:#61dbfb; 
+  text-align: center;
+  margin-bottom: 3rem;
 }
 
-.skills-text-left {
-  grid-column: 2 / 3;
+ul {
+  list-style-type: none;
 }
 
-.skills-text-right {
-  grid-column: 3 / 4; 
-}
+
+
 
 /* EXPERIENCE *//* EXPERIENCE *//* EXPERIENCE *//* EXPERIENCE *//* EXPERIENCE *//* EXPERIENCE */
 
-#experience-title {
-  text-align: center;
-  margin: 55px 0;
-  font-size: 4em;
-  font-weight: 100;
-}
 
-#ifu-title {
+
+.subtitle {
   margin: 0 0 50px 0;
   font-size: 1.8em;
 }
@@ -137,6 +130,15 @@ a {
   justify-content: space-between;
 }
 
+.experience > a > img {
+  height: 800px;
+  width: auto;
+}
+
+#peasy-graph {
+  padding-top: 15%;
+}
+
 .ifucontainer {
   display: flex;
   justify-content: center;
@@ -391,7 +393,7 @@ a {
     font-size: 3em;
   }
 
-  #ifu-title {
+  .subtitle {
     font-size: 1.8em;
     text-align: center;
     margin: 10% 2%;