I am
DI FRANCESCO Nolan
I am currently in my third year of a BUT MMI program in Grenoble, doing a work-study at Youtips, where I focus on communication, social media management, and content creation. Specialized in communication strategy and experience design, I love learning, experimenting with new ideas, and exploring everything digital has to offer. Feel free to check out my best projects !
Content creator at Youtips (and coffee brewer on the side)
Portfolio
A glimpse of my work
Maison Élégance – Social Media
Services
Communication – Graphic Design
Collaboration
Individual
Year
March 2026
Case Study: Maison Élégance
How do you turn an Instagram account into a premium sales funnel? To illustrate my vision of Social Media Management, I conceptualized a fictional ready-to-wear brand from scratch: Maison Élégance.
/* ============================================== */ /* === ISOLATION DU BLOC ======================== */ /* ============================================== */ .me-portfolio-wrapper { font-family: 'Inter', sans-serif; background-color: #E5E5E5; padding: 40px 10px; display: flex; flex-direction: column; align-items: center; width: 100%; overflow: hidden; } .me-portfolio-wrapper * { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================== */ /* === LE SLIDER ================================ */ /* ============================================== */ .me-slider-container { width: 100%; max-width: 1000px; position: relative; } .me-slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); background: #fff; } .me-slider-track::-webkit-scrollbar { display: none; } .me-slide { flex: 0 0 100%; min-height: 560px; scroll-snap-align: start; display: flex; align-items: center; padding: 60px 80px; position: relative; } .me-bg-beige { background-color: #F5F3E9; } .me-bg-white { background-color: #FFFFFF; } .me-content { flex: 1; padding-right: 40px; } .me-content.me-reverse { padding-right: 0; padding-left: 40px; } .me-visual { flex: 1.2; display: flex; justify-content: center; align-items: center; } /* ============================================== */ /* === FLÈCHES DE NAVIGATION ==================== */ /* ============================================== */ .me-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background-color: #ffffff; color: #1A1A1A; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none !important; border: none !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 50; transition: all 0.2s ease; } .me-arrow:hover { background-color: #1A1A1A; color: #ffffff; transform: translateY(-50%) scale(1.1); text-decoration: none !important; border: none !important; } .me-arrow-prev { left: 20px; } .me-arrow-next { right: 20px; } /* ============================================== */ /* === TEXTES =================================== */ /* ============================================== */ .me-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #8C7A6B; font-weight: 600; margin-bottom: 15px; display: block; } .me-title { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: #1A1A1A; line-height: 1.1; margin-bottom: 20px; font-weight: 400; } .me-text { font-size: 1.05rem; color: #444; line-height: 1.6; font-weight: 300; margin-bottom: 15px; } .me-bullet { font-weight: 600; font-size: 0.95rem; color: #1A1A1A; } /* ============================================== */ /* === MOCKUPS & CASCADE ======================== */ /* ============================================== */ /* Format pour les STORIES */ .me-phone { width: 155px; height: 320px; background-color: #D9D9D9; border: 5px solid #FFFFFF; border-radius: 20px; box-shadow: -10px 15px 30px rgba(0,0,0,0.15); background-size: 100% 100%; /* Force l'image à rentrer sans se couper */ background-position: top center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; flex-shrink: 0; } /* Format pour le PROFIL */ .me-phone-single { width: 250px; height: 460px; border-radius: 30px; border-width: 8px; } .me-stack { display: flex; align-items: center; justify-content: center; padding-top: 30px; } .me-stack .me-phone { margin-left: -75px; } .me-stack .me-phone:first-child { margin-left: 0; } .me-stack .me-phone:nth-child(1) { z-index: 1; } .me-stack .me-phone:nth-child(2) { z-index: 2; } .me-stack .me-phone:nth-child(3) { z-index: 3; } .me-stack .me-phone:nth-child(4) { z-index: 4; } .me-stack .me-phone:nth-child(5) { z-index: 5; } .me-stack .me-phone:hover { transform: translateY(-30px) scale(1.05); z-index: 10 !important; box-shadow: 0 25px 50px rgba(0,0,0,0.3); } /* ============================================== */ /* === NAVIGATION DOTS ========================== */ /* ============================================== */ .me-nav { display: flex; justify-content: center; gap: 12px; margin-top: 25px; } .me-nav a { width: 12px; height: 12px; border-radius: 50%; background-color: #BDBDBD; transition: all 0.3s ease; } .me-nav a:hover { background-color: #8C7A6B; transform: scale(1.2); } /* ============================================== */ /* === RESPONSIVE MOBILE ======================== */ /* ============================================== */ @media (max-width: 850px) { .me-slide { flex-direction: column; padding: 40px 20px; text-align: center; gap: 30px; min-height: auto; } .me-content, .me-content.me-reverse { padding: 0; width: 100%; } .me-visual { width: 100%; margin-bottom: 20px; } .me-stack { transform: scale(0.85); padding-top: 10px; } .me-phone-single { transform: scale(0.85); } .me-title { font-size: 2.2rem; } .me-arrow { display: none; } } @media (max-width: 480px) { .me-stack { transform: scale(0.65); margin-top: -10px; } .me-phone-single { transform: scale(0.7); } .me-title { font-size: 1.8rem; } .me-text { font-size: 0.95rem; } } Étude de Cas / ConceptMaison Élégance.
Création d'une identité premium et d'un tunnel de conversion social media. Direction artistique axée sur la lumière et les textures brutes.
— Le Profil : La vitrine aspirationnelle.
Phase 1 : RéassuranceLa Preuve Sociale.
Mise en avant des parutions médias et des retombées presse. Redirection vers les articles via des stickers natifs intégrés subtilement.
Objectif : Crédibiliser la marque.
Phase 2 : EngagementDans l'Atelier.
Immersion dans le savoir-faire via une séquence narrative. Utilisation stratégique de l'écosystème Instagram (Sondages, Boîtes à questions).
Objectif : Créer du lien et stimuler l'algorithme.
Phase 3 : Social CommerceLe Tunnel de vente.
Génération d'urgence (FOMO) avec le Compte à rebours, suivi d'un achat facilité via le Shopping Tag sans quitter l'application.
Objectif : Convertir et réduire la friction.
KUDOS PACE: SEA Strategy & UX Design
Services
Communication –
Graphic Design
Collaboration
Individual
(Final Year Project)
Year
March 2026
Has technical apparel lost its soul? In the Gorpcore era, owning a high-performance jacket no longer proves your athletic level, but simply your purchasing power. KUDOS PACE flips the script with a radical concept: "Don't buy it. Earn it." In a world where meritocracy outweighs credit cards, I designed a hybrid ecosystem merging technical fashion with performance tracking. Discover how intentional purchase friction, coupled with the Strava API and local customization concept stores, transforms a simple garment into a true trophy of achievement.The full case study below includes the strategic audit, the statement of intent, and access to the interactive Figma prototype.
.content a { width: 100%; width: 470px; } .content { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 100%; /* On utilise toute la largeur disponible */ height: 1.2em; /* Hauteur basée sur la taille du texte pour être flexible */ text-transform: uppercase; display: flex; /* Pour aider au centrage interne si besoin */ justify-content: center; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; }
K’fée des jeux – Audit & Com Strategy
Services
Communication - Audiovisual - Graphic Design - Web DevelopmentCollaboration
Noah - Lucie - Iryna- Ryan - Nolan
Year
January 2026
La Main dans le Cube: Strategy & User Experience for K’Fée des Jeux - GrenobleContext and Objectives: Working for K’Fée des Jeux, a board game café in Grenoble for 18 years, presented a major challenge: helping the client monetize their new creation, "La Main dans le Cube". As a team, we designed a strategic solution to differentiate this game from traditional escape rooms and enable its rental to other organizations. The goal was to transform this handcrafted concept into a commercially viable product, considering the client's limited resources while linking the physical gameplay to a global strategy.
UX Approach and Service Design: Our intervention began with a sector audit to position the product within a unique niche: immersive micro-adventures. Through on-site user observations, we refined the experience to meet the demand for digital detox while ensuring it remained accessible and fast-paced. This co-design process resulted in a web mockup and a service structure tailored to the café's real-world logistical constraints, ensuring a seamless flow between online booking and the in-person experience.
Communication Strategy and Profitability: To ensure a successful launch on a tight budget, we deployed a multi-channel strategy (Instagram, TikTok, Facebook, print materials, B2B brochures). The objective was to build an effective conversion tunnel, from initial teasing to social proof. By analyzing production costs, we proved the project's viability: the initial investment pays for itself in just ten sessions. This project of over 100 hours concluded with the delivery of a comprehensive report and an oral presentation to the client.
For reasons of confidentiality and intellectual property related to this client, the detailed explanatory file and the presentation slides are not available for public viewing.
Millia Matcha – Pop-Up Opening (event)
Services
Communication
Collaborazione
Noah F. - Zoé R. - Nolan DF
Year
November 2025
As the holiday season approaches, we imagine an immersive pop-up designed to bring the Miliamatcha universe to the heart of Grenoble.This event concept showcases the full creation of a temporary “Christmas Matcha Bar”: natural scenography, exclusive tastings, participatory workshops, and animations designed to attract, surprise, and engage visitors.
Inside the PDF, you’ll find the complete concept: venue identity, detailed budget, action plan, scenography, animations, and contingency management, all crafted to deliver a warm, aesthetic, and brand-consistent experience. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
KeyTrip – Open the doors to the world
Services
Communication -
Design
Collaboration
FLOCARD R. - FRAGNOUD N.
- DI FRANCESCO N.
Year
Décember 2025
When was the last time you booked a trip… without spending hours comparing, hesitating, juggling between ten different tabs?That frustration is exactly where KeyTrip was born. We reinvented the travel experience to make it simpler, more intuitive, and more human.
We designed a complete concept dossier and a full Figma prototype (wireframes + high-fidelity mockups) to bring to life an all-in-one platform that centralizes flights, hotels and activities—while adding a unique touch: the immersive box, letting your journey begin even before you leave.
A premium concept designed for zero stress, 100% emotion. KeyTrip is travel, reimagined.
KeyTrip – Open the doors to the world. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
Communication Strategy for the UT4M (Ultra Tour of the 4 Massifs)
Services
Communication
Collaboration
By a team of 4
Year
November 2025
Project: Communication Strategy for the UT4M (Ultra Tour of the 4 Massifs)Objective: Expand the visibility of the UT4M among students and young audiences to attract new participants and spectators.
As part of an audit and strategic recommendation assignment, our team analyzed the current communication of the event (social media, press, partnerships, website, on-site actions).
We then proposed a strategy aimed at modernizing the UT4M image and strengthening its presence on Grenoble campuses.
Key Actions:
– Creation of a UT4M Campus Day in partnership with the BDE STAPS (sports and festive event).
– Establishment of a student ambassador club to relay communication on social media.
– Development of dynamic content: YouTube mini-series, tips capsules, participatory stories.
This project allowed us to work on a real case, applying our skills in communication auditing, digital strategy, and event project management. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
Multimédi’Alpes – Event Communication
Services
Communication - Design
- Audiovisual
Collaboration
In a team of four
Year
April 2024
As a team of four, we created the communication plan for Multimédi’Alpes 2024, a festival highlighting the creative projects of MMI students.Our role was to design and coordinate the entire communication strategy, from concept to production. We conducted interviews with students and professors to include in the official trailer and teaser, and developed a digital campaign featuring Instagram stories and posts.
We also designed the graphic charter for the event website and prepared coordination and production reports outlining the key steps of the project.
I was mainly responsible for social media management and writing the communication and coordination documents. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
✈️ Air France Centers – The Awakening of the Constellations
Services
Comunication
Collaboration
FLOCARD R. - FRAGNOUD N.- LAIB M. - DI FRANCESCO N.
Year
May 2025
In a team of four, we designed an immersive digital campaign to support the opening of the first Air France Center in La Villette, an innovative venue blending travel, culture, and sensory experience.Our mission: to modernize the brand’s image and engage new audiences through a transmedia strategy. We worked on the client brief, target and competitor analysis, and then developed a unifying creative concept – the Collective Celestial Map.
Deployed across Instagram, TikTok, and LinkedIn, the campaign combines storytelling, gamification, and immersive content to create a strong emotional connection between Air France and its communities.
This project demonstrates our ability to combine strategic research, narrative design, and content creation to bring to life a digital experience that is coherent, innovative, and engaging. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
🎵 VinylVerse – Fictional E-commerce Store Project
Services
Communication - Design
Collaboration
FLOCARD R. - FRAGNOUD N.- DI FRANCESCO N.
Year
June 2025
For this project, completed as a team of three, we created VinylVerse, a fictional brand dedicated to vinyl records, built from scratch. Our goal was to design an immersive e-commerce experience, combining sales of classic vinyls, customization of unique items, and monthly subscriptions with exclusive content.We started from the client brief, defined three personas, conducted competitor research, and then developed a complete design system (typography, colors, components, and site architecture).
The project was then brought to life through wireframes and a high-fidelity Figma mockup, featuring a modern and impactful design aimed at engaging a curious, creative, and aesthetically-minded audience. The experience is designed to make each vinyl not just a product, but also a gateway to a musical and sensory universe.
Although the site was developed on PrestaShop, it is no longer accessible online; the project is showcased through our Figma mockups and prototypes, which demonstrate our UX/UI approach and our ability to turn an idea into a coherent and attractive user experience.
⚠️ The links between the pages in the mockup are not active. You can press → or swipe (on mobile) to navigate between pages. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
UGA Newsletter
Services
Communication
Collaboration
Cloé BORSELLINO, DI FRANCESCO NolanYear
December 2023
A newsletter is much more than just an email. It is a direct link between a company, an organization, or a website and its audience. By regularly receiving newsletters, you stay informed about the latest news, special offers, and upcoming events. It is a convenient way to discover new products or services, receive useful tips, and remain connected to what is happening in your field of interest. By subscribing to a newsletter, you become an integral part of the community that receives it, which strengthens your sense of belonging and engagement.Here is what we created: a newsletter for UGA aimed at promoting the MMI program.
.btn-epic {
position: relative;
margin: auto;
width: 100%;
border-color: ;
max-width: 260px;
height: 52px;
background: #fff;
transform: translate3d(0px, 0%, 0px);
text-decoration: none;
border-color: black;
font-weight: 600;
font-size: 18px;
letter-spacing: .05em;
transition-delay: .6s;
overflow: hidden;
left: 50%;
transform: translateX(-50%);
}
.btn-epic:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #8BB4B1;
border-radius: 50% 50% 0 0;
transform: translateY(100%) scaleY(.5);
transition: all .6s ease;
}
.btn-epic:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 0;
transform: translateY(0) scaleY(1);
transition: all .6s ease;
}
.btn-epic div {
position: relative;
width: 50%;
height: 26px;
text-transform: uppercase;
}
.btn-epic span {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
text-align: center;
transition: transform .5s ease;
}
.btn-epic span:first-child {
color: white;
transform: translateY(100%);
}
.btn-epic span:last-child {
color: black;
transform: translateY(0);
}
.btn-epic:hover {
background: #d9d9d9;
transition: background .2s linear;
transition-delay: .6s;
}
.btn-epic:hover:after {
border-radius: 0 0 50% 50%;
transform: translateY(-100%) scaleY(.5);
transition-delay: 0;
}
.btn-epic:hover:before {
border-radius: 0;
transform: translateY(0) scaleY(1);
transition-delay: 0;
}
.btn-epic:hover span:first-child {
transform: translateY(0);
}
.btn-epic:hover span:last-child {
transform: translateY(-50px);
}
@media (max-width: 768px) {
.btn-epic {
max-width: 200px;
height: 42px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.btn-epic {
max-width: 160px;
height: 36px;
font-size: 14px;
}
}
About Me
After high school, I chose to specialize in digital communication by joining the BUT MMI (Multimedia and Internet Professions) program in Grenoble. This experience has given me a valuable opportunity to develop my skills and immerse myself in various fields such as marketing, web development, design, and audiovisual production.
Throughout this program, I have had the chance to work on a wide range of exciting projects that have allowed me to sharpen my technical skills while learning how to collaborate effectively in a team and take on new challenges.
I am recognized for my reliability and determination, always striving to give my best. Passionate about teamwork, I enjoy collaborating and am always eager to contribute my ideas to enrich the projects I am part of.
After completing my BUT (Bachelor of Technology), I intend to pursue a Master’s degree through a work-study program to further solidify my digital expertise. Passionate about the worlds of sports and fashion, my goal is to join a major company or an agency where I can contribute to creative and ambitious projects. My proficiency in English is also an asset that I would be delighted to leverage for international campaigns or projects.
Throughout this program, I have had the chance to work on a wide range of exciting projects that have allowed me to sharpen my technical skills while learning how to collaborate effectively in a team and take on new challenges.
I am recognized for my reliability and determination, always striving to give my best. Passionate about teamwork, I enjoy collaborating and am always eager to contribute my ideas to enrich the projects I am part of.
After completing my BUT (Bachelor of Technology), I intend to pursue a Master’s degree through a work-study program to further solidify my digital expertise. Passionate about the worlds of sports and fashion, my goal is to join a major company or an agency where I can contribute to creative and ambitious projects. My proficiency in English is also an asset that I would be delighted to leverage for international campaigns or projects.
Experience
Work-study – Communication & Content Creator – Youtips (Grenoble, 38000) – 1 year
September 2025 – August 2026
Internship – Content Creator – Youtips (Grenoble, 38000) – 13 weeks
January 27 – April 25, 2025
Volunteer – Trail du Lac de Paladru (38850) – 2 days
Setup and dismantling of equipment, timekeeping, signaling, and ensuring smooth event operations | April 19–20, 2025
Cashier Supervisor – La Rochette Swimming Pool (City Hall, 73110) – 2 months
Cash register management | August 2024 and July 2025
Logistics Assistant – Isère Department (38000) – 1 week
Grenoble Departmental Elections – June 2022
Internship – Electrician – ENR Energy (38530) – 6 weeks
2019 – 2020
Middle School Internship – Isère Department (38000) – 1 week
Office Assistant | 2019
Education
IUT 1 - Grenoble
2023 - 2026
BUT MMI, specialization in Communication Strategy – Digital Communication School (communication strategy, audiovisual production, design, and web development)
LPO Monge - Chambéry
2020 - 2023
STI2D Baccalaureate, specialization in ITEC (Technological Innovation and Eco-Design)
My skills
Social media
Adobe Creative Suit
Canva
Capcut
Figma
WordPress
Analytics
SEO / SEA
My interests
Music
Sports
Travel
Music plays an important role in my life: it sparks emotions, helps me relax, and accompanies me in my daily routine. I enjoy exploring a wide variety of styles and sharing my discoveries with those around me, whether while traveling or during social moments. This passion also resonated during my work-study at Youtips, a company specialized in training musicians. Even though my role was focused on digital communication, I had the chance to meet and exchange with many artists, which enriched my creative vision and strengthened my connection to the musical world.
Among my many interests, sports hold a special place in my life ! My favorite disciplines are skiing and swimming. In the past, I competed in judo tournaments, even winning some titles. Today, I regularly go to the gym and I am also passionate about football (soccer).
Exploring different countries has allowed me to discover a variety of fascinating cultures. Each trip has opened my eyes to new traditions, flavors, and ways of life. It’s an enriching experience that helps me appreciate the diversity of the world and grow as a person. I have already visited many European countries, as well as Madagascar, Thailand, India, and the Maghreb. Next on my list are the United States and Japan.- Passion - Creativity - Energy - Teamwork - Communication - Collaboration - Versatility
- Autonomy - Honesty - Determination - Responsibility - Curiosity - Confidence - Respect - Patience - Perseverance
No matter how difficult or impossible it may seem, never lose sight of your goal.
Monkey D. Luffy
Contact Me |
Whether it’s to work together, ask a question, or share a funny joke, you can reach me here.