Encore une refonte du site.

Dans mon esprit, j'ai écrit ce post hier.

D'accord. Alors... j'aurais peut-être complètement reconstruit mon site Web... encore une fois

sid ・ 23 décembre 21

#webdev #showdev #html #css

Pourtant, près de quatre années se sont écoulées, et avec le recul, je peux affirmer avec certitude que mes premières tentatives de conception de sites Web ont été, eh bien, disons simplement moins que stellaires. Mon les anciens sites Web semblaient avoir été conçus par un jeune de 13 ans parce que, eh bien, ils l'étaient - et oui, ce jeune de 13 ans, c'était moi ?.

Depuis :

• J'ai terminé encore trois années d'école. Je suis pratiquement un étudiant professionnel maintenant.
• J'ai passé d'innombrables heures à étudier les principes fondamentaux d'une bonne conception d'interface utilisateur. J'ai lu plus d'articles sur le design que je ne veux l'admettre.
• J'ai appris à écrire un meilleur code. Il ne plante plus… la plupart du temps.
• J'ai lu le livre Refactoring UI d'Adam Wathan, qui a complètement changé ma façon de penser la conception de l'interface utilisateur.

Mais pendant tout ce temps, j’ai négligé un petit détail – oui, vous l’aurez deviné – en mettant à jour mon site Web. Maintenant, à 16 ans, ce commentaire :

Edvard Busck-Nielsen • 6 mars 21

J'aime beaucoup l'interface utilisateur du site Web. Et aussi des choix de couleurs géniaux ! Mais, à mon avis, lorsqu’il s’agit de sites Web personnels, vous devez mettre l’accent sur vos compétences et votre expérience. Du moins si votre objectif est de vous vendre aux recruteurs. Je suis désolé, mais la plupart des recruteurs ne se soucient pas des articles de blog. Ils se soucient de ce que vous pouvez faire et depuis combien de temps vous le faites. Un portefeuille de projets est également important. Les articles de blog montrent certainement un peu de votre personnalité et de votre intérêt, mais un recruteur n'aura probablement pas le temps de les lire. Vous êtes peut-être la dernière candidature qu'ils examinent un vendredi soir, la dernière chose que vous voulez faire est de leur faire perdre du temps.

Mais à part ça, super travail ! Et bien sûr, ce n'est que mon avis.

a vraiment commencé à faire mouche.

J'avais passé tellement de temps à travailler sur divers projets mais je n'avais nulle part où les afficher, et donc aucune plateforme pour impressionner les recruteurs potentiels. De plus, si vous regardiez l’interface utilisateur de la plupart de mes projets, elle était encore quelque peu médiocre. J'avais besoin de quelque chose pour les épater, alors il y a quelques jours, j'ai décidé de tout mettre en œuvre pour repenser et reconstruire mon site Web personnel (ou mon portfolio, si vous préférez).

La technologie

