Conception de site portfolio interactif

Une introduction de portfolio spatiale

Cette page d’accueil OpenDesign traite le portfolio comme un environnement visuel plutôt que comme une page d’atterrissage classique. L’état d’ouverture place un lettrage tridimensionnel réfléchissant bleu et blanc sur une grille fine, avec une sculpture en forme de curseur décalée vers le bas à droite. La composition établit l’identité avant que le visiteur n’atteigne l’archive des travaux.

Au-delà de la scène d’ouverture capturée, la source présente un logotype OpenDesign avec un suffixe AI, suivi de « Design for Everyone » et de « Local-first, agent-native. No cloud lock-in. » Ces énoncés positionnent la couche textuelle suivante ; ils ne sont pas visibles dans la capture d’ouverture. La typographie et la séquence de transition relient ce positionnement à l’archive des travaux, même si un lecteur qui cherche seulement un index de projets doit d’abord traverser la couche d’identité.

La source décrit le concept comme la lecture d’une marque à partir d’un DESIGN.md pour produire des artefacts HTML/CSS destinés à des agents de code. Dans cet artefact, cette idée passe par la typographie, les libellés, la grille et la scène 3D rendue localement ; les captures n’établissent ni services connectés ni envois fonctionnels.

De la déclaration de marque à l’archive des travaux

Ce design convient aux portfolios où la relation entre les projets compte autant que chaque étude de cas. Dans l’état Work, la navigation supérieure garde « WORK » et « CONTACT » visibles à côté de « THEME[A] » et « SOUND[\] », tandis que l’archive répartit les projets sur une grille large. L’orientation reste ainsi constante pendant que le contenu change.

L’archive visible comprend des libellés tels que « PLUGIN MARKETPLACE », « 150 BRAND SYSTEMS », « HYPERFRAMES » et « AMR ROUTER », accompagnés d’années, de marqueurs de catégorie et d’étiquettes « OPEN SOURCE ». Ces champs répétés donnent à chaque vignette une identité compacte : le lecteur peut parcourir sujet, date et type sans ouvrir de page de détail distincte. Le compromis est que des libellés courts dépendent d’un contexte partagé ; les projets peu connus peuvent nécessiter ailleurs une description plus longue.

La ligne capturée en bas à gauche indique « GMT-7 LA 18:49 19°C », avec « 0720 X 0450 Y » près du centre inférieur. Dans la source, l’horloge lit les heures et minutes locales du navigateur, la température est fixée à 19 et les coordonnées proviennent de la position du pointeur et de la taille de la fenêtre d’affichage. Le libellé LA/GMT-7 n’établit donc ni conversion de fuseau horaire ni flux météo. Cet ensemble apporte une texture de tableau de bord sans prouver l’existence d’un service de localisation opérationnel.

Une page d’accueil construite en états

Les captures fournies montrent deux états visuels distincts plutôt qu’une seule page continue. L’état d’ouverture met en avant la scène de marque 3D ; l’état Work remplace cet accent par une grille de projets sélectionnés et des visuels de projet superposés. Ce changement d’état donne à l’archive un sentiment d’arrivée sans abandonner la même grille, la même typographie ni le même vocabulaire de navigation.

La structure de la page va de l’identité à la proposition, puis à l’archive. « TURN AGENTS INTO A DESIGN ENGINE FOR ALL » sert de grande déclaration typographique, suivie d’un texte explicatif sur DESIGN.md et les artefacts construits localement. En dessous, les vignettes de projets deviennent la matière probante de la page, même si leurs affirmations restent du contenu illustratif rédigé et non des preuves produit vérifiées de manière indépendante.

Les libellés étroits et techniques créent un rythme dans un espace par ailleurs ouvert. Leur avantage est une forte continuité visuelle ; leur coût est une lisibilité réduite lorsque les noms de projets, les années et les étiquettes de catégorie rivalisent à la même échelle. Une recréation doit conserver l’ordre et le contraste entre les titres déclaratifs et les métadonnées d’archive, tout en laissant les longs noms de projets passer à la ligne sans risque.

1. Commencer par la scène

   Utilisez la composition 3D d’ouverture pour établir la forme, la couleur et le mouvement de la marque avant d’introduire l’archive.

2. Énoncer la proposition

   Placez le message « Design for Everyone » et l’explication du fonctionnement local prioritaire entre l’identité et le contenu des projets.

3. Exposer l’archive

   Utilisez des champs de projet répétés pour comparer rapidement, avec le détail approfondi fourni en dehors de la vignette compacte.

Design visible et limites des capacités

L’artefact démontre un langage de design : libellés en police à chasse fixe, grille pâle, géométrie bleue réfléchissante, transitions d’état de projet et archive composée de vignettes nommées. Les états d’exécution confirmés par la source comprennent la scène 3D initiale et la grille Work sélectionnée, toutes deux rendues avec les dépendances 3D déclarées par la source.

La source fournit une navigation locale vers Work et Contact, ainsi que des préférences Theme et Sound stockées dans le navigateur. La galerie montre les mises en page d’ouverture et Work, pas un flux audio ou de détail de projet vérifié. Un aperçu interactif n’est pas disponible. Les noms, années et nombres sont du contenu d’exemple et non des capacités actuelles d’OpenDesign ; les captures n’établissent ni services connectés ni envois.