canilo1 · canilo1 · Aug 8, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 17, 2023
diff --git a/css/images/bluebackground.jpg b/css/images/bluebackground.jpg
diff --git a/css/images/buttondesign.png b/css/images/buttondesign.png
diff --git a/css/images/contract.png b/css/images/contract.png
diff --git a/css/images/github.png b/css/images/github.png
diff --git a/css/images/instagram.png b/css/images/instagram.png
diff --git a/css/images/linkedin.png b/css/images/linkedin.png
diff --git a/css/images/powerbutton-PhotoRoom.png-PhotoRoom.png b/css/images/powerbutton-PhotoRoom.png-PhotoRoom.png
diff --git a/css/images/powerbutton.svg b/css/images/powerbutton.svg
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,106 @@
+body {
+  background-image: url("images/bluebackground.jpg");
+  background-size: cover;
+}
+
+#Circle { 
+  width: 194px;
+  height: 194px;
+  border-radius: 60%;
+  position: absolute;
+  top: 47%;
+  left: 52%;
+  transform: translate(-50%, -50%);
+  background-color: darkblue;
+  background-image: url("images/powerbutton-PhotoRoom.png-PhotoRoom.png");
+  background-blend-mode: color;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  padding: 10px 20px;
+  box-shadow: -8px 23px 19px rgba(7, 1, 94, 0.452), /* Outer shadow */ inset -4px 19px 16px rgba(70, 130, 180, 0.336), /* Inner shadow */ 78px -23px 16px rgba(-14, 53, -16, -1.9), 33px 50px 191px rgba(32, 0, 30, 0.1);
+}
+
+.CircleImage{
+  color: blue;
+  position: absolute;
+  top: 46%;
+  left: 52%;
+  transform: translate(-51%, -47%);
+
+}
+/* BUTTONS */
+.Home{
+  position: absolute;
+    top: 36%;
+    left: 60%;
+    width: 183px;
+    height: 31px;
+    background-color: darkblue;
+    border-radius: 4px;
+    border-color: azure;
+    text-transform: capitalize;
+    font-size: 20px;
+}
+/* #Hidden{
+  display: none;
+} */
+
+.Home:hover{
+
+}
+.Projects{
+  position: absolute;
+    top: 47%;
+    left: 60%;
+    width: 183px;
+    height: 31px;
+    background-color: darkblue;
+    border-radius: 4px;
+    border-color: azure;
+    text-transform: capitalize;
+    font-size: 20px;
+}
+.Contact{
+  position: absolute;
+    top: 54%;
+    left: 60%;
+    width: 183px;
+    height: 31px;
+    background-color: darkblue;
+    border-radius: 4px;
+    border-color: azure;
+    text-transform: capitalize;
+    font-size: 20px;
+}
+.AboutMe{
+  position: absolute;
+  width: 183px;
+  height: 31px;
+  top: 41%;
+  left: 60%;
+  border-color: azure;
+  background-color: darkblue;
+  border-radius: 4px;
+  text-transform: capitalize;
+  font-size: 20px;
+}
+/* ICONS */
+.GithubIcon{
+  position: relative;
+  width: 30px;
+  height:30px;
+  margin-right: 10px;
+}
+.InstagramIcon{
+  position: relative;
+  width: 30px;
+  height:30px;
+  margin-right: 10px;
+}
+.PortfolioIcon{
+  position: relative;
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
diff --git a/index.html b/index.html
@@ -6,28 +6,77 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Resume</title>
+  <link type="text/css" href="css/index.css" rel="stylesheet" />
+
+
+
 </head>
 <body>
+  <section class = "Menu">
+    <button   alt = powerButton id = "Circle"></button>
+
+    <button class = "Home" id = "Hidden">Home</button>
+    <button class = "Projects" id = "Hidden">Projects</button>
+    <button class = "Contact" id = "Hidden">Contact</button>
+    <button class = "AboutMe" id = "Hidden">About Me</button>
+  </section>
+
+
   <!-- Your content goes here -->
-  <h1>Hi, my name is John Gutierrez</h1>
-  <section>
+  <section class = "AboutMeButton">
     <!-- ABoutME-->
+    <h1 name = "Animation1">Hi, my name is John Gutierrez</h1>
     <p>I am pursuing a degree in computer science. I'm very involved in a few industries and still learning about Game development, Web Development, and Software Engineering.</p>
   </section>
   <!-- Expereince-->
-  <section>
+  <section class = "SkillsButton">
     <ul>
       <li>Games</li>
       <li>Web Projects</li>
     </ul>
   </section>
   <!-- Connect-->
-  <section>
-    <a href="https://github.com/">This is my GitHub</a>
-    <a href="https://www.instagram.com/">This is my Instagram</a>
-    <a href="https://www.example.com/">This is my portfolio</a>
-    <p> email me at  <a href = "mailto:[email protected]">[email protected]</a></p>
+  <section id = "skills" class = "AboutMeButton">
+    <h2> Skills</h2>
+    <ul></ul>
   </section>
+
+      <section class = "ContactmeButton">
+           <section>
+           <h2>Leave a Message</h2>
+            <form name = "leave_message">
+            <label>Name</label><br />
+            <input type = "text" name = "usersName" required = true><br />
+            <label>Email</label><br />
+             <input type = "email" name = "usersEmail" required = true><br />
+             <label>Message</label><br />
+             <textarea name = "usersMessage" required = true></textarea>
+            <button type = "Submit">Submit</button>
+            </form>
+           </section>
+              <section id = "messages">
+                <h2>Messages</h2>
+                <ul>
+
+                </ul>
+        </section>
+    <footer id = "footer" class = "ContactMeButton" >
+      <a href="https://github.com/">
+        <img src="css/images/github.png" alt="GithubIcon" class = "GithubIcon" width =  100 height = 100>
+      </a>
+
+        <a href="https://www.instagram.com/">
+          <img src="css/images/instagram.png" alt="InstagramIcon" class = "InstagramIcon" width = 100 height = 100>
+        </a>
+        <a href="https://www.example.com/">
+          <img src="css/images/contract.png" alt="PortfolioIcon" class = "PortfolioIcon" width = 100 height = 100>
+        </a>
+        <p> Contact me <a href = "mailto:[email protected]">[email protected]</a></p>
+
+    </footer>
+  </section>
+  <script src = "js/index.js"></script>
 
+
 </body>
 </html>
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,106 @@
+//QUERIES
+const footer = document.getElementById('footer');
+const messageForm = document.getElementsByName('leave_message')[0]
+const SkillsSection = document.getElementById('skills')
+const SkillsList = SkillsSection.querySelector('ul')
+const messageSection = document.getElementById('messages')
+const messageList =  messageSection.querySelector('ul')
+const Button = document.getElementById('Circle')
+
+//RENDER FUNCTIONS
+function renderCopyRight(){
+   const today = new Date()
+   const thisyear = today.getFullYear()
+   const copyright = document.createElement('p');
+
+   copyright.innerHTML = `${thisyear}`
+   footer.appendChild(copyright)    
+
+}
+
+function renderSkills(){
+   const Skills = ["game Development","Website Developer"]
+
+   for(let i = 0; i<Skills.length; i++){
+      const skill = document.createElement('li')
+      skill.innerText = Skills[i]
+      SkillsList.appendChild(skill)
+   }
+}
+function AboutMeAnimation() {
+   const aboutMe = document.getElementsByName('Animation1')[0];
+   const text = aboutMe.innerText;
+   console.log(text);
+   aboutMe.innerText = "";
+
+   function animateText(index) {
+      if (index < text.length) {
+         if (text[index] === ' ') {
+            setTimeout(function() {
+               aboutMe.innerText += ' ';
+               console.log("it found the space: ", aboutMe.innerText)
+               animateText(index + 1);
+            }, 700);
+         } else {
+            aboutMe.innerText += text[index];
+            setTimeout(function() {
+               animateText(index + 1);
+            }, 100); 
+         }
+      }
+   }
+
+   animateText(0);
+}
+
+// Call the animation function
+
+
+
+//EVENT HANDLERS
+
+function deleteMessage(event){
+   let removebutton = event.target
+   let message = removebutton.parentNode
+
+   // don't remove only the button, but remove the entire message
+   message.remove()
+
+}
+function submit(event){
+   //prevent it from refreshing the whole page 
+   event.preventDefault()
+
+   const Name = event.target.usersName.value
+   const Email = event.target.usersEmail.value
+   const usersMessage = event.target.usersMessage.value
+   const newMessage = document.createElement('li')
+   newMessage.innerHTML = `<a href = "mailto:${Email}"> ${Name}</a> <span>${Email} ${usersMessage}</span> `
+   //clear all inputs
+   event.target.reset()
+
+   //REMOVE BUTTON FOR MESSAGES
+   const removebutton = document.createElement('button')
+         console.log(removebutton)
+   removebutton.innerHTML = "remove"
+   removebutton.setAttribute("type","button")
+
+
+
+   console.log("RemoveButton",removebutton)
+   console.log("Messages",messages)
+   //TODO can't access null messages, it's inside the handler
+   newMessage.appendChild(removebutton)
+   removebutton.addEventListener("click",deleteMessage)
+   messageList.appendChild(newMessage)
+}
+
+
+//LOADINGPAGE
+renderCopyRight()
+renderSkills()
+AboutMeAnimation()
+messageForm.addEventListener("submit",submit)
+
+
+