Update CV and add Footer component

src/App.jsx

@@ -20,6 +20,7 @@ import Skills from './sources/skills/Skills.jsx'
 import Experience from './sources/experience/Experience.jsx'
 import Projects from './sources/projects/Projects.jsx'
 import Contact from './sources/contact/Contact.jsx'
+import Footer from './sources/footer/Footer.jsx'
 // import Test from './sources/test/Test.jsx'
 
 // import IntersectionObserverComponent from './functions/observer_old.jsx'
@@ -44,6 +45,7 @@ function App() {
           <Experience/>
           <Projects/>
           <Contact/>
+          {/* <Footer/> */}
           {/* <Test/> */}
 
         </div>

src/sources/contact/Form.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import emailjs from '@emailjs/browser';
 
+
+
 const Form = () => {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
@@ -79,9 +81,7 @@ const Form = () => {
       </div>
 
       <div className="d-flex flex-column flex-md-row mt-3 pb-2 js-build-in-item build-in-fade">
-        <button type="submit" className="btn-mktg">Submit
-          <svg xmlns="http://www.w3.org/2000/svg" className="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path className="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" strokeWidth="1.5" strokeLinecap="round"></path></svg>
-        </button>
+        <button type="submit" className="btn-mktg">Submit</button>
       </div>
     </form>
   );

src/sources/experience/Experience.jsx

@@ -5,11 +5,8 @@ import Tilt from '../../functions/tilt'
 import './Experience.css'
 
 // IMG
-import IMG7 from '../../assets/graphs/box.png?w=300;400;500;600;700;800;900;1000;1200;1500;1800;2000&format=webp&as=srcset'
-import IMG7_fall from '../../assets/graphs/box.png'
 import PORTAL from '../../assets/portal.png?w=300;400;500;600;700;800;900;1000;1200;1500;1800;2000&format=webp&as=srcset'
-import PORTAL_fall from '../../assets/portal.png'
-import ICO_SVG from '../../assets/svg/ICO_white.svg'
+
 // import ICO_BUILDING from ''
 
 function Experience() {
@@ -53,7 +50,7 @@ function Experience() {
             <div className="river-mktg js-build-in-trigger d-flex gutter gutter-spacious my-5 my-sm-7 my-md-8 position-relative flex-column-reverse flex-md-items-center flex-md-row flex-column pb-4 pb-md-7">
               <div className="col-12 py-3 mb-2 js-build-in-item col-sm-10 col-md-6 text-left col-lg-6 build-in-slideX-right" style={{TransitionDelay: "0ms"}}>
                 <div className="pr-md-4 ml-4">
-                <img alt="" aria-hidden="true" width="100" height="100" className="ml-sm-9 mb-sm-1 position-absolute d-md-block events-none js-build-in-item build-in-fade" style={{height: "300px", width: "300px", bottom: "-150px", left: "-10px", transitionDelay: "200ms", marginLeft: "20px", zIndex: "5"}} loading="lazy" decoding="async" src={ICO_SVG}></img>
+                <img alt="" aria-hidden="true" width="100" height="100" className="ml-sm-9 mb-sm-1 position-absolute d-md-block events-none js-build-in-item build-in-fade" style={{height: "300px", width: "300px", bottom: "-150px", left: "-10px", transitionDelay: "200ms", marginLeft: "20px", zIndex: "5"}} loading="lazy" decoding="async" src='https://cms.eperezme.com/uploads/ICO_white_4225785f66.svg'></img>
                 {/* <img src='https://cdn.eperezme.com/upload/w_500,o_webp/https://cms.eperezme.com/uploads/ICO_scalia_gallery_fullwidth_c0828b6920.jpg' alt="" loading="lazy" decoding="async" className="rounded-2 width-full height-auto d-none d-lg-block" style={{marginLeft: "400px"}}/> */}
                 </div>
               </div>
@@ -117,8 +114,12 @@ function Experience() {
                   </p>
                   <div className="">
                     {/* [ ] Link */}
-                    <a className="link-mktg text-semibold color-fg-default py-1 f3-mktg" href="">
-                      Lorem Link <svg xmlns="http://www.w3.org/2000/svg" className="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path className="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" strokeWidth="1.5" strokeLinecap="round"></path></svg>
+                    <a className="link-mktg btn-mktg text-semibold py-1 f3-mktg" href="https://cms.eperezme.com/uploads/Final_Degree_Project_cded54a918.pdf">
+                      View Project</a>
+                    <br />
+                    <br />
+                    <a className="link-mktg text-semibold color-fg-default py-1 f3-mktg" href="https://github.com/eperezme/TFG-trees">
+                      Go to Repo<svg xmlns="http://www.w3.org/2000/svg" className="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path className="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" strokeWidth="1.5" strokeLinecap="round"></path></svg>
                         </a>
                   </div>
                 </div>
@@ -155,7 +156,7 @@ function Experience() {
                     <br />
                     <br />
             <a className="link-mktg text-semibold py-1 f3-mktg btn-mktg" href="https://cms.eperezme.com/uploads/Regression_report_2e39a5284e.pdf">
-            Regression Models report</a>
+            Regression Models Report</a>
           </div>
                 </div>
                   <div className="overflow-hidden rounded-bottom-3">

src/sources/footer/Footer.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+      <div className="btn-mktg">
+        <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
+          <i className="fab fa-twitter"></i>
+        </a>
+        <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
+          <i className="fab fa-facebook"></i>
+        </a>
+        <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
+          <i className="fab fa-instagram"></i>
+        </a>
+      </div>
+  );
+};
+
+export default Footer;

src/sources/header/Header.jsx

@@ -53,7 +53,7 @@ const Header = () => {
                     Hello, I'm a passionate bioinformatics master's student with a strong foundation in programming, specializing in R and Python. Committed to continuous learning, I aspire to further develop my skills in these languages. Explore my portfolio to witness the intersection of my love for bioinformatics and programming through efficient, readable code accompanied by clear and concise comments.
                       </p>
                   <div className="d-flex flex-column flex-md-row">
-                    <a href={CV} className="btn-mktg download">Download CV</a>
+                    <a href='https://cms.eperezme.com/uploads/CV_9343c06e83.pdf' className="btn-mktg download">Download CV</a>
                     <div className="border-top border-md-left mx-md-3 mb-3 mb-md-0"></div>
                     {/* [x] href to contact me section*/}
                     <a href="#contact" className="btn-mktg home-campaing-enterprise btn-muted-mktg" data-test-selector="start-trial-button">Contact Me</a>

src/sources/projects/Projects.jsx

@@ -2,8 +2,7 @@ import React from 'react'
 import Tilt from '../../functions/tilt.jsx'
 
 // IMG
-import PORTAL from '../../assets/portal.png?w=300;400;500;600;700;800;900;1000;1200;1500;1800;2000&format=webp&as=srcset'
-import PORTAL_fall from '../../assets/portal.png'
+
 
 
 
@@ -144,12 +143,12 @@ function Projects() {
                     where I write about things I do and learn related to coding.
                   </p>
                   <div className='d-flex flex-row'>
-                  <a className="link-mktg text-semibold color-fg-default py-1 f3-mktg" href="https://github.com/eperezme/CodeBlog">
-                    Source Code <svg xmlns="http://www.w3.org/2000/svg" className="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path className="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" strokeWidth="1.5" strokeLinecap="round"></path></svg>
-                    </a>
-                    <a className="ml-6 link-mktg text-semibold color-fg-default py-1 f3-mktg" href="https://blog.eperezme.com/">
-                    Blog <svg xmlns="http://www.w3.org/2000/svg" className="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path className="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" strokeWidth="1.5" strokeLinecap="round"></path></svg>
+                  <a className="text-semibold btn-mktg py-1 f3-mktg" href="https://blog.eperezme.com/">
+                    Blog 
                     </a>
+                  <a className="ml-6 link-mktg text-semibold color-fg-default py-1 f3-mktg" href="https://github.com/eperezme/CodeBlog">
+                    Source Code <svg xmlns="http://www.w3.org/2000/svg" className="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path className="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" strokeWidth="1.5" strokeLinecap="round"></path></svg>
+                  </a>
                   </div>
                 </div>
                 <div className="overflow-hidden rounded-bottom-3">

src/sources/skills/Skills.jsx

@@ -12,16 +12,6 @@ import './Skills.css'
 import Surv from '../../assets/graphs/lambda.svg?react'
 
 // Images
-import IMG2 from '../../assets/wood.jpg?w=300;400;500;600;700;800;900;1000;1200;1500&format=webp&as=srcset';
-import IMG2_fall from '../../assets/wood.jpg'
-import IMG3 from '../../assets/mev.jpg?w=300;400;500;600;700;800;900;1000;1200;1500;1800;2000&format=webp&as=srcset';
-import IMG3_fall from '../../assets/mev.jpg'
-import IMG4 from '../../assets/graphs/diabplot.png?w=300;400;500;600;700;800;900;1000;1200;1500;1800;2000&format=webp&as=srcset'
-import IMG4_fall from '../../assets/graphs/diabplot.png'
-import IMG5 from '../../assets/graphs/surv2.png?w=300;400;500;600;700;800;900;1000;1200;1500;1800;2000&format=webp&as=srcset'
-import IMG5_fall from '../../assets/graphs/surv2.png'
-import IMG6 from '../../assets/graphs/lambda.png?w=300;400;500;600;700;800;900;1000;1200;1500;1800;2000&format=webp&as=srcset'
-import IMG6_fall from '../../assets/graphs/lambda.png'
 
 
 function Skills() {
@@ -56,10 +46,10 @@ function Skills() {
   </div>
   {/* 1st Image center */}
   <div className="js-build-in-trigger">
-    <picture>
-      <source srcSet={IMG2} type='image/webp' sizes=''/>
-      <img aria-hidden="true" loading='lazy' decoding='async' className='width-full d-block height-auto position-relative z-1 rounded-3 border js-build-in-item build-in-slideX-right' src={IMG2_fall} alt="" />
-      </picture>
+    {/* <picture>
+      <source srcSet={IMG2} type='image/webp' sizes=''/> */}
+      <img aria-hidden="true" loading='lazy' decoding='async' className='width-full d-block height-auto position-relative z-1 rounded-3 border js-build-in-item build-in-slideX-right' src="https://cms.eperezme.com/uploads/wood_bf5c3edd61.jpg" alt="" />
+      {/* </picture> */}
   </div>
   <div className='d-flex js-build-in-trigger position-relative'>
   <img alt="" aria-hidden="true" width="584" height="584" className="animation-rotate position-absolute height-auto d-none d-md-block events-none home-shape-rotate" style={{bottom: "-50%", right: "-20%", animationDuration: "300s"}} loading="lazy" decoding="async" src="https://github.githubassets.com/assets/shape-1-c219318e479a.svg"/>
@@ -82,10 +72,11 @@ function Skills() {
           <div className="d-flex flex-column position-relative">
           <div className="js-build-in-item build-in-slideX-right overflow-hidden rounded-3 position-relative z-1 d-none d-md-block" style={{maxWidth: "480px", marginTop: "-100%", transitionDelay: "100ms",}}>
             {/* Lateral image */}
-            {/* [ ] REPLACE IMAGE */}
-            <picture>
-              <source srcSet={IMG3} type='image/webp'/>
-              <img src={IMG3_fall} loading="lazy" alt="" decoding="async" className="rounded-3 width-full d-block height-auto"/></picture>
+            {/* [x] REPLACE IMAGE */}
+            {/* <picture>
+              <source srcSet={IMG3} type='image/webp'/> */}
+              <img src="https://cms.eperezme.com/uploads/mev_8760b89521.jpg" loading="lazy" alt="" decoding="async" className="rounded-3 width-full d-block height-auto"/>
+              {/* </picture> */}
           </div>
           <div className='js-build-in-item build-in-slideX-right overflow-hidden rounded-3 position-absolute right-3 bottom-3 bottom-sm-0 z-1 d-md-none style={{bottom: "-300px", right: "-200px", transitionDelay: "300ms",}} '>
           <img alt="" aria-hidden="true" width="1000" height="1000" className="width-full d-block height-auto" loading="lazy" decoding="async" src="https://github.githubassets.com/assets/bg-glow-purple-6e9a6a96cb04.png"></img>