This groundbreaking digital portfolio, titled "They Call Me Giulio," represents a significant evolution in personal branding and web development, pushing the boundaries of interactive storytelling and immersive user experience. Developed by Giulio, a multifaceted creative professional, this fifth iteration of his portfolio moves beyond traditional resume formats to deliver a captivating, cinematic journey through his work and creative philosophy. The project, meticulously crafted over an extended period of focused dedication, showcases a deliberate departure from client-driven demands to allow for pure, unadulterated creative exploration.
The core of "They Call Me Giulio" is its ambitious narrative-driven design. Giulio eschewed conventional design trends, such as cursor followers and oversized typography, in favor of building a coherent and engaging story. Each animation and visual element is intentionally designed to serve the overarching narrative, transforming the portfolio from a mere showcase of projects into an interactive piece of art. The stated goal is clear: to create a digital experience so memorable that it lingers in the user’s mind long after they close their browser. This ambitious objective underscores a commitment to impactful digital storytelling that resonates deeply with its audience.
The Blueprint: A Fusion of Cult Classics and Digital Canvas
"They Call Me Giulio" is not presented as a sterile resumé but rather as a personal narrative, a reflection of the individual behind the work. Giulio intentionally carved out space to incorporate elements of his life beyond the professional sphere, moving away from the typical clean layouts and simple "contact me" buttons. This approach aims to reveal the human side often hidden in professional presentations. Giulio draws inspiration from his personal passions, citing a fondness for rewatchable cult classic films as a significant influence. This personal touch is further exemplified by his avatar, which originated as a Blender experiment for the fourth version of the site and has since evolved into a recognizable and integral part of his personal brand, possessing its own distinct personality.
Scene One: About Me – Echoes of Blade Runner
The portfolio’s opening sequence immediately immerses the user in a scene directly inspired by the iconic "Tears in Rain" monologue from Ridley Scott’s 1982 neo-noir masterpiece, Blade Runner. The initial visual evokes the film’s climactic rooftop scene, complete with simulated rain and shimmering neon lights, setting a profound mood of melancholy, poetry, and a touch of hope. This deliberate choice establishes a strong cyberpunk atmosphere, a genre that has clearly captivated Giulio.
Instead of a conventional hero section with a prominent headline, users are greeted with a visually arresting video that captures the essence of this scene. The interactive element emerges when the user hovers over the "About" button. The avatar, an android character, reacts with curiosity, tilting its head as if to acknowledge the user’s presence. Upon clicking, the camera smoothly transitions, dissolving the surrounding environment to focus solely on the avatar under a spotlight, marking the entrance to the "About Me" section. A subtle detail, the rusty yellow sign on a building, is the Japanese translation of "Giulio," adding a layer of personal branding within the meticulously crafted environment.
Scene Two: Works – Unleashing Potential
The narrative progresses to "Scene Two: Works," where the android character undergoes a dramatic transformation. Inspired by the iconic Super Saiyan transformation from the anime series Dragon Ball, a childhood obsession of Giulio’s, the avatar unleashes a powerful, glowing energy. This visual metaphor represents the culmination of skills and experiences the developer has acquired over time. As this explosive energy dissipates, Giulio’s selected projects are revealed. This sequence serves as a powerful declaration: "This is what I can do," showcasing a curated selection of projects that were significant, challenging, or instrumental in his professional growth.
Scene Three: Room of Memories – A Cyberpunk Guestbook
Drawing inspiration from the early 2000s internet culture, specifically the popularity of guestbooks, Giulio reimagines this interactive element as the "Room of Memories." This section presents an immersive environment where messages from visitors float like fragments of light within an expanse of darkness. The visual concept is heavily influenced by the "virtual armory" scene from the original The Matrix (1999), where weapons materialize in a vast, sterile warehouse. Giulio flips this concept, opting for deep darkness punctuated by soft neon glows.
The name "Room of Memories" directly references Roy Batty’s poignant final words in Blade Runner, "All those moments will be lost in time, like tears in rain," reinforcing the portfolio’s thematic connection to classic science fiction and the ephemeral nature of digital experiences. This creates a unique and reflective space for user interaction, transforming a simple guestbook into a profound digital art installation.
Scene Four: Contact – A Departure into the Unknown
The final interactive scene, "Scene Four: Contact," brings back the melancholic atmosphere of the opening sequence. The rain continues to fall, and the avatar stands with its back turned, poised for a new journey. The iconic DeLorean from the Back to the Future film series descends from the sky, bathed in a blue glow, and lands softly. As the door opens, it signifies the end of the current mission and the return home. This visually striking conclusion provides a memorable and thematic way to present contact information, leaving the user with a sense of closure and wonder.
The Creative Process: From Thought to Code
Giulio’s approach to the creative process prioritized efficiency and direct translation of ideas into functional code. As both designer and developer, he utilized Figma primarily as a personal notepad for quick ideas, screenshots, and thought organization, bypassing the need for extensive shareable design files. This direct "thought-to-code" pipeline allowed for rapid iteration.
The primary challenge during the design phase was selecting and sequencing inspirations, and determining how to fluidly connect them. Ideas were captured digitally or through sketches, with visual references from films and Pinterest serving as concrete starting points. A significant technical hurdle was ensuring text readability within the immersive 3D environments. Giulio eschewed conventional solutions like dark overlays, opting instead to integrate text directly into the 3D scenes and unify it with shared visual effects, making the text an organic part of the environment rather than an imposition.
The Tech Stack: A Symphony of Modern Web Technologies
The development of "They Call Me Giulio" involved a sophisticated array of modern web technologies, carefully selected for their performance and flexibility.
Blender: The Foundation of 3D Creation
Blender, the powerful open-source 3D creation suite, served as the primary tool for modeling, texturing, rigging, and rendering all the 3D assets and scenes. While some pre-made models from platforms like Sketchfab were utilized for the avatar, buildings, and the DeLorean, the overall environment and character animations were meticulously crafted within Blender.
WebGPU and Three.js: Driving Visuals
The portfolio leverages WebGPU for its enhanced performance and reduced overhead, enabling more stable framerates and sophisticated shaders. Giulio explored Three.js’s shader language (TSL), which can compile to both WGSL and GLSL, providing a WebGL fallback. The decision to use pure Three.js, rather than abstractions like R3F, was driven by the project’s complex rendering pipeline requirements, including multiple RenderTargets and a need for granular control over the rendering process.
React and GSAP: Orchestrating Interactivity and Animation
React and React Router were employed to manage the DOM, handle section navigation, and control text positioning and scroll behavior behind the scenes. For animations, the industry-standard GSAP (GreenSock Animation Platform) was indispensable, used for all scroll-based animations, audio synchronization, and precise timeline control of material uniforms.
Lenis and Custom Scrolling Logic: Fluid Navigation
Smooth and performant scrolling is achieved through Lenis. However, for section snapping, Giulio implemented custom logic. Instead of relying on default snapping features, a threshold of 30% viewport height was established for scene transitions, creating a more natural and intuitive user experience compared to a 50% threshold.
Monorepo Structure: Efficient Project Management
Turborepo was utilized to organize the project as a monorepo. This approach allowed for independent development of each of the four distinct Three.js scenes while facilitating the sharing of classes and assets across the project, optimizing build times and modularity. The directory structure clearly delineates applications (individual scenes) and packages (shared utilities and components).
Soundtrack: AI-Generated Atmosphere
The melancholic, neo-noir ambiance of the portfolio’s soundtrack was generated using Suno, an AI music creation tool. While acknowledging the limitations and repetitive nature of the tool, Giulio invested significant effort in prompt engineering and iterative refinement to achieve the desired retro-futuristic flavor, reminiscent of Vangelis’s iconic "Tears in Rain" score.
Technical Hurdles and Innovative Solutions
The development process presented several technical challenges, each met with innovative solutions.
Rendering Pipeline and Section Transitions
The entire experience is managed by a THREE.Scene within a SectionTransition class, which incorporates an THREE.OrthographicCamera and THREE.PostProcessing object. Each Section object contains its own elements and a TextScene for 2D elements. Transitions between sections are handled with a sophisticated shader-based effect, inspired by a "Shader Image Transition" tutorial by Yuri Artiukh. This transition uses irregular masks and a bounce effect to create a dynamic, shockwave-like visual, reminiscent of the helicopter crash in The Matrix. Perlin noise is employed to ensure the transition progresses unevenly across the screen, enhancing its organic feel. Additional effects like UV distortion, velocity-based zoom-out, and RGB split contribute to a polished, "glitchy" aesthetic.
Assets Loader and Optimization
To ensure a seamless experience, all assets were optimized and loaded upfront, totaling approximately 12.5 MB. This preemptive loading strategy simplified the loading logic and prevented issues arising from missing assets. The assets are managed through a single THREE.LoadingManager, which tracks progress.
Dolly Animation Entry Point
The portfolio’s entry point features a dramatic "Dolly Zoom" or "Vertigo Effect," where the camera moves forward while the field of view widens, creating a disorienting yet captivating visual. This cinematic technique provides an immediate impact, drawing users into the experience.
Android Animations and Asset Management
Animating the android avatar involved a rigorous pipeline: rigging the 3D model with an armature, using weight painting for fluid deformation, generating animation actions in Blender’s Dope Sheet, and exporting to the .glb format. THREE.AnimationMixer in Three.js then controls playback, allowing for fading between animations and programmatic management of AnimationAction progress.
The Skyway: Populating the Cyberpunk Cityscape
To populate the cyberpunk cityscape with flying cars, Giulio utilized THREE.InstancedMesh for efficiency, rendering up to 100 instances of a basic car model. The car trajectories were defined using curves exported from Blender and converted into THREE.CatmullRomCurve3 parametric curves. A function calculates coordinates and tangents along these curves, allowing cars to loop seamlessly through the cityscape.
Performance Optimizations
Significant effort was dedicated to optimizing performance across the board.
- Assets: GLTF models are processed through a
gltf-transformpipeline to simplify geometry and downsize textures. Textures are converted to KTX2 with Basis Universal compression for hardware efficiency, and other images use AVIF format. - Section Updates: Only the currently visible or transitioning scene is rendered, preventing unnecessary processing.
- Shaders and Draw Calls: Noise functions are baked into textures rather than calculated at runtime, reducing shader complexity.
InstancedMeshis used extensively for objects like rain, cars, and buildings to minimize draw calls.
Conclusion: A Testament to Creative Vision
"They Call Me Giulio" stands as a powerful testament to the potential of digital portfolios when approached with a narrative-first mindset and a commitment to cutting-edge technology. The project’s success lies not only in its technical prowess but also in its ability to evoke emotion and create a lasting impression. The positive feedback received, particularly the heartfelt messages left in the "Room of Memories," highlights the profound impact of this immersive and personal approach. Giulio’s journey from concept to completion underscores the value of dedicated creative exploration, proving that breaking from conventional patterns can lead to truly groundbreaking results in the digital landscape.
Related posts:
