From 847458cfd1acd3fafedc045a3b17c571958497df Mon Sep 17 00:00:00 2001
From: unknown <asel.karagazieva@gmail.com>
Date: Tue, 20 Jul 2021 23:36:46 -0500
Subject: [PATCH] final edits to my portfolio

---
 css/index.css | 90 ++++++++++++++++++++++++++++++++++++++++++---------
 index.html    | 47 +++++++++++++--------------
 js/index.js   | 59 ++++++++++++++-------------------
 3 files changed, 121 insertions(+), 75 deletions(-)

diff --git a/css/index.css b/css/index.css
index efa20351..9288c1cd 100644
--- a/css/index.css
+++ b/css/index.css
@@ -25,9 +25,6 @@
         0.125em 0.125em 0.25em rgba(0,0,0,.15);
 }
     /* General styles*/
-/* html {
-  scroll-behavior: smooth;
-} */
 
 body {
     background-color: var(--clr-light);
@@ -36,6 +33,7 @@ body {
     font-family: var(--ff-primary);
     font-size: var(--fs-body);
     line-height: 1.6; 
+    max-width: 100%;
   }
 
   section {
@@ -72,13 +70,13 @@ body {
 
 #buttonremove {
   display: inline-block;
-    padding: .5em 2.5em;
+    padding: .5em 1em;
     background: var(--clr-accent);
     color: var(--clr-dark);
     text-decoration: none;
     cursor: pointer;
     letter-spacing: 2px;
-    font-weight: var(--fw-bold);
+    font-weight: var(--fw-reg);
     transition: transform 200ms ease-in-out;
 }
 .btn:hover,
@@ -147,6 +145,7 @@ body {
   font: var(--ff-primary);
 	color: #6b705c;
 	text-transform: uppercase;
+  justify-content: center;
 }
 .main-nav a:hover {
 	color: #093a58;
@@ -261,6 +260,10 @@ a {
   opacity: .5;
 }
 
+#projects ul{
+  display: flex;
+  justify-content: center;
+}
 #projects li {
   border: 1px solid var(--clr-light);
   display: inline-block;
@@ -304,7 +307,7 @@ color: var(--clr-accent);
   }
 }
 
-/* //leave message */
+/* leave message */
 #contact {
   background-color: var(--clr-dark);
   background-image: url(../css/grey\ bckgr.jpg);
@@ -354,27 +357,36 @@ color: var(--clr-accent);
 }
 
 /* left messages */
-ul {
+#messages {
+  background-color: var(--clr-dark);
+  background-image: url(../css/blue\ grey.jpg);
+  background-size: cover;
+  background-blend-mode: multiply; 
+  color: var(--clr-light);
+}
+
+#messages ul {
   display: flex;
+  flex-direction: column;
 }
 #messages li {
-  display: inline-block;
-  width: 50%;
-  padding: 30px;
-  font-size: 18px;
+  display: flex;
+  align-items: center;
+  font-size: 1.2em;
+  padding: 1rem 0;
 
 }
 #messages a {
   display: inline-block;
-  width: 30%;
+  width: fit-content;
   padding: 30px;
-  font-size: 18px;
+  color: var(--clr-accent);
+
 }
 #messages span{
   display: inline-block;
   width: fit-content;
   padding: 30px;
-  font-size: 18px;
 }
 
 
@@ -581,10 +593,58 @@ ul {
   }
   .main-nav {
     display: flex;
-    font-size: 0.5em;
+    font-size: 0.6em;
   }
 }
 
+@media (max-width: 375px) {
+  #projects li{
+    display: block;
+    width: 90%;
+  }
+  #projects ul{
+    display: contents;
+  }
+
+  #skills li {
+    display: block;
+    width: 90%; 
+  } 
 
+  #messages li,
+  #messages ul {
+    display: inline-block;
+    font-size: 1em; 
+    padding: -2px;
+    margin-left: -2em;
+  }
+  .wrapper .icon{
+    margin: 0 10px;
+  }
+
+} 
+@media (max-width: 414px) {
+  #projects li{
+    display: block;
+    width: 90%;
+  }
+  #projects ul{
+    display: contents;
+  }
+
+  #skills li {
+    display: block;
+    width: 90%; 
+  } 
+
+  #messages li,
+  #messages ul {
+    display: inline-block;
+    font-size: 1em; 
+    padding: -2px;
+    margin-left: -2em;
+  }
+
+} 
 
 
diff --git a/index.html b/index.html
index bcc356ca..4d82536d 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@ <h1 class="name"><a href="#">Asel K</a></h1>
 		        </ul>
             
             </nav>
-	</header><!--/.main-header-->   
+	</header>   
 
     <!--Introduction -->
     <section class="intro" id="home">
@@ -48,15 +48,14 @@ <h2 class="section_title section_title-about">About me</h2>
 
             <p>My name is Asel Karagazieva. I am a student at Code the Dream and 
             mom of two toddlers. My main goal is to become a professional in 
-            a completely new path for, which I start from zero and coming 
+            a completely new path for me, which I start from zero and coming 
             from other part of the world.
             </p>   
             
             <p>Today, I am passionate about Front End Development, area where coding 
-            and design work together. 
-            Currently, I am developing my skills in Javascript, CSS and Github. 
-            My main goal is to create clean, unique and functional websites, the designs 
-            you love, designs that work. </p>
+            and design work together.  
+            My main goal is to create clean, unique and functional websites, designs 
+            that are eye-catching, designs that work. </p>
             <p>My interests, however, extend beyond the web and I also enjoy taking photos 
             and retouching.   
             </p> 