Tous mes précédents sites Web personnels ont été construits avec du HTML, CSS et JavaScript simples. C’est simple et fonctionnel, mais c’est comme essayer de préparer un repas gastronomique au micro-ondes. De plus, je voulais vraiment montrer mes compétences React (soyons honnêtes, c'était la vraie raison).

J'ai donc opté pour Next.js. Pourquoi? Eh bien, cela semblait être un bon choix à l'époque (et cela s'est avéré être le cas), et j'en avais déjà beaucoup d'expérience.

Pour le CSS, j'ai opté pour Tailwind CSS (je veux dire, si vous ne l'utilisez pas en 2024, êtes-vous vraiment réel ? ?).

La conception

Après avoir passé beaucoup trop de temps à regarder mon ancien site Web, j'ai décidé que le mode éclairage ne suffisait tout simplement pas. Je voulais un changement radical, quelque chose qui aurait un réel impact. Et quelle meilleure façon de le faire qu’en appuyant sur l’interrupteur et en passant en mode sombre ? C'est comme si votre site Web démarrait un arc de méchant ?.

Pour la police, j'ai choisi Inter. Après de nombreuses tentatives infructueuses avec d'autres polices, notamment sur les appareils Windows où mes sites ressemblaient à ceci :

...par rapport à cela sur macOS, j'ai décidé d'arrêter d'utiliser les polices système par défaut fournies par Tailwind CSS.

De toute évidence, la police sur Mac était supérieure. Mais comme la police par défaut de San Francisco est exclusive à Apple, j'avais besoin d'une alternative. Entrez Inter, l'une des polices les plus étonnantes que j'ai jamais vues et un remplacement parfait pour San Francisco.

Vous voyez ? Regardez comme cette police est jolie ?

Pour la couleur principale, j'ai opté pour le violet. Aucune vraie raison, j'ai juste décidé de mélanger les choses avec l'indigo que j'utilisais auparavant.

La mise en page

J'ai commencé par la section héros. Facile, simple et... oh attends... ai-je mentionné qu'il y avait un effet machine à écrire ?.

Après cela, je suis rapidement passé à réfléchir à la section suivante.

Retour sur le commentaire d'Edvard :

Edvard Busck-Nielsen • 6 mars 21

J'aime beaucoup l'interface utilisateur du site Web. Et aussi des choix de couleurs géniaux ! Mais, à mon avis, lorsqu’il s’agit de sites Web personnels, vous devez mettre l’accent sur vos compétences et votre expérience. Du moins si votre objectif est de vous vendre aux recruteurs. Je suis désolé, mais la plupart des recruteurs ne se soucient pas des articles de blog. Ils se soucient de ce que vous pouvez faire et depuis combien de temps vous le faites. Un portefeuille de projets est également important. Les articles de blog montrent certainement un peu de votre personnalité et de votre intérêt, mais un recruteur n'aura probablement pas le temps de les lire. Vous êtes peut-être la dernière candidature qu'ils examinent un vendredi soir, la dernière chose que vous voulez faire est de leur faire perdre du temps.

Mais à part ça, super travail ! Et bien sûr, ce n'est que mon avis.

Mais, à mon avis, lorsqu'il s'agit de sites Web personnels, vous devez vous concentrer sur vos compétences et votre expérience, surtout si votre objectif est d'impressionner les recruteurs.

J'ai décidé d'abandonner complètement la section blog. Même si vous apprécierez mes milliers de mots sur différents frameworks et outils, les recruteurs ne l'apprécieront probablement pas. De plus, comme ma charge de cours augmentait à mesure que j’entrais dans mes deux dernières années d’école, je n’avais tout simplement pas le temps de tenir un blog.

J'ai également déplacé ma section de compétences tout en haut, au premier plan et au centre pour que tous les recruteurs puissent la voir ?. Oh, et pourquoi ne pas ajouter des effets sympas ? Pour l'effet présenté ci-dessous, j'ai utilisé framer-motion, qu'ils décrivent comme "Une bibliothèque de mouvements prête pour la production pour React". Je ne pourrais pas être plus d’accord.

Vous voyez ? Regardez comme cette animation est cool.

Ensuite, je me suis attaqué à la section projets. J'ai présenté mes 4 meilleurs projets sur la page d'accueil et inclus un lien vers le reste. Pour cette section, j'ai eu une idée intéressante : un modal qui rebondissait depuis le bas de la page lorsqu'un clic sur un projet était effectué, fournissant ainsi plus de détails. Et bien sûr, Framer-motion était l’outil idéal pour ce travail.

Au bout d'une heure, j'ai eu ça :

Je pensais que c'était parfait jusqu'à ce que mes amis donnent leur avis :

• Trop rebondissant, atténuez-le un peu.
• J'aime ça, mais tu devrais vraiment réduire le rebond.
• Le rebond semble choquant.

Au départ, j'ai résisté à le changer. Mais après des heures de peaufinage, j’ai réalisé que peut-être, juste peut-être, le rebond était un peu excessif. Alors, je l'ai composé.

Version finale. Ça a l'air plutôt bien, non ?

Enfin, j'ai ajouté une section de contact avec des liens vers mon LinkedIn et mon e-mail, et bien sûr, un lien vers mon profil GitHub que tous les recruteurs peuvent voir.

J'ai également créé une page de projets, comme mentionné précédemment. C'était très similaire à la section des projets sur la page d'accueil, arborant les mêmes modaux pour présenter tous les projets que j'ai développés au fil des ans (Remarque : cette section est toujours en cours de travail, alors ne soyez pas surpris si c'est un peu clairsemé).

Me voici donc, enfin à jour mon site Web avec toutes ces connaissances durement acquises. Espérons simplement que celui-ci ne donnera pas l’impression qu’il a été conçu par un jeune de 16 ans. Oh attends… ?

---

Vous pouvez aller consulter mon site ici et le code ici. Si vous avez aimé cet article, donnez une étoile au dépôt et envisagez de le suivre.

code sidcrafts / portefeuille

Mon site Web de portfolio personnel, construit avec Next.js

Il s'agit d'un projet Next.js démarré avec create-next-app.

Démarrage

Tout d'abord, exécutez le serveur de développement :

npm run dev
<span class="pl-c"># or</span>
yarn dev
<span class="pl-c"># or</span>
pnpm dev
<span class="pl-c"># or</span>
bun dev

Ouvrez http://localhost:3000 avec votre navigateur pour voir le résultat.

Vous pouvez commencer à éditer la page en modifiant pages/index.js. La page se met à jour automatiquement au fur et à mesure que vous modifiez le fichier.

Les routes API sont accessibles sur http://localhost:3000/api/hello. Ce point de terminaison peut être modifié dans pages/api/hello.js.

Le répertoire pages/api est mappé sur /api/*. Les fichiers de ce répertoire sont traités comme des routes API au lieu de pages React.

Ce projet utilise next/font pour optimiser et charger automatiquement Inter, une police Google personnalisée.

En savoir plus

Pour en savoir plus sur Next.js, consultez les ressources suivantes :

• Documentation Next.js - découvrez les fonctionnalités et l'API de Next.js.
• Apprenez Next.js - un didacticiel interactif Next.js.

Vous pouvez consulter le référentiel Next.js GitHub - vos commentaires…

Voir sur GitHub

Voici quelques captures d'écran


 :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!