Portfolio

Réalisations liées aux clients


a screen shot of Marc Bobin D&D's website

Marc Bobin | D&D
(Site en php)

J'ai créé le site de Marc Bobin | D&D avec php en tant que site web en single page avec un ressenti en multi-page. J'ai utilisé des templates pour le header et le footer, inséré dynamiquement la date du copyright ainsi que le titre du header qui change selon la page qui a été cliquée.

J'ai utilisé Sass pour travailler plus facilement avec des variables concernant les couleurs et les tailles.

Bootstrap a été utilisé pour m'aider à construire plus rapidement un site qui s'adapte à tout type d'écran, mais j'ai créé le menu sandwich par moi-même.

Enfin, j'ai utilisé JavaScript pour mes animations et pour cacher mon adresse email de la page source.

a screen shot of caitlin mcneil therapist's website

Caitlin McNeil - Therapist

Cailtin McNeil fut ma cliente pendant mon programme Webmaster au Collège Seneca.

Il s'agit d'une travailleuse sociale en Ontario. Elle avait besoin d'un site internet pour attirer plus de clients pour son activité privée, mais également pour être un endroit duquel elle puisse référencer ses collègues.

Elle voulait un site relaxant, procurant un sentiment de calme, et souhaitait y intégrer des photos de paysages d'Écosse, d'où elle est originaire.

J'ai créé ce site en partant de zéro, en utilisant HTML, CSS, Bootstrap et JavaScript/jQuery.
php a également été utilisé en fin de processus pour la validation du formulaire de contact.

Ce fut un énorme plaisir de travailler avec Caitlin.

a screen shot of caitlin mcneil therapist's portal

Portail Client

Pendant l'élaboration de ce projet client, je devais créer un portail client, pour que mon client ait la possibilité de se connecter et de voir la progression de son site.

J'ai dû créer une barre de progression et j'ai eu cette idée de révéler doucement cette image de 2 mains qui se rejoignent. Un de mes professeurs m'a aidé à trouver cette solution pour réaliser cette idée.

Le client pouvait ainsi accéder aux documents tels que les conclusions des réunions (les documents originaux ont été retirés), la proposition (certaines informations de cette proposition sont fictives), les wireframes et mockups, et les prototypes de son site.

Réalisations liées aux études


a screen shot of chew martine's website

Une bonne préparation mène à un bon design

Un des devoirs durant mon programme était de créer un site de zéro pour un client fictif titulaire d'une petite activité, avec un design original. J'ai choisi le thème d'une boulangerie française.

La particularité de ce devoir était qu'il s'agissait de la première fois que j'ai pu voir l'autre partie du métier de développeur web.

J'ai effectué une recherche, comparaison et analyse du marché de la boulangerie française à Toronto, et une explication de design pour aider dans les décisions prises.

J'ai adoré travailler sur ce devoir et je suis très content du rendu final.

J'ai reçu une note de 93% pour ce travail.

a screen shot of glove actually's website

It’s Glove, Actually (devoir sur php)

Pour ce dernier devoir du programme, il était demandé d'examiner les fichiers fournis (codes HTML et CSS) et de développer une solution HARI (Halte Aux Redondances Inutiles) qui utilise php pour la logique et le traitement.

Le site finalisé devait garder l'esthétique existante, mais aussi les conditions suivantes:

  • intégrer dynamiquement du contenu en utilisant un tableau
  • créer une fonction pour récupérer l'année en cours et l'insérer dynamiquement
  • insérer dynamiquement les bannières, les titres et les textes principaux
  • créer des modèles pour le header et le footer
  • site en page unique avec le sentiment d'un site mutli pages en utilisant la superglobale $_GET et les structures de contrôle
  • récupérer l'adresse email d'un utilisateur à l'aide de la superglobale $_POST

J'ai vraiment beaucoup aimé réaliser ce devoir et j'ai obtenu une note de 100% dont je suis très fier.

Photoshop


dracula in his red robe hiding his face with his hands

Affiche de Film

J'adore Photoshop et lorsque j'ai lu ce devoir, j'en ai été ravi!

Francis Ford Coppola's Dracula est un de mes films favoris et c'est tout naturellement que je l'ai choisi; je pensais qu'il se prêterait très bien au thème.

Il était demandé de créer une affiche sur un film de mon choix, en utilisant les techniques Photoshop apprises en classe, telles que le fondu des photos, l'outil sélection pour faire disparaître un fond ou remplacer un élément avec le remplissage avec contenu pris en compte, etc...

Il était également demandé d'utiliser au moins 5 images et d'intégrer un sous-titre, le nom des acteurs et tous les crédits nécessaires.

J'ai obtenu une note de 98% pour cette affiche.

a screen shot of caitlin mcneil therapist website's mockup

Maquettes Client

Pendant cette formation, nous avons appris l'importance des mockups dans le processus de création d'un site internet.

Comme je l'ai dit, j'adore Photoshop et ce fut un plaisir, une fois de plus, de travailler sur les mockups de ma cliente.

Il m'a été demandé d'organiser les différentes couches selon les meilleures pratiques, de sélectionner une police d'écriture qui convient au domaine du client, de créer un logo simple, et également une page du site basé sur le mockup.

Vous voyez ici le dernier mockup que j'ai réalisé, celui que ma cliente a choisi, et celui que j'ai utilisé pour créer son site.

J'ai obtenu 96% pour ce devoir.

Logos


Marc Bobin D&D written in white color on a dark background

MB Websites

Pour mon propre site, j'ai voulu un logo simple.

J'ai utilisé Adobe Illustrator et me suis basé le thème couleur du site.

caitlin mcneil written in white on a dark gray background and therapist underneath written the opposite way

Caitlin McNeil

Il s'agit du simple logo que j'ai créé pour le devoir sur la maquette client, en utilisant Adobe Illustrator.

Mon client a trouvé que le logo lui convenait et qu'il complémentait le ressenti général du site, et a donc décidé de le garder.

chez martine written with an eiffel tower replacing the a

Chez Martine - French Bakery

Ce logo a été créé pour un de mes devoirs, à l'aide d'Adobe Photoshop.

Avec ce logo, j'ai essayé d'incorporer le ressenti d'une boulangerie parisienne.