@@ -76,36 +75,35 @@ <h3>Public Relations Manager</h3>
                     work was connected with public relations and one of my responsabilities 
                     was to design the appearance of leaflets, brochures, etc. I've enjoyed 
                     the whole process so much! It was interesting for me to figure out how 
-                    to put the information and pictures together so the brochure becomes
+                    to put the information and pictures together so the leaflets become
                     informative and still eye catching.</p>
                </div> <!--service-->
                <div class="service">
                 <h3>Public Relations Specialist</h3>
                 <p>at USAID KAED Project in Kyrgyzstan</p>
-                <p>I enjoy arranging
-                    and putting things together so they look good. Fot instance, my past 
-                    work was connected with public relations and one of my responsabilities 
-                    was to design the appearance of leaflets, brochures, etc. I've enjoyed 
-                    the whole process so much! It was interesting for me to figure out how 
-                    to put the information and pictures together so the brochure becomes
-                    informative and still eye catching.</p>
+                <p> During my work in public relations department I was engaged in process of 
+                    creating newsletters and different handouts. With the help of designers I've 
+                    developed different designs and layouts. Thanks to this, I had a chance to 
+                    see good practices on creating visual elements, importance of color selections, etc.
+                    I believe that my previous experience will support me in new carrer to 
+                    build unique designs.
+                    </p>
             </div> <!--service-->
             <div class="service">
                 <h3>Administrative Assistant</h3>
                 <p>at Save the Children International, Kyrgyzstan</p>
-                <p>I enjoy arranging
-                    and putting things together so they look good. Fot instance, my past 
-                    work was connected with public relations and one of my responsabilities 
-                    was to design the appearance of leaflets, brochures, etc. I've enjoyed 
-                    the whole process so much! It was interesting for me to figure out how 
-                    to put the information and pictures together so the brochure becomes
-                    informative and still eye catching.</p>
+                <p>Working as a connecting chain between funding organization 
+                    and people who were the main target of the project, I've learned how to 
+                    incorporate ideas, vision and changes recommended by clients into a final 
+                    project. I have a clear understanding how logos, images and illustrations can help
+                    deliver a message. 
+                </p>
             </div> <!--service-->
            </div>
 
     </section>
 
-    
+    <!-- SKILLS -->
     <section class="my-skills" id="skills">
         <h2 class="section_title section_title-skills">Skills</h2>
         <ul id="skills-list">
@@ -147,7 +145,7 @@ <h2>Leave a Message</h2>
  </section>
 
  <!-- Messages -->
- <section id="messages" style="display: none">
+ <section id="messages">
      <h2>Messages</h2>
      <div class="leftmessages">
 
@@ -184,13 +182,12 @@ <h3>Feel free to reach if you have questions. Or feel free to just say hi. I lik
             <span><i class="fab fa-github"> </i> </span> 
         </a>
 
-        <!-- <a href = "mailto:asel.karagazieva@gmail.com" target="_blank" class = "icon"> -->
+        <a href = "mailto:asel.karagazieva@gmail.com" target="_blank" class = "icon"> 
         <div class="icon">
            <div class="tooltip">
               asel.karagazieva@gmail.com
            </div>
            <span><i class="far fa-envelope"></i></span>
-        <!-- </a> -->
         </div>
      </div>
 </footer>
diff --git a/js/index.js b/js/index.js
index 8a9f8b7e..09376d73 100644
--- a/js/index.js
+++ b/js/index.js
@@ -38,48 +38,37 @@ fetch(`https://api.github.com/users/${GITHUB_USERNAME}/repos`)
    
 
 
-// LEAVE MESSAGE   
+//LEAVE MESSAGE
+
 let messageForm=document.getElementsByName('leave_message')
-leave_message.addEventListener('submit',function(e){
+leave_message.addEventListener('submit',(e)=>{
     e.preventDefault()
-
+    
     let Name=e.target.name.value
     let Email=e.target.email.value
     let Message=e.target.message.value
-
-
-
-    let messageSection = document.getElementById('messages');
-    let messageList = document.querySelector('ul');
-
-    if (messageSection.style.display=== 'none'){
-        messageSection.style.display = 'block'
-    }
-
-//create new message
-    let newMessage = document.createElement ('li');
-    newMessage.classList.add('list_item')
-   newMessage.innerHTML =`<a href='mailto:asel.karagazieva@gmail.com'>${Name}</a>
-   wrote <span>${Message}</span>`
-   messageSection.appendChild(newMessage);
-
-   //remove button
-    let removeButton = document.createElement('button')
-    removeButton.id = "buttonremove";
-    removeButton.innerText = "remove";
-    removeButton.type = 'button';
-    messageSection.appendChild(removeButton)
     
-    removeButton.addEventListener('click', (e) => {
-    let entry = document.getElementById('messages').parentNode
-
+    console.log(Name)
+    console.log(Email)
+    console.log(Message);
     
-
+    let newMessage = document.createElement('li');
+    newMessage.innerHTML=`<a href="mailto:${Email}">${Name}</a>
+    wrote :<span>${Message}</span>`
+    let messageSection = document.getElementById("messages");
+    let  messageList = messageSection.querySelector('ul')
+
+let removeButton= document.createElement("button")
+removeButton.id="buttonremove";
+removeButton.innerText = "remove";
+removeButton.type = "button";
+
+removeButton.addEventListener("click",(e)=> {
+    const entry = e.target.parentNode;
     entry.remove();
-    })
-
-    document.forms['leave_message'].reset()
 })
+newMessage.appendChild(removeButton);
 
-
-
+messageList.appendChild(newMessage);
+e.target.reset();
+})