Ce portfolio a pour objectif de rassembler l’ensemble de mes travaux réalisés durant le Master MALTT. Il offre à toute personne intéressée un accès clair à mes projets. Vous y trouverez notamment des liens vers ma page personnelle et ma page EduTech Wiki, où je présente mon parcours, mes motivations et les raisons qui m’ont conduite à intégrer ce master. Mon adresse e-mail étudiante UNIGE et mon profil LinkedIn sont également disponibles pour me contacter au besoin.
Le dispositif prend la forme d’un portfolio académique qui centralise l’ensemble de mes productions du Master MALTT et en facilite la consultation. L’interface, volontairement épurée, s’ouvre sur une page d’accueil où mon identité est clairement affichée et où une navigation principale par unités d’enseignement (ADID, ERGO, METHODE, STIC, VIP) conduit, via chaque onglet, aux travaux correspondants. Un pied de page rassemble les liens vers mes différentes pages ainsi que mon adresse e-mail. La charte graphique homogène sur l’ensemble du site assure une identité forte et une cohérence visuelle. Ce minimalisme favorise le repérage, limite la charge cognitive et évite les distractions : aucun élément superflu ne vient perturber la lecture. Les liens clés sont répétés d’une page à l’autre pour rester toujours accessibles ; le lien « Contact » ouvre directement le client de messagerie afin de simplifier l’envoi d’un message. Enfin, la répartition de certaines informations sur des sites externes/institutionnels contribue à limiter le poids des pages et, par conséquent, la consommation de bande passante et l’empreinte énergétique du dispositif.
Pour développer ces pages, j’ai utilisé Visual Studio Code en HTML, CSS et JavaScript. J’ai d’abord posé la structure en HTML, puis appliqué le style avec CSS. Le JavaScript m’a servi à créer l’animation d’introduction : le nom « Lilas » apparaît, puis disparaît pour laisser place au site. Après quelques tâtonnements, j’ai adopté un script qui gère la transition entre l’écran d’intro et le site principal. La fonction revealSite() retire l’attribut hidden de #site et supprime #intro du DOM afin d’alléger la page et d’améliorer l’accessibilité. Si l’utilisateur a activé la préférence système prefers-reduced-motion, le script ignore les animations et affiche immédiatement le site, conformément aux bonnes pratiques d’accessibilité. Sinon, il attend la fin des animations de deux éléments SVG (via l’événement animationend). Enfin, un filet de sécurité (setTimeout(revealSite, 9000) garantit l’affichage du site au bout de 9 secondes même si un événement ne se déclenche pas. Une fois mes pages crées sur visual studio code, j'ai pu les mettres sur le serveur tecfa via cyberduck.
Je me suis fortement investie dans la construction de ces pages. L’identité visuelle était essentielle : je voulais un site qui me ressemble. J’ai donc consacré beaucoup de temps aux animations et à la mise en page. Cette ambition m’a toutefois mise en difficulté : faute de temps pour respecter le délai imparti, certaines pages restent simples et succinctes, ce qui crée un décalage avec une introduction plus travaillée. Par ailleurs, j’ai constaté que l’apprentissage exclusivement par des textes théoriques de code me convient moins ; les tutoriels vidéo m’ont beaucoup mieux aidée à comprendre et à progresser.
Toutes les images et icônes présentes dans mes sites ont été prises ou créées par moi.