Paul LEPETIT | Portfolio multi-page

Site en multi-page avec une version web/tablette & une version spécifique pour mobile.

Site 2 colonnes web/tablette


- Création épurée au possible pour rester dans la mode actuelle, tout en restant le plus complet possible

avec un accueil, une présentation et une page contact, sera rajouté par la suite un cv " jeu ".


- code couleur 3 nuances (noir, gris, bleu)

noir: #333333

bleu: #40BDE8 | #006068

gris: #434343


- Police importée de google fonts

Raleway 300/400/500/600/700/800

Ubuntu 300/400/500/600/700/800

Roboto 300/400/500/600/700/800


- Background réalisé a l'aide de 8bit maker ( appweb ) -> https://make8bitart.com/





Site 2 colonnes mobile


Le site mobile est repensé pour une meilleur visualisation et navigation


- Police identique et ajustée en fonction de la résolution


- Code couleur identique avec ses 3 nuances


- Background tourné pour faire profiter l'utilisateur du beau fond en pixel


- Une colonne " header" & une autre "footer"


- Suppression de quelques DIV pour limiter le contenu ( lien sur mon profil linkedin )


Le but était, à la base, un portfolio animé sur le même principe qu'un jeu de plateforme, comme dit plus haut, il sera surement ajouté par la suite. 


J'ai donc décidé de faire quelque chose de plus soft, tout en gardant le côté 8 bit du background.

Au final la réalisation me satisfait entièrement et me correspond bien.


Format web+tablette


- Page d'accueil basique, en full screen.

- Logo " P." avec lien sur l' accueil.

- Hover sur le menu, couleur cyan à l'activation.



Format web+tablette.


 Font-weight sur la police pour donner de l'esthétique et casser un le texte au maximum 


- Navigation  fixe haut gauche

- Hover & active sur le menu, bleu cyan.


- Div pour " l'accroche" ( dev & int )

- Div pour la partie coordonnées

- Div pour la partie progress bar


- Class ajoutée pour la ligne verticale

La partie présentation est elle aussi composé en plusieurs div pour la gestion des polices avec différents class.









Format web+tablette

contact

Identique à la page présentation

- Une partie réseaux sociaux remplace la partie DIV progress bar.

- Formulaire de contact en remplacement du texte de présentation.




Maquette pour le site en version mobile


Format Mobile

- Page d'accueil en full screen et fixe.

- Modifications du style pour une meilleur navigation et visualisation.

-Navigation en ligne, avec une fonction hover & active sur le menu.

- Changement sur le background

-Le logo " P." est le même avec toujours son lien sur l'accueil.

- Ajout de la DIV "d'accroche" ( dev & int)

- Modification taille de polices pour être plus adaptée à la résolution mobile.


Format mobile.


- Suppression des parties coordonnées et progress bar.

-Texte de présentation seulement.

- Modifications des tailles de polices.




Format mobile.

- Suppression des progress bar.

- Formulaire de contact identique à la version web/tablette.

-Ajout d’icônes en footer pour les coordonnées.

- Modifications des tailles de polices.

Create a presentation like this one
Share it on social medias
Share it on your own
Share it on social medias
Share it on your own

How to export your presentation

Please use Google Chrome to obtain the best export results.


How to export your presentation

New presentation

by plepettit

9 views

Public - 5/2/16, 12:17 PM