Unleashing Unconventional Creativity: The Vision Behind "They Call Me Giulio"
Giulio’s project stands as a testament to the power of creative freedom, born from a conscious decision to set aside conventional briefs, KPIs, and established rules. In a digital realm often saturated with fleeting trends—from cursor followers to oversized typography—Giulio recognized that true creativity lies not in replication but in constructing a coherent, compelling narrative. This philosophical approach transforms every animation and interactive element from mere decoration into an integral storytelling tool. The objective was clear: to craft an experience so memorable that it lingers with visitors long after they close their browsers, challenging the norms of textbook UX and safe design choices.
This endeavor was more than just a technical exercise; it was a deeply personal undertaking. Unlike a conventional resume, the portfolio aims to reveal the human element behind the developer—a candid portrayal of interests and inspirations that extend beyond professional confines. Rejecting a sterile list of projects and a standard "contact me" button, Giulio infused his site with facets of his personal life, drawing inspiration from cult classic films that he can rewatch endlessly. This candid approach, coupled with the permanent presence of his custom-designed 3D avatar (initially a Blender learning experiment), forms a distinctive personal brand that is instantly recognizable and deeply integrated into the site’s identity.
A Cinematic Journey: Deconstructing the Portfolio’s Narrative Arcs
The portfolio unfolds as a meticulously choreographed sequence of scenes, each drawing direct inspiration from beloved cinematic masterpieces, transforming the user’s navigation into an interactive film experience.
Scene One: Echoes of Blade Runner in "About Me"
The journey commences with a profound homage to Ridley Scott’s 1982 neo-noir masterpiece, Blade Runner. Upon entering the site, visitors are immediately immersed in a scene inspired by the film’s iconic "Tears in Rain" monologue. Rain streaks down, neon lights reflect on slick surfaces, and Giulio’s android avatar sits in a melancholic tableau reminiscent of Roy Batty’s final moments. This atmospheric introduction, foregoing a typical hero section or prominent headline, establishes a thick, wet, electric cyberpunk mood that captivates and resonates deeply with fans of the genre.
The avatar, a sentient android, is designed for interactivity. A hover action over the "About" button prompts a curious head lift, simulating a video game character’s reaction. A subsequent click smoothly transitions the camera, dissolving the surrounding world to spotlight the avatar, revealing the About page. A subtle yet charming detail: a rusty yellow sign on a distant building bears the Japanese translation of "Giulio," further embedding personal touches into the cinematic fabric.
Scene Two: The Power Unleashed in "Works"
A dramatic shift in tone marks the second scene, where the android avatar reclaims its strength and capabilities. Inspired by the explosive "Super Saiyan" transformations from the classic Japanese anime Dragon Ball, this segment depicts the avatar unleashing a powerful, glowing energy blast across the screen. This visual metaphor perfectly encapsulates the developer’s accumulated skills and experiences. As the energy explodes, a curated selection of projects materializes—showcasing diverse works that challenged, taught, or held significant meaning for Giulio. This dynamic reveal acts as a declaration: "This is what I can do."
Scene Three: The Matrix’s Infinite Void in the "Room of Memories"
Drawing inspiration from the early 2000s web, Giulio revives the concept of the guestbook, transforming it into the "Room of Memories." This immersive space, suspended in darkness, allows visitors’ messages to drift through infinite space like ethereal fragments of light. The design is a reimagining of The Matrix‘s iconic weapons program scene, where Neo and Trinity enter a vast, sterile white warehouse with endless, materializing racks. Giulio inverted this concept, replacing stark white with deep darkness, punctuated by soft neon glows and thousands of slowly drifting messages.
This "cyberpunk guestbook" directly links back to the Blade Runner inspiration, with its name echoing Roy Batty’s poignant last words: "All those moments will be lost in time, like tears in rain." It serves as a digital repository of transient thoughts, giving them a physical, albeit virtual, presence.
Scene Four: A Back to the Future Farewell in "Contact"
The portfolio concludes with a return to the melancholic, neo-noir atmosphere of the opening scene. Soft neon rain falls, accompanied by a subtle soundtrack. The avatar stands with its back turned, breathing slowly, poised for new adventures. Then, a legendary icon descends from the sky: the DeLorean, with a distinctive blue glow, landing softly. The opening door signals the mission’s end and the time to return home, a nostalgic nod to Back to the Future and a poignant conclusion to the cinematic journey.
The Architect’s Toolkit: Blending Art and Advanced Web Technologies
This ambitious project served as a playground for experimentation, allowing Giulio to push the boundaries of modern web development. The chosen technology stack reflects a meticulous balance between cutting-edge performance and creative control.
3D Modeling and Animation: Blender
As the world’s leading open-source 3D software, Blender was indispensable for creating and preparing all the 3D models and scenes. From the avatar to the cyberpunk buildings and the DeLorean, Blender facilitated modeling, texturing, rigging, and rendering. While some models were sourced from platforms like Sketchfab (e.g., the avatar, buildings, and DeLorean), Blender was crucial for their integration and customization.
Real-time Rendering Prowess: WebGPU
A significant technical leap for this project was the adoption of WebGPU. This next-generation web graphics API dramatically reduces the overhead between JavaScript and the GPU, leading to more stable framerates and enhanced shader performance. Giulio explored Three.js’s Shader Language (TSL), which compiles to both WGSL (WebGPU Shading Language) and GLSL (OpenGL Shading Language), ensuring compatibility and a WebGL fallback. This choice represents a commitment to leveraging the most advanced rendering capabilities available on the web.
Dynamic Frontend Development: React
Despite the visually dominant canvas element, the underlying Document Object Model (DOM) plays a crucial role. React, paired with React Router, manages all sections, text positioning, and scroll behavior, providing a robust and declarative foundation for the interactive frontend.
Seamless Motion and Interaction: Three.js and GSAP
For precise control over the rendering pipeline and complex operations involving THREE.RenderTarget, Giulio opted for pure Three.js instead of React Three Fiber (R3F). This decision ensured greater consistency and granular control, critical for the project’s intricate visual effects. GSAP (GreenSock Animation Platform) proved irreplaceable for all scroll-based animations, including audio synchronization, and for crafting precise timelines on material uniforms, delivering the smooth, cinematic transitions.
Optimized Scrolling: Lenis + Custom Logic
While Lenis provided the foundation for smooth and performant scrolling, Giulio implemented custom logic for section snapping. Instead of relying on standard Lenis Snap or CSS Snap, which often use a 50% viewport height threshold, a custom 30% threshold was developed. This subtle adjustment significantly improved the natural feel and intuitiveness of scene transitions.
Monorepo for Scalable Development: Turborepo
Given the single-page application’s architecture with four distinct Three.js scenes, optimization was paramount. Turborepo was used to organize the project as a monorepo, allowing independent development and rendering of each scene. This modular approach prevented unnecessary asset loading and facilitated efficient sharing of classes and assets across the entire project.
AI in Sound Design: Suno’s Emerging Role
To complement the melancholic, neo-noir aesthetic, a Vangelis-inspired soundtrack was envisioned, echoing the "Tears in Rain" synth atmosphere. Lacking professional sound design skills, Giulio turned to AI, specifically Suno, to generate the background audio. While the experience was described as "quite limited and repetitive," requiring dozens of prompts and iterations, a track emerged that successfully captures the desired deep, atmospheric, retro-futuristic mood, perfectly aligning with the android’s contemplative nature. This highlights both the potential and current limitations of AI in bespoke creative endeavors.
Navigating the Digital Frontier: Overcoming Technical Hurdles
The development of "They Call Me Giulio" involved navigating several complex technical challenges, each requiring innovative solutions to achieve the desired cinematic quality and performance.
The Integrated Rendering Pipeline
The entire interactive experience is encapsulated within a THREE.Scene, managed by a SectionTransition class. This class orchestrates an THREE.OrthographicCamera and a THREE.PostProcessing object, dynamically updating one or two scenes based on transition states. Each Section object houses its specific elements (avatar, DeLorean, buildings) and instantiates its own TextScene, ensuring all 2D elements are affected by global transitions. The TextScene also incorporates a WatercolorBrush object using a ping/pong accumulator to record mouse movement, which then distorts text UVs and adjusts brightness, integrating text seamlessly into the 3D environment. Ultimately, SectionTransition blends the output textures from active sections to create smooth, cinematic transitions.
Dynamic Section Transitions: Inspired by The Matrix
Developing the ideal transition between sections proved to be a significant undertaking. The final effect, reminiscent of the helicopter crash shockwave in The Matrix that reveals the virtual nature of its world, uses a shader-based image transition technique. Inspired by Yuri Artiukh’s work, this shader manipulates two textures (A and B) using moving masks and multiplier bands. Perlin noise introduces irregularity to the mask, creating a dynamic, organic progression. A "bounce effect" and UV distortion (lens-like effect) further enhance the visual impact, making areas near the transition edge deform more intensely. Additional UV displacement, velocity-based zoom-out, and a subtle RGB split (chromatic aberration) contribute to a "glitchy/chromatic" look, reinforcing the cyberpunk aesthetic.
Optimized Asset Management: Upfront Loading and KTX2
To simplify loading logic and prevent missing asset side effects, all assets are loaded upfront. Despite this, the entire experience, including 3D models and textures, is optimized to a lean 12.5 MB. A custom gltf-transform pipeline processes GLTF models, simplifying geometry and downsizing textures to a maximum of 1024px. Crucially, 3D models are converted to KTX2 format, leveraging hardware compression (Basis Universal) for significantly reduced VRAM usage. Textures and other images are further compressed using the AVIF format, maximizing bandwidth efficiency.
The Cinematic Entry: Dolly Zoom Animation
The initial entry into the portfolio is a powerful cinematic "punch" delivered via a Dolly Zoom, also known as the Vertigo Effect. When a visitor presses Enter, the camera smoothly moves towards the subject while the field of view simultaneously widens. This creates the illusion of the background "breathing" and expanding, with the subject remaining constant in the foreground. This visually impactful technique, though technically straightforward in a 3D environment, serves as a compelling and immersive portal into the experience.
Bringing the Avatar to Life: Rigging and AnimationMixer
The avatar’s varied poses and reactions throughout the site are achieved through a detailed animation pipeline. This involves rigging the 3D model with an armature (bones) and using Blender’s Weight Painting tool to map bone influence to specific vertices for fluid deformation. Animations are created as Animation Actions on Blender’s Dope Sheet, then pushed to the NLA Editor for compatibility with Three.js. The exported .glb model is then controlled by THREE.AnimationMixer, allowing for precise playback, fading between animations, and programmatic management of each AnimationAction‘s progress.
Populating the Cyberpunk Sky: InstancedMesh for Flying Cars
No cyberpunk scene is complete without flying vehicles. The cars soaring between skyscrapers in the opening scene are efficiently managed as a THREE.InstancedMesh with only 100 instances. Given the post-processing bokeh effect blurring them, the geometry of these cars is kept basic to conserve polygons. Their flight paths are defined by a THREE.CatmullRomCurve3 parametric curve, derived from a Blender-generated list of curve points. A function returns coordinates and tangents along the curve, allowing cars to be offset and spread across the path, looping back to the beginning upon reaching the end. This technique is also applied to the flying police car, adding depth and motion to the cityscape.
Performance and Precision: A Deep Dive into Optimizations
In a single-page application featuring multiple complex 3D scenes, aggressive optimization was paramount to ensure a smooth, high-performance user experience.
Assets Compression and Formats: Beyond initial optimization, all GLTF models undergo a custom gltf-transform pipeline for geometry simplification and texture downsizing to a maximum of 1024px. The conversion to KTX2 format for 3D model textures leverages hardware compression (Basis Universal), significantly reducing VRAM usage by keeping textures compressed even in memory. Additionally, all other textures and images are compressed using the AVIF format, known for its superior compression ratios.
Selective Scene Updates: A core optimization strategy involves updating and rendering only the visible scenes. The site’s scroll position dictates which scene(s) are active, ensuring that the render loop and post-processing effects are not unnecessarily executed for off-screen content. This significantly conserves computational resources.
Shaders and Draw Calls: To prevent shader overload, noise functions are "baked" into textures and sampled at runtime, rather than being computationally generated. By scaling and offsetting UVs, this technique closely mimics true noise functions while being far more efficient. In this project, all runtime noise calculations were eliminated by utilizing only three pre-baked textures: Perlin noise, Fractional Brownian Motion (fBm), and Random noise. Furthermore, draw calls were heavily optimized. Elements such as rain, cars, and buildings are implemented as InstancedMesh objects, allowing the GPU to handle their transformations and translations in a single draw call, drastically reducing the CPU-GPU communication overhead.
Impact and Implications: A New Benchmark for Digital Portfolios
The "They Call Me Giulio" portfolio is more than just a personal project; it represents a significant benchmark for immersive web experiences and creative development. Its success underscores a growing trend in web design where functionality and aesthetics converge to create deeply engaging digital narratives.
Resounding User Feedback: The project’s success is powerfully validated by the overwhelmingly positive feedback received in the "Room of Memories." Hundreds of messages, ranging from simple greetings to profound expressions of inspiration, highlight the site’s impact. Comments like "This is the best site I’ve seen till today. I have no words to explain how this site has inspired me to do more creative work" and "Thanks for proving humans were worth designing" demonstrate the emotional connection and motivational influence the portfolio has on its visitors. Other comments such as "Amazing Website man, never ever thought off – highly creative and everything matches – even the sound. Kudos man really 🙏🙏🙌🙌" and "This makes me believe that I can create what I’m currently struggling to make it simply takes patience and practice because this is amazing man" confirm the project’s success in achieving its goal of being memorable and inspiring. The unique "side quest" feeling evoked by the Room of Memories, as one user noted, "Is this the coolest feature I’ve seen on a portfolio? YES. Who doesn’t like side quests," further reinforces its innovative appeal.
Setting a New Standard: Giulio’s project demonstrates the immense potential when a developer embraces a designer’s mindset, focusing on narrative and emotional impact over conventional metrics. It suggests a future where personal branding for creative professionals involves crafting interactive digital worlds rather than just static online resumes. The strategic use of advanced technologies like WebGPU, Three.js, and sophisticated optimization techniques provides a blueprint for delivering high-fidelity, cinematic experiences directly in the browser. This portfolio not only showcases Giulio’s technical prowess but also his unique artistic vision, setting a new standard for how individuals can present their skills and personality in the digital age. The anticipation of revisiting the "Room of Memories" in twenty years speaks to the enduring legacy such a thoughtful and creatively executed project can cultivate.
