Tag: demo

In an era where digital portfolios often conform to predictable templates, a groundbreaking project titled "They Call Me Giulio: The Making of a Cinematic Cyberpunk Portfolio Demo" has emerged, redefining the standards for interactive web experiences. This fifth iteration of Giulio’s personal portfolio stands as a testament to unbridled creativity, leveraging advanced web technologies to craft an immersive, narrative-driven journey inspired by iconic cult classics. Far from a conventional résumé, this project is a deeply personal exploration of artistic expression and technical mastery, designed to leave a lasting impression long after a browser tab is closed.

The Visionary Behind the Canvas

Giulio embarked on this ambitious endeavor by taking a deliberate sabbatical from client-based work, a crucial decision that allowed for pure, unadulterated creative exploration. This hiatus was not merely a break but a strategic immersion into a space free from the constraints of client briefs, key performance indicators (KPIs), or established rules. The driving force was an internal wellspring of ideas, coupled with a profound command of code, aiming to manifest a vision uncompromised by external pressures.

His philosophy diverges sharply from the common perception of "creativity" in the digital sphere, which often devolves into a checklist of fleeting trends—be it cursor followers, oversized typography, or generic flashy effects. While acknowledging that these elements might define contemporary aesthetics, Giulio posits that genuine creativity lies in constructing a coherent, compelling narrative. In this context, every animation transcends mere decorative flair, becoming an integral storytelling tool. This portfolio deliberately eschews textbook user experience (UX) principles and safe design choices, instead aiming to disrupt patterns and carve out a distinctive presence in a crowded digital landscape. The ultimate measure of success, as articulated by Giulio, is simple: if the site lingers in a visitor’s mind after they close their browser, the mission is accomplished.

Narrative as the New UX: Blending Cult Classics into Canvas

This portfolio is not merely a professional showcase; it is a deeply personal artifact, interwoven with the creator’s identity beyond the professional façade. Giulio sought to integrate his human side—the "couch guy" who rewatches beloved movies—into the experience, moving beyond a sterile list of projects and a "contact me" button. His inspiration flowed directly from these cherished films, those timeless narratives he can revisit endlessly without fatigue.

A notable element of his personal brand is his distinctive avatar, which originated as a playful experiment in Blender during the development of his fourth portfolio version. What began as a learning exercise quickly evolved into a permanent, recognizable presence, endowed with its own personality and becoming a crucial component of his unique brand identity.

The portfolio unfolds across four distinct, cinematic scenes, each meticulously crafted to evoke the atmosphere and narrative power of its cinematic muse:

Scene One: About Me – Echoes of Neo-Noir

The journey commences with an 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, delivered by Roy Batty. This sequence captures the essence of a rain-soaked, neon-drenched cityscape, where Batty, a replicant, recounts profound experiences before his poignant demise, releasing a white dove into the gray sky. This blend of melancholy, poetry, hope, and raw cyberpunk atmosphere sets the initial tone.

Giulio envisioned this opening as a radical departure from conventional hero sections or oversized headlines, opting instead for an evocative image that resonates with fans of the film. The avatar, a sentient android, is dynamically integrated into this environment, reacting like a video game character. Hovering over the "About" button prompts the android to lift its head inquisitively. A click smoothly transitions the camera, dissolving the surrounding world and leaving the avatar alone in a spotlight—the gateway to the About page. A subtle detail, a rusty yellow sign on a building, reveals the Japanese translation of "Giulio," further embedding personal touches within the immersive world.

Scene Two: Works – Unleashing Inner Power

The atmosphere shifts dramatically in the second scene. The android protagonist reclaims its strength and capabilities, unleashing a powerful, glowing energy blast that cuts across the screen. This explosive transformation serves as a potent metaphor for the accumulation of skills and experiences over Giulio’s career. The visual inspiration for this dynamic sequence is drawn from the beloved childhood cartoon Dragon Ball, specifically the Super Saiyan transformation—the pivotal moment when a character taps into their latent, hidden potential. As this energy explodes, a curated selection of projects materializes, as if the avatar, having unlocked its inner power, proudly declares, "This is what I can do." These projects are not merely listed but are chosen for their personal significance, having challenged or taught Giulio valuable lessons.

