Update index.html

index.html

@@ -61,8 +61,8 @@
                 to bottom,
                 rgba(255,255,255,0),
                 rgba(255,255,255,0) 50%,
-                rgba(0,0,0,0.2) 50%,
-                rgba(0,0,0,0.2)
+                rgba(0,0,0,0.14) 50%, /* Opacità ridotta da 0.2 a 0.14 */
+                rgba(0,0,0,0.14)      /* Opacità ridotta da 0.2 a 0.14 */
             );
             background-size: 100% 4px;
             position: fixed; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; z-index: 50;
@@ -170,7 +170,7 @@
                 </div>
 
                 <p class="text-base md:text-xl leading-relaxed mb-12 max-w-2xl mx-auto font-mono opacity-80 reveal-on-scroll border-l-2 border-[#00ff41] pl-4 text-left md:text-center md:border-l-0 md:pl-0">
-                    Ciao Innovation Lab. Hai appena trasformato un pezzo di stoffa in un flusso dati. 
+                    Ciao Innovation Lab. Hai appena trasformato un pezzo di stoffa in un experience digitale. 
                     Questo è il mio concetto di <span class="text-[#00ff41] font-bold relative group cursor-help">
                         Omnichannel
                         <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 bg-black border border-[#00ff41] text-[#00ff41] text-[10px] p-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
@@ -180,23 +180,16 @@
                 </p>
                 
                 <div class="flex flex-col items-center reveal-on-scroll group" style="transition-delay: 0.2s;">
-                    <!-- Initials with hidden click interaction -->
                     <div id="profile-pic" class="w-24 h-24 md:w-32 md:h-32 rounded-full border-2 border-[#00ff41] flex items-center justify-center bg-black/50 backdrop-blur-sm mb-4 shadow-[0_0_20px_rgba(0,255,65,0.3)] cursor-pointer transition-all hover:shadow-[0_0_40px_rgba(0,255,65,0.6)] active:scale-95">
                         <span class="text-3xl font-bold text-[#00ff41] group-hover:animate-pulse">MB</span>
                     </div>
                     <h2 class="font-serif text-2xl md:text-3xl font-bold mb-1">Matteo Bergamelli</h2>
                     <p class="text-[#00ff41] text-xs md:text-sm font-mono tracking-wider mb-2">INNOVATION / AI DEVELOPER</p>
                     <span class="px-3 py-1 border border-[#00ff41]/50 rounded-full text-[10px] text-[#00ff41] bg-[#00ff41]/10">
-                        📍 Km0 - Padenghe s/G
+                        📍 Padenghe sul Garda (BS)
                     </span>
                 </div>
-            </div>
-            
-            <!-- Scroll Indicator -->
-            <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-50 animate-bounce">
-                <span class="text-[10px] font-mono tracking-[0.2em] text-[#00ff41]">SCROLL TO DECODE</span>
-                <div class="w-[1px] h-12 bg-gradient-to-b from-[#00ff41] to-transparent"></div>
-            </div>
+            </div>           
         </section>
 
         <!-- FABRIC DECODER SECTION -->
@@ -291,7 +284,7 @@
                     </h2>
                     <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
                         C'è un quarto livello di realtà nascosto in questo tessuto. 
-                        Sblocca il protocollo AR per visualizzare i dati nascosti.
+                        Sblocca il protocollo AR per immergerti dentro.
                     </p>
                 </div>
 
@@ -346,25 +339,25 @@
                     
                     <div class="p-6 font-mono text-xs md:text-sm leading-relaxed overflow-x-auto text-left">
                         <div class="text-gray-400">
-                            <span class="text-[#c678dd]">const</span> <span class="text-[#61afef]">checkCompatibility</span> = (<span class="text-[#d19a66]">system</span>) ={'>'} {'{'}
+                            <span class="text-[#c678dd]">const</span> <span class="text-[#61afef]">checkCompatibility</span> = (<span class="text-[#d19a66]">system</span>) = {
                         </div>
                         <div class="pl-4">
                             <span class="text-[#c678dd]">if</span> (
                             <span class="text-[#e06c75]">Legacy_Systems</span> && 
                             <span class="text-[#e06c75]">Future_AI</span>
-                            ) {'{'}
+                            ) 
                         </div>
                         <div class="pl-8 text-[#98c379]">
                             return <span class="text-[#e06c75]">"Matteo Bergamelli"</span>;
                         </div>
                         <div class="pl-4">
-                            {'}'} <span class="text-[#c678dd]">else</span> {'{'}
+                             <span class="text-[#c678dd]">else</span> 
                         </div>
                         <div class="pl-8 text-[#98c379]">
                             return <span class="text-red-400">"Gap Tecnologico"</span>;
                         </div>
-                        <div class="pl-4">{'}'}</div>
-                        <div>{'}'};</div>
+                        <div class="pl-4"></div>
+                        <div>};</div>
                     </div>
                     
                     <!-- Blink Cursor -->
@@ -389,8 +382,11 @@
                         <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">SAP B1</span>
                         <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">SQL Server</span>
                         <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">LLM Agents</span>
+                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">RAG</span>
+                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">IoT</span>
+                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">OpcUa</span>
                         <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">Spark AR</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">React</span>
+                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">Angular</span>
                     </div>
                 </div>
             </div>
@@ -400,16 +396,16 @@
         <section class="px-6 py-20 bg-black relative z-10">
             <div class="max-w-2xl mx-auto text-center reveal-on-scroll">
                 <h2 class="font-serif text-3xl md:text-4xl font-bold mb-12">
-                    Iniziamo a <span class="text-[#00ff41]">connettere</span>?
+                    Iniziamo a <span class="text-[#00ff41]">Innovare</span>?
                 </h2>
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-16">
                     <a href="./CV.pdf" class="group flex items-center justify-center gap-2 px-6 py-4 bg-[#00ff41] text-black font-mono text-sm font-bold rounded hover:bg-transparent hover:text-[#00ff41] border border-[#00ff41] transition-all">
-                        <span class="group-hover:translate-x-1 transition-transform">📄 SCARICA CV TECNICO</span>
+                        <span class="group-hover:translate-x-1 transition-transform">📄 CV Tecnico</span>
                     </a>
                     <a href="tel:+393428194066" class="flex items-center justify-center gap-2 px-6 py-4 bg-transparent text-[#f5f5f5] font-mono text-sm border border-[#333] rounded hover:border-[#00ff41] hover:text-[#00ff41] transition-all">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg> 
-                        Chiama Matteo
+                        Telefono
                     </a>
                     <a href="mailto:matteo.bergamelli1989@gmail.com" class="flex items-center justify-center gap-2 px-6 py-4 bg-transparent text-[#f5f5f5] font-mono text-sm border border-[#333] rounded hover:border-[#00ff41] hover:text-[#00ff41] transition-all">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
@@ -425,8 +421,6 @@
                         Printed at: Padenghe s/G<br/>
                         Cost: 0€<br/>
                         Value: <span class="text-[#00ff41]">Infinite</span><br/><br/>
-                        Promotica S.p.A | Freelance AI Dev<br/>
-                        Made with ❤️ and <span class="text-[#00ff41]">Code</span><br/><br/>
                         ��━━━━━━━━━━━━━━━━━━━━━━━━━━━
                     </p>
                 </div>