index.qmd

---
format:
  html: 
    toc: false
repo-actions: false
---
<!-- Password to open pdf books: 08081968 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&display=swap" rel="stylesheet">

<style>
  #quarto-footer,
  footer,
  section#quarto-footer {
     display: none !important;
  }

  .navbar {
  background-color: var(--secondary-brown) !important;
  }
  
  /* Page-specific background for index only */
  body {
    background-image: url('images/home/mosaic.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    width: 100%;
  }

  /* Responsive background adjustments */
  @media screen and (max-width: 768px) {
    body {
      background-attachment: scroll;
      background-size: cover;
      background-position: center center;
    }
  }

  @media screen and (max-width: 480px) {
    body {
      background-attachment: scroll;
      background-size: cover;
      background-position: center center;
      min-height: 100vh;
    }
  }

  /* Landscape orientation on mobile */
  @media screen and (max-width: 768px) and (orientation: landscape) {
    body {
      background-size: cover;
      background-position: center center;
      min-height: 100vh;
      }
  }

  .animated-text {
    font-size: 80px;
    color: #FFFFFF;
    font-family: 'Cabin Sketch';
    text-align: center;
    vertical-align: middle;
  }

  /* ========== ANIMATIONS ========== */
  @keyframes skillsMove {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  @keyframes serviceMove {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  /* ========== SKILLS SECTION ========== */
  .skills-carousel {
    position: relative;
    align-items: center;
  }

  .header-skills {
    position: absolute;
    top: -3%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 6em;
    padding: 0.1em 0.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cabin Sketch';
    font-weight: bold;
    font-size: 25px;
    background: rgba(225, 215, 215, 0.8);
    border-radius: 25px;
    z-index: 2;
  }

  .skills {
    overflow: hidden;
    padding: 20px 10px 0px 10px;
    background: rgba(225, 215, 215, 0.6);
    white-space: nowrap;
    position: relative;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    width: 100%;
    z-index: 1;
  }

  .skills:before,
  .skills:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
    pointer-events: none;
  }

  .skills:before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  }

  .skills:after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  }

  .skills:hover .skills-slide {
    animation-play-state: paused !important;
  }

  .skills-slide {
    display: inline-block;
    animation: 70s skillsMove infinite linear;
  }

  .skills-slide img {
    height: 80px;
    margin: 0 40px;
    padding: 10px 0px 0px 0px;
    transition: transform 0.3s ease;
  }

  .skills-slide img:hover {
    transform: scale(1.2);
    cursor: pointer;
  }

  /* ========== SERVICES SECTION ========== */
  .services-carousel {
    position: relative;
    align-items: center;
  }

  .header-services {
    position: absolute;
    top: -3%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 6em;
    padding: 0.1em 0.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cabin Sketch';
    font-weight: bold;
    font-size: 25px;
    background: rgba(225, 215, 215, 0.8);
    border-radius: 25px;
    z-index: 4;
  }

  .bottom-about-services {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 6em;
    padding: 0.1em 0.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cabin Sketch';
    font-weight: bold;
    font-size: 25px;
    background: rgba(225, 215, 215, 0.8);
    border-radius: 25px;
    z-index: 4;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .bottom-about-services:hover {
    background: rgba(225, 215, 215, 0.9);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #000;
  }

  .services {
    overflow: hidden;
    padding: 20px 10px 0px 0px;
    background: rgba(225, 215, 215, 0.6);
    white-space: nowrap;
    position: relative;
    border-radius: 45px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin: 15px auto;
    width: 75%;
    z-index: 1;
  }

  .services:before,
  .services:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
    pointer-events: none;
  }

  .services:before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  }

  .services:after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  }

  .services:hover .services-slide {
    animation-play-state: paused !important;
  }

  .services-slide {
    display: inline-block;
    vertical-align: middle;
    animation: 50s serviceMove infinite linear;
  }

  .services-slide img {
    height: 80px;
    margin: 0 40px;
    transition: transform 0.3s ease;
  }

  .services-slide img:hover {
    transform: scale(1.2);
    cursor: pointer;
  }

  .service-item {
    display: inline-block;
    text-align: center;
    margin: 0 20px;
    vertical-align: top;
  }

  .service-item span {
    display: block;
    margin-top: 10px;
    font-family: 'Cabin Sketch';
    font-size: 20px;
    color: #333;
    font-weight: bold;
  }

  /* ========== RESPONSIVE DESIGN ========== */
  /* Mobile devices (up to 768px) */
  @media screen and (max-width: 768px) {
    .animated-text {
      font-size: 40px;
    }
    
    .header-skills,
    .header-services {
      font-size: 18px;
      padding: 0.1em 0.3em;
      min-width: 4em;
    }
    
    .skills {
      width: 95%;
      padding: 15px 5px 0px 5px;
    }
    
    .services {
      width: 95%;
      padding: 15px 5px 0px 0px;
    }
    
    .skills-slide img,
    .services-slide img {
      height: 50px;
      margin: 0 20px;
    }
    
    .skills:before,
    .skills:after,
    .services:before,
    .services:after {
      width: 100px;
    }
    
    .service-item {
      margin: 0 15px;
    }
    
    .service-item span {
      font-size: 14px;
      margin-top: 5px;
    }
    
    .skills-slide {
      animation: 40s skillsMove infinite linear;
    }
    
    .services-slide {
      animation: 35s serviceMove infinite linear;
    }
    
    .bottom-about-services {
      font-size: 14px;
      padding: 0.1em 0.3em;
      min-width: 5em;
    }
  }
  
  /* Tablet devices (769px to 1024px) */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    .animated-text {
      font-size: 60px;
    }
    
    .header-skills,
    .header-services {
      font-size: 22px;
    }
    
    .skills {
      width: 97%;
    }
    
    .services {
      width: 90%;
    }
    
    .skills-slide img,
    .services-slide img {
      height: 65px;
      margin: 0 30px;
    }
    
    .skills:before,
    .skills:after,
    .services:before,
    .services:after {
      width: 180px;
    }
    
    .service-item span {
      font-size: 18px;
    }
    
    .skills-slide {
      animation: 50s skillsMove infinite linear;
    }
    
    .services-slide {
      animation: 42s serviceMove infinite linear;
    }
    
    .bottom-about-services {
      font-size: 18px;
    }
  }
  
  /* Large screens (1025px and up) */
  @media screen and (min-width: 1025px) {
    .animated-text {
      font-size: 80px;
    }
    
    .skills-slide img,
    .services-slide img {
      height: 80px;
      margin: 0 40px;
    }
    
    .skills-slide {
      animation: 60s skillsMove infinite linear;
    }
    
    .services-slide {
      animation: 50s serviceMove infinite linear;
    }
  }
  
  /* Extra small devices (up to 480px) */
  @media screen and (max-width: 625px) {
    .animated-text {
      font-size: 28px;
      padding: 0 10px;
    }
    
    .header-skills,
    .header-services {
      font-size: 16px;
      padding: 0.1em 0.2em;
      min-width: 3em;
    }
    
    .skills,
    .services {
      width: 98%;
      padding: 10px 2px 0px 2px;
      border-radius: 15px;
    }
    
    .skills-slide img,
    .services-slide img {
      height: 40px;
      margin: 0 15px;
    }
    
    .skills:before,
    .skills:after,
    .services:before,
    .services:after {
      width: 80px;
    }
    
    .service-item {
      margin: 0 10px;
    }
    
    .service-item span {
      font-size: 12px;
      margin-top: 3px;
    }
    
    .skills-slide {
      animation: 30s skillsMove infinite linear;
    }
    
    .services-slide {
      animation: 25s serviceMove infinite linear;
    }
    
    .bottom-about-services {
      font-size: 14px;
      padding: 0.1em 0.2em;
      min-width: 22em;
    }
  }

