From 926fe33bea3593067d489cadc383bf1a6e2ba83b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Let=C3=ADcia=20Camara?= <lettcamara@gmail.com>
Date: Fri, 5 Oct 2018 19:27:05 -0300
Subject: [PATCH] Dynamic About font

---
 src/components/sections/AboutSection.js | 429 +++++++++++++-----------
 1 file changed, 229 insertions(+), 200 deletions(-)

diff --git a/src/components/sections/AboutSection.js b/src/components/sections/AboutSection.js
index e9042c6..f710ad2 100644
--- a/src/components/sections/AboutSection.js
+++ b/src/components/sections/AboutSection.js
@@ -11,217 +11,246 @@ import AboutImage5 from '../../assets/img/about/ab5.png';
 /**
  * The about section of the home page.
  */
-function AboutSection() {
-  return (
-    <section className="about bg-secondary" id="about">
-      <div className="col-md-10 mx-md-auto">
-        <div className="row align-items-center">
-          <div className="col-lg-6 order-lg-2">
-            <div className="margin-5">
-              <img alt="" className="img-fluid" src={AboutImage1} />
+class AboutSection extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      width: 0,
+      height: 0
+    };
+
+    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+  }
+
+  componentDidMount() {
+    this.updateWindowDimensions();
+    window.addEventListener('resize', this.updateWindowDimensions);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateWindowDimensions);
+  }
+
+  updateWindowDimensions() {
+    this.setState({ width: window.innerWidth, height: window.innerHeight });
+  }
+
+  render() {
+
+    const fontSize = (this.state.width > 1000) ? 16 * (1 + (this.state.width/5000)): 16;
+
+    return (
+      <section className="about bg-secondary" id="about">
+        <div className="col-md-10 mx-md-auto">
+          <div className="row align-items-center">
+            <div className="col-lg-6 order-lg-2">
+              <div className="margin-5">
+                <img alt="" className="img-fluid" src={AboutImage1} />
+              </div>
+            </div>
+            <div className="col-lg-6 order-lg-1">
+              <div className="margin-5">
+                <h2 className="about-text">
+                  <span>
+                    <span id="ab_lang1">
+                      <FormattedMessage id="home.about.about1_title" />
+                    </span>
+                  </span>
+                </h2>
+                <p className="about-text">
+                  <span>
+                    <span id="ab_lang2" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about1_description1" />
+                    </span>
+                  </span>
+
+                  <br />
+                  <span>
+                    <span id="ab_lang3" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about1_description2" />
+                    </span>
+                  </span>
+
+                  <br />
+                  <span>
+                    <span id="ab_lang4" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about1_description3" />
+                    </span>
+                  </span>
+
+                  <br />
+                  <span>
+                    <span id="ab_lang5" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about1_description4" />
+                    </span>
+                  </span>
+                </p>
+              </div>
             </div>
           </div>
-          <div className="col-lg-6 order-lg-1">
-            <div className="margin-5">
-              <h2 className="about-text">
-                <span>
-                  <span id="ab_lang1">
-                    <FormattedMessage id="home.about.about1_title" />
-                  </span>
-                </span>
-              </h2>
-              <p className="about-text">
-                <span>
-                  <span id="ab_lang2">
-                    <FormattedMessage id="home.about.about1_description1" />
-                  </span>
-                </span>
 
-                <br />
-                <span>
-                  <span id="ab_lang3">
-                    <FormattedMessage id="home.about.about1_description2" />
+          <div className="row align-items-center">
+            <div className="col-lg-6">
+              <div className="margin-5">
+                <img alt="" className="img-fluid" src={AboutImage2} />
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="margin-5">
+                <h2 className="about-text">
+                  <span>
+                    <span id="ab_lang6">
+                      <FormattedMessage id="home.about.about2_title" />
+                    </span>
                   </span>
-                </span>
+                </h2>
+                <p className="about-text">
+                  <span>
+                    <span id="ab_lang7" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about2_description1" />
+                    </span>
+                  </span>
+                  <br />
+                  <span>
+                    <span id="ab_lang8" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about2_description2" />
+                    </span>
+                  </span>
+                  <br />
+                  <span>
+                    <span id="ab_lang9" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about2_description3" />
+                    </span>
+                  </span>
+                  <br />
+                </p>
+              </div>
+            </div>
+          </div>
 
-                <br />
-                <span>
-                  <span id="ab_lang4">
-                    <FormattedMessage id="home.about.about1_description3" />
+          <div className="row align-items-center">
+            <div className="col-lg-6 order-lg-2">
+              <div className="margin-5">
+                <img alt="" className="img-fluid" src={AboutImage3} />
+              </div>
+            </div>
+            <div className="col-lg-6 order-lg-1">
+              <div className="margin-5">
+                <h2 className="about-text">
+                  <span>
+                    <span id="ab_lang10">
+                      <FormattedMessage id="home.about.about3_title" />
+                    </span>
+                  </span>
+                </h2>
+                <p className="about-text">
+                  <span>
+                    <span id="ab_lang11" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about3_description1" />
+                    </span>
                   </span>
-                </span>
 
-                <br />
-                <span>
-                  <span id="ab_lang5">
-                    <FormattedMessage id="home.about.about1_description4" />
+                  <br />
+                  <span>
+                    <span id="ab_lang12" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about3_description2" />
+                    </span>
                   </span>
-                </span>
-              </p>
+
+                  <br />
+                  <span>
+                    <span id="ab_lang13" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about3_description3" />
+                    </span>
+                  </span>
+
+                  <br />
+                  <span>
+                    <span id="ab_lang14" style={{fontSize}}>
+                      <FormattedHTMLMessage id="home.about.about3_description4" />
+                    </span>
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="row align-items-center">
+            <div className="col-lg-6">
+              <div className="margin-5">
+                <img alt="" className="img-fluid" src={AboutImage4} />
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="margin-5">
+                <h2 className="about-text">
+                  <span>
+                    <span id="ab_lang15">
+                      <FormattedMessage id="home.about.about4_title" />
+                    </span>
+                  </span>
+                </h2>
+                <p className="about-text">
+                  <span>
+                    <span id="ab_lang16" style={{fontSize}}>
+                      <FormattedHTMLMessage id="home.about.about4_description1" />
+                    </span>
+                  </span>
+                  <br />
+                  <span>
+                    <span id="ab_lang17" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about4_description2" />
+                    </span>
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="row align-items-center">
+            <div className="col-lg-6 order-lg-2">
+              <div className="margin-5">
+                <img alt="" className="img-fluid" src={AboutImage5} />
+              </div>
+            </div>
+            <div className="col-lg-6 order-lg-1">
+              <div className="margin-5">
+                <h2 className="display-5 about-text">
+                  <span>
+                    <span id="ab_lang18">
+                      <FormattedMessage id="home.about.about5_title" />
+                    </span>
+                  </span>
+                </h2>
+                <p className="about-text">
+                  <span>
+                    <span id="ab_lang19" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about5_description1" />
+                    </span>
+                  </span>
+
+                  <br />
+                  <span>
+                    <span id="ab_lang20" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about5_description2" />
+                    </span>
+                  </span>
+
+                  <br />
+                  <span>
+                    <span id="ab_lang21" style={{fontSize}}>
+                      <FormattedMessage id="home.about.about5_description3" />
+                    </span>
+                  </span>
+                </p>
+              </div>
             </div>
           </div>
         </div>
-
-        <div className="row align-items-center">
-          <div className="col-lg-6">
-            <div className="margin-5">
-              <img alt="" className="img-fluid" src={AboutImage2} />
-            </div>
-          </div>
-          <div className="col-lg-6">
-            <div className="margin-5">
-              <h2 className="about-text">
-                <span>
-                  <span id="ab_lang6">
-                    <FormattedMessage id="home.about.about2_title" />
-                  </span>
-                </span>
-              </h2>
-              <p className="about-text">
-                <span>
-                  <span id="ab_lang7">
-                    <FormattedMessage id="home.about.about2_description1" />
-                  </span>
-                </span>
-                <br />
-                <span>
-                  <span id="ab_lang8">
-                    <FormattedMessage id="home.about.about2_description2" />
-                  </span>
-                </span>
-                <br />
-                <span>
-                  <span id="ab_lang9">
-                    <FormattedMessage id="home.about.about2_description3" />
-                  </span>
-                </span>
-                <br />
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="row align-items-center">
-          <div className="col-lg-6 order-lg-2">
-            <div className="margin-5">
-              <img alt="" className="img-fluid" src={AboutImage3} />
-            </div>
-          </div>
-          <div className="col-lg-6 order-lg-1">
-            <div className="margin-5">
-              <h2 className="about-text">
-                <span>
-                  <span id="ab_lang10">
-                    <FormattedMessage id="home.about.about3_title" />
-                  </span>
-                </span>
-              </h2>
-              <p className="about-text">
-                <span>
-                  <span id="ab_lang11">
-                    <FormattedMessage id="home.about.about3_description1" />
-                  </span>
-                </span>
-
-                <br />
-                <span>
-                  <span id="ab_lang12">
-                    <FormattedMessage id="home.about.about3_description2" />
-                  </span>
-                </span>
-
-                <br />
-                <span>
-                  <span id="ab_lang13">
-                    <FormattedMessage id="home.about.about3_description3" />
-                  </span>
-                </span>
-
-                <br />
-                <span>
-                  <span id="ab_lang14">
-                    <FormattedHTMLMessage id="home.about.about3_description4" />
-                  </span>
-                </span>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="row align-items-center">
-          <div className="col-lg-6">
-            <div className="margin-5">
-              <img alt="" className="img-fluid" src={AboutImage4} />
-            </div>
-          </div>
-          <div className="col-lg-6">
-            <div className="margin-5">
-              <h2 className="about-text">
-                <span>
-                  <span id="ab_lang15">
-                    <FormattedMessage id="home.about.about4_title" />
-                  </span>
-                </span>
-              </h2>
-              <p className="about-text">
-                <span>
-                  <span id="ab_lang16">
-                    <FormattedHTMLMessage id="home.about.about4_description1" />
-                  </span>
-                </span>
-                <br />
-                <span>
-                  <span id="ab_lang17">
-                    <FormattedMessage id="home.about.about4_description2" />
-                  </span>
-                </span>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="row align-items-center">
-          <div className="col-lg-6 order-lg-2">
-            <div className="margin-5">
-              <img alt="" className="img-fluid" src={AboutImage5} />
-            </div>
-          </div>
-          <div className="col-lg-6 order-lg-1">
-            <div className="margin-5">
-              <h2 className="display-5 about-text">
-                <span>
-                  <span id="ab_lang18">
-                    <FormattedMessage id="home.about.about5_title" />
-                  </span>
-                </span>
-              </h2>
-              <p className="about-text">
-                <span>
-                  <span id="ab_lang19">
-                    <FormattedMessage id="home.about.about5_description1" />
-                  </span>
-                </span>
-
-                <br />
-                <span>
-                  <span id="ab_lang20">
-                    <FormattedMessage id="home.about.about5_description2" />
-                  </span>
-                </span>
-
-                <br />
-                <span>
-                  <span id="ab_lang21">
-                    <FormattedMessage id="home.about.about5_description3" />
-                  </span>
-                </span>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
+      </section>
+    );
+  }
 }
 
 export { AboutSection };