update resume may 2020 and added new functionalities

index.html

@@ -19,24 +19,24 @@
 		<nav class="main-nav">
 			<ul class="nav">
 				<li><a href="#">Home</a></li>
-				<li><a href="resume.html">Resume</a></li>
+				<li><a href="subjects/resume.html">Resume</a></li>
+				<li><a href="subjects/experience.html">Experience</a></li>
 				<li><a href="#contact">Contact</a></li>
 			</ul>
 		</nav>
 
 		<header>
-			<img src="images/me.jpeg" alt="Picture of Lidia" title="Picture taken 4 years ago" class="profile-pic">
-			<h1 class="title-name">Lidia Ataupillco Ramos</h1>
-			<h2 class="title-description">Computer Science student at University of Alberta</h2>
-			<h3 class="title-description">Edmonton, AB, Canada</h3>
+			<img src="images/lidia.jpg" alt="Picture recently taken in 2020" title="Picture of Lidia" class="profile-pic">
+			<h1 class="title-name">Lidia Ataupillco</h1>
+			<h3 class="title-description">Software Developer Student - Currently at Amazon</h3>
 			<hr>
 			<br>
 		</header>
 
 		<main>
 			<section class="section-tile">
 				<h2 class="section-title">Background</h2>
-				<p>Lidia is a second-year Computer Science student interested in human-computer interaction, educational technology, artificial intelligence, computer vision, and image and video analysis.</p>
+				<p>Lidia is a third-year Computer Science student interested in human-computer interaction, artificial intelligence, computer vision, and image and video analysis.</p>
 				<p>As a student at the University of Alberta, she strives to grow personally and professionally taking advantage of every opportunity she is presented with.</p>
 				<p>She is an active member of her community for which she has volunteered for many non-profit organizations focused on promoting diversity at her university.</p>
 			</section>
@@ -64,7 +64,7 @@ <h3>Grade Calculator</h3>
 
 				<div class='projects'>
 					<h3>Tip Calculator</h3>
-					<p>May 2019 - ongoing</p>
+					<p>May 2019</p>
 					<p>It calculates the tip that can be shared. Idea extracted from Carolyn
 					Hemmings but implemented by Lidia Ataupillco Ramos.</p>
 					<p>Check it out on <a href="https://dalidia.github.io/tip_calculator/">here</a></p>
@@ -85,19 +85,21 @@ <h3>Make you laugh</h3>
 			</section>
 		</main>
 
-	</body>
-
-	<footer class="contact-footer">
-		<h2 id="contact" class="section-title">Contact me on:</h2>
-
-		<div class="social-media">
-			<a href="https://www.instagram.com/lidia_ataupil/" target="_blank"><img src="images/Instagram_icon.png" alt="Instagram" class="social-icon"></a>
-			<a href="https://www.linkedin.com/in/lidia-ataupillco" target="_blank"><img src="images/linkedin_icon.png" alt="Instagram" class="social-icon"></a>
-			<a href="https://github.com/dalidia"><img src="images/github_icon.png" alt="Instagram" target="_blank" class="social-icon"></a>
-		</div>
-
-		<p class="copyright">Copyright &copy; 2019 Lidia Ataupillco Ramos</p>
+		<section class="contact-section">
+			<h2 id="contact" class="section-title">Contact me on:</h2>
 
+			<div class="social-media">
+				<a href="https://www.instagram.com/lidia_ataupil/" target="_blank"><img src="images/Instagram_icon.png" alt="Instagram" class="social-icon"></a>
+				<a href="https://www.linkedin.com/in/lidia-ataupillco" target="_blank"><img src="images/linkedin_icon.png" alt="Instagram" class="social-icon"></a>
+				<a href="https://github.com/dalidia"><img src="images/github_icon.png" alt="Instagram" target="_blank" class="social-icon"></a>
+			</div>
+			<p><a href="#">Back to top</a></p>
+		</section>
+	</body>
+
+	<footer>
+		<p class="copyright"></p>
+		<script src="index.js"></script>
 	</footer>
 
 </html>

index.js

@@ -0,0 +1,5 @@
+(() => {
+  const dateObj = new Date();
+  const currentYear = dateObj.getFullYear();
+  document.getElementsByClassName('copyright')[0].innerHTML = `Copyright © ${currentYear} Lidia Ataupillco Ramos`;
+})();

styles.css

@@ -3,6 +3,10 @@
 	box-sizing: border-box;
 }
 