</style>

<div style="color: #FFFFFF;" class="animated-text">
  <p>Geology and Full Stack WebGIS</p>
</div>

<div class="skills-carousel">
  <span class="header-skills">I work with these tools</span>

<div class="skills">
<div class="skills-slide" style="vertical-align: middle !important;">

<a href="https://aws.amazon.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/Amazon_Web_Services_Logo.svg" alt="AWS" />
</a>
<a href="https://github.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/GitHub_Logo.svg" alt="GitHub" />
</a>
<a href="https://git-scm.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/git_logo.svg" alt="Git" />
</a>
<a href="https://www.gnu.org/gnu/linux-and-gnu.en.html" target="_blank" rel="noopener noreferrer">
<img src="images/logos/gnu_bash.svg" alt="Bash" />
</a>
<a href="https://linuxmint.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/linux-icon.svg" alt="Linux" />
</a>
<a href="https://html.spec.whatwg.org/multipage/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/HTML5_logo.svg" alt="HTML5" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank" rel="noopener noreferrer">
<img src="images/logos/CSS3_logo.svg" alt="CSS3" />
</a>
<a href="https://quarto.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/quarto.svg" alt="Quarto" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noopener noreferrer">
<img src="images/logos/javascript-icon.svg" alt="JavaScript" />
</a>
<a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/TypeScript.svg" alt="TypeScript" />
</a>
<a href="https://www.python.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/python-icon.svg" alt="Python" />
</a>
<a href="https://www.java.com/en/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/java-icon.svg" alt="Java" />
</a>
<a href="https://mui.com/material-ui/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/MaterialUI.svg" alt="Material UI" />
</a>
<a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/Tailwind_CSS_Logo.svg" alt="Tailwind CSS" />
</a>
<a href="https://www.mysql.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/mysql_logo.svg" alt="MySQL" />
</a>
<a href="https://aws.amazon.com/dynamodb/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/aws-dynamodb.svg" alt="DynamoDB" />
</a>
<a href="https://postgis.net/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/postgis_logo.svg" alt="PostGIS" />
</a>
<a href="https://www.postgresql.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/postgresql_logo.svg" alt="PostgreSQL" />
</a>
<a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/mongodb_logo.svg" alt="MongoDB" />
</a>
<a href="https://www.jetbrains.com/idea/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/IntelliJ_IDEA_Icon.svg" alt="IntelliJ IDEA" />
</a>
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/visualstudio_logo.svg" alt="Visual Studio" />
</a>
<a href="https://eclipseide.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/EclipseIDE.svg" alt="Eclipse Luna" />
</a>
<a href="https://www.jetbrains.com/pycharm/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/PyCharm.svg" alt="PyCharm" />
</a>
<a href="https://jupyter.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/Jupyter.svg" alt="Jupyter" />
</a>
<a href="https://www.esri.com/en-us/home" target="_blank" rel="noopener noreferrer">
<img src="images/logos/esri.svg" alt="Esri" />
</a>
<a href="https://pro.arcgis.com/en/pro-app/latest/get-started/get-started.htm" target="_blank" rel="noopener noreferrer">
<img src="images/logos/arcgis-pro.webp" alt="ArcGIS Pro" />
</a>
<a href="https://qgis.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/QGIS_logo_new.svg" alt="QGIS" />
</a>
<a href="https://grass.osgeo.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/grasslogo.svg" alt="GRASS GIS" />
</a>
<a href="https://saga-gis.sourceforge.io/en/index.html" target="_blank" rel="noopener noreferrer">
<img src="images/logos/saga_icon.png" alt="SAGA GIS" />
</a>
<a href="https://gdal.org/en/stable/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/GDALLogoColor.svg" alt="GDAL" />
</a>
<a href="https://geoserver.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/GeoServer-icon.svg" alt="GeoServer" />
</a>
<a href="https://openlayers.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/openlayers.png" alt="OpenLayers" />
</a>
<a href="https://maplibre.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/maplibre2.svg" alt="MapLibre" />
</a>
<a href="https://leafletjs.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/leafletjs-icon.png" alt="Leaflet" />
</a>
<a href="https://geemap.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/geemap_logo.png" alt="Geemap" />
</a>
<a href="https://leafmap.org/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/leafmap_logo.png" alt="Leafmap" />
</a>
<a href="https://mapsplatform.google.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/Google_Maps_Platform_Logo.svg" alt="Google Maps Platform" />
</a>
<a href="https://cloud.google.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/Google-Cloud.svg" alt="Google Cloud" />
</a>
<a href="https://earthengine.google.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/googleearth-engine.svg" alt="Google Earth Engine" />
</a>
<a href="https://cesium.com/platform/cesiumjs/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/cesium-icon.svg" alt="Cesium" />
</a>
<a href="https://react.dev/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/reactjs_logo.svg" alt="React" />
</a>
<a href="https://spring.io/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/springio-icon.svg" alt="Spring" />
</a>
<a href="https://vaadin.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/vaadin-original.svg" alt="Vaadin" />
</a>
<a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/bootstrap_logo.svg" alt="Bootstrap" />
</a>
<a href="https://vite.dev/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/vitejsdev-icon.svg" alt="Vite" />
</a>
<a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/Docker.svg" alt="Docker" />
</a>
<a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/vercel.svg" alt="Vercel" />
</a>
<a href="https://railway.com/" target="_blank" rel="noopener noreferrer">
<img src="images/logos/railway.svg" alt="Railway" />
</a>
<a href="https://www.spglobal.com/commodity-insights/en/products-solutions/upstream-midstream-oil-gas/geoscience-software" target="_blank" rel="noopener noreferrer">
<img src="images/logos/IHS_Kingdom_logo.png" alt="IHS Kingdom" />
</a>
<a href="https://www.eliis-geo.com/paleoscan-overview-a.html" target="_blank" rel="noopener noreferrer">
<img src="images/logos/logo-eliis.svg" alt="Eliis" />
</a>
<a href="https://www.slb.com/products-and-services/delivering-digital-at-scale/software/petrel-subsurface-software/petrel" target="_blank" rel="noopener noreferrer">
<img src="images/logos/Petrel.svg" alt="Petrel" />
</a>
</div>
</div>
</div>

