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;