+html, body {
+	height: 100%;
+}
+
 header {
 	text-align:center;
 	line-height: 1.2em;
@@ -42,7 +46,7 @@ a:hover {
 	position:fixed;
 	min-height: 30px;
 	text-align: center;
-	padding: 10px;
+	padding: .5em;
 }
 
 .nav {
@@ -52,12 +56,12 @@ a:hover {
 	list-style-type:none;
 	padding:0;
 	margin: 0 auto;
-	font-size: 1.5em;
+	font-size: 1.4em;
 }
 
-.nav li {
+/* .nav li {
 	padding: .3em 1em .3em 1em;
-}
+} */
 
 .nav a {
 	transition: all .5s;
@@ -92,7 +96,7 @@ a:hover {
 header .profile-pic {
 	border-radius: 40%;
 	border: solid 4px white;
-	width:17em;
+	width:15em;
 	height:15em;
 	margin-top:6em;
 }
@@ -102,7 +106,7 @@ header .profile-pic:hover {
 	transition: all .5s;
 }
 
-.contact-footer {
+.contact-section {
 	margin-left:4.5em;
 	margin-right:2.5em;
 	margin-bottom: 2.5em;
@@ -141,6 +145,29 @@ header .profile-pic:hover {
 	border-radius: 1em;
 }
 
+.list-description {
+	padding-left: 1em;
+}
+
+.copyright {
+	background-color: purple;
+	color: white;
+	padding: .5em 0;
+	text-align: center;
+	font-size: .9em;
+}
+
+.resume-nav-bottom {
+	margin-top: 2.5em;
+}
+
+#work-experience-nav-bottom {
+	margin-top: 5em;
+}
+
+#volunteer-experience-nav-bottom {
+	margin-top: 5em;
+}
 
 @media screen and (max-width: 800px) {
 	main {
@@ -150,6 +177,10 @@ header .profile-pic:hover {
 	.title-description {
 		line-height: 1.2em;
 	}
+
+	#volunteer-experience-nav-bottom {
+		margin-top: 1.7em;
+	}
 }
 
 

subjects/experience.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+		<title>Lidia's Resume</title>
+
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="description" content="Lidia's resume">
+		<meta name="keywords" content="Lidia Ataupillco Ramos, Resume">
+		<meta name="author" content="Lidia Ataupillco Ramos">
+		<meta name="theme-color" content="purple">
+
+		<link rel="author" href='https://dalidia.github.io/'>
+		<link rel="stylesheet" href="../styles.css">
+		<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+	</head>
+
+	<body>
+		<nav class="main-nav">
+			<ul class="nav">
+				<li><a href="../index.html">Home</a></li>
+				<li><a href="resume.html">Resume</a></li>
+				<li><a href="../subjects/experience.html">Experience</a></li>
+				<li><a href="../index.html#contact">Contact</a></li>
+			</ul>
+		</nav>
+	</body>
+
+  <main>
+    <section class="section-tile" id="work-experience-nav-bottom">
+      <h2 class="section-title">Work Experience</h2>
+      <div class='projects'>
+        <h3>Software Development Engineer - Amazon</h3>
+        <p>May - August 2020</p>
+      </div>
+
+      <div class='projects'>
+        <h3>Software Developer Co-Op - Intuit</h3>
+        <p>January - May 2020</p>
+        <ul class='list-description'>
+          <li>Implemented system to streamline the development process of 12 teams with 100+ developers.</li>
+          <li>Built user interface to improve the development experience for 100+ developers. Used React for front-end and Python for back-end</li>
+          <li>Monitored system quality tests to ensure the robustness of APIs.</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="section-tile" id="volunteer-experience-nav-bottom">
+      <h2 class="section-title">Volunteer Experience</h2>
+      <div class='projects'>
+        <h3>VP Admin - Ada’s Team, University of Alberta</h3>
+        <p>May 2019 - May 2020</p>
+        <ul class='list-description'>
+          <li>Interviewed  10+ tutors and room sitters, and organized technical events.</li>
+          <li>Promote diversity on campus with experienced tutors.</li>
+        </ul>
+      </div>
+
+      <div class='projects'>
+        <h3>Coach - Women In Technology (WIT) Peru</h3>
+        <p>May 2019 - August 2019</p>
+        <ul class='list-description'>
+          <li>Mentored a Python introductory workshop for women between the ages of 17-35 to encourage greater women participation in the technology field.</li>
+          <li>Part of 2 meetup planning and organization.</li>
+        </ul>
+      </div>
+    </section>
+
+  </main>
+  <footer>
+    <p class="copyright"></p>
+		<script src="../index.js"></script>
+  </footer>
+
+</html>