Scene Three: Room of Memories – The Cyberpunk Guestbook

Giulio rekindles a beloved feature from early 2000s web design: the guestbook. Reimagined for the cyberpunk era, it becomes the "Room of Memories"—an immersive space suspended in darkness, where visitor messages drift like luminous fragments through infinite space. This concept draws heavily from a seminal scene in The Matrix (1999), where Neo and Trinity enter the weapons program, a vast, sterile white warehouse filled with racks materializing from the void.

Giulio inverted this aesthetic, transforming the limitless white space into profound darkness punctuated by soft neon glows, where thousands of messages float like suspended memories. This "cyberpunk guestbook" directly links back to the Blade Runner inspiration of the first scene, echoing Roy Batty’s famous last words: "All those moments will be lost in time, like tears in rain." The messages, therefore, become digital tears, preserved in a boundless void.

Scene Four: Contact – A New Journey Awaits

The melancholic ambiance of the opening scene gently returns, accompanied by the same subtle soundtrack and soft neon rain. The avatar stands with its back turned, breathing slowly, poised for a new adventure. The iconic DeLorean from Back to the Future then descends silently from the sky, glowing blue, landing softly as its door opens. The mission concludes, signaling "It’s time to go home"—or perhaps, to embark on the next chapter.

Crafting the Digital Dreamscape: The Development Process

Giulio’s creative process for this portfolio was characterized by an iterative, code-first approach. As a developer, his primary focus was establishing an efficient workflow that balanced speed with effectiveness. The design phase was largely conceptual, with Figma serving as a personal notepad for post-its, screenshots, and nascent ideas rather than a tool for producing meticulously finalized mockups. Being both designer and developer, he bypassed the need for shareable files or collaborative tools, transitioning directly from thought to code.

The majority of his time was dedicated to conceptualizing, prioritizing, and interconnecting various inspirations. Strong ideas were immediately documented as digital post-its or quick sketches. Later, screenshots from films or Pinterest boards were used to concretize the visitor’s journey, even if initially only within his mind.

Overcoming the Text Conundrum

A significant challenge arose in balancing an immersive, cinematic 3D experience with clear, readable 2D text. Directly overlaying text onto a deep 3D scene severely compromises readability. Giulio rejected conventional solutions like dark overlays or semi-transparent backgrounds, which he felt would shatter immersion by creating two distinct "worlds."

His innovative compromise involved integrating the text content directly into the 3D scene and unifying everything with shared effects. This was achieved through:

• A subtle glow effect: Enhancing text visibility against the dark backdrop.
• UV distortion: Applying a slight distortion to text based on mouse movement, making it feel organic and part of the environment.
• RGB split (chromatic aberration): A subtle effect that adds a "glitchy", futuristic aesthetic, further blending the text into the cyberpunk world.

This approach ensures the text doesn’t merely cover the scene but actively becomes a part of it, maintaining visual cohesion and immersion.

Under the Hood: A Deep Dive into the Tech Stack

This portfolio served as an ideal experimental ground for new technologies. Giulio deliberately chose a stack that allowed for maximum control and performance, pushing the boundaries of what’s achievable in a web browser.

Cutting-Edge Graphics & 3D Tools:

• Blender: The powerful open-source 3D software was instrumental for creating and preparing all models and scenes. While some models (avatar, buildings, DeLorean) were sourced from Sketchfab, Blender was used for intricate modeling, texturing, rigging, and rendering.
• WebGPU: This next-generation web graphics API was leveraged to drastically reduce overhead between JavaScript and the GPU, resulting in more stable framerates and performant shaders. Giulio delved into Three.js’s Shader Language (TSL), capable of compiling to both WGSL (WebGPU Shading Language) and GLSL (OpenGL Shading Language), with a WebGL fallback for broader compatibility. This represented a challenging yet highly rewarding technical leap.
• Pure Three.js: Eschewing declarative libraries like R3F (React Three Fiber), Giulio opted for pure Three.js. Previous experiences with R3F’s declarative nature clashing with Three.js’s imperative operations, particularly with THREE.RenderTarget, informed this decision. Given the portfolio’s reliance on multiple RenderTargets and granular control over the rendering pipeline, pure Three.js offered the consistency and control required.

