added experience section

index.html

@@ -19,6 +19,7 @@
   <div class="nav-bar">
     <nav>
       <a href="#skills-wrapper" class="nav-item">Skills</a>
+      <a href="#experience-title" class="nav-item">Experience</a>
       <a href="#projects-title" class="nav-item">Projects</a>
       <a href="#about-me" class="nav-item">About me</a>
       <a href="#contact" class="nav-item">Contact</a>
@@ -36,8 +37,9 @@ <h1 class="intro">Hi. I'm a web developer based in Washington, D.C.</h1>
 <section class="skills-wrapper" id="skills-wrapper">
   <h2>Skills</h2>
   <div class="skills-text-left">
-    <span>Frontend Web Development</span>
+    <span>Front-End Web Development</span>
     <br>React
+    <br>Vue.js
     <br>Javascript
     <br>HTML
     <br>CSS/SCSS
@@ -51,8 +53,23 @@ <h2>Skills</h2>
 
 </section>
 
-<!-- <h1 id="experience-title">Experience</h1> -->
+<h1 id="experience-title">Experience</h1>
 
+<h2 id="ifu-title">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://ifu-china.com/" 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">
+      <span id="close">&times;</span>
+      <img src="pictures/ifu-screenshot.png">
+    </div>
+
+  </div>
+
+</div>
 
 <!-- PORTFOLIO --------------------------------------------------------------------->
 
@@ -128,14 +145,23 @@ <h3 class="contact-title">Contact Me</h3>
   </div>
 </div>
 
-<form action="POST" data-netlify="true" name="contact-form-wrapper">
+<form action="POST" data-netlify="true" name="contact-form-wrapper" id="netlify-form">
   <div class="contact-form">
     <div class="field">
-      <input type="text" name="name" id="name" placeholder="Name" class="field-input" /></div> 
+      <input type="text" name="name" id="name" placeholder="Name" class="field-input" />
+      <br>
+      <small id="name-error" class="error-text">Please enter a name</small>
+    </div> 
+
     <div class="field">
-      <input type="email" name="email" id="email" placeholder="Email" class="field-input"/></div> 
+      <input type="email" name="email" id="email" placeholder="Email" class="field-input"/>
+      <br>
+      <small id="email-error" class="error-text">Please enter a valid email</small> 
+    </div>
+
     <div class="message-wrap">
       <textarea name="message" id="message" placeholder="Message..." rows="7" class="message-field"></textarea>
+      <small id="message-error" class="error-text">Please enter a message</small>
     </div> 
     <div class="field">
       <div data-netlify-recaptcha="true"></div>

main.js

@@ -1,3 +1,5 @@
+//BUTTON
+
 const backToTopButton = document.querySelector("#back-to-top")
 
 window.addEventListener("scroll", scrollFunction);
@@ -17,3 +19,70 @@ function backToTop() {
   window.scrollTo(0, 0);
 }
 
+//MODAL
+
+const modal = document.getElementById("ifu-modal")
+const img = document.getElementById("open-image")
+const span = document.getElementById("close")
+
+img.onclick = () => {
+  modal.style.display = "flex";
+}
+
+span.onclick = () => {
+  modal.style.display = "none";
+}
+
+window.onclick = () => {
+  if (event.target === modal) {
+    modal.style.display = "none";
+  }
+}
+
+document.body.addEventListener('keydown', (e) => {
+  if (e.key === "Escape") {
+    modal.style.display = "none";
+  }
+})
+
+//FORM VALIDATION
+const form = document.getElementById("netlify-form")
+
+const userName = document.getElementById("name")
+const email = document.getElementById("email")
+const message = document.getElementById("message")
+
+const nameError = document.getElementById("name-error")
+const emailError = document.getElementById("email-error")
+const messageError = document.getElementById("message-error")
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+  checkInputs();
+})
+
+const checkInputs = () => {
+  const nameValue = userName.value.trim();
+  const emailValue = email.value.trim();
+  const messageValue = message.value.trim();
+
+  if (nameValue === '') {
+    nameError.style.visibility = "visible";
+  }
+
+  if (emailValue === '') {
+    emailError.style.visibility = "visible";
+  } else if (!isEmail(emailValue)) {
+    emailError.style.visibility = "visible";
+  }
+
+  if (messageValue === '') {
+    messageError.style.visibility = "visible";
+  }
+
+}
+
+const isEmail = (email) => {
+  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
+}
+

styles.css

@@ -55,7 +55,7 @@ a {
   background-color: white;
 }
 
-/* NAV BAR */
+/* NAV BAR *//* NAV BAR *//* NAV BAR *//* NAV BAR *//* NAV BAR *//* NAV BAR *//* NAV BAR */
 
 .nav-bar {
   display: flex;
@@ -69,7 +69,7 @@ a {
   font-size: 1.2em;
 }
 
-/* INTRO */
+/* INTRO *//* INTRO *//* INTRO *//* INTRO *//* INTRO *//* INTRO *//* INTRO */
 
 
 .intro {
@@ -118,7 +118,96 @@ a {
   grid-column: 3 / 4; 
 }
 
-/* PROJECTS */
+/* EXPERIENCE *//* EXPERIENCE *//* EXPERIENCE *//* EXPERIENCE *//* EXPERIENCE *//* EXPERIENCE */
+
+#experience-title {
+  text-align: center;
+  margin: 55px 0;
+  font-size: 4em;
+  font-weight: 100;
+}
+
+#ifu-title {
+  margin: 0 0 50px 0;
+  font-size: 1.8em;
+}
+
+.experience {
+  display: flex;
+  justify-content: space-between;
+}
+
+.ifucontainer {
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  opacity: 1;
+  width: 300px;
+  height: auto;
+  border-radius: 20px;
+  transition: .5s ease;
+}
+
+.ifucontainer:hover {
+  cursor: pointer;
+  opacity: .3;
+}
+
+.ifucontainer > img {
+  height: 300px;
+  width: auto;
+  text-align: center;
+
+}
+
+.experience > p {
+  padding-top: 20px;
+  width: 70%;
+  font-size: 1.2em;
+  line-height: 150%;
+}
+
+.modal {
+  margin: 25px 25px;
+  display: none; 
+  justify-content: center;
+  position: fixed; 
+  z-index: 1; 
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%; 
+  overflow: auto; 
+  background-color: rgb(0,0,0); 
+  background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+  width: 80%;
+  background-color: white;
+  text-align: center;
+}
+
+.modal-content > img {
+  width: 100%;
+  height: auto;
+}
+
+.modal-content > span {
+  color: black;
+  float: right;
+  font-size: 4em;
+  font-weight: 100;
+  margin-right: 25px;
+
+}
+
+.modal-content > span:hover {
+  cursor: pointer;
+}
+
+
+/* PROJECTS *//* PROJECTS *//* PROJECTS *//* PROJECTS *//* PROJECTS *//* PROJECTS *//* PROJECTS */
 
 #projects-title {
   text-align: center;
@@ -272,6 +361,18 @@ a {
   color: #222830;
 }
 
+.field {
+  margin: 10px 10px;
+}
+
+.error-text {
+    color: #e74c3c;
+    visibility: hidden;
+    /* position: absolute; */
+    /* bottom: 0;
+    left: 0; */
+}
+
 /* MOBILE STUFF */
 
 @media (max-width: 600px) {