L'utilisation de portefeuilles en ligne est devenue un choix populaire chez de nombreux artistes numériques. L'objectif serait de vous présenter et de mettre vos compétences en valeur à quiconque est curieux, peut-être en embauchant des entreprises ou des clients potentiels. Un autre moyen plus simple d'accomplir cette tâche consiste à créer votre propre page vCard numérique. Il s’agit généralement d’une page contenant un bref résumé, votre expérience professionnelle et quelques informations intéressantes sur vous-même.
Dans ce tutoriel, je veux montrer comment créer une présentation de page Web simple, avec des onglets, à la manière d'un portefeuille simpliste. Nous pouvons incorporer des effets de fondu jQuery pour basculer entre les onglets, en respectant un design réactif formel. Jetez un coup d’œil à ma démonstration d’échantillon en direct pour voir à quoi ressemble le produit final.
Live Demo - Télécharger le code source
Mise en page
Outre le fichier à index unique, je crée également une feuille de style distincte nommée styles.css. Nous avons également besoin d'une copie de la bibliothèque jQuery, qu'elle soit locale ou hébergée en externe.
La page elle-même est maintenue dans une enveloppe fixée à une largeur maximale de 700 pixels. Dans cet emballage, j'utilise un div de conteneur secondaire qui ajoute les effets de fond blanc et de corps de page naturels.
Vous remarquerez que chaque valeur HREF de navigation pointe vers l'ID d'un élément de page. Cela pourrait être mis à jour pour créer un lien vers des pages séparées, puis remplacé par jQuery pour conserver les effets dynamiques. Si vous ne vous souciez pas de l'indexation de pages distinctes, Google est toujours en mesure d'explorer facilement tout votre contenu.
Les parties internes sont divisées en éléments de section, chacun utilisant une valeur d’ID spécifique. L'exemple HTML ci-dessus provient de la vue de profil par défaut qui se charge immédiatement sur la page. Je veux commencer par examiner jQuery, car sa compréhension est simple et rapide. Il y a un peu pour la navigation avec une autre petite section pour traiter le formulaire de contact qui ne fonctionne pas.
Effets jQuery dynamiques
Tout en bas de la page, vous remarquerez un bloc de script. Il n'y a rien de trop complexe mais cela mérite une explication. J'ai copié toute la section de code ci-dessous:
Chaque fois qu'un utilisateur clique sur l'un des liens de navigation, j'utilise event.preventDefault () pour arrêter l'action. Voici comment vous pouvez inclure des liens vers des pages externes pour Google qui ne sont pas accessibles à la plupart des utilisateurs.
Je définis également 3 variables utiles dans toute la fonction. actuel représente le lien de page actuellement sélectionné, et le .sel La classe doit être supprimée de ce lien lors du passage à un nouveau contenu. Les deux autres variables newpg et oldpg représente la nouvelle page sur laquelle nous basculons et l’ancienne page à masquer. Ceci est accompli en utilisant les méthodes fadeOut () / fadeIn () avec removeClass () / addClass ().
Tout en bas, je cible #contactform en tant que sélecteur. Lorsque quelqu'un envoie le formulaire de contact, je souhaite arrêter l'envoi car il n'y a pas de code en place pour envoyer un courrier électronique. Si vous envisagez d'implémenter un formulaire de contact réel, veillez à supprimer ces 3 lignes de code.
Conception de contenu interne
Tout dans cette présentation vCard n’est pas passionnant, mais il existe quelques fonctionnalités CSS intéressantes. Plus précisément, j'aimerais expliquer les caractéristiques de conception des barres de compétences, ainsi que les éléments de base du portefeuille réactif.
En cherchant sur CodePen, j'ai trouvé ces barres animées cool au design très soigné. J'ai choisi de laisser l'animation de côté et de simplifier davantage la conception. Ces compétences sont situées sur le deuxième onglet pour "Reprendre".
Chaque .skillbar est un article unique avec un arrière-plan complet derrière une autre barre allongée. Un élément d'envergure interne contient un texte indiquant la compétence, ainsi que le nombre total d'années d'expérience. Les valeurs de couleurs et de largeur sont appliquées dans CSS en ciblant des classes spéciales pour chaque compétence.
En gardant toutes les largeurs fluides, tout se déroulera naturellement en fonction de la résolution de l'appareil. C'est une autre raison pour laquelle j'ai évité l'animation sur les barres de compétences - bien que j'aie écrit un tutoriel très similaire sur cette technique.
La présentation du portefeuille est un peu simpliste, bien que cela fonctionne très bien pour cette démo. Les images sont liées à des prises de vue Dribbble en utilisant des dimensions de 800 × 600. Les images seront redimensionnées en fonction de la largeur totale du conteneur. Chaque élément de la liste représente 45% de la largeur de la page et les images secondaires flottent à droite pour créer l’illusion d’une marge médiane.
Mises à jour réactives
Au bas de mon fichier CSS, vous trouverez des requêtes de support pour la gestion de périphériques réactifs. Je travaille à des points d'arrêt de 550px et 450px. En atteignant la première pause à 550, chaque élément de portefeuille se transforme en pleine longueur au lieu de s'empiler comme des miniatures.
En 450px, j'ai besoin de gérer les éléments de navigation qui commencent à s'effondrer sur de nouvelles lignes. Les liens de navigation s’adaptent à 100% de la largeur. De plus, les en-têtes h1 / h2 sont redimensionnés pour apparaître plus naturellement sur les écrans de smartphone. L'image de portrait de la page d'accueil est également redimensionnée et les entrées du formulaire de contact sont raccourcies.
Certains de ces exemples sont des retouches cosmétiques mineures, alors que la navigation est une fonctionnalité nécessaire. Si vous ajoutez d'autres éléments de page, le nombre de styles réactifs peut augmenter, ainsi que la possibilité d'écrire de nouveaux points d'arrêt.
Live Demo - Télécharger le code source
Fermeture
À partir de ce modèle de base, vous devriez pouvoir réécrire le contenu ou même coder vos propres sections de page. Il existe de nombreuses façons de relooker cette application Web à votre guise. N'hésitez pas à télécharger une copie de mes codes sources et à construire sur cette base pour voir ce qui est possible.