Initial commit

src/index.html

@@ -18,7 +18,7 @@
     <link rel="shortcut icon" type="image/png" href="assets/favicon.png" />
 
     <!-- Todo: put here your site title -->
-    <title>[Your name here] | Developer</title>
+    <title>Erica. | Developer</title>
     <!-- Todo: add some coding keywords below - e.g: (javascript, yourusername, etc) -->
     <meta name="keywords" content="[username], [name], skill" />
     <!-- Todo: improve your SEO by adding a small description of you -->
@@ -46,13 +46,13 @@
     <section id="hero" class="jumbotron">
       <div class="container">
         <h1 class="hero-title load-hidden">
-          Hi, my name is <span class="text-color-main">Your Name</span>
+          Hi, my name is <span class="text-color-main">Erica Ugboya</span>
           <br />
-          I'm the Unknown Developer.
+          I'm a Frontend Engineer.
         </h1>
         <p class="hero-cta load-hidden">
           <a rel="noreferrer" class="cta-btn cta-btn--hero" href="#about"
-            >Know more</a
+            >Hire Me</a
           >
         </p>
       </div>
@@ -79,11 +79,10 @@ <h2 class="section-title load-hidden">About me</h2>
           <div class="col-md-6 col-sm-12">
             <div class="about-wrapper__info load-hidden">
               <p class="about-wrapper__info-text">
-                This is where you can describe about yourself. The more you
-                describe about yourself, the more chances you have!
+                I'm a Frontend Engineer, looking for more growth opportunities.
               </p>
               <p class="about-wrapper__info-text">
-                Extra Information about you! like hobbies and your goals.
+                Explore!
               </p>
               <span class="d-flex mt-3">
                 <a
@@ -112,35 +111,34 @@ <h2 class="section-title dark-blue-text">Projects</h2>
           <div class="row">
             <div class="col-lg-4 col-sm-12">
               <div class="project-wrapper__text load-hidden">
-                <h3 class="project-wrapper__text-title">Project Title 0</h3>
+                <h3 class="project-wrapper__text-title">Music Player</h3>
                 <div>
                   <p class="mb-4">
-                    Describe the project being very specific, you can use the Twitter standard: no more than 280 characters: 
-                    complement the information: the skills learned or reinforced in its realization and how you faced it, 
-                    prove to be proactive in the search for solutions.
+                    This is a music player I built using HTML, CSS and Javascript.
+
                   </p>
                 </div>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn cta-btn--hero"
-                  href="#!"
+                  href="https://ugboya-erica.github.io/music-player/"
                 >
                   See Live
                 </a>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn text-color-main"
-                  href="#!"
+                  href="https://github.com/Ugboya-Erica/music-player"
                 >
                   Source Code
                 </a>
               </div>
             </div>
             <div class="col-lg-8 col-sm-12">
               <div class="project-wrapper__image load-hidden">
-                <a rel="noreferrer" href="#!" target="_blank">
+                <a rel="noreferrer" href="https://ugboya-erica.github.io/music-player/" target="_blank">
                   <div
                     data-tilt
                     data-tilt-max="4"
@@ -151,7 +149,7 @@ <h3 class="project-wrapper__text-title">Project Title 0</h3>
                     <img
                       alt="Project Image"
                       class="img-fluid"
-                      src="assets/project.jpg"
+                      src="assets/project.png"
                     />
                   </div>
                 </a>
@@ -164,35 +162,33 @@ <h3 class="project-wrapper__text-title">Project Title 0</h3>
           <div class="row">
             <div class="col-lg-4 col-sm-12">
               <div class="project-wrapper__text load-hidden">
-                <h3 class="project-wrapper__text-title">Project Title 1</h3>
+                <h3 class="project-wrapper__text-title">Custom Countdown Timer</h3>
                 <div>
                   <p class="mb-4">
-                    Demonstrate in this description the skills of a programmer: such as having commitment, 
-                    having perseverance and accepting alternative solutions. Remember that being a portfolio you are not selling the project, 
-                    you are selling yourself, it reflects the resources used: Frameworks, libraries, platforms, etc.
+                    This is a countdown timer I built, which has a simple stopwatch feature. Plus, you can control the length of the countdown to your preferred time and also name the event of the countdown. 
                   </p>
                 </div>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn cta-btn--hero"
-                  href="#!"
+                  href="https://ugboya-erica.github.io/custom-countdown/"
                 >
                   See Live
                 </a>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn text-color-main"
-                  href="#!"
+                  href="https://github.com/Ugboya-Erica/custom-countdown"
                 >
                   Source Code
                 </a>
               </div>
             </div>
             <div class="col-lg-8 col-sm-12">
               <div class="project-wrapper__image load-hidden">
-                <a rel="noreferrer" href="#!" target="_blank">
+                <a rel="noreferrer" href="https://ugboya-erica.github.io/custom-countdown/" target="_blank">
                   <div
                     data-tilt
                     data-tilt-max="4"
@@ -203,7 +199,7 @@ <h3 class="project-wrapper__text-title">Project Title 1</h3>
                     <img
                       alt="Project Image"
                       class="img-fluid"
