Autre projet

Hello World

Hello World

Hello World

un onglet avec alberta tech ecrit un grand et une photo d'elle

Janus?

Mon projet de fin du premier qusrimestre,

Un blog sur Alberta tech

Le processus de création

Mes recherche

Pour commencer, j'ai fait un gros travail de recherche sur Alberta Tech en fouillant tous ses réseaux. J'ai vite capté le personnage : c'est quelqu'un qu'il faut prendre au second degré, sur le ton de la rigolade.

Ses réseaux

Mes problèmes de rédaction

La page critique s’était le plus dur à faire. Comme il n'y a pas vraiment de polémique sur elle.

J’ai dû la recommencer de zéro ma page promotionnelle. Au début, j'étais trop dans le factuel (je listais juste des infos), alors qu'il fallait vraiment "vendre" le personnage et être plus percutant

Le premier design

Pour mon premier design, je devait m’inspirer du style d’Alberta Tech pour le concevoir.

Mes inspirations

capture d'ecran du merch d'Alberta Tech

JPour le premier design, je me suis inspiré de son merch pour déterminer les couleurs et le style des polices de mes textes.

capture d'ecran de sa chaine youtube

Concernant la décoration, je m'inspire de certains aspects de ses miniatures vidéo.et pour le reste du design, j'ai opté pour des éléments pixelisés, étant donné que tous les logos destinés aux goodies sont pixelisés.

Mon design

capture d'ecran d'onglet que j'ai fait capture d'ecran d'un paragraphe

Les polices utilisées

Roboto

Pour le corps de texte

Je pense qu'elle se trompe en partie sur la question de la perte d'emplois due à l'IA.

Source Code Pro

Pour les titres

La perte d’emploi due a l’IA

Rapport hierarchique pour le telephone

18px

Pour le corps de texte

32px

Pour les titres

Rapport hierarchique pour le desktop

22px

Pour le corps de texte

45px

Pour les titres

Le deuxième design

Le second design, je voulais qu’il soit littéralement a l’oppose de mon design.

Mes inspirations

captured'écren d'un article du magazine elle

JPour trancher radicalement avec le premier design. Je suis parti sur une esthétique type magazine "ELLE" pour apporter un côté plus pro et sérieux, mais sans tomber dans le côté trop "froid" du noir et blanc.

Du coup, j'ai choisi rajouter des nuances de rose car ça faisait un petit rappel à la couleur de ses cheveux.

mon design

capture d'ecran de ma page critique du projet janus

Les polices utilisées

Work Sans

Pour le corps de texte

Je pense qu'elle se trompe en partie sur la question de la perte d'emplois due à l'IA.

Source Code Pro

Pour les titres

La perte d’emploi due a l’IA

Rapport hierarchique pour le telephone

16px

Pour le corps de texte

61px

Pour les titres

Rapport hierarchique pour le desktop

20px

Pour le corps de texte

73px

Pour les titres

Le code

Ma ligne du temps sur la carrière de Alberta tech

Sur desktop, rendre la timeline responsive,s'était galère. Pour régler ça, j'ai mis ma ligne dans une div isolée et j'ai intégré la pointe de la flèche en background sur le dernier cercle (avec un padding). Peu importe la largeur de mon écran, toutes mes informations restent clairement visibles.

ongletavec une vidéo qui dépasse de celui-ci

La vidéo ne voulait pas se mettre au milieu de l'onglet. Comme je bloquais, j'ai demandé au prof : en fait, il ne fallait pas mettre le width à 100 % sur la div qui contenait la vidéo. Une fois enlevé, ça a marché tout de suite.

Enfin, j'ai fini par un gros nettoyage du CSS. Comme j'avais codé chaque élément séparément au fur et à mesure, j'avais plein de répétitions. J'ai tout regroupé pour avoir un code beaucoup plus propre.

Voir le projet