Front-End Architecture & Animation:

• React & React Router: Despite the canvas-centric visual experience, the Document Object Model (DOM) remains active behind the scenes. React and React Router manage all sections, text positioning within them, and scroll behavior, ensuring a robust and structured front-end.
• GSAP (GreenSock Animation Platform): An indispensable tool, GSAP orchestrated all scroll-based animations, including synchronized audio cues, and facilitated precise timeline control over material uniforms, bringing complex visual effects to life.
• Lenis + Custom Logic for Scrolling: Lenis provides smooth and performant primary scrolling. However, for seamless snapping between sections, Giulio implemented custom logic. Instead of the typical 50% viewport height threshold that could impede UX, the scene change triggers at a more intuitive 30% viewport height, making transitions feel natural and fluid.
• Monorepo (Turborepo): For a single-page application featuring four interconnected Three.js scenes, a monorepo structure managed by Turborepo proved invaluable. This allowed for independent development of each scene, preventing unnecessary loading of assets from other sections while ensuring shared classes and assets were consistently available across the project.

Aural Immersion:

• AI-Generated Soundtrack: Inspired by Vangelis’s melancholic, neo-noir "Tears in Rain" from Blade Runner, Giulio sought a similar retro-futuristic, synth-heavy atmosphere. Lacking advanced sound design skills, he turned to Suno, an AI music generator. While the process involved numerous prompts and iterations due to Suno’s limitations, the resulting deep, atmospheric track, "Bleeding Seconds," perfectly captures the android’s mood, even if "it’s not Vangelis."

Navigating Technical Frontiers: Key Challenges & Solutions

The creation of such a complex interactive experience naturally presented several technical hurdles, each met with ingenious solutions:

The Intricate Rendering Pipeline:
The entire visual experience resides within a THREE.Scene, managed by a SectionTransition class. This class orchestrates an THREE.OrthographicCamera and a THREE.PostProcessing object. It intelligently updates one or two scenes based on whether a transition is active. Each Section object encapsulates its unique elements (avatar, DeLorean, buildings) and instantiates its own TextScene, ensuring that all 2D elements (texts, buttons) are integral to the section’s transitions. The TextScene also incorporates a WatercolorBrush object, which uses a ping/pong accumulator technique to record mouse movement history into a low-resolution texture. This texture is then used by TextScene to distort text UVs and subtly adjust brightness, saving the final result into another texture. Ultimately, each Section applies various post-processing effects and blends its output with the TextScene‘s texture, with SectionTransition smoothly blending the output textures from one or two sections to achieve seamless transitions.

Dynamic Scene Transitions:
Crafting the ideal transition between sections demanded extensive experimentation. The final chosen effect evokes the shockwave created by the helicopter crash in The Matrix, revealing the virtual nature of the environment. This was significantly aided by Yuri Artiukh’s "Shader Image Transition" video. The shader facilitates a transition between two textures (A and B) using masks and multiplier bands that move vertically. Instead of a clean line, the mask is made irregular using Perlin noise, ensuring a dynamic, non-uniform progression. A "bounce effect"—an additional band multiplying these irregularities—enhances the sense of movement. A lens-like UV distortion is applied within a wider band around the transition front, causing elements near the edge to deform intensely while distant areas remain stable. Furthermore, scrolling triggers an extra UV displacement, a slight velocity-based zoom-out, and a subtle RGB split (chromatic aberration) near the center, culminating in a "glitchy/chromatic" aesthetic.