<div style="color: #FFFFFF;" class="animated-text">
  <p>for exploring Earth to uncover the unknown</p>
</div>

<br>

<div class="services-carousel">
<span class="header-services">What I do</span>
<div class="services">
<div class="services-slide">
<div class="service-item">
<img src="images/logos/WebGis.png" alt="WebGIS" />
<span>WebGIS Applications</span>
</div>
<div class="service-item">
<img src="images/logos/cartography.svg" alt="cartography" />
<span>Cartography</span>
</div>
<div class="service-item">
<img src="images/logos/remote_sensing1.svg" alt="remotesensing" />
<span>Remote Sensing</span>
</div>
<div class="service-item">
<img src="images/logos/geodata_analysis.png" alt="geodataanalysis" />
<span>Geodata Analysis</span>
</div>
<div class="service-item">
<img src="images/logos/geospatial_analysis.png" alt="geospatialanalysis" />
<span>Geospatial Analysis</span>
</div>
<div class="service-item">
<img src="images/logos/gis_mapping.png" alt="gismapping" />
<span>GIS Mapping</span>
</div>
<div class="service-item">
<img src="images/logos/geolocation_apps.png" alt="geolocationapps" />
<span>Geolocation Apps</span>
</div>
<div class="service-item">
<img src="images/logos/WebGis.png" alt="WebGIS" />
<span>WebGIS Applications</span>
</div>
<div class="service-item">
<img src="images/logos/gis_eco.png" alt="giseco" />
<span>GIS Ecology</span>
</div>
<div class="service-item">
<img src="images/logos/geolayers.png" alt="geolayers" />
<span>GIS and Geology integration</span>
</div>
<div class="service-item">
<img src="images/logos/seismic.gif" alt="seismicInterpretation" />
<span>2D & 3D Seismic Interpretation</span>
</div>
<div class="service-item">
<img src="images/logos/seismic-attributes.gif" alt="seismicInterpretation" />
<span>Seismic Attributes</span>
</div>
<div class="service-item">
<img src="images/logos/geological_mapping.png" alt="geologicalmapping" />
<span>Geological Mapping</span>
</div>
<div class="service-item">
<img src="images/logos/paleogeographic_mapping.gif" alt="paleogeographicmapping" />
<span>Paleogeographic Mapping</span>
</div>
<div class="service-item">
<img src="images/logos/devops.svg" alt="devops" />
<span>DevOps</span>
</div>

</div>
</div>
<a href="about/about-this-me.html" class="bottom-about-services">click here if you want to learn more about me</a>
</div>

<script>
var copy = document.querySelector(".skills-slide").cloneNode(true);
document.querySelector(".skills").appendChild(copy);

var copy = document.querySelector(".services-slide").cloneNode(true);
document.querySelector(".services").appendChild(copy);
</script>