pro
Valerio Vitolo
Full Stack Developer, 3D Developer, Videogame Developer
New to Contra
Valerio is ready for their next project!
Panko Creative Hub - The Creative & Tech Ecosystem
An immersive and highly visual web experience designed for Panko Creative Hub. The platform was conceived as an interactive digital ecosystem reflecting the agency's synergistic duality: on one side, the creative soul dedicated to branding, social media, and influencer marketing (Panko); on the other, the technical soul focused on custom software development and advanced digital experiences (Imori Studio).
The project visually translates this "dual offering" concept through a refined, dynamic, and energetic "cyberpunk lite" visual language. Leveraging a cutting-edge architecture based on Next.js and React, enriched with three-dimensional WebGL elements and fluid transitions, the site transforms navigation into an interactive journey that communicates innovation from the very first moment, positioning itself as the digital business card of a crew focused on the future.
Technical Features
3D WebGL & React Three Fiber: Integration of real-time three-dimensional canvases (an interactive particle field responsive to mouse movement, floating abstract wireframe geometries, and a gradient sphere with custom GLSL shaders) to bring spatial depth and a technological look to the interface.
Duo Video Crossfade Hero: Development of a custom hero system that randomly selects two different high-impact background videos on startup. The videos loop and transition with a smooth 1-second crossfade managed via React refs, maximizing initial user engagement.
Native Multilingual Architecture: Implementation of server-side multilingual routing (Italian/English) to ensure excellent SEO performance, with dynamic generation of sitemaps and hreflang tags, allowing the agency to target an international market.
Tailwind & Custom Design System: Adoption of Tailwind CSS to optimize build-time and maximize style reactivity. The design system is based on deep dark tones, high-contrast neon orange accents, and geometric typefaces like Space Grotesk and Inter.
Counters & Interactive Timelines: Use of Framer Motion for scroll-triggered animated counters (influencer, project, and client statistics) and interactive timelines that clearly show the "client journey" and operational synergy between branding and code.
Server-Safe Form Validation: Integration of React Hook Form and Zod for robust client-side and server-side validation, connected to a secure API endpoint with Nodemailer that automatically routes contact requests based on the user's needs (creative or tech).
Lenis Smooth Scroll & Micro-interactions: Implementation of Lenis-based smooth scrolling combined with dynamic hover effects (tilt cards and reactive glow effects) to deliver a premium user experience on any device.
Cyberpunk Lite Design
Panko Creative Hub's visual language breaks the mold of classic corporate websites. We used a color palette dominated by pure black (#000000) and charcoal gray to enhance the neon orange (#FF5722) glows and contrasts, representing Panko's energy. Technical grids, digital noise texture overlays, and angled components evoke cyberpunk control interfaces, without ever sacrificing elegance, readability, and usability.
Performance & Ecosystem Synergy
The main challenge of the project was balancing rich multimedia content (heavy hero videos, complex Three.js 3D animations, and scroll-triggered Framer Motion transitions) with the need for instant loading times and excellent Core Web Vitals for SEO. Thanks to Next.js static pre-rendering and Server Components, combined with an optimized media asset pipeline, we created a lightning-fast, secure, and highly scalable platform deployed on Vercel's Edge Network.
0
17
Stefano Raspa Portfolio
A premium digital portfolio designed for Stefano Raspa, storyteller, filmmaker, and 3D artist. The platform merges cinematic aesthetics with advanced functionality to showcase a wide range of productions, from Virtual Production to cinema and corporate content.
The website was conceived as a dynamic creative hub, capable of adapting to Stefano's multifaceted production. Through fluid navigation and a multilingual interface, the project communicates the professional identity of an artist who constantly hybridizes creativity and technology, offering an immersive user experience on both desktop and mobile.
Technical Features
Frontend Development: Built with React and Vite for lightning-fast performance and a responsive user experience.
Multilingual Management: Full integration with i18next for native support in Italian and English.
SEO Optimization: Implementation of dynamic metadata and optimized social sharing to ensure maximum visibility.
Design System: Architecture based on CSS Modules for isolated, scalable, and high-performance styling.
Hosting & CI/CD: Automated deployment on the Vercel platform to ensure maximum reliability and loading speed.
Engineering a Cinematic Hub
The challenge was to create a container that was as visually impactful as the content it hosted. By using a minimalist design system, we allowed Stefano's visual works to remain the focal point while providing a robust technical backbone.
Performance-First Approach
By choosing Vite as the build tool and Vercel for hosting, we ensured that even content-heavy pages load near-instantaneously. The use of React allows for smooth state transitions between categories, making the exploration of Stefano's vast portfolio a seamless experience.
0
31
VesuvioTivu - The Underground Hub
A high-performance underground web experience designed for VesuvioTivu, an emerging streamer and content creator. The platform was conceived as a dynamic digital hub that blends an aggressive cyberpunk aesthetic with advanced technical integrations, positioning itself as the central reference point for the streamer's community.
The project revolves around the concept of a "digital volcano," with an industrial and technical design that evokes tactical and hacking interfaces. Through a secure serverless architecture and a cloud persistence system, the site ensures constant synchronization with Twitch APIs, offering premium features such as real-time live status monitoring, automatic token management, and dynamic scheduling—all enriched by immersive micro-interactions and interactive easter eggs.
Technical Features
Twitch Helix Integration: Implementation of a server-side proxy (Vercel Functions) for secure communication with Twitch APIs, protecting sensitive keys and optimizing requests.
Persistence & Auto-Refresh: Development of an "immortal" token management system based on Upstash Redis, capable of auto-regenerating and persisting access keys to ensure 24/7 operation.
Industrial Design System: Creation of a proprietary interface with custom components characterized by skewed shapes, technical grid patterns, and neon glitch effects.
Logo Interaction System: Development of an interactive "Easter Egg" system on the logo, complete with sound triggers (Spatial Audio) and animations coordinated with the volcano's state.
Schedule Automation: Custom hooks for dynamic retrieval and display of the Twitch schedule, with automatic fallbacks and dynamic Box Art management for games.
Community Dashboard: Integration of social feeds and dynamic moderator carousels to highlight active community members and viral content.
Cyberpunk Engineering
The visual language of VesuvioTivu was built from the ground up to reflect the "underground" nature of the community. We avoided standard UI patterns in favor of skewed containers, monospace fonts, and high-contrast neon accents, all while maintaining a focus on performance and readability.
Robust Infrastructure
Behind the glitch effects lies a robust technical architecture. By using Redis for token persistence and Vercel's edge network for deployment, we created a platform that is both highly secure and capable of handling high traffic spikes during major streaming events.
0
37
Orbit: Diary & Emotions
An intimate and private space for your emotions, every day. Track your mood, write your diary, and visualize your emotional journey with our unique 'Emotion Bottle' system.
1
137
Architectural Configurator
Architectural Configurator is a professional architectural design application that allows you to create and visualize complex projects in real time. Draw walls, place windows and doors, add labels and precise dimensions, and navigate between 2D and 3D views with an intuitive and powerful interface. Precision, total control, and immediate visualization: these are the perfect tools to transform your ideas into concrete projects.
Professional Power and Intuitive Workflow
With its modern interface and precise controls, Architectural Configurator is designed for architects, designers, and professionals who need a flexible tool for design. Perfect for creating complex layouts, experimenting with different configurations, and presenting projects with immediate visualizations. Precise dimension management and intelligent snap system allow you to work with maximum accuracy.
Built for Professionals, with Attention to Detail
Every feature has been designed with real architectural design needs in mind: from the customizable labeling system to advanced dimension management, everything is optimized for an efficient workflow. The application runs smoothly on desktop, offering high performance even with large-scale projects.
Want a Custom Solution for Your Studio?
We can create a fully customized version of this configurator (or a similar one), tailored to your specific needs, your workflow, and your company standards. Contact us: we transform your needs into a design tool that your team will use every day.
0
94
Marbles Music - The Game
A creative physics-based music sandbox. Build intricate paths and watch marbles transform every bounce into unique melodies. Choose from a library of instruments including piano, guitar, and synths to compose your own soundscape.
1
122
Marbles Music Website
The digital gateway to a world of musical physics. For Marbles Music, we developed a premium landing page that acts as the primary touchpoint for players, patrons, and the community.
Designing the Experience
The website was designed to be clean, professional, and accessible. We focused on a light, minimal interface that allows the colorful game assets and branding to take center stage, ensuring a smooth and inviting experience for every visitor.
Technical Foundation
Built using React and hosted on Vercel, the site is optimized for speed, performance, and search engine visibility.
Tailwind CSS: Leveraged for a rapid, responsive, and highly maintainable design system.
Web Performance: Optimization of static assets and lazy loading implementation to ensure lightning-fast response times.
Vercel Deployment: Guaranteed high availability and global performance via edge networks.
A Strategic Portal
The site serves as more than just a landing page; it's a strategic hub for growth.
Direct Engagement: Clear pathways to the Early Access Steam page to drive wishlist conversions.
Community Support: Integrated links to Patreon and social platforms to foster direct community interaction.
Global Reach: Designed for internationalization to support a worldwide player base.
Engineering Excellence
The Marbles Music website represents our standard for internal project identity: fast, focused, and impeccably designed. It provides a stable and professional image that matches the innovation found within the game itself.
0
17
Docusort
A comprehensive B2B education management platform built with React and Django. Streamline training administration, student evaluations, and certification workflows in a secure, scalable cloud environment.
1
118
EFFY Avatar Chatbox
An AI-powered 3D avatar chatbox for enterprise branding. EFFY combines advanced NLP with high-quality 3D characters to provide a unique, interactive, and memorable customer support experience.
1
106
Bottled - The Game
A high-energy pixel art arcade game for iOS and Android. Experience fast-paced gameplay, dynamic soundtracks, and retro-inspired aesthetics developed entirely in Unity.
1
110