commit ef9038771b47571f7098b7ee33c51753f15a6f7c Author: Julien Froidefond Date: Thu Dec 11 13:08:57 2025 +0100 init diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/assets/css/.DS_Store b/assets/css/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/assets/css/.DS_Store differ diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..9051e69 --- /dev/null +++ b/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; } + + +} diff --git a/assets/fav/android-chrome-192x192.png b/assets/fav/android-chrome-192x192.png new file mode 100644 index 0000000..590eba9 Binary files /dev/null and b/assets/fav/android-chrome-192x192.png differ diff --git a/assets/fav/android-chrome-512x512.png b/assets/fav/android-chrome-512x512.png new file mode 100644 index 0000000..eb3d70d Binary files /dev/null and b/assets/fav/android-chrome-512x512.png differ diff --git a/assets/fav/apple-touch-icon.png b/assets/fav/apple-touch-icon.png new file mode 100644 index 0000000..fe85849 Binary files /dev/null and b/assets/fav/apple-touch-icon.png differ diff --git a/assets/fav/favicon-16x16.png b/assets/fav/favicon-16x16.png new file mode 100644 index 0000000..22f2f26 Binary files /dev/null and b/assets/fav/favicon-16x16.png differ diff --git a/assets/fav/favicon-32x32.png b/assets/fav/favicon-32x32.png new file mode 100644 index 0000000..b81a4ae Binary files /dev/null and b/assets/fav/favicon-32x32.png differ diff --git a/assets/fav/favicon.ico b/assets/fav/favicon.ico new file mode 100644 index 0000000..761198c Binary files /dev/null and b/assets/fav/favicon.ico differ diff --git a/assets/fav/site.webmanifest b/assets/fav/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/assets/images/1671193341282.jpeg b/assets/images/1671193341282.jpeg new file mode 100644 index 0000000..8cfcdf2 Binary files /dev/null and b/assets/images/1671193341282.jpeg differ diff --git a/assets/images/atixnet_logo.jpeg b/assets/images/atixnet_logo.jpeg new file mode 100644 index 0000000..6bd56c7 Binary files /dev/null and b/assets/images/atixnet_logo.jpeg differ diff --git a/assets/images/davidson_consulting_logo.jpeg b/assets/images/davidson_consulting_logo.jpeg new file mode 100644 index 0000000..6a9192a Binary files /dev/null and b/assets/images/davidson_consulting_logo.jpeg differ diff --git a/assets/images/peaksys_logo.jpeg b/assets/images/peaksys_logo.jpeg new file mode 100644 index 0000000..bef8817 Binary files /dev/null and b/assets/images/peaksys_logo.jpeg differ diff --git a/assets/images/profile-image.jpg b/assets/images/profile-image.jpg new file mode 100644 index 0000000..b69d5b7 Binary files /dev/null and b/assets/images/profile-image.jpg differ diff --git a/assets/images/visiativ_logo.jpeg b/assets/images/visiativ_logo.jpeg new file mode 100644 index 0000000..7e39355 Binary files /dev/null and b/assets/images/visiativ_logo.jpeg differ diff --git a/assets/images/work-1.jpg b/assets/images/work-1.jpg new file mode 100644 index 0000000..cdf3ea4 Binary files /dev/null and b/assets/images/work-1.jpg differ diff --git a/assets/images/work-2.jpg b/assets/images/work-2.jpg new file mode 100644 index 0000000..5562a96 Binary files /dev/null and b/assets/images/work-2.jpg differ diff --git a/assets/images/work-3.jpg b/assets/images/work-3.jpg new file mode 100644 index 0000000..b5283ef Binary files /dev/null and b/assets/images/work-3.jpg differ diff --git a/assets/images/work-details-image-1.jpg b/assets/images/work-details-image-1.jpg new file mode 100644 index 0000000..563998a Binary files /dev/null and b/assets/images/work-details-image-1.jpg differ diff --git a/assets/images/work-details-image-2.jpg b/assets/images/work-details-image-2.jpg new file mode 100644 index 0000000..e7b3ddf Binary files /dev/null and b/assets/images/work-details-image-2.jpg differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..7ed8bb2 --- /dev/null +++ b/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(); + + +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a2e6efd --- /dev/null +++ b/index.html @@ -0,0 +1,350 @@ + + + + + + + + + + + + + + + + + + + + + + + + + Julien Froidefond + + + + + + + +
+
+
+
+
+ +
+
+
+
+

+ HI THERE + I’m Julien
Principal Engineer based in Bordeaux. +

+
    +
  • + 12+ + Experience +
    • +
  • + 4 + Companies +
    • +
  • + 50+ + Happy Collabs +
    • +
+
+
+
+
+
+ + + +
+
+
+

About Me

+

+ 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. +

+ +
+
+
+ + + +
+
+
+
+

Core Skills

+
    +
  • Tech leadership
    • +
  • Javascript expertise
    • +
  • Architecture
    • +
  • Craftsmanship
    • +
+
+
+

Other Skills

+
    +
  • React
    • +
  • Node.js
    • +
  • MongoDB/PG/Sql
    • +
  • Grafana/Kibana
    • +
  • Java/.Net/Python
    • +
  • Devops
    • +
  • HTML/CSS/LESS/SASS
    • +
  • Management
    • +
+
+
+
+
+ + + +
+
+

Work Experience

+
+
+
+ 2023 - Present +

+ + Peaksys +

+ Principal engineer +

+ 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. +

+ +
+
+
+
+ 2019 - 2023 +

+ + Peaksys +

+ Technical manager +

+ 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. +

+ +
+
+
+
+ 2017 - 2019 +

+ + Davidson consulting +

+ Front end expert +

+ 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. +

+ +
+
+
+
+ 2015 - 2017 +

Front-end expert / Developer

+ + + Atixnet + +

+ 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. +

+ +
+
+
+
+ 2013 - 2015 +

Lead dev Front End

+ + + Isotools + +

+ 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. +

+ +
+
+
+
+ 2010 - 2013 +

Dev Front End

+ + + Isotools + +

+ 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. +

+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/works-setails.html b/works-setails.html new file mode 100644 index 0000000..1b75d95 --- /dev/null +++ b/works-setails.html @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + Jason Stroff + + + + + + + +
+
+
+
+ BAck +
+
+
+
+

Tripy mobile app

+ Mobile development - 2019 +
+
+
+
+
+

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.

+ +

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.

+ +

Sub Title for project

+

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.

+ +
    +
  • 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.
    • +
  • Vestibulum non metus tempus, sagittis libero sed, euismod purus. Cras dolor nulla, hendrerit vitae libero eu, finibus ultricies dolor. Vestibulum non metus tempus.
    • +
+
+
+
+
+
+
+
+

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.

+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + \ No newline at end of file