-                      src="assets/project.jpg"
+                      src="assets/project2.png"
                     />
                   </div>
                 </a>
@@ -216,34 +212,33 @@ <h3 class="project-wrapper__text-title">Project Title 1</h3>
           <div class="row">
             <div class="col-lg-4 col-sm-12">
               <div class="project-wrapper__text load-hidden">
-                <h3 class="project-wrapper__text-title">Project Title 2</h3>
+                <h3 class="project-wrapper__text-title">Light and Dark Mode</h3>
                 <div>
                   <p class="mb-4">
-                    If the project was collaborative, reflect it in this description, that will demonstrate communication and/or leadership skills. 
-                    Additionally, if you made use of the mastery of a second language, it will reflect on you professionalism.
+                    This is a project I built, which can switch from light mode to dark mode when the switch by the top right of webpage is toggled.
                   </p>
                 </div>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn cta-btn--hero"
-                  href="#!"
+                  href="https://ugboya-erica.github.io/light-dark-mode/"
                 >
                   See Live
                 </a>
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn text-color-main"
-                  href="#!"
+                  href="https://github.com/Ugboya-Erica/light-dark-mode"
                 >
                   Source Code
                 </a>
               </div>
             </div>
             <div class="col-lg-8 col-sm-12">
               <div class="project-wrapper__image load-hidden">
-                <a rel="noreferrer" href="#!" target="_blank">
+                <a rel="noreferrer" href="https://ugboya-erica.github.io/light-dark-mode/" target="_blank">
                   <div
                     data-tilt
                     data-tilt-max="4"
@@ -254,7 +249,7 @@ <h3 class="project-wrapper__text-title">Project Title 2</h3>
                     <img
                       alt="Project Image"
                       class="img-fluid"
-                      src="assets/project.jpg"
+                      src="assets/project1.png"
                     />
                   </div>
                 </a>
@@ -272,12 +267,12 @@ <h3 class="project-wrapper__text-title">Project Title 2</h3>
       <div class="container">
         <h2 class="section-title">Contact</h2>
         <div class="contact-wrapper load-hidden">
-          <p class="contact-wrapper__text">[Put your call to action here]</p>
+          <p class="contact-wrapper__text">Let's Never Split!  Ok, Let's do this! 👍</p>
           <a
             rel="noreferrer"
             target="_blank"
             class="cta-btn cta-btn--resume"
-            href="mailto:example@email.com"
+            href="mailto:ivieerica31@gmail.com"
             >Call to Action</a
           >
         </div>
@@ -292,13 +287,13 @@ <h2 class="section-title">Contact</h2>
           <i class="fa fa-angle-up fa-2x" aria-hidden="true"></i>
         </a>
         <div class="social-links">
-          <a rel="noreferrer" href="#!" target="_blank">
+          <a rel="noreferrer" href="https://twitter.com/Ric_Ivy" target="_blank">
             <i class="fa fa-twitter fa-inverse"></i>
           </a>
-          <a rel="noreferrer" href="#!" target="_blank">
+          <a rel="noreferrer" href="https://www.linkedin.com/in/erica-ugboya/" target="_blank">
             <i class="fa fa-linkedin fa-inverse"></i>
           </a>
-          <a rel="noreferrer" href="#!" target="_blank">
+          <a rel="noreferrer" href="https://github.com/Ugboya-Erica" target="_blank">
             <i class="fa fa-github fa-inverse"></i>
           </a>
         </div>
@@ -307,35 +302,12 @@ <h2 class="section-title">Contact</h2>
 
         <!-- Notice: if you want to give me some credit, it will be huge for me! if not, put your data on it -->
         <p class="footer__text">
-          © 2021 - Template developed by
-          <a rel="noreferrer" href="https://github.com/cobiwave" target="_blank"
-            >Jacobo Martínez</a
+          © 2023
+          <a rel="noreferrer" href="https://github.com/Ugboya-Erica?tab=repositories" target="_blank"
+            >Erica Ugboya</a
           >
         </p>
 
-        <!-- TO DO: remove this entire paragraph once you finish your portfolio -->
-        <p class="mt-3 pt-3">
-          <a
-            rel="noreferrer"
-            class="github-button"
-            href="https://github.com/cobiwave/simplefolio/fork"
-            data-icon="octicon-repo-forked"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Fork ntkme/github-buttons on GitHub"
-            >Fork</a
-          >
-          <a
-            rel="noreferrer" 
-            class="github-button"
-            href="https://github.com/cobiwave/simplefolio"
-            data-icon="octicon-star"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Star cobiwave/simplefolio on GitHub"
-            >Star</a
-          >
-        </p>
       </div>
     </footer>
     <!-- /END Footer Section -->

src/sass/abstracts/_variables.scss

@@ -1,6 +1,6 @@
 // COLORS
-$primary-color: #02aab0;
-$secondary-color: #00cdac;
+$primary-color: #e989c3;
+$secondary-color: #083a32;
 
 $white-color: #fff;