Reorder About sections and conditionally show real chart or responsiv…

…e chart img according to selected theme
carolinaknoll · Jan 11, 2019 · 9880128 · 9880128
1 parent 8158992
commit 9880128
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 54 deletions.
diff --git a/css/main.css b/css/main.css
@@ -274,6 +274,11 @@ a:hover {
 .profile-image {
   border: 2px solid #11FFBD;
   margin: auto;
+  padding: 10px;
+  -moz-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  -webkit-transform: scale(-1, 1);
+  transform: scale(-1, 1);
 }
 
 .profile-name {
@@ -784,6 +789,8 @@ a:hover {
   .portfolio-block p {
     font-size: 20px;
     margin-left: 25px;
+    font-size: 19px;
+    margin-left: 10px;
   }
 
   /* Contact page */
@@ -808,3 +815,39 @@ a:hover {
     font-size: 20px;
   }
 }
+
+@media (max-width: 991px) {
+  .growth-graph #growthChart {
+    display: none !important;
+  }
+
+  .growth-chart-img-mythical {
+    display: none;
+  }
+
+  .mythical-theme .growth-chart-img-mythical {
+    display: block;
+  }
+
+  .growth-chart-img-nightly {
+    display: none;
+  }
+
+  .nightly-theme .growth-chart-img-nightly {
+    display: block;
+  }
+}
+
+@media (min-width: 992px) {
+  .growth-graph #growthChart {
+    display: block !important;
+  }
+
+  .growth-chart-img-mythical {
+    display: none;
+  }
+
+  .growth-chart-img-nightly {
+    display: none;
+  }
+}
diff --git a/img/personality-chart-mythical.jpg b/img/personality-chart-mythical.jpg
diff --git a/img/personality-chart-nightly.jpg b/img/personality-chart-nightly.jpg
diff --git a/index.html b/index.html
@@ -78,6 +78,56 @@ <h1 class="presentation-fourth" data-sr="wait 1.5s, then enter bottom and hustle
         <h2 class="section-title" data-sr="wait 0.1s, then enter bottom and hustle 50px over 2s"><i class="fa fa-asterisk"></i> About me</h2>
 
         <div class="row">
+          <div class="col-xs-12 col-sm-8 col-md-8">
+            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
+              <h2 class="box-heading"><i class="fa fa-asterisk" aria-hidden="true"></i> Introduction</h2>
+              <p class="box-description">
+                Hey there! I'm currently starting as a Junior dev.
+                During my two-year internship, I learned to use various tech tools, and worked remotely on multiple periods of time.
+                I also practiced English for three months on an international project at work.
+              </p>
+              <p class="box-description">
+                I'm that person who likes to standardize texts, behaviour and styles for components, like buttons and calendars.
+                I also enjoy working with page responsivity across devices and window/screen sizes.
+              </p>
+            </div>
+
+            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
+              <h2 class="box-heading"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Technical Keywords</h2>
+              <p class="box-description">
+                #React, #HTML, #CSS/SCSS/SASS, #JavaScript, #jQuery, #Bootstrap, #Highcharts, #i18n,
+                #classNames, #mdi-react, #moment, #React-Bootstrap, #react-bootstrap-daterangepicker
+              </p>
+            </div>
+
+            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
+              <h2 class="box-heading"><i class="fa fa-asterisk" aria-hidden="true"></i> Personality <a class="description-link" href="http://www.myersbriggs.org/my-mbti-personality-type/mbti-basics/home.htm">MBTI</a> — INFJ</h2>
+              <p class="box-description">INFJ stands for Introversion (I), Intuition (N), Feeling (F), Judgement (J).</p>
+            </div>
+
+            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
+              <h2 class="box-heading"><i class="fa fa-bar-chart-o" aria-hidden="true"></i> Personal Growth</h2>
+              <p class="box-description">As humans, we have a wide variety of strenghts and weaknesses. As we are constantly growing and having new experiences, I find it nice to have something visual to evaluate ourselves and observe how we change throughout the years.</p>
+              <p class="box-description">This chart was generated after answering Talentoday's <a class="description-link" href="https://www.talentoday.com/">personality questionnaire</a>, which can be taken for free every 6 months.</p>
+              <div class="graph growth-graph">
+                <canvas class="growth-chart" id="growthChart" height="200"></canvas>
+                <img class="growth-chart-img-mythical img-responsive" src="img/personality-chart-mythical.jpg">
+                <img class="growth-chart-img-nightly img-responsive" src="img/personality-chart-nightly.jpg">
+              </div>
+            </div>
+
+            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
+              <h2 class="box-heading"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Education</h2>
+              <p class="box-description">Bachelor's Degree in Information Systems — Estácio de Sá University.</p>
+              <p class="box-description">Graduated! — December, 2018.</p>
+              <h2 class="box-heading"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Self-Study Courses</h2>
+              <a class="box-description profile-links" href="https://www.freecodecamp.com/map">Front-end Development path (ongoing) — FreeCodeCamp</a>
+              <a class="box-description profile-links" href="https://br.udacity.com/course/responsive-web-design-fundamentals--ud893/">Responsive Web Design Fundamentals — Udacity</a>
+              <a class="box-description profile-links" href="https://app.pluralsight.com/library/courses/hacking-user-experience/table-of-contents">Hacking the User Experience/UX for Developers — Pluralsight</a>
+              <a class="box-description profile-links" href="https://app.pluralsight.com/library/courses/cux-designprinciples/table-of-contents">Creating User Experiences: Fundamental Design Principles — Pluralsight</a>
+            </div>
+          </div>
+
           <div class="col-xs-12 col-sm-4 col-md-4">
             <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
               <img src="img/profile-image.jpg" class="img-responsive profile-image" alt="">