Optimized Loading & Animation:
To ensure a fluid user experience, Giulio adopted an "load everything upfront" strategy for assets, simplifying loading logic and preventing missing asset issues. Remarkably, the entire experience, including 3D models and textures, clocks in at a lean 12.5 MB. A THREE.LoadingManager efficiently handles global and section-specific asset lists, providing automatic progress tracking.

Upon pressing "Enter," a "Dolly Zoom" (Vertigo Effect) camera animation catapults the visitor into the first scene. This cinematic punch, where the camera moves towards the subject while the field of view widens, creates a "breathing" background effect, visually engaging the user from the outset.

Android animations are meticulously crafted using Blender’s rigging (armature and bones) and Weight Painting tools for fluid deformation. Animations are generated as Animation Actions on the timeline, then pushed to the NLA Editor for THREE.js compatibility. The exported .glb models are then controlled by THREE.AnimationMixer, allowing for precise playback, fading, and programmatic management of AnimationAction progress.

For the iconic flying cars in the opening scene, a THREE.InstancedMesh with just 100 instances efficiently renders the skyway traffic. Their basic geometry is sufficient due to the post-processing bokeh effect. The cars’ flight paths were meticulously traced using Blender curves, exported, and converted into a THREE.CatmullRomCurve3 parametric curve in the application. A function then returns coordinates and tangents, allowing cars to be offset and spread along the path, looping seamlessly. This technique was also applied to the flying police car.

Performance Engineering: Maximizing Efficiency

In a single-page application with four distinct scenes, optimization was paramount.

• Assets Optimization: All assets undergo a custom gltf-transform pipeline, which simplifies geometry and downsizes textures to a maximum of 1024px. 3D models are converted to KTX2 format, leveraging hardware compression (Basis Universal) for reduced VRAM usage. Textures and images are further compressed using the AVIF format.
• Intelligent Section Updates: The scroll position dictates which scenes are active. Only one scene renders at a time, or two during a transition, preventing unnecessary render loop and post-processing computations for invisible scenes.
• Shader & Draw Call Optimization: To alleviate shader load, noise functions are baked into textures (Perlin, Fractional Brownian Motion, Random noise) and sampled at runtime, avoiding computationally intensive calculations. This project successfully eliminated runtime noise function execution using only three pre-baked noise textures. Furthermore, draw calls are heavily optimized through InstancedMesh for elements like rain, cars, and buildings, allowing the GPU to handle transformations in a single call.

Reception and Future Implications

Giulio expressed profound satisfaction with the final outcome, particularly given the initial lack of a fixed design, which necessitated an agile, code-first approach. The positive feedback received has been overwhelmingly encouraging, with the "Room of Memories" section proving to be a beloved and engaging feature. Hundreds of messages, ranging from simple greetings to profound expressions of inspiration, underscore the project’s impact.

Notable feedback includes:

• "This is better than spaghetti bolognese!"
• "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."
• "Thanks for proving humans were worth designing."
• "Amazing Website man, never ever thought off – highly creative and everything matches – even the sound. Kudos man really."
• "No Comments about The Work Thanks For this Such a Creativity Work, Words will never describe this Work. But i say this is more THAN AMAZING."
• "This makes me believe that i can create what I’m currently struggling to make it simply takes patience and practice becuase this is amazing man."
• "Is this the coolest feature I’ve seen on a portfolio? YES. Who doesn’t like side quests."
• "For i am an Eternal being living in endless solitude, trapped in this endless void of Data."
• "have you seen the sky? i want to live everytime i see it."

These testimonials highlight not just the aesthetic appeal but also the profound emotional and inspirational resonance of the portfolio. Giulio anticipates the enduring joy of rereading these "memories" in decades to come.

"They Call Me Giulio" is more than just a portfolio; it is a meticulously crafted cinematic experience that pushes the boundaries of web development and interactive design. It serves as a compelling case study for how a strong narrative, combined with cutting-edge technology and a bold creative vision, can transform a personal showcase into an unforgettable digital journey, setting a new benchmark for immersive web experiences in the industry.