Optimze all images

cihancinar · Mar 8, 2021 · 40c78de · 40c78de
1 parent 5d1dfb7
commit 40c78de
Show file tree

Hide file tree

Showing 70 changed files with 37 additions and 37 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,7 @@
 <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.webp" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!--

diff --git a/src/assets/img/angular.png b/src/assets/img/angular.png
diff --git a/src/assets/img/angular.webp b/src/assets/img/angular.webp
diff --git a/src/assets/img/apigee.png b/src/assets/img/apigee.png
diff --git a/src/assets/img/apigee.webp b/src/assets/img/apigee.webp
diff --git a/src/assets/img/apple-icon.png b/src/assets/img/apple-icon.png
diff --git a/src/assets/img/apple-icon.webp b/src/assets/img/apple-icon.webp
diff --git a/src/assets/img/atoswl.png b/src/assets/img/atoswl.png
diff --git a/src/assets/img/atoswl.webp b/src/assets/img/atoswl.webp
diff --git a/src/assets/img/blurred-image-1.jpg b/src/assets/img/blurred-image-1.jpg
diff --git a/src/assets/img/blurred-image-1.webp b/src/assets/img/blurred-image-1.webp
diff --git a/src/assets/img/clouds.png b/src/assets/img/clouds.png
diff --git a/src/assets/img/clouds.webp b/src/assets/img/clouds.webp
diff --git a/src/assets/img/docker.png b/src/assets/img/docker.png
diff --git a/src/assets/img/docker.webp b/src/assets/img/docker.webp
diff --git a/src/assets/img/ember.png b/src/assets/img/ember.png
diff --git a/src/assets/img/ember.webp b/src/assets/img/ember.webp
diff --git a/src/assets/img/ewl.PNG b/src/assets/img/ewl.PNG
diff --git a/src/assets/img/ewl.webp b/src/assets/img/ewl.webp
diff --git a/src/assets/img/favicon.png b/src/assets/img/favicon.png
diff --git a/src/assets/img/favicon.webp b/src/assets/img/favicon.webp
diff --git a/src/assets/img/fog-low.png b/src/assets/img/fog-low.png
diff --git a/src/assets/img/fog-low.webp b/src/assets/img/fog-low.webp
diff --git a/src/assets/img/france.png b/src/assets/img/france.png
diff --git a/src/assets/img/france.webp b/src/assets/img/france.webp
diff --git a/src/assets/img/gitlab.jpg b/src/assets/img/gitlab.jpg
diff --git a/src/assets/img/gitlab.webp b/src/assets/img/gitlab.webp
diff --git a/src/assets/img/header.jpg b/src/assets/img/header.jpg
diff --git a/src/assets/img/header.webp b/src/assets/img/header.webp
diff --git a/src/assets/img/iut.jpg b/src/assets/img/iut.jpg
diff --git a/src/assets/img/iut.webp b/src/assets/img/iut.webp
diff --git a/src/assets/img/kafka.png b/src/assets/img/kafka.png
diff --git a/src/assets/img/kafka.webp b/src/assets/img/kafka.webp
diff --git a/src/assets/img/liris.jpg b/src/assets/img/liris.jpg
diff --git a/src/assets/img/liris.webp b/src/assets/img/liris.webp
diff --git a/src/assets/img/microservices.png b/src/assets/img/microservices.png
diff --git a/src/assets/img/microservices.webp b/src/assets/img/microservices.webp
diff --git a/src/assets/img/mongodb.png b/src/assets/img/mongodb.png
diff --git a/src/assets/img/mongodb.webp b/src/assets/img/mongodb.webp
diff --git a/src/assets/img/mysql.png b/src/assets/img/mysql.png
diff --git a/src/assets/img/mysql.webp b/src/assets/img/mysql.webp
diff --git a/src/assets/img/nodejs.png b/src/assets/img/nodejs.png
diff --git a/src/assets/img/nodejs.webp b/src/assets/img/nodejs.webp
diff --git a/src/assets/img/quarkus.png b/src/assets/img/quarkus.png
diff --git a/src/assets/img/quarkus.webp b/src/assets/img/quarkus.webp
diff --git a/src/assets/img/react.png b/src/assets/img/react.png
diff --git a/src/assets/img/react.webp b/src/assets/img/react.webp
diff --git a/src/assets/img/rest.png b/src/assets/img/rest.png
diff --git a/src/assets/img/rest.webp b/src/assets/img/rest.webp
diff --git a/src/assets/img/soap.jpeg b/src/assets/img/soap.jpeg
diff --git a/src/assets/img/soap.webp b/src/assets/img/soap.webp
diff --git a/src/assets/img/spring.png b/src/assets/img/spring.png
diff --git a/src/assets/img/spring.webp b/src/assets/img/spring.webp
diff --git a/src/assets/img/top0.jpg b/src/assets/img/top0.jpg
diff --git a/src/assets/img/top0.webp b/src/assets/img/top0.webp
diff --git a/src/assets/img/top1.jpg b/src/assets/img/top1.jpg
diff --git a/src/assets/img/top1.webp b/src/assets/img/top1.webp
diff --git a/src/assets/img/turkey.png b/src/assets/img/turkey.png
diff --git a/src/assets/img/turkey.webp b/src/assets/img/turkey.webp
diff --git a/src/assets/img/ucbl.jpg b/src/assets/img/ucbl.jpg
diff --git a/src/assets/img/ucbl.webp b/src/assets/img/ucbl.webp
diff --git a/src/assets/img/uk.png b/src/assets/img/uk.png
diff --git a/src/assets/img/uk.webp b/src/assets/img/uk.webp
diff --git a/src/assets/img/vcard.png b/src/assets/img/vcard.png
diff --git a/src/assets/img/vcard.webp b/src/assets/img/vcard.webp
diff --git a/src/components/Headers/IndexHeader.js b/src/components/Headers/IndexHeader.js
@@ -25,7 +25,7 @@ import { Container } from "reactstrap";
 // core components
 
 function IndexHeader() {
-  const randBackgroundImage = "top" + Math.round(Math.random()) + ".jpg";
+  const randBackgroundImage = "top" + Math.round(Math.random()) + ".webp";
   return (
     <>
       <div
@@ -43,10 +43,10 @@ function IndexHeader() {
               <h1>Hello, world!</h1>
               <h1 className="presentation-title">I'm Cihan Cinar</h1>
               <div className="fog-low">
-                <img alt="..." src={require("assets/img/fog-low.png")} />
+                <img alt="..." src={require("assets/img/fog-low.webp")} />
               </div>
               <div className="fog-low right">
-                <img alt="..." src={require("assets/img/fog-low.png")} />
+                <img alt="..." src={require("assets/img/fog-low.webp")} />
               </div>
             </div>
             <h2 className="presentation-subtitle text-center font-weight-bold">
@@ -57,7 +57,7 @@ function IndexHeader() {
         <div
           className="moving-clouds"
           style={{
-            backgroundImage: "url(" + require("assets/img/clouds.png") + ")",
+            backgroundImage: "url(" + require("assets/img/clouds.webp") + ")",
           }}
         />
       </div>

diff --git a/src/components/Headers/TermsHeader.js b/src/components/Headers/TermsHeader.js
@@ -42,10 +42,10 @@ function TermsHeader() {
   return (
     <>
       <div
-        style={{
-          backgroundImage:
-            "url(" + require("assets/img/fabio-mangione.jpg") + ")",
-        }}
+        // style={{
+        //   backgroundImage:
+        //     "url(" + require("assets/img/fabio-mangione.jpg") + ")",
+        // }}
         className="page-header page-header-xs"
         data-parallax={true}
         ref={pageHeader}

diff --git a/src/views/SectionContact.js b/src/views/SectionContact.js
@@ -94,7 +94,7 @@ function SectionContact() {
                     <img
                       alt="vcard"
                       height="143px"
-                      src={require("assets/img/vcard.png")}
+                      src={require("assets/img/vcard.webp")}
                       style={{ height:'143px', marginTop: '5px' }}
                     />
                   </div>

diff --git a/src/views/SectionExperience.js b/src/views/SectionExperience.js
@@ -47,7 +47,7 @@ function SectionExperience() {
                 <div className="timeline-wrap">
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ewl.PNG")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ewl.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Senior Software Engineer</strong></h4>
                       <p>06/2020 - <u>Present</u></p>
@@ -65,7 +65,7 @@ function SectionExperience() {
                   </div> 
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ewl.PNG")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ewl.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Senior Software Engineer / Technical Lead</strong></h4>
                       <p>09/2019 - 06/2020</p>
@@ -87,7 +87,7 @@ function SectionExperience() {
                   </div> 
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/atoswl.png")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/atoswl.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Lead Developer</strong></h4>
                       <p>10/2018 - 09/2019</p>
@@ -107,7 +107,7 @@ function SectionExperience() {
                   </div> 
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/atoswl.png")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/atoswl.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Software Engineer</strong></h4>
                       <p>03/2016 - 10/2018</p>
@@ -138,7 +138,7 @@ function SectionExperience() {
                   </div>
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ucbl.jpg")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ucbl.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Part-time teacher</strong></h4>
                       <p>10/2018 - 12/2018 & 10/2019 - 12/2019</p>
@@ -159,7 +159,7 @@ function SectionExperience() {
                   </div> 
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/liris.jpg")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/liris.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Internship</strong></h4>
                       <p>05/2015 - 08/2015</p>
@@ -196,7 +196,7 @@ function SectionExperience() {
                 <div className="timeline-wrap">
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ucbl.jpg")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ucbl.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Master's Degree</strong></h4>
                       <p>2014 - 2016</p>
@@ -214,7 +214,7 @@ function SectionExperience() {
                   </div>
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ucbl.jpg")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/ucbl.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Bachelor's Degree</strong></h4>
                       <p>2013 - 2014</p>
@@ -232,7 +232,7 @@ function SectionExperience() {
                   </div> 
 
                   <div className="timeline-block">
-                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/iut.jpg")} />
+                    <img className="timeline-image" alt="equensWorldline" src={require("assets/img/iut.webp")} />
                     <div className="timeline-header">
                       <h4><strong>Bachelor's Degree</strong></h4>
                       <p>2011 – 2013</p>

diff --git a/src/views/SectionSkill.js b/src/views/SectionSkill.js
@@ -57,7 +57,7 @@ function SectionSkill() {
                     <img
                     alt="Spring"
                     className="img-rounded img-responsive"
-                    src={require("assets/img/spring.png")}
+                    src={require("assets/img/spring.webp")}
                     style={{ marginTop: '5px' }}
                     />
                   </Col>
@@ -80,7 +80,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/nodejs.png")}
+                  src={require("assets/img/nodejs.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -103,7 +103,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/quarkus.png")}
+                  src={require("assets/img/quarkus.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -133,7 +133,7 @@ function SectionSkill() {
                     <img
                     alt="Spring"
                     className="img-rounded img-responsive"
-                    src={require("assets/img/angular.png")}
+                    src={require("assets/img/angular.webp")}
                     style={{ width: '29px', marginTop: '5px' }}
                     />
                   </Col>
@@ -156,7 +156,7 @@ function SectionSkill() {
                     <img
                     alt="Spring"
                     className="img-rounded img-responsive"
-                    src={require("assets/img/react.png")}
+                    src={require("assets/img/react.webp")}
                     style={{ width: '51px', marginTop: '5px' }}
                     />
                   </Col>
@@ -179,7 +179,7 @@ function SectionSkill() {
                     <img
                     alt="Spring"
                     className="img-rounded img-responsive"
-                    src={require("assets/img/ember.png")}
+                    src={require("assets/img/ember.webp")}
                     style={{ marginTop: '5px' }}
                     />
                   </Col>
@@ -220,7 +220,7 @@ function SectionSkill() {
                     <img
                     alt="Spring"
                     className="img-rounded img-responsive"
-                    src={require("assets/img/rest.png")}
+                    src={require("assets/img/rest.webp")}
                     style={{ marginTop: '5px' }}
                     />
                   </Col>
@@ -243,7 +243,7 @@ function SectionSkill() {
                     <img
                     alt="Spring"
                     className="img-rounded img-responsive"
-                    src={require("assets/img/soap.jpeg")}
+                    src={require("assets/img/soap.webp")}
                     style={{ marginTop: '5px', maxHeight: '25px' }}
                     />
                   </Col>
@@ -266,7 +266,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/microservices.png")}
+                  src={require("assets/img/microservices.webp")}
                   style={{ marginTop: '5px', maxHeight: '30px' }}
                   />
                 </Col>
@@ -289,7 +289,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/apigee.png")}
+                  src={require("assets/img/apigee.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -320,7 +320,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/docker.png")}
+                  src={require("assets/img/docker.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -366,7 +366,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/gitlab.jpg")}
+                  src={require("assets/img/gitlab.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -430,7 +430,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/mysql.png")}
+                  src={require("assets/img/mysql.webp")}
                   style={{ marginTop: '5px', maxHeight: '25px' }}
                   />
                 </Col>
@@ -453,7 +453,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/mongodb.png")}
+                  src={require("assets/img/mongodb.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -507,7 +507,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/kafka.png")}
+                  src={require("assets/img/kafka.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -546,7 +546,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/france.png")}
+                  src={require("assets/img/france.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -568,7 +568,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/turkey.png")}
+                  src={require("assets/img/turkey.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>
@@ -590,7 +590,7 @@ function SectionSkill() {
                   <img
                   alt="Spring"
                   className="img-rounded img-responsive"
-                  src={require("assets/img/uk.png")}
+                  src={require("assets/img/uk.webp")}
                   style={{ marginTop: '5px' }}
                   />
                 </Col>