Sébastien

F o u v e t

Développeur Web FullStack Junior

Bienvenue sur mon site en cours de construction

Ce site est un ensemble de composants indépendants qui utilisent diverses technologies

C'est un portfolio de mes expériences, dont cet écran de présentation en pur CSS

Vous y trouverez aussi des infos sur moi ainsi q'un formulaire de contact

Explorer Explorer mes expériences

Arrière plan animé

Cette section utilise les animations CSS.

Pour le texte j'utilise des transformations telles que rotate ou translate et je joue aussi avec les opacités

le fond quand à lui est composé de blocs avec des border qui sont soumis simultanément à un skew, un rotate et translate

Plus d'informations sur ce composant

Développeur Web FullStack junior

Diplômé RNCP webmaster / webdesigner mention très bien en 2017, je n'ai malheureusement que peu eu l'occasion de pratiquer le développement web.

J'ai décidé de me former à nouveau en 2021 pour me mettre à jour et complèter mes précédents acquis.

Je suis donc en formation certifiante pour le titre RNCP de développeur web et web mobile, formation qui prendra fin au terme d'un stage en entreprise du 2/11/2021 au 10/01/2022.

Ce site est donc une vitrine pour montrer mes idées et mes réalisations sous forme d'un portfolio de composants réutilisables avec un fichier SASS individuel.

Ces composants utilisent bien-sûr HTML/CSS (Sass), mais aussi du JS (vanilla, angular) et du PHP (POO), sans aucune librairie externe (sauf mention contraire).

Veuillez noter que ce site est encore en construction, qu'il manque encore des pages. il est aussi en perpetuelle évolution au gré de mes idées.

Les gorges de la Loire

Effet parallax

L'image de fond ne défile pas en même temps que le bloc.

Pour Cela la position du background-image est en fixed

L'effet diagonale du bloc est obtenu grace à une transformation de type SkewY.

Mais firefox ne semble pas gérer le background-image:fixed et le SkewY ensembles.

Si vous voulez profiter pleinement de l'effet, je vous déconseille d'utiliser firefox.

Utilisation des sprites

Le personnage est sous forme de sprites pour simuler son déplacement.

Tous les décors sont sous forme d'animations CSS.

Utilisation des grilles

On utilise un affichage en display:grid; avec une rotaion de 45°

Grâce aux pseudos classes ::before et ::after,on inverse la rotation des background-image.

Je vous laisse découvrir les effets de hover.

Perspective CSS

Les images utilisent la propriété CSS persperctive et les transformations

Un script JS permet de faire varier la perspective au hover selon le déplacement de la souris

Saint-Etienne gare de Chateaucreux Cité des affaires de Saint Etienne Cathédrale de Saint-Etienne Saint-Etienne cité du Design Saint-Etienne puit Couriot Saint-Etienne kiosque place Marengo Saint-Etienne gare de Chateaucreux Saint-Etienne Planetarium Saint-Etienne Mairie Saint-Etienne Fauriel

Utilisation des API

Les requêtes AJAX permettent d'obtenir des informations de 3 API différentes

D'abord la carte grâce l'API leaflet.

Ensuite, lorsqu'on clique sur la carte qu'on vient de générer, la météo grâce à l'API prevision-meteo.ch.

Enfin on fait du geocoding reverse grâce à l'API openCage pour obtenir un nom de ville.

Le tout est mis en forme grace aux Flexbox

Météo à 5 jours

selectionnez votre ville en cliquant sur la map

Grille artistique

Le but est d'obtenir un rendu artistique en déplaçant les background-image au hover

Je recherche encore les bons réglages pour les déplacements afin d'avoir un bon rendu.

BD humoristique

Exploration de la propriété CSS Clip-path

Cette pastille humoristique est là pour souligner le fait que je n'utilise aucune librairie.

Vous l'aurez compris elle est notamment réalisée sans Bootstrap

Gendo Ikari qui réfléchit Gendo Ikari qui réfléchit
L recroquevillé L recroquevillé
miku miku

Morpion et IA

Le but est de coder une micro Intelligence Artificielle

Le jeu est pontué de phrases humoristiques semi-aléatoires pour le rendre plus fun.

Amusez vous bien avec ce morpion.

Selectionnez vos options

Choisissez votre camp: