<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="google-site-verification" content="mv4xzEeweE4aGyqH-dqNTBVAjNKMzm7IKdu6-DTW_VY" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Karine SANCHE, webdesigner freelance. Votre communication numérique. Création de sites internet professionnels statiques ou dynamiques (php et base de données MySQL), adaptés à vos besoins. Développement d'applications pour Android. Relookage et administration de sites. Développement internet et logiciel" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow" />
<meta name="Date-Creation-yyyymmdd" content="20050719" />
<meta name="Date-Revision-yyyymmdd" content="20260706" />
<meta name="revisit-after" content="15 days" />
<meta http-equiv="Content-Language" content="FR" />
<meta name="Classification" content="graphiste freelance, concepteur developpeur php, conception de sites web, creation de sites" />
<meta name="keywords" content="webdesign, internet, creation de sites web, conception de sites web, webmaster, charte graphique, php, infographiste web, sites pour veterinaires, Nantes, freelance, télétravail, Pays de la Loire" />
<meta name="Author" content="Karine SANCHE - KDJ Webdesign" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:type" content="article" />
<meta property="og:title" content="KDJ Graphiste webdesigner développeur free-lance Nantes" />
<meta property="og:description" content="Karine SANCHE, webdesigner freelance. Votre communication numérique. Création de sites internet professionnels statiques ou dynamiques (php et base de données MySQL), adaptés à vos besoins. Développement d'applications pour Android. Relookage et administration de sites. Développement internet et logiciel" />
<meta property="og:url" content="https://www.kdj-webdesign.com//" />
<meta property="og:site_name" content="KDJ Webdesign conception logiciels, sites web et applications mobiles" />
<meta property="og:updated_time" content="2026-07-06T14:36:42+00:00" />
<meta property="og:image" content="https://www.kdj-webdesign.com/images/logo_bleu.png" />
<meta property="og:image:width" content="177" />
<meta property="og:image:height" content="59" />
<meta property="og:image:alt" content="KDJ Webdesign conception logiciels, sites web et applications mobiles" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="Karine SANCHE, webdesigner freelance. Votre communication numérique. Création de sites internet professionnels statiques ou dynamiques (php et base de données MySQL), adaptés à vos besoins. Développement d'applications pour Android. Relookage et administration de sites. Développement internet et logiciel" />
<meta name="twitter:title" content="KDJ Graphiste webdesigner développeur free-lance Nantes" />
<meta name="twitter:image" content="https://www.kdj-webdesign.com/images/logo_bleu.png" />
<script src="scripts/jquery.min1.12.4.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="scripts/jquery.wavify" type="text/javascript"></script>
<script src="scripts/snap.svg-min.js" type="text/javascript"></script>
<script src="scripts/utils.js" type="text/javascript"></script>
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<link href="css/open_sans.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet" />
<link href="css/hamburgers.min.css" rel="stylesheet">
<link href="css/portfolio.css" rel="stylesheet" type="text/css" />
<link href="css/portfolio2.css" rel="stylesheet" type="text/css" />
<link href="css/grid.css" rel="stylesheet" type="text/css" /> <!-- grid -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/styles_mobile.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style_normal.css" rel="stylesheet" type="text/css" title="normal" />
<link href="css/style_grand.css" rel="alternate stylesheet" type="text/css" title="grand" /> <!-- taille de police -->
<link href="css/style_contraste.css" rel="alternate stylesheet" type="text/css" title="contraste" /> <!-- police contrastee -->
<link href="css/styles_impression.css" rel="stylesheet" type="text/css" media="print" />
<!--[if lt IE 7]>
<style type="text/css">
#wrapper { height:100%; }
</style>
<![endif]-->
<title>KDJ Graphiste webdesigner développeur free-lance Nantes</title>
<script src="scripts/tarteaucitron.js"></script>
<script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "", /* Privacy policy url */
"bodyPosition": "bottom", /* or top to bring it as first element for accessibility */
"hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
"cookieName": "tarteaucitron", /* Cookie name */
"orientation": "bottom", /* Banner position (top - bottom) */
"groupServices": false, /* Group services by category */
"serviceDefaultState": "wait", /* Default state (true - wait - false) */
"showAlertSmall": false, /* Show the small banner on bottom right */
"cookieslist": false, /* Show the cookie list */
"closePopup": false, /* Show a close X on the banner */
"showIcon": true, /* Show cookie icon to manage cookies */
//"iconSrc": "", /* Optionnal: URL or base64 encoded image */
"iconPosition": "BottomRight", /* BottomRight, BottomLeft, TopRight and TopLeft */
"adblocker": false, /* Show a Warning if an adblocker is detected */
"DenyAllCta" : true, /* Show the deny all button */
"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
"highPrivacy": true, /* HIGHLY RECOMMANDED Disable auto consent */
"handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */
"removeCredit": false, /* Remove credit link */
"moreInfoLink": true, /* Show more info link */
"useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */
"useExternalJs": false, /* If false, the tarteaucitron.js file will be loaded */
//"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for multisite */
"readmoreLink": "", /* Change the default readmore link */
"mandatory": true, /* Show a message about mandatory cookies */
"mandatoryCta": true /* Show the disabled accept button when mandatory on */
});
</script>
<script type="text/javascript">
(tarteaucitron.job = tarteaucitron.job || []).push('hcaptcha');
tarteaucitron.user.matomoId = 6;
(tarteaucitron.job = tarteaucitron.job || []).push('matomo');
tarteaucitron.user.matomoHost = '//analytics.eurokdj.com/';
</script>
</head>
<body>
<div id="principal">
<a class="skip-link screen-reader-text" tabindex="-1" href="#contenu">Aller au contenu principal</a>
<a name="top"></a>
<!-- header -->
<header>
<img src="images/patate.svg" width="465" height="447" class="svg cyan header" alt="Forme cyan animée" />
<img src="images/patate.svg" width="465" height="447" class="svg magenta header" alt="Forme magenta animée" />
<img src="images/patate.svg" width="465" height="447" class="svg magenta2 header" alt="Forme magenta animée" />
<!-- menu mobile -->
<div id="hamburger-wrapper">
<a href="index.php" class="logo"><img src="images/logo_bleu.png" alt="Logo KDJ Webdesign" /></a>
<button class="hamburger hamburger--spin" type="button" aria-haspopup="true" aria-expanded="false">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<input type="hidden" id="cat_menu_mobile_open" value="0" />
</div>
<div class="navigation_mobile_wrapper">
<nav class="navigation_mobile" aria-label="Main navigation" role="navigation">
<ul>
<li class="accueil"><a href="index.php" aria-current="page" aria-label="">Accueil </a></li>
<li class="engagements"><a href="engagements-atouts.php" aria-label="">Engagements </a></li>
<li class="offres"><a href="services_competences.php" aria-label="">Offres & réalisations </a></li>
<li class="estimer"><a href="mon-projet.php" aria-label="">Estimer mon projet </a></li>
<li class="contact"><a href="contact.php" aria-label="">Contact </a></li>
<li class="blog"><a href="https://blog.kdj-webdesign.com" aria-label="">Blog </a></li>
</ul>
</nav>
</div>
<!-- menu desktop -->
<div id="logo_wrapper_inner">
<nav class="navigation_desktop_inner" aria-label="Main navigation" role="navigation">
<!--<img src="images/pointilles.svg" class="pointilles" style="right: 800px; bottom: -90px; transform: rotate(90deg);" />
<img src="images/pointilles2.svg" class="pointilles" style="right: 635px; bottom: -105px; transform: rotate(120deg);" />
<img src="images/pointilles3.svg" class="pointilles" style="right: 440px; bottom: -155px; transform: rotate(90deg);" />
<img src="images/pointilles4.svg" class="pointilles" style="right: 300px; bottom: -65px; transform: rotate(-90deg);" />
<img src="images/pointilles5.svg" class="pointilles" style="right: 70px; bottom: -210px; transform: rotate(100deg);" />
<img src="images/pointilles6.svg" class="pointilles" style="right: -20px; bottom: -125px; transform: rotate(90deg);" /> -->
<li class="accueil">
<a href="index.php" aria-current="page">
<span class="label gauche">Accueil</span>
<div class="cercle cyan"></div> </a>
</li>
<li class="engagements">
<a href="engagements-atouts.php" >
<span class="label gauche">Engagements</span>
<div class="cercle cyan"></div> </a>
</li>
<li class="offres">
<a href="services_competences.php" >
<span class="label gauche">Offres & réalisations</span>
<div class="cercle cyan"></div> </a>
</li>
<li class="estimer">
<a href="mon-projet.php" >
<span class="label gauche">Estimer mon projet</span>
<div class="cercle cyan"></div> </a>
</li>
<li class="contact">
<a href="contact.php" >
<span class="label gauche">Contact</span>
<div class="cercle magenta"></div> </a>
</li>
<li class="blog">
<a href="https://blog.kdj-webdesign.com" >
<span class="label gauche">Blog</span>
<div class="cercle cyan"></div> </a>
</li>
</ul>
</nav>
<div id="logo_background_inner"></div>
<a href="index.php"><img src="images/logo.png" class="logo" alt="KDJ Webdesign" style="top: 115px;" /></a>
</div>
</header>
<!-- contenu -->
<div id="contenu" class="accueil">
<!-- presentation -->
<div class="bloc gris">
<div class="presentation inner_with_side_images">
<div class="column1-2">
<h2 data-aos="fade-right">DÉVELOPPEUR WEB, LOGICIEL ET MOBILE WEBDESIGNER - SEO</h2>
<div class="spacer h20"></div>
<div data-aos="zoom-out" style="font-size: 150%">Je possède <strong>27 ans d'expérience dans la création et la conception de logiciels, applications et de sites internet personnalisés.</strong></div>
</div>
<div class="column1-2">
<div class="spacer h60"></div>
<img src="images/laptop-pomme-smartphone.png" width="800" style="width: 100%; height: auto" alt="Laptop, pomme et spartphone">
</div>
</div>
<img src="images/samsung-mobile-phone.png" data-aos="fade-right" style="top: 280px; " class="samsung-mobile-phone" />
</div>
<!-- /presentation -->
<!-- votre partenaire numerique -->
<div class="bloc">
<div class="cercle gris navigation_in_page"><a href="#partenaire_numerique"><i class="fa fa-chevron-down"></i></a></div>
<a name="partenaire_numerique"></a>
<p> </p>
<div class="votre_site_internet inner_with_side_images">
<div class="form_row">
<div class="column1-3">
<a href="services_competences.php" class="cercle_responsive magenta"><div>offre & réalisations </div></a>
<p>Je développe des sites internet et des logiciels personnalisés pour tout type de métier, de la réalisation des maquettes à la livraison du site et son suivi. <br>
Plus de 50 sites internet et plus de 15 extranets et logiciels, des créations sur mesure, des clients dans des secteurs variés.</p>
</div>
<div class="column1-3">
<p>Pour des projets durables, fiables et évolutifs, j'opte pour des technologies pérennes et éprouvées, et je choisis des solutions open source, locales et éthiques.</p>
<a href="engagements-atouts.php" class="cercle_responsive jaune"><div>engagements</div></a>
</div>
<div class="column1-3">
<a href="mon-projet.php" class="cercle_responsive cyan"><div>estimer mon projet</div></a>
<p>Parce que votre structure est unique, vos besoins le sont également. En quelques clics, obtenez gratuitement un devis pour votre projet !</p>
</div>
</div>
<!-- liens reseaux -->
<div class="spacer h40"></div>
<h3>Retrouvez-moi sur</h3>
<div class="liens_reseaux_sociaux">
<a href="https://www.linkedin.com/in/kdjwebdesign/" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a>
<a href="https://www.viadeo.com/p/00227q8vy30p2ffu" target="_blank" title="Viadeo"><i class="fa fa-viadeo"></i></a>
<a href="https://www.malt.fr/profile/karinesanche" title="Malt" class="malt"><i class="fa fa-malt"></i></a>
<a href="https://bsky.app/profile/karinesanche.bsky.social" target="_blank" title="Bluesky"><i class="fa fa-twitter"></i></a>
<a href="https://www.xing.com/profile/Karine_SANCHE" target="_blank" title="Xing"><i class="fa fa-xing"></i></a>
</div>
</div>
<img src="images/souris.png" width="275" data-aos="fade-left" style="position: absolute; right: -50px; top: 300px; transform: rotate(90deg);" />
</div>
</div>
<!-- pied de page -->
<footer>
<div id="link_to_top">
<a href="#top"><i class="fa fa-chevron-up"></i></a>
</div>
<div class="wave_wrapper">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs></defs><path id="myID" d=""/></svg>
<!--<div class="wave"></div>
<div class="wave2"></div>-->
</div>
<div id="menu_accessoire">
<ul>
<li><a href="cv.php">CV</a></li>
<li><a href="glossaire.php">Glossaire</a></li>
<li><a href="veterinaires.php">Vétérinaires</a></li>
<li><a href="liens.php">Liens</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="mentions_legales.php">Mentions légales</a></li>
<li><a href="politique-de-confidentialite.php">Politique de confidentialité</a></li>
<li><a href="https://blog.kdj-webdesign.com/">Blog</a></li>
<li><a href="https://annuaire.kdj-webdesign.com/">Annuaire</a></li>
</ul>
</div>
<div id="font_size">
<ul>
<li><a href="#" onclick="setActiveStyleSheet('normal'); return false;" title="Caractères de taille normale"><i class="fa fa-font" aria-hidden="true"></i> </a></li>
<li><a href="#" onclick="setActiveStyleSheet('grand'); return false;" title="Grands caractères"><i class="fa fa-font fa-lg" aria-hidden="true"></i> </a></li>
<li><a href="#" onclick="setActiveStyleSheet('contraste'); return false;" title="Couleurs contrastées"><i class="fa fa-adjust" aria-hidden="true"></i> </a></li>
</ul>
</div>
</footer>
<!-- / pied de page -->
</div>
<div id="lightbox" role="dialog" aria-hidden="true">
<img src="" id="image_zoom" alt="" />
<div onclick="ferme_lightbox()" class="ferme"></div>
</div>
<script type="text/javascript" src="scripts/accessibility_resize.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// wave above the footer
$('#myID').wavify({ height: 60, bones: 3, amplitude: 60, color: 'rgba(51, 51, 51, 1)', speed: .55 });
// ouverture/fermeture du menu burger
$('.hamburger').on('click', function(){
var display = $('.navigation_mobile_wrapper').css('display');
if(display=='' || display=='block') {
$('.navigation_mobile_wrapper').css('display','none');
$('.hamburger').removeClass('is-active');
$('.hamburger').attr('aria-expanded', 'false');
//$('.cat_menu_mobile_open').val(1);
}
else {
$('.navigation_mobile_wrapper').css('display','block');
$('.hamburger').addClass('is-active');
$('.hamburger').attr('aria-expanded', 'true');
//$('.cat_menu_mobile_open').val(0);
}
});
// scroll doux vers ancre dans la page
$("a[href*='#']:not([href='#'])").click(function() {
if (
location.hostname == this.hostname
&& this.pathname.replace(/^\//,"") == location.pathname.replace(/^\//,"")
) {
var anchor = $(this.hash);
anchor = anchor.length ? anchor : $("[name=" + this.hash.slice(1) +"]");
if ( anchor.length ) {
$("html, body").animate( { scrollTop: anchor.offset().top }, 1500);
}
}
});
$('.inner_with_side_images h2:first-child').each(function(){
//console.log('hop');
$(this).append('<br /><img src="images/separateur_magenta.svg" data-aos="fade-left" class="separateur" />');
});
});
// Replace all SVG images with inline SVG
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
// animation au survol des vignettes de portfolio
// source : https://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html
(function() {
function init() {
var speed = 250,
easing = mina.easeinout;
[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
pathConfig = {
from : path.attr( 'd' ),
to : el.getAttribute( 'data-path-hover' )
};
el.addEventListener( 'mouseenter', function() {
path.animate( { 'path' : pathConfig.to }, speed, easing );
} );
el.addEventListener( 'mouseleave', function() {
path.animate( { 'path' : pathConfig.from }, speed, easing );
} );
} );
}
init();
})();
// affichage du menu mini-header qui suit le scroll
var nav = $('.navigation_desktop');
var mobile=false;
if(nav.css('display')==='none'){
nav = $('.navigation_mobile_wrapper');
mobile = true;
}
var t = $('#logo_background').innerHeight() ; // + $('#logo_background').css('height')
//var t = nav.offset().top ;
//var largeur = ($(window).width()) ;
$(document).scroll(function(){
//console.log("largeur "+($(window).width())+" pos bas logo "+t+" scrollTop "+$(this).scrollTop()); // +" pos. menu "+t offset_logo_background
if($(this).scrollTop() > t ) {
//console.log('bas');
$('#link_to_top').css('display', 'block');
$('.hamburger').css('display', 'block').css('position', 'fixed');
$('#hamburger-wrapper').addClass('visible');
$('.navigation_mobile').css('position', 'fixed').css('top', '70px'); // espace pour le mini-header
}
else {
//console.log('haut');
$('#link_to_top').css('display', 'none');
if(!mobile){
$('.hamburger').css('display', 'none'); // le burger doit tout le temps rester visible en affichage mobile
}
$('.hamburger').css('position', 'absolute');
$('#hamburger-wrapper').removeClass('visible');
$('.navigation_mobile').css('position', 'absolute').css('top', '0px');
}
});
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({ once: true });
</script>
</body>
</html>
