A modern, interactive, and high-performance portfolio showcasing my technical expertise, academic projects, and athletic journey.
🔗 Live Demo: riccardodilecce.github.io
Built with HTML5, CSS3, Bootstrap 5, and Vanilla JavaScript, this portfolio is a fully responsive showcase of my journey as a senior Computer Science & Telecommunications student at I.S. Archimede di Treviglio.
It functions as an interactive timeline connecting my digital engineering skills—such as network configuration and software development—with the elite precision, discipline, and stress-management required as a professional athlete for the Italian National Archery Team.
- ⚡ Scroll-Snap Navigation: A seamless, fluid vertical slide layout allowing keyboard (
ArrowUp/ArrowDown) and mouse-wheel snapping mechanics for optimal desktop interaction. - 🏹 Horizontal Archery Suite: A custom horizontal multi-slide panel featuring a dynamically populated, lazy-loaded 60-photo gallery equipped with an embedded vanilla JS responsive Lightbox viewer.
- 🎨 Elegant Glassmorphism UI: Built using semi-transparent glass layouts with high-fidelity
-webkit-backdrop-filterblurring effects, tailored typewriter scripts, and smooth hover states. - 🗺️ Scroll-Driven Asset Animation: The work-based learning (PCTO) timeline features an interactive background animation where individual components of an arrow assemble dynamically as the user scrolls through different school years.
- 🌍 Localization Ready: Includes an operational frontend multi-language architecture (IT/EN toggle selector) mapping element dataset attributes on the fly.
| Category | Technologies |
|---|---|
| Frontend Core | HTML5 (Semantic), CSS3 (Variables, Scroll-Snap), Vanilla JS (ES6+) |
| Frameworks & UI | Bootstrap 5.3.3, Font Awesome 6.4.0, Glassmorphism UX |
| Networking & IT | Cisco Certified Network Configuration, Hardware Telecommunications |
| Animation Core | Intersection Observer API, Scroll-Triggered CSS Transform States |
| Hardware / IoT | Integrated Early-Warning Micro-Sensors, Smart Systems |
Here are the key academic projects and athletic milestones highlighted in the portfolio:
- Stack: IoT Micro-Sensors, Smart Appliances, Mesh Networks
- An innovative early earthquake detection infrastructure that transforms standard household appliances into localized seismic sensor nodes. Developed for Project Day 2026 to create low-cost global early-warning safety nets.
- Stack: Business Application Engineering, International Teamwork
- A professional-grade business app conceptualized, built, and pitched entirely in English at the Carlos V School during an intensive international school-work alternation program in Malaga, Spain.
- Stack: High-Performance Focus, Vanilla JS Lightbox Engine
- A visual gallery archiving my path to winning the European Gold Medal in 2024 as part of the Italian National Archery Team. It illustrates how the millimeter precision used on the target field guides my approach to code engineering and network configuration.
- Stack: Public Communication, Team Synergy
- A collaborative dramatic storytelling presentation honoring the victims of the Vajont disaster. This milestone focused on community awareness, public speaking anxiety management, and group coordination.
Portfolio/
│
├── assets/
│ ├── gallery/ # Compressed & lazy-loaded imagery (foto (1).jpg to foto (60).jpg)
│ ├── freccia_completa2.png # Asset pieces used for the scroll-driven arrow timeline
│ ├── freccia_sinistra.png # (Cocca asset)
│ ├── freccia_centro.png # (Asta asset)
│ └── freccia_destra.png # (Punta asset)
│
├── scripts/
│ └── main.js # Core layout logic, typewriter routines, and navigation mappings
│
├── index.html # Main landing deck (Hero, About Me, Computer Science, and Archery)
├── pcto.html # Work-Based Learning interactive timeline with custom animations
├── presentazioni.html # Academic presentations catalog containing the IT/EN translation switcher
└── style.css # Global custom style sheet containing glassmorphism definitions & scroll snaps