init

assets/css/main.css

@@ -0,0 +1,172 @@
+/*
+Theme Name: Jason Stroff
+
+  1. >>> Headr Style
+  2. >>> Banner Style
+  3. >>> About Style
+  4. >>> Skills Style
+  5. >>> Experience Style
+  6. >>> Work Style
+  7. >>> Footer Style
+
+*/
+/*--------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------*/
+html {font-family: 'Inter', sans-serif;background-color:#FFF}
+body {font-family: 'Inter', sans-serif;overflow-x: hidden; background-color:#FFF; font-weight:400;font-style: normal; color:#373737; font-size:14px}
+a,a:hover,a:focus,i,input,button,input:focus,.transition {text-decoration: none;outline: none;transition-delay: 0s;transition-duration: 0.4s;transition-property: all;transition-timing-function: ease;box-shadow: none;}
+a{color: #000}
+iframe {border: 0;outline: none;}
+::-moz-selection {background:#000;text-shadow: none;color:#FFF}
+::selection {background:#000;text-shadow: none;color:#FFF}
+img {max-width: 100%;border: none;outline: none;height: auto;}
+input,textarea {border-radius: 0;resize: none;}
+ul {padding: 0;margin: 0;}
+@font-face {
+font-family: 'Inter', sans-serif;}
+input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: transparent;background-image: none;color:#000;}
+/* 1.2 Typography */
+h1,h2,h3,h4,h5,h6 {font-family: 'Inter', sans-serif;}
+figure{ margin: 0 }
+svg,img { max-width: 100%; height: auto; }
+
+/*-----------------------------------------------------------------
+  1. >>> Headr Style
+----------------------------------------------------------------*/
+.ds-header{ position: fixed; top: 0; width: 100%; z-index: 5; background-color: #FFF; padding: 70px 0;transition-delay: 0s;transition-duration: 0.4s;transition-property: all;transition-timing-function: ease; }
+.ds-header.ds-fixed-header{ padding:20px 0;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); }
+.ds-header-inner{ display: flex; justify-content: space-between; align-items: center; }
+.ds-logo{ text-transform: uppercase; font-size: 18px; letter-spacing: 3px; color: #000; display: flex; align-items: center; }
+.ds-logo span{ display:flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #000; border-radius: 4px; color: #FFF; font-size: 22px; font-weight: 600; text-align: center; margin-right: 12px; }
+.ds-logo:hover{ color: #000; }
+
+.ds-social{ list-style: none; display: flex; align-items: center; flex-wrap: wrap; }
+.ds-social li{ margin-left: 12px; }
+.ds-social li:first-child{ margin-left: 0; }
+.ds-social li a{ border-radius: 100%; color: #FFF; width: 24px; height: 24px; background-color: #F26464; display:flex; justify-content: center; align-items: center; text-align: center; font-size: 16px; }
+.ds-social li a:hover{ background-color: #000; color: #FFF; }
+/*-----------------------------------------------------------------
+  2. >>> Banner Style
+----------------------------------------------------------------*/
+.ds-banner section{ padding-left: 70px; padding-right: 100px; }
+.ds-banner section h1 span{ display: block; text-transform: uppercase; letter-spacing: 1px;  font-weight: 500; font-size: 16px; padding-bottom: 30px; }
+.ds-banner section h1{ font-weight: 600; font-size: 48px; line-height: 60px; color: #000; }
+.ds-numbervalulist{ list-style: none; display: flex; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; margin-top: 60px; }
+.ds-numbervalulist li{ margin-right: 60px; }
+.ds-numbervalulist li:last-child{ margin-right: 0; }
+.ds-numbervalulist strong{ display: block; color: #F26464; font-size: 36px; font-weight: 800; }
+.ds-numbervalulist span{ font-size: 16px; letter-spacing: 1px; }
+/*-----------------------------------------------------------------
+  3. >>> About Style
+----------------------------------------------------------------*/
+.ds-about-section{ padding-top: 60px; padding-bottom: 120px; }
+.ds-heading{ display: inline-block; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; border-bottom: 3px solid #F26464; padding-bottom: 7px; margin-bottom: 23px; }
+.ds-about-section p{ color: #373737; font-size: 24px; line-height: 40px; font-weight: 300; margin-bottom: 60px; }
+
+.ds-button{ display: inline-block; text-transform: uppercase;font-size: 12px;line-height: 13px;font-weight: 600;letter-spacing: 3px; color:#F26464; padding:17px 30px;  border: 2px solid #F26464;border-radius: 60px; }
+.ds-button:hover{ background-color:#F26464 ; color: #FFF; }
+.ds-arrow-button i{ display: inline-block; vertical-align: middle; }
+/*-----------------------------------------------------------------
+  4. >>> Skills Style
+----------------------------------------------------------------*/
+.ds-skills-section{ padding-bottom: 105px; }
+.ds-skills-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; margin-top: 11px; }
+.ds-skills-list li{ display: inline-block; color: #373737; font-size: 16px; padding:10px 20px; background-color: #FFF; border: 1px solid #D7D7D7;
+  border-radius: 27px; margin-right: 15px; margin-bottom: 15px;  font-weight: 500;}
+
+/*-----------------------------------------------------------------
+  5. >>> Experience Style
+----------------------------------------------------------------*/
+.ds-experience-section{ padding-bottom: 120px; }
+.ds-experience-list section{ padding-right: 70px; }
+.ds-experience-list{ padding-top: 15px; }
+.ds-officename{ font-size: 24px; font-weight: 300; margin-bottom:10px; }
+.ds-officeimage{ height: 40px; }
+.ds-experience-list span{ display: block; }
+span.ds-year{ color: #373737; font-size: 14px; font-weight: 700; padding-bottom: 10px; }
+span.ds-department{ color: #373737; font-weight: 500; font-size: 18px; padding-bottom: 30px; }
+.ds-experience-list p{ font-size: 16px; line-height: 24px; font-weight: 300; }
+.ds-experience-list ul{ list-style: none; padding: 0; margin: 0; padding-top: 10px; }
+.ds-experience-list ul li{font-size: 16px; line-height: 24px; font-weight: 300; padding-left: 28px; position:relative; margin-bottom: 20px;}
+.ds-experience-list ul li:before{ content: ""; position: absolute; left: 0; top: 10px; border-radius: 100%; width: 8px; height: 8px; background-color: #373737; }
+/*-----------------------------------------------------------------
+  6. >>> Work Style
+----------------------------------------------------------------*/
+.ds-work-section{ padding-bottom: 80px; }
+.ds-work-list{ padding-left: 70px; padding-top:40px; padding-right: 70px; background-color:#F6F8FA; margin-bottom: 40px; }
+.ds-work-list section{ padding-top: 20px; padding-right: 120px; }
+.ds-work-tilte{ color: #000; font-size: 30px; line-height: 36px; font-weight: 600; margin-bottom: 30px; }
+.ds-work-list p{ font-weight: 300; font-size: 18px; line-height: 30px; }
+.ds-work-list .ds-button{ margin-top: 20px; }
+
+.ds-work-det-hed{ padding-top: 42px; padding-bottom: 80px; }
+.ds-work-det-title{ font-weight: 600; color:#000; font-size: 48px; margin-bottom: 20px; }
+.ds-work-det-dep{ display:block;font-weight: 600; color: #000; font-size: 18px; }
+.ds-work-content-sec{ padding: 100px 0; }
+.ds-work-content-sec p{ font-size: 18px; line-height: 36px; margin-bottom: 30px; }
+.ds-work-content-sec h2{ font-size: 30px; font-weight: 700; margin-bottom: 30px; }
+.ds-work-content-sec ul{ list-style: none; padding: 0; margin: 0; }
+.ds-work-content-sec li{font-size: 18px; line-height: 36px;  padding-left: 28px; position:relative; margin-bottom: 20px;}
+.ds-work-content-sec li:before{ content: ""; position: absolute; left: 0; top: 13px; border-radius: 100%; width: 8px; height: 8px; background-color: #373737; }
+/*-----------------------------------------------------------------
+  7. >>> Footer Style
+----------------------------------------------------------------*/
+.ds-footer{ background-color: #000; padding: 120px 0; }
+.ds-footer section { padding-bottom: 97px; }
+.ds-footer section span{ color: rgba(255,255,255,0.5); text-transform: uppercase; font-weight: 700; font-size: 16px; letter-spacing: 1px; display: block; padding-bottom: 20px; }
+.ds-footer section  h4{ color: #FFF; font-size: 48px; font-weight: 700; }
+.ds-footer section p{ letter-spacing: 1.13px; color: #FFF; font-size: 18px; margin-bottom: 40px; }
+.ds-copyright{ color: rgba(255,255,255,0.5); letter-spacing: 1px; font-size: 16px; }
+.ds-copyright a{color: rgba(255,255,255,0.5);}
+.ds-copyright a:hover{ color: #F26464; }
+
+
+
+/*-------------------------------------------------------------------------------
+ Responsive XS Style @media (max-width: 767px) 
+-------------------------------------------------------------------------------*/
+@media (max-width: 768px) {
+	.ds-header,.ds-header.ds-fixed-header{ padding: 15px 0; }
+	.ds-banner,.ds-about-section,.ds-skills-section,.ds-experience-section,.ds-work-section,.ds-work-details-section{ padding-left: 10px; padding-right: 10px; }
+	.ds-logo{ font-size: 0; }
+	.ds-banner figure{ padding: 30px 0; }
+	.ds-banner section{ padding-left: 0;padding-right: 0; }
+	.ds-banner section h1 span{ padding-bottom: 0; }
+	.ds-banner section h1,.ds-work-det-title{ font-size: 30px; line-height: 40px; }
+	.ds-numbervalulist{ margin-top: 20px; }
+	.ds-numbervalulist li{ margin-right: 30px; }
+	.ds-numbervalulist strong{ font-size: 30px; }
+	.ds-numbervalulist span{ font-size: 14px; }
+	.ds-about-section{ padding-bottom: 60px; }
+	.ds-about-section p,.ds-work-content-sec p,.ds-work-content-sec li{ font-size: 15px; line-height: 30px;margin-bottom: 30px; }
+	.ds-skills-list li{ margin-right: 10px; margin-bottom: 10px; font-size: 14px; }
+	.ds-skills-section .col-12,.ds-experience-list .col-12{ margin-bottom: 40px; }
+	.ds-skills-section,.ds-work-section, .ds-experience-section{ padding-bottom: 0; }
+	.ds-experience-list section{ padding-right: 0; }
+	.ds-work-list{ padding: 30px; }
+	.ds-work-list p{font-size: 15px; line-height: 30px;}
+	.ds-footer{ padding: 60px 10px; }
+	.ds-footer section h4{ font-size: 40px; }
+	.ds-copyright{ font-size: 14px; }
+	.ds-footer section{ padding-bottom: 30px; }
+	.ds-button{ padding: 11px 10px; }
+	.ds-work-details-section{ padding-top: 30px; }
+	.ds-work-det-title{ margin-bottom: 7px; }
+	.ds-work-content-sec h2{ font-size: 20px; }
+	.ds-work-content-sec{ padding: 30px 0; }
+	.ds-work-list section{ padding-right: 0; padding-bottom: 30px; }
+}
+
+
+@media (min-width: 768px) and (max-width: 991px) {
+	.ds-work-list section{ padding-right: 30px; }
+
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+	.ds-banner section{ padding-right: 0; }
+	.ds-work-list section{ padding-right: 30px; padding-bottom:60px; }
+
+
+}

assets/fav/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

assets/js/main.js

@@ -0,0 +1,18 @@
+jQuery(document).ready(function($) {
+
+
+	var mastheadheight = $('.ds-header').outerHeight();
+	//console.log(mastheadheight);
+	$(".ds-banner,.ds-main-section").css("margin-top" , mastheadheight);
+
+	$(window).scroll(function(){
+	    if ($(window).scrollTop() >= 10) {
+	        $('.ds-header').addClass('ds-fixed-header');
+	    }
+	    else {
+	        $('.ds-header').removeClass('ds-fixed-header');
+	    }
+	}).scroll();
+
+
+});

index.html

@@ -0,0 +1,350 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+      <!-- Google Fots -->
+     <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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+      <!-- Remixicon Icon -->
+      <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+      <!-- Remixicon Icon -->
+      <!-- Bootstrap CSS -->
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+      <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+      <!-- Main CSS -->
+      <link href="assets/css/main.css" rel="stylesheet">
+
+      <link rel="apple-touch-icon" sizes="180x180" href="/assets/fav/apple-touch-icon.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="/assets/fav/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="/assets/fav/favicon-16x16.png">
+      <link rel="manifest" href="/assets/fav/site.webmanifest">
+
+    <title>Julien Froidefond </title>
+  </head>
+  <body>
+   
+    <!-- header -->
+    <header class="ds-header" id="site-header">
+        <div class="container">
+            <div class="ds-header-inner">
+              <!-- logo -->
+              <a href="index.html" class="ds-logo">
+                <span>J</span>Julien Froidefond
+              </a>
+              <!-- logo -->
+              <!-- social -->
+              <ul class="ds-social">
+                <li><a href="https://github.com/julienfroidefond" target="_blank"><i class="ri-github-fill"></i></a></li>
+                <li><a href="https://fr.linkedin.com/in/julienfroidefond" target="_blank"><i class="ri-linkedin-fill"></i></a></li>
+                <li><a href="https://medium.com/@julienfroidefond" target="_blank"><i class="ri-medium-fill"></i></a></li>
+              </ul>
+              <!-- social -->
+            </div>
+        </div>
+    </header>
+    <!-- header -->
+    <!-- banner -->
+    <div class="ds-banner">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 col-xxl-5">
+            <figure>
+              <img src="assets/images/1671193341282.jpeg">
+            </figure>
+          </div>
+          <div class="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7 col-xxl-7">
+            <section>
+                <h1>
+                  <span>HI THERE</span>
+                  I’m Julien <br> Principal Engineer based in Bordeaux.
+                </h1>
+                <ul class="ds-numbervalulist">
+                  <li>
+                    <strong>12+</strong>
+                    <span>Experience</span>
+                  </li>
+                  <li>
+                    <strong>4</strong>
+                    <span>Companies</span>
+                  </li>
+                  <li>
+                    <strong>50+</strong>
+                    <span>Happy Collabs</span>
+                  </li>
+                </ul>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- banner -->
+
+    <!-- about -->
+    <div class="ds-about-section">
+      <div class="container">
+        <section>
+            <h2 class="ds-heading">About Me</h2>
+            <p>
+              Passionate about improving software development, I lead a transformative team at our e-commerce company of over 600 members in IT. With a solid industry background, I drive strategic initiatives for collaboration and innovation, emphasizing flexibility in our ever-evolving market. As a change facilitator, I work closely with development teams, identifying opportunities for improvement and implementing efficient processes, guiding and supporting developers in adopting new practices and technologies for continuous learning. Notable achievements include successfully implementing new development methods, integrating quality practices like test automation, and optimizing processes for faster project delivery.
+            </p>
+            <!-- <div class="ds-button-sec text-center">
+                <a href="#" class="ds-button">Download Resume</a>
+            </div> -->
+        </section>
+      </div>
+    </div>
+    <!-- about -->
+
+    <!--  Skills -->
+    <div class="ds-skills-section">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
+             <h2 class="ds-heading">Core Skills</h2>
+             <ul class="ds-skills-list">
+                <li>Tech leadership</li>
+                <li>Javascript expertise</li>
+                <li>Architecture</li>
+                <li>Craftsmanship</li>
+             </ul>
+          </div>
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
+            <h2 class="ds-heading">Other Skills</h2>
+            <ul class="ds-skills-list">
+              <li>React</li>
+              <li>Node.js</li>
+              <li>MongoDB/PG/Sql</li>
+              <li>Grafana/Kibana</li>
+              <li>Java/.Net/Python</li>
+              <li>Devops</li>
+              <li>HTML/CSS/LESS/SASS</li>
+              <li>Management</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--  Skills -->
+
+   <!-- Experience -->
+   <div class="ds-experience-section">
+     <div class="container">
+        <h2 class="ds-heading">Work Experience</h2>
+        <div class="row ds-experience-list">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
+              <section>
+                <span class="ds-year">2023 - Present</span>
+                <h3 class="ds-officename">
+                  <img class="ds-officeimage" src="assets/images/peaksys_logo.jpeg">
+                  Peaksys
+                </h3>
+                <span class="ds-department">Principal engineer</span>
+                <p>
+                  As a Principal Engineer, my mission is to architect and lead the technical vision of our projects, leveraging my expertise to solve complex problems, drive innovation, and ensure the highest standards of software excellence. I collaborate closely with cross-functional teams, mentoring and empowering engineers to achieve optimal performance, all while contributing to the overall success and growth of the organization through cutting-edge technology and impactful solutions.
+                </p>
+                <!-- <ul>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+                </ul> -->
+              </section>
+            </div>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
+              <section>
+                <span class="ds-year">2019 - 2023</span>
+                <h3 class="ds-officename">
+                  <img class="ds-officeimage" src="assets/images/peaksys_logo.jpeg">
+                  Peaksys
+                </h3>
+                <span class="ds-department">Technical manager</span>
+                <p>
+                  As a Technical Manager, my role is to orchestrate and lead the technical aspects of our projects, ensuring seamless execution and delivery. Leveraging a blend of strategic thinking and hands-on technical expertise, I collaborate with diverse teams to drive innovation, implement efficient solutions, and maintain the highest standards of software excellence. Through mentorship and empowerment, I guide our engineers in achieving peak performance, contributing to the overall success and growth of the organization in a rapidly evolving technological landscape.
+                </p>
+                <!-- <ul>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                </ul> -->
+              </section>
+            </div>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
+              <section>
+                <span class="ds-year">2017 - 2019</span>
+                <h3 class="ds-officename">
+                  <img class="ds-officeimage" src="assets/images/davidson_consulting_logo.jpeg">
+                  Davidson consulting
+                </h3>
+                <span class="ds-department">Front end expert</span>
+                <p>
+                  Within the mobile steering team, I serve as the guardian of performance and quality for both the Cdiscount mobile site and application. My responsibilities encompass performance analysis, code reviews through pull requests, and effective communication within the mobile development teams. The mobile platform operates on React, utilizing an ecosystem consisting of Redux, Redux Saga, and Jest for unit testing, while the application itself is built on React Native. My focus is on continuous optimization of performance and quality to deliver an outstanding user experience.
+                </p>
+                <!-- <ul>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                </ul> -->
+              </section>
+            </div>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
+              <section>
+                <span class="ds-year">2015 - 2017</span>
+                <h3 class="ds-officename">Front-end expert / Developer</h3>
+                <span class="ds-department">
+                  <img class="ds-officeimage" src="assets/images/atixnet_logo.jpeg">
+                  Atixnet
+                </span>
+                <p>
+                  At Atixnet, we specialize in crafting innovative and tailor-made web applications for our clients, such as RATP Dev, who expect from us secure, high-performance, and user-friendly applications. In this dynamic environment, I leverage my expertise in Front-End technologies (Angular, Sass, UX design, etc.) and contribute to the development of backends using Symfony (PHP), Meteor.js/Hapi.js (Node.js), as well as mobile applications (Cordova, Ionic).
+
+Drawing from my past experience, I bring a product-oriented vision and focus my efforts on fostering innovation. In line with this perspective, I spearhead an event called WAX, aimed at cultivating innovation within the company.
+                </p>
+                <!-- <ul>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                </ul> -->
+              </section>
+            </div>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
+              <section>
+                <span class="ds-year">2013 - 2015</span>
+                <h3 class="ds-officename">Lead dev Front End</h3>
+                <span class="ds-department">
+                  <img class="ds-officeimage" src="assets/images/visiativ_logo.jpeg">
+                  Isotools
+                </span>
+                <p>
+                  Within the service team, my role encompassed recruiting, training, and overseeing the development and project integration team under the Isotools platform, a product by Visiativ Software.
+
+I also spearheaded the verticalization efforts, focusing on designing technological tools for the service team.
+
+Key technologies involved included Javascript (object-oriented patterns, Jquery, Knockout, MVVM pattern, etc.), Html5/CSS 2/3, Less/Bootstrap, WCF web services, C#/.Net, ITL (Isotools Template Language), Talend, Solr, MSSQL, among others.
+
+My primary skills included serving as a technical lead, front-end architect, verticalization of R&D projects, front-end developer, leading Nearshore teams, and project planning and management.
+                </p>
+                <!-- <ul>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                </ul> -->
+              </section>
+            </div>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
+              <section>
+                <span class="ds-year">2010 - 2013</span>
+                <h3 class="ds-officename">Dev Front End</h3>
+                <span class="ds-department">
+                  <img class="ds-officeimage" src="assets/images/visiativ_logo.jpeg">
+                  Isotools
+                </span>
+                <p>
+                  Within the service team, my mission centered around project development and integration, serving as the bridge between the R&D and integration teams under the Isotools platform.
+
+                  Key technologies utilized included Html5/CSS 2/3, Javascript (Jquery, YUI2, etc.), C#/.Net, ITL (Isotools Template Language), Talend, MSSQL, among others.
+
+                  Isotools, a Windows-based CMS, facilitates the publication of intranet, showcase, and B2C/B2B e-commerce sites. For more information, you can visit http://www.isotools.com.
+                </p>
+                <!-- <ul>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut.</li>
+                </ul> -->
+              </section>
+            </div>
+        </div>
+     </div>
+   </div>
+    <!-- Experience -->
+
+   <!--  Work -->
+   <!-- <div class="ds-work-section">
+     <div class="container">
+          <h2 class="ds-heading">Latest works</h2>
+          <div class="ds-work-list-section">
+            <div class="ds-work-list">
+              <div class="row">
+                  <div class="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7 col-xxl-7">
+                      <section>
+                          <h3 class="ds-work-tilte">Tripy mobile app</h3>
+                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut, congue enim. Sed fermentum nulla tellus, quis efficitur mauris tristique efficitur. Aliquam rhoncus sem sed ullamcorper venenatis. Aenean malesuada eu orci non sodales. </p>
+                          <a href="works-setails.html" class="ds-button">Details</a>
+                      </section>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 col-xxl-5">
+                      <figure><img src="assets/images/work-1.jpg"></figure>
+                  </div>
+              </div>
+            </div>
+            <div class="ds-work-list">
+              <div class="row">
+                  <div class="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7 col-xxl-7">
+                      <section>
+                          <h3 class="ds-work-tilte">Hello mobile app</h3>
+                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut, congue enim. Sed fermentum nulla tellus, quis efficitur mauris tristique efficitur. Aliquam rhoncus sem sed ullamcorper venenatis. Aenean malesuada eu orci non sodales. </p>
+                          <a href="works-setails.html" class="ds-button">Details</a>
+                      </section>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 col-xxl-5">
+                      <figure><img src="assets/images/work-2.jpg"></figure>
+                  </div>
+              </div>
+            </div>
+            <div class="ds-work-list">
+              <div class="row">
+                  <div class="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7 col-xxl-7">
+                      <section>
+                          <h3 class="ds-work-tilte">Cute cookies app</h3>
+                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sem maximus, ornare metus ut, congue enim. Sed fermentum nulla tellus, quis efficitur mauris tristique efficitur. Aliquam rhoncus sem sed ullamcorper venenatis. Aenean malesuada eu orci non sodales. </p>
+                          <a href="works-setails.html" class="ds-button">Details</a>
+                      </section>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 col-xxl-5">
+                       <figure><img src="assets/images/work-3.jpg"></figure>
+                  </div>
+              </div>
+            </div>
+          </div>
+     </div>
+   </div> -->
+   <!--  Work -->
+   
+   <!--  footer -->
+   <footer class="ds-footer text-center">
+     <div class="container">
+        <section>
+          <span>Stay in touch</span>
+          <h4>Ready to talk?</h4>
+          <p>Feel free to contact me</p>
+          <a href="mailto:julienfroidefond@gmail.com" class="ds-button">Lets Talk</a>
+        </section>
+        <!-- <span class="ds-copyright">© 2022 All rights reserved. Free minimal bootstrap template by <a href="https://designstub.com/" target="_blank">Designstub</a>.</span> -->
+     </div>
+   </footer>
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <!-- Option 1: Bootstrap Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+    <!-- Option 2: Separate Popper and Bootstrap JS -->
+    <!--
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+    -->
+    
+    <script src="assets/js/main.js"></script>
+
+   <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HDHN579JPC"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-HDHN579JPC');
+    </script>
+
+  </body>
+</html>

works-setails.html

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+      <!-- Google Fots -->
+     <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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+      <!-- Remixicon Icon -->
+      <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+      <!-- Remixicon Icon -->
+      <!-- Bootstrap CSS -->
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+      <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+      <!-- Main CSS -->
+      <link href="assets/css/main.css" rel="stylesheet">
+
+
+    <title>Jason Stroff</title>
+  </head>
+  <body>
+   
+    <!-- header -->
+    <header class="ds-header" id="site-header">
+        <div class="container">
+            <div class="ds-header-inner">
+              <!-- logo -->
+              <a href="index.html" class="ds-logo">
+                <span>J</span>Jason Stroff
+              </a>
+              <!-- logo -->
+              <!-- social -->
+              <ul class="ds-social">
+                <li><a href="#" target="_blank"><i class="ri-github-fill"></i></a></li>
+                <li><a href="#" target="_blank"><i class="ri-stack-overflow-line"></i></a></li>
+                <li><a href="#" target="_blank"><i class="ri-linkedin-fill"></i></a></li>
+              </ul>
+              <!-- social -->
+            </div>
+        </div>
+    </header>
+    <!-- header -->
+   
+   <main class="ds-main-section">
+     <div class="container">
+        <div class="ds-work-details-section">
+            <div class="text-center">
+              <a href="index.html" class="ds-button ds-arrow-button"><i class="ri-arrow-left-s-line"></i> BAck</a>
+            </div>
+            <div class="row justify-content-center">
+              <div class="col-12 col-sm-12 col-md-10 col-lg-10 col-xl-10 col-xxl-10">
+                  <header class="ds-work-det-hed">
+                      <h1 class="ds-work-det-title">Tripy mobile app</h1>
+                      <span class="ds-work-det-dep">Mobile development - 2019</span>
+                  </header>
+                  <figure><img src="assets/images/work-details-image-1.jpg"></figure>
+                  <div class="ds-work-content-sec">
+                      <div class="row justify-content-center">
+                          <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
+                              <p>Phasellus non faucibus purus, a venenatis diam. In faucibus orci mauris, porttitor egestas diam elementum non. Vestibulum non metus tempus, sagittis libero sed, euismod purus. Cras dolor nulla, hendrerit vitae libero eu, finibus ultricies dolor. Vestibulum non metus tempus, sagittis libero sed, euismod purus. Cras dolor nulla, hendrerit vitae libero eu, finibus ultricies dolor.</p>
+
+                              <p>Curabitur quis tortor sit amet ligula lobortis auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ut turpis eget urna egestas maximus. </p>
+
+                              <h2>Sub Title for project</h2>
+                              <p>Phasellus non faucibus purus, a venenatis diam. In faucibus orci mauris, porttitor egestas diam elementum non. Vestibulum non metus tempus, sagittis libero sed, euismod purus. Cras dolor nulla, hendrerit vitae libero eu, finibus ultricies dolor. Vestibulum non metus tempus, sagittis libero sed, euismod purus. Cras dolor nulla, hendrerit vitae libero eu, finibus ultricies dolor.</p>
+
+                              <ul>
+                                <li>Phasellus non faucibus purus, a venenatis diam. In faucibus orci mauris, porttitor egestas diam elementum non.</li>
+                                 <li>Vestibulum non metus tempus, sagittis libero sed, euismod purus.</li>
+                                 <li>Vestibulum non metus tempus, sagittis libero sed, euismod purus. Cras dolor nulla, hendrerit vitae libero eu, finibus ultricies dolor. Vestibulum non metus tempus.</li>
+                              </ul>
+                          </div>
+                      </div>
+                  </div>
+                 <figure><img src="assets/images/work-details-image-2.jpg"></figure>
+                  <div class="ds-work-content-sec">
+                      <div class="row justify-content-center">
+                          <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
+                              <p>Phasellus non faucibus purus, a venenatis diam. In faucibus orci mauris, porttitor egestas diam elementum non. Vestibulum non metus tempus, sagittis libero sed, euismod purus. Cras dolor nulla, hendrerit vitae libero eu, finibus ultricies dolor. Vestibulum non metus tempus, sagittis libero sed, euismod purus. Cras dolor nulla, hendrerit vitae libero eu, finibus ultricies dolor.</p>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+            </div>
+        </div>
+     </div>
+   </main>
+
+   <!--  footer -->
+   <footer class="ds-footer text-center">
+     <div class="container">
+        <section>
+          <span>Stay in touch</span>
+          <h4>Ready to talk?</h4>
+          <p>Feel free to contact us</p>
+          <a href="mailto:test@test.com" class="ds-button">Lets Talk</a>
+        </section>
+        <span class="ds-copyright">© 2022 All rights reserved. Free minimal bootstrap template by <a href="https://designstub.com/" target="_blank">Designstub</a>.</span>
+     </div>
+   </footer>
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <!-- Option 1: Bootstrap Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+    <!-- Option 2: Separate Popper and Bootstrap JS -->
+    <!--
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+    -->
+    <script src="assets/js/main.js"></script>
+  </body>
+</html>