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
THE BEAR: Awaken your wild instincts – UI Design & Prototyping
Services
Graphic design
Collaboration
Yoan Toran -Nolan DI FRANCESCO
Year
December 2025
THE BEAR: Awaken Your Wild InstinctUI Design & Figma Prototyping
How do you transform a strong visual identity into a fluid web experience?
THE BEAR is a fictional craft beer brand rooted in nature. On this collaborative project, roles were clearly defined: the visual identity and illustrations were created by my partner Yoan Toran, while I was responsible for translating this universe into a digital interface (UI) on Figma.
I structured the user journey to showcase the three ranges (Brown, Polar, Grizzly), created the adapted web design system, and produced high-fidelity prototyping to ensure immersive and functional navigation. .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: 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; } }
“That noise that wouldn’t let go” – Audio fiction
Services
Audiovisual
Collaboration
Individual
Year
December 2025
The Noise That Wouldn't Let GoSonic Autofiction — Duration: 2 min
You are walking down the street; your headphones are your only refuge against the urban chaos. But suddenly, a sound appears. Tiny. Regular. Impossible to ignore.
In this immersive autofiction, dive into the heart of a sonic obsession. Through meticulous work on stereo and frequency filters, the narrative explores the fragile boundary where the outside world becomes threatening.
Is the noise coming from the city, or is your own mind overloading? A short, intense experience about our attempt (sometimes futile) to control our sonic environment. .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: 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; } }
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; } }
COMING SOON
✈️ 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; } }
The Art Behind the Curtain – Documentary
Services
Audiovisual
Collaboration
Jules P -Hedi L - Nolan DF
Year
2025
This documentary invites you to discover the fascinating and often overlooked world of the professionals who work behind the scenes at the Municipal Theater of Grenoble. From set design to technical and artistic choices, and through rehearsals, we followed the key stages in staging Feu la Forêt, a play by the company Le Chant des Pistes.Through interviews and immersive recordings, we highlight the essential roles of technicians, creators, and artistic teams, whose meticulous work is indispensable to the success of live performances. This documentary pays tribute to their passion and expertise, while revealing the organization and synergy required to transform an artistic vision into reality on stage.
Raise the curtain and dive into the backstage world where communication, storytelling, and creation come together. .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 350px; 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: 250px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 215px; height: 36px; font-size: 14px; } }
Web Posters
Services
Design
Collaboration
Individual
Year
2023 - 2024
As part of developing my web design skills, I created several posters based on my personal interests, particularly fashion and sneakers, using Photoshop, Illustrator, and Canva.Discover here my best creations !
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;
}
}
Report on the Profession of Videographer/Photographer
Services
Audiovisual
Collaboration
Nolan DI FRANCESCO, ThéoMARTINEZ, Titouan GIGNOUX
Year
December 2023
This documentary, titled “The Heart of the Camera”, was an ambitious university project focused on portraying Arnaud Auria, a distinguished professional in the field. As part of this project, we took on various roles and applied different skills, ranging from video recording to conducting interviews, as well as editing and sound management. Our primary objective was to highlight the diversity and depth of this profession, showcasing the challenges, passions, and expertise that define it.https://www.youtube.com/watch?v=405Obj6JZuI&t=2sTo bring this project to fruition, we invested several weeks in meticulous planning, on-site filming, and extensive research. These efforts enabled us to capture authentic moments and gather poignant testimonials, offering a fascinating glimpse into the life and work of Arnaud Auria, as well as his impact on his professional field.
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 this year, I plan to pursue a Master’s degree in work-study to further strengthen my skills and gain even more professional experience. With a strong interest in the world of fashion and sports, my goal is to join a major company where I can contribute to creative and challenging projects. Thanks to my proficiency in English, I am also considering the possibility of completing part of my journey abroad to broaden my perspective and develop an even more international approach.
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 this year, I plan to pursue a Master’s degree in work-study to further strengthen my skills and gain even more professional experience. With a strong interest in the world of fashion and sports, my goal is to join a major company where I can contribute to creative and challenging projects. Thanks to my proficiency in English, I am also considering the possibility of completing part of my journey abroad to broaden my perspective and develop an even more international approach.
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
Figma
Analytics
Canva
WordPress
Capcut
Adobe Creative Suit
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.