@@ -153,55 +203,6 @@ <h2 class="box-heading"><i class="fa fa-birthday-cake" aria-hidden="true"></i> H
               <p class="box-description"><i class="fa fa-rocket"></i> Or maybe just laughing, exploring and discovering new things! <i class="fa fa-smile-o"></i></p>
             </div>
           </div>
-
-          <div class="col-xs-12 col-sm-8 col-md-8">
-            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
-              <h2 class="box-heading"><i class="fa fa-asterisk" aria-hidden="true"></i> Introduction</h2>
-              <p class="box-description">
-                Hey there! I'm currently starting as a Junior dev.
-                During my two-year internship, I learned to use various tech tools, and worked remotely on multiple periods of time.
-                I also practiced English for three months on an international project at work.
-              </p>
-              <p class="box-description">
-                I'm that person who likes to standardize texts, behaviour and styles for components, like buttons and calendars.
-                I also enjoy working with page responsivity across devices and window/screen sizes.
-              </p>
-            </div>
-
-            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
-              <h2 class="box-heading"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Technical Keywords</h2>
-              <p class="box-description">
-                #React, #HTML, #CSS/SCSS/SASS, #JavaScript, #jQuery, #Bootstrap, #Highcharts, #i18n,
-                #classNames, #mdi-react, #moment, #React-Bootstrap, #react-bootstrap-daterangepicker
-              </p>
-            </div>
-
-            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
-              <h2 class="box-heading"><i class="fa fa-asterisk" aria-hidden="true"></i> Personality <a class="description-link" href="http://www.myersbriggs.org/my-mbti-personality-type/mbti-basics/home.htm">MBTI</a> — INFJ</h2>
-              <p class="box-description">INFJ stands for Introversion (I), Intuition (N), Feeling (F), Judgement (J).</p>
-            </div>
-
-            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
-              <h2 class="box-heading"><i class="fa fa-bar-chart-o" aria-hidden="true"></i> Personal Growth</h2>
-              <p class="box-description">As humans, we have a wide variety of strenghts and weaknesses. As we are constantly growing and having new experiences, I find it nice to have something visual to evaluate ourselves and observe how we change throughout the years.</p>
-              <p class="box-description">This chart was generated after answering Talentoday's <a class="description-link" href="https://www.talentoday.com/">personality questionnaire</a>, which can be taken for free every 6 months.</p>
-              <div class="graph growth-graph">
-                <canvas id="growthChart" height="200"></canvas>
-              </div>
-            </div>
-
-            <div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
-              <h2 class="box-heading"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Education</h2>
-              <p class="box-description">Bachelor's Degree in Information Systems — Estácio de Sá University.</p>
-              <p class="box-description">Graduated! — December, 2018.</p>
-              <h2 class="box-heading"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Self-Study Courses</h2>
-              <a class="box-description profile-links" href="https://www.freecodecamp.com/map">Front-end Development path (ongoing) — FreeCodeCamp</a>
-              <a class="box-description profile-links" href="https://br.udacity.com/course/responsive-web-design-fundamentals--ud893/">Responsive Web Design Fundamentals — Udacity</a>
-              <a class="box-description profile-links" href="https://app.pluralsight.com/library/courses/hacking-user-experience/table-of-contents">Hacking the User Experience/UX for Developers — Pluralsight</a>
-              <a class="box-description profile-links" href="https://app.pluralsight.com/library/courses/cux-designprinciples/table-of-contents">Creating User Experiences: Fundamental Design Principles — Pluralsight</a>
-            </div>
-
-          </div>
         </div>
       </div>
     </section>

diff --git a/js/scripts.js b/js/scripts.js
@@ -72,7 +72,7 @@ var growthChart = new Chart(ctx2, {
         borderColor: 'rgba(0, 204, 122, .8)',
         pointRadius: 3,
         pointBackgroundColor: 'rgba(0, 204, 122, .8)',
-        pointBorderColor: '#FFF',
+        pointBorderColor: '#cccccc',
         pointHoverBackgroundColor: 'rgba(0, 204, 122, .9)',
         pointHoverBorderColor: 'rgba(0, 204, 122, .9)',
         data: [60, 40, 50, 50, 50, 50, 80, 80, 50, 10, 60, 50, 30, 40, 80, 30, 20, 60, 60, 60],
@@ -84,7 +84,7 @@ var growthChart = new Chart(ctx2, {
         pointRadius: 3,
         pointLabelFontSize: 16,
         pointBackgroundColor: 'rgba(0, 128, 233, .9)',
-        pointBorderColor: '#FFF',
+        pointBorderColor: '#cccccc',
         pointHoverBackgroundColor: 'rgba(0, 128, 233, .9)',
         pointHoverBorderColor: 'rgba(0, 128, 233, .9)',
         data: [80, 60, 60, 70, 70, 60, 80, 80, 70, 30, 70, 50, 40, 50, 80, 40, 30, 80, 80, 80],
@@ -97,8 +97,8 @@ var growthChart = new Chart(ctx2, {
       labels: {
         fontSize: 16,
         fontFamily: 'Questrial',
-        fontColor: '#2979ff',
-        hoverFontColor: '#2979ff',
+        fontColor: '#a6a6a6',
+        hoverFontColor: '#a6a6a6',
       },
     },
     tooltips: {
@@ -119,8 +119,10 @@ var growthChart = new Chart(ctx2, {
       pointLabels: {
         fontSize: 16,
         fontFamily: 'Questrial',
-        fontColor: '#2979ff',
+        fontColor: '#a6a6a6',
       },
+      gridLines: {color: '#a6a6a6'},
+      angleLines: {color: '#a6a6a6'},
     },
     animation: {
       duration: '2000',