PageSourceSearch

https://newt.vision/portfolio

html newt.vision collected 2026-10-10 00:15:02 UTC 186,308 bytes, 2,146 lines download raw bytes

1<!DOCTYPE html>
2<html lang="it-IT" class="scroll-smooth bg-ink">
3<head>
4    <meta charset="utf-8">
5
6<!-- 
7	build by get.typo3.org/sitepackage
8
9	This website is powered by TYPO3 - inspiring people to share!
10	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
11	TYPO3 is copyright 1998-2026 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
12	Information and contribution at https://typo3.org/
13-->
14
15
16<title>Il nostro portfolio: NewtVision - Easy Web Solutions</title>
17<meta http-equiv="x-ua-compatible" content="IE=edge">
18<meta name="generator" content="TYPO3 CMS">
19<meta name="description" content="Dal 2011 NewtVision, a Roma progetta e sviluppa siti web, piattaforme digitali e applicazioni su misura. Ci occupiamo di UX/UI, sviluppo frontend e backend, TYPO3 CMS, database, integrazione di sistemi, mappe interattive e infrastrutture web. ">
20<meta name="viewport" content="width=device-width, initial-scale=1">
21<meta name="robots" content="index,follow">
22<meta property="og:title" content="Il nostro portfolio">
23<meta property="og:description" content="Dal 2011 NewtVision, a Roma progetta e sviluppa siti web, piattaforme digitali e applicazioni su misura. Ci occupiamo di UX/UI, sviluppo frontend e backend, TYPO3 CMS, database, integrazione di sistemi, mappe interattive e infrastrutture web. ">
24<meta property="og:image" content="https://newt.vision/fileadmin/_processed_/e/1/csm_portfolio_c797dadf00.jpeg">
25<meta property="og:image:url" content="https://newt.vision/fileadmin/_processed_/e/1/csm_portfolio_c797dadf00.jpeg">
26<meta property="og:image:width" content="2000">
27<meta property="og:image:height" content="1050">
28<meta name="twitter:title" content="Il nostro portfolio">
29<meta name="twitter:description" content="Dal 2011 NewtVision, a Roma progetta e sviluppa siti web, piattaforme digitali e applicazioni su misura. Ci occupiamo di UX/UI, sviluppo frontend e backend, TYPO3 CMS, database, integrazione di sistemi, mappe interattive e infrastrutture web. ">
30<meta name="twitter:image" content="https://newt.vision/fileadmin/_processed_/e/1/csm_portfolio_c797dadf00.jpeg">
31<meta name="twitter:card" content="summary">
32<meta name="apple-mobile-web-app-capable" content="no">
33
34
35<link rel="stylesheet" href="/typo3temp/assets/css/7015c8c4ac5ff815b57530b221005fc6.css?1772667073" media="all">
36<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&amp;display=swap" media="all">
37<link rel="stylesheet" href="/typo3conf/ext/newtvision/Resources/Public/Css/app.css?1790721067" media="all">
38<link rel="stylesheet" href="/typo3conf/ext/newtvision/Resources/Public/Css/layout.css?1790774956" media="all">
39
40
41<script src="/typo3conf/ext/newtvision/Resources/Public/JavaScript/gsap.min.js?1790694577" defer="defer"></script>
vendor: 1 bytes, line 41
41
42<script src="/typo3conf/ext/newtvision/Resources/Public/JavaScript/ScrollTrigger.min.js?1790694577" defer="defer"></script>
vendor: 1 bytes, line 42
42
43<script src="/typo3conf/ext/newtvision/Resources/Public/JavaScript/ScrollToPlugin.min.js?1790694577" defer="defer"></script>
43
44
45
46
47<script type="text/javascript" charset="UTF-8" src="//cdn.cookie-script.com/s/23a8ea49b1f6dc481b405610afcdd172.js"></script>
47     
47<script>(function(u){if(/AppleWebKit/.test(u)&&!/Chrome|Chromium|Edg|OPR|Android/.test(u)){document.documentElement.classList.add('is-webkit');}})(navigator.userAgent);</script>
47    <meta name="google-site-verification" content="Zrge8KN9FVaHOtFfsn8pbK4C3RgYkhNsqfnx60tDHz8" />
48    
48<script defer data-domain="newt.vision" src="https://analytics.newtvision.com/js/script.js"></script>
48    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/apple-touch-icon-57x57.png" />
49<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/apple-touch-icon-114x114.png" />
50<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/apple-touch-icon-72x72.png" />
51<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/apple-touch-icon-144x144.png" />
52<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/apple-touch-icon-60x60.png" />
53<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/apple-touch-icon-120x120.png" />
54<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/apple-touch-icon-76x76.png" />
55<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/apple-touch-icon-152x152.png" />
56<link rel="icon" type="image/png" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/favicon-196x196.png" sizes="196x196" />
57<link rel="icon" type="image/png" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/favicon-96x96.png" sizes="96x96" />
58<link rel="icon" type="image/png" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/favicon-32x32.png" sizes="32x32" />
59<link rel="icon" type="image/png" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/favicon-16x16.png" sizes="16x16" />
60<link rel="icon" type="image/png" href="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/favicon-128.png" sizes="128x128" />
61<meta name="application-name" content="&nbsp;"/>
62<meta name="msapplication-TileColor" content="#FFFFFF" />
63<meta name="msapplication-TileImage" content="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/mstile-144x144.png" />
64<meta name="msapplication-square70x70logo" content="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/mstile-70x70.png" />
65<meta name="msapplication-square150x150logo" content="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/mstile-150x150.png" />
66<meta name="msapplication-wide310x150logo" content="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/mstile-310x150.png" />
67<meta name="msapplication-square310x310logo" content="/typo3conf/ext/newtvision/Resources/Public/Icons/favico/mstile-310x310.png" />
68<link rel="canonical" href="https://newt.vision/portfolio">
69
70<link rel="alternate" hreflang="it-IT" href="https://newt.vision/portfolio">
71<link rel="alternate" hreflang="en-US" href="https://newt.vision/en/portfolio">
72<link rel="alternate" hreflang="x-default" href="https://newt.vision/portfolio">
73
74</head>
75<body class="relative antialiased selection:bg-newtgreen selection:text-white intro-locked">
76
77    
78    
79        
80        
81        
82        
83        
84        
85        <header id="site-header" class="fixed top-0 w-full p-6 z-[70] mix-blend-difference flex justify-between items-center pointer-events-none">
86            <div id="real-header-logo" class="text-2xl font-display font-bold tracking-tight text-white pointer-events-auto relative z-10 opacity-1 leading-none"><a href="/">NewtVision<span class="text-newtgreen">.</span></a></div>
87            <button id="menu-toggle" class="relative w-10 h-10 pointer-events-auto focus:outline-none z-80 group opacity-1" aria-label="Apri menu">
88                <span class="line-1 block absolute left-1 w-8 h-[2px] bg-white top-[14px] rounded-full"></span>
89                <span class="line-2 block absolute left-1 w-8 h-[2px] bg-white top-[26px] transition-all duration-300 group-hover:w-6 group-hover:bg-newtgreen rounded-full"></span>
90            </button>
91        </header>
92    
93
94<nav id="fullscreen-menu" 
95     class="fixed inset-0 bg-ink z-[60] flex items-center justify-center pointer-events-none" >
96    <div class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
97        <ul class="md:col-span-8 flex flex-col gap-4 md:gap-6 text-4xl md:text-8xl font-bold tracking-tight">
98            
99                <li class="overflow-hidden">
100                    <div class="menu-link block transform translate-y-[120%]">
101                        
102                                <a href="/chi-siamo" class="block font-display transition-colors duration-300 text-white hover:text-newtgreen">Chi siamo</a>
103                            
104                    </div>
105                </li>
106            
107                <li class="overflow-hidden">
108                    <div class="menu-link block transform translate-y-[120%]">
109                        
110                                <a href="/portfolio" class="block font-display transition-colors duration-300 text-newtgreen">Portfolio</a>
111                            
112                    </div>
113                </li>
114            
115                <li class="overflow-hidden">
116                    <div class="menu-link block transform translate-y-[120%]">
117                        
118                                <a href="/servizi" class="block font-display transition-colors duration-300 text-white hover:text-newtgreen">Servizi</a>
119                            
120                    </div>
121                </li>
122            
123                <li class="overflow-hidden">
124                    <div class="menu-link block transform translate-y-[120%]">
125                        
126                                <a href="/contatti" class="block font-display transition-colors duration-300 text-white hover:text-newtgreen">Contatti</a>
127                            
128                    </div>
129                </li>
130            
131        </ul>
132          <div class="md:col-span-4 flex flex-col gap-10 mt-12 md:mt-0 border-t border-white/10 md:border-t-0 md:border-l md:border-white/10 pt-8 md:pt-0 md:pl-12">
133                <div class="menu-info opacity-1 translate-x-4">
134                    <p class="text-newtgreen font-mono text-[10px] uppercase tracking-widest mb-3">
135                        // Lingua
136                    </p>
137
138                    <p class="text-gray-400 text-lg leading-relaxed">
139                        
140                           
141                            
142                                
143                                         <span class="text-gray-600">
144                                            it
145                                        </span>
146                                        
147                                    
148
149                                 | 
150                            
151                                
152                                       <a href="/en/portfolio"
153                                        hreflang=""
154                                        class="text-gray-400">
155                                            en
156                                        </a>
157                                    
158
159                                
160                            
161                        
162                    </p>
163                </div>
164                <div class="menu-info opacity-1 translate-x-4">
165                    <p class="text-newtgreen font-mono text-[10px] uppercase tracking-widest mb-3">// Say Hello</p>
166                    <a class="text-white text-xl font-medium hover:text-newtgreen transition-colors block mb-1" href="mailto:[email protected]">[email protected]</a>
167                    <a href="tel:+39065560305" class="text-gray-400 text-lg hover:text-white transition-colors block">+39 06 55 60 305</a>
168                </div>
169                <div class="menu-info opacity-1 translate-x-4">
170                    <p class="text-newtgreen font-mono text-[10px] uppercase tracking-widest mb-3">// Sede</p>
171                    <p class="text-gray-400 text-lg leading-relaxed">Via Pisino, 155<br>00177 Roma, IT</p>
172                </div>
173                
174                <div class="menu-info opacity-1 translate-x-4">
175                    <p class="text-newtgreen font-mono text-[10px] uppercase tracking-widest mb-3">// Network</p>
176                    <div class="flex gap-4">
177                        <a href="https://www.linkedin.com/company/newtvision-snc/" target="_blank" class="text-white hover:text-newtgreen transition-colors font-medium">LinkedIn</a>
178                
179                    </div>
180                </div>
181            </div>
182
183    </div>
184</nav>
185
186
187        <div id="modal-overlay" class="fixed inset-0 bg-ink/80 backdrop-blur-md z-[90] opacity-0 pointer-events-none flex items-center justify-center p-4 lg:p-8">
188
189    <div id="project-modal" class="bg-ink border border-white/10 rounded-[2.5rem] w-full max-w-[100rem] h-[90vh] overflow-hidden flex flex-col lg:flex-row shadow-2xl opacity-0 relative">
190
191        <div id="project-modal-ghost" class="absolute top-0 left-0 w-full h-full z-50 bg-ink overflow-hidden pointer-events-none">
192            <img id="project-modal-ghost-image" src="" alt="" class="w-full h-full object-cover object-top">
193        </div>
194
195        <div id="project-modal-ghost-poster" class="absolute top-0 left-0 w-full h-full z-[51] bg-gradient-to-br from-white via-white to-stonebg flex items-center justify-center pointer-events-none opacity-0">
196            <img id="project-modal-ghost-poster-logo" src="" alt="" class="max-w-[35%] max-h-[35%] object-contain hidden">
197            <span id="project-modal-ghost-poster-fallback" class="text-4xl md:text-6xl font-black text-ink/15 uppercase tracking-tight text-center leading-tight px-10 hidden"></span>
198        </div>
199
200        <div class="modal-panel relative h-64 md:h-80 lg:h-full lg:w-3/5 w-full bg-stonebg shrink-0 overflow-hidden">
201            <div id="project-modal-slider-track" class="flex h-full w-full transition-transform duration-500 ease-out"></div>
202
203            <div class="absolute inset-0 bg-gradient-to-t lg:bg-gradient-to-r from-ink/90 via-ink/40 to-transparent pointer-events-none"></div>
204
205            <div id="project-modal-slider-controls" class="absolute inset-x-4 top-1/2 -translate-y-1/2 flex justify-between z-20">
206                <button id="project-modal-prev" type="button" aria-label="Immagine precedente" class="w-10 h-10 bg-ink/40 backdrop-blur-md rounded-full flex items-center justify-center text-white hover:bg-newtgreen hover:text-ink transition-colors border border-white/20">
207                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
207<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
208                </button>
209                <button id="project-modal-next" type="button" aria-label="Immagine successiva" class="w-10 h-10 bg-ink/40 backdrop-blur-md rounded-full flex items-center justify-center text-white hover:bg-newtgreen hover:text-ink transition-colors border border-white/20">
210                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
211                </button>
212            </div>
213
214            <div id="project-modal-slider-dots" class="absolute top-6 left-1/2 -translate-x-1/2 flex gap-2 z-20"></div>
215
216            <div class="absolute bottom-8 left-8 lg:bottom-16 lg:left-16 right-8 z-20">
217                <p id="project-modal-typology" class="text-newtgreen font-mono text-xs md:text-sm uppercase tracking-widest mb-3">Progetto Digitale</p>
218                <h2 id="project-modal-title" class="text-5xl md:text-7xl font-black text-white leading-tight">Portfolio</h2>
219            </div>
220        </div>
221
222        <div class="modal-panel w-full lg:w-2/5 flex flex-col flex-1 min-h-0 lg:h-full bg-ink relative">
223
224            <div class="absolute top-6 right-6 z-10">
225                <button id="close-modal" class="w-12 h-12 bg-white/10 backdrop-blur-md rounded-full flex items-center justify-center text-white hover:bg-newtgreen hover:text-ink transition-colors border border-white/20">
226                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
227                </button>
228            </div>
229
230            <div class="p-8 lg:p-12 overflow-y-auto no-scrollbar flex-1 pt-20 lg:pt-24">
231                <div class="space-y-10">
232                    <div>
233
234                        <div id="project-modal-description" class="rte-content rte-content--dark text-gray-400 leading-relaxed font-light text-base md:text-md">Dettagli progetto disponibili a breve.</div>
235                    </div>
236
237                    <div class="grid grid-cols-2 gap-6 pt-8 border-t border-white/10">
238                        <div>
239                            <span class="block text-gray-500 font-mono text-[10px] uppercase tracking-widest mb-2">Tipologia</span>
240                            <span id="project-modal-role" class="text-white font-medium text-sm lg:text-base">Progetto Digitale</span>
241                        </div>
242                        <div>
243                            <span class="block text-gray-500 font-mono text-[10px] uppercase tracking-widest mb-2">Anno</span>
244                            <span id="project-modal-year" class="text-white font-medium text-sm lg:text-base">-</span>
245                        </div>
246                    </div>
247
248                    <div class="pt-8 border-t border-white/10 pb-6">
249                        <span class="block text-gray-500 font-mono text-[10px] uppercase tracking-widest mb-4">#</span>
250                        <div id="project-modal-tags" class="flex flex-wrap gap-2"></div>
251                    </div>
252                </div>
253            </div>
254
255            <div class="p-8 lg:p-10 border-t border-white/10 bg-ink shrink-0 space-y-3">
256
257                
258 
259
260                <a id="project-modal-link" href="#" data-visit-label="Visit Website" class="flex items-center justify-center w-full py-5 bg-white text-ink font-bold uppercase tracking-widest text-xs rounded-full hover:bg-newtgreen transition-all duration-300">
261                   Esplora
262                </a>
263            </div>
264        </div>
265    </div>
266</div>
267
268    <main id="page-content" class="w-full min-h-screen opacity-0 translate-y-10 relative z-10">
269        
270        <div class="w-full min-h-[85vh] flex flex-col justify-end pb-20 px-6 max-w-7xl mx-auto pt-32">
271            <p class="text-newtgreen font-mono tracking-widest uppercase mb-4 font-bold">// I nostri progetti</p>
272            <h1 class="text-6xl md:text-8xl font-black tracking-tighter leading-none mb-6 text-white font-display">Una parte <br/> del viaggio<span class="text-newtgreen">.</span></h1>
273            <div class="rte-content rte-content--dark text-xl md:text-2xl font-light text-gray-400 max-w-2xl">
274                <p>Negli anni abbiamo lavorato a progetti molto diversi tra loro: siti, piattaforme, applicazioni, database, mappe e strumenti digitali. Qui ne abbiamo raccolti alcuni. Quelli che raccontano meglio cosa sappiamo fare e, soprattutto, come ci piace lavorare.</p>
275            </div>
276        </div>
277
278        <div id="megacard" class="bg-surface w-full rounded-t-[4rem] pb-24 pt-24 text-ink relative z-10 shadow-[0_-20px_60px_rgba(0,0,0,0.3)]">
279            <div class="absolute top-4 left-1/2 transform -translate-x-1/2 w-10 h-1 bg-borderline rounded-full mb-12"></div>
280            
281            <div class="max-w-[100rem] mx-auto px-4 sm:px-6 lg:px-8 mt-12 md:mt-0">
282                
283                
284                
285                <div class="columns-1 md:columns-2 lg:columns-3 gap-6 md:gap-8 space-y-6 md:space-y-8">
286                    
287                        
288                    
289                        
290                    
291                        
292                    
293                        
294                            
295                            
296                            
297                            
298                            
299                            
300                            
301                            
302                            
303                            
304                            
305                            
306                                
307                            
308                                
309                            
310                                
311                            
312                                
313                            
314                            
315
316                            <a href="javascript:void(0)"
317                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
318                               data-modal-title="COLiBRI"
319                               data-modal-typology="Scientific Portal"
320                               data-modal-description="&lt;p&gt;NewtVision ha progettato e sviluppato il sito web del progetto COLiBRI, creando una piattaforma digitale moderna e flessibile a supporto della comunicazione, della condivisione delle conoscenze e del coinvolgimento degli stakeholder nel settore europeo del miglioramento genetico delle colture.&lt;/p&gt;
321&lt;p&gt;Sviluppata con TYPO3 CMS, la piattaforma integra un’interfaccia responsive e accessibile, componenti editoriali personalizzati, gestione di partner e stakeholder, strumenti interattivi e aree dedicate alle risorse.&lt;/p&gt;
322&lt;p&gt;Il risultato è una soluzione scalabile che combina design, gestione avanzata dei contenuti e sviluppo custom, garantendo al team COLiBRI autonomia nella gestione e nell’evoluzi
322one del sito.&lt;/p&gt;"
323                               data-modal-year="2026"
324                               data-modal-image="/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-hero-img.jpeg"
325                               data-modal-images="/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-hero-img.jpeg,/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-home.jpeg,/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-stakeholders.jpeg,/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-partners.jpeg"
326                               data-modal-logo="/fileadmin/Templates/NewtVision/portfolio/colibri/logo-colibri-pos.svg"
327                               data-modal-link="https://colibri-plantbreeding.eu/"
328                               data-modal-tags="Responsive Design, Leaflet, News, TYPO3 CMS, Registration, TYPO3 Custom Ext">
329
330                            
331                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
332                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
333                                        
334                                                <img src="/fileadmin/Templates/NewtVision/portfolio/colibri/logo-colibri-p
334os.svg" alt="COLiBRI" class="max-w-[60%] max-h-[60%] object-contain">
335                                            
336                                    </div>
337                                    <div class="px-8 pb-16">
338                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">NewtVision ha progettato e sviluppato il sito web del progetto COLiBRI, creando una piattaforma digitale moderna e flessibile a supporto&amp;hellip;</p>
339                                    </div>
340                                </div>
341
342                                <!-- Screenshot che scorre, rivelato in hover -->
343                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
344                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-hero-img.jpeg');"></div>
345                                </div>
346                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
347
348                                <!-- Categoria: sempre visibile, accento colore sul poster -->
349                                <div class="absolute top-8 left-8 z-40">
350                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Scientific Portal</span>
351                                </div>
352
353                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
354                                <div class="absolute bottom-8 left-8 right-8 z-40">
355                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">COLiBRI</h3>
356                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
357                                        
358                                            <div class="flex flex-wrap gap-2 mb-3">
359                                                <span class="border border-white/20 bg-white/5 backdrop-blur-sm px-3 py-1.5 rounded text-xs font-mono text-white uppercase tracking-widest">Collaborative Crop Breeding Research and Innovation for a Green Europe</span>
360                                            </div>
361                                        
362                                        
363                                    </div>
364                                </div>
365                            </a>
366                        
367                    
368                        
369                            
370                            
371                            
372                            
373                            
374                            
375                            
376                            
377                            
378                            
379                            
380                            
381                                
382                            
383                                
384                            
385                            
386
387                            <a href="javascript:void(0)"
388                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
389                               data-modal-title="EUFGIS"
390                               data-modal-typology="Web Application"
391                               data-modal-description="&lt;p&gt;Per &lt;strong&gt;EUFGIS&lt;/strong&gt;, il sistema informativo europeo dedicato alle risorse genetiche forestali, NewtVision ha progettato e sviluppato una nuova infrastruttura digitale capace di integrare gestione dei dati, strumenti geospaziali e collaborazione scientifica in un’unica piattaforma.&lt;/p&gt;
392&lt;p&gt;Il lavoro, realizzato nell’ambito del progetto europeo FORGENIUS, ha coinvolto NewtVision come &lt;strong&gt;partner tecnologico&lt;/strong&gt;
392, con la responsabilità dello sviluppo e dell’evoluzione tecnica della piattaforma.&lt;/p&gt;
393&lt;p&gt;Abbiamo sviluppato un nuovo &lt;strong&gt;portale pubblico&lt;/strong&gt; per rendere accessibili e navigabili dati sulle Genetic Conservation Units, specie forestali e informazioni ambientali, affiancandolo a una &lt;strong&gt;intranet&lt;/strong&gt; dedicata ai National Coordinators. L’area riservata mette a disposizione strumenti per inserire, aggiornare e validare i dati, gestire informazioni geografiche, lavorare con shapefile ed effettuare analisi ambientali direttamente sulla piattaforma.&lt;/p&gt;
394&lt;p&gt;Parallelamente abbiamo progettato gli ambienti e i flussi di gestione dei &lt;strong&gt;dati prodotti dai Work Package di FORGENIUS&lt;/strong&gt;, costruendo procedure per raccogliere, armonizzare e integrare dataset scientifici provenienti da fonti e gruppi di ricerca differenti.&lt;/p&gt;
395&lt;p&gt;Una parte importante dello sviluppo ha riguardato l’integrazione tra &lt;strong&gt;database, dati geografici, climatici, ambientali e biologici&lt;/strong&gt;, con strumenti GIS, processi automatici di elaborazione e connessioni con fonti esterne. L’architettura combina database relazionali e tecnologie graph per mettere in relazione informazioni appartenenti a domini scientifici diversi.&lt;/p&gt;
396&lt;p&gt;Il risultato è una piattaforma costruita non solo per pubblicare dati, ma per &lt;strong&gt;raccoglierli, organizzarli, collegarli e renderli utilizzabili&lt;/strong&gt;, trasformando informazioni scientifiche complesse in strumenti concreti per la ricerca e la conservazione delle risorse genetiche forestali.&lt;/p&gt;"
397                               data-modal-year="2025"
398                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/eufgis/eufgis.jpeg"
399                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/eufgis/eufgis.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/eufgis.jpg"
400                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/EUFGIS_logo_2023.svg"
401                               data-modal-link="https://eufgis.org/"
402                               data-modal-tags="Leaflet, TYPO3, Web Portal, Intranet, GIS, Data Integration, Scientific Data, Environmental Data, Climate Data, Graph Database, ArangoDB, Horizon 2020">
403
404                            
405                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
406                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
407                                        
408                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/logos/EUFGIS_logo_2023.svg" alt="EUFGIS" class="max-w-[60%] max-h-[60%] object-contain">
409                                            
410                                    </div>
411                                    <div class="px-8 pb-16">
412                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">Per EUFGIS, il sistema informativo europeo dedicato alle risorse genetiche forestali, NewtVision ha progettato e sviluppato una nuova&amp;hellip;</p>
413                                    </div>
414                                </div>
415
416                                <!-- Screenshot che scorre, rivelato in hover -->
417                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
418                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/eufgis/eufgis.jpeg');"></div>
419                                </div>
420                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
421
422                                <!-- Categoria: sempre visibile, accento colore sul poster -->
423                                <div class="absolute top-8 left-8 z-40">
424                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Web Application</span>
425                                </div>
426
427                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
428                                <div class="absolute bottom-8 left-8 right-8 z-40">
429                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">EUFGIS</h3>
430                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
431                                        
432                                            <div class="flex flex-wrap gap-2 mb-3">
433                                                <span class="border border-white/20 bg-white/5 backdrop-blur-sm px-3 py-1.5 rounded text-xs font-mono text-white uppercase tracking-widest">Una piattaforma centrale per il Programma europeo per le risorse genetiche forestali</span>
434                                            </div>
435                                        
436                                        
437                                    </div>
438                                </div>
439                            </a>
440                        
441                    
442                        
443                            
444                            
445                            
446                            
447                            
448                            
449                            
450                            
451                            
452                            
453                            
454                            
455                                
456                            
457                                
458                            
459                                
460                            
461                                
462                            
463                            
464
465                            <a href="javascript:void(0)"
466                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
467                               data-modal-title="Liberi, Oltre le Illusioni"
468                               data-modal-typology="Institutional website"
469                               data-modal-description="&lt;p&gt;Per Liberi Oltre le Illusioni abbiamo progettato e sviluppato una piattaforma editoriale pensata per supportare la diffusione di analisi, approfondimenti, podcast, eventi e iniziative dell&#039;associazione attraverso un ecosistema digitale moderno e facilmente gestibile.&lt;/p&gt;
470&lt;p&gt;Realizzata con &lt;strong&gt;TYPO3 CMS&lt;/strong&gt;, la piattaforma è stata progettata per offrire un&#039;esperienza di navigazione fluida e un&#039;organizzazione dei contenuti chiara, valorizzando la produzione editoriale e facilitando la consultazione di articoli, rubriche, podcast e attività associative. L&#039;architettura del sito consente una gestione flessibile dei contenuti e supporta l&#039;evoluzione del progetto nel tempo.&lt;/p&gt;
471&lt;p&gt;Abbiamo dedicato particolare attenzione alle prestazioni, all&#039;ottimizzazione SEO, all&#039;accessibilità e alla fruizione da dispositivi mobili, integrando funzionalità avanzate per la gestione editoriale, degli eventi e delle aree riservate.&lt;/p&gt;
472&lt;p&gt;Il risultato è una piattaforma solida, scalabile e orientata ai contenuti, capace di sostenere le attività editoriali e associative di Liberi Oltre le Illusioni e di offrire agli utenti un&#039;esperienza di consultazione moderna, veloce e affidabile.&lt;/p&gt;"
473                               data-modal-year="2025"
474                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/chi-siamo-3.jpg"
475                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/chi-siamo-3.jpg,/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/liberioltre-new.jpg,/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/eventi.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/podcast.jpeg"
476                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/LOGO_Final_Black-01.png"
477                               data-modal-link="https://www.liberioltreleillusioni.it/"
478                               data-modal-tags="Responsive Design, Leaflet, Podcast, News, Payments, Restricted Area, TYPO3 
478CMS">
479
480                            
481                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
482                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
483                                        
484                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/logos/LOGO_Final_Black-01.png" alt="Liberi, Oltre le Illusioni" class="max-w-[60%] max-h-[60%] object-contain">
485                                            
486                                    </div>
487                                    <div class="px-8 pb-16">
488                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">Per Liberi Oltre le Illusioni abbiamo progettato e sviluppato una piattaforma editoriale pensata per supportare la diffusione di analisi,&amp;hellip;</p>
489                                    </div>
490                                </div>
491
492                                <!-- Screenshot che scorre, rivelato in hover -->
493                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
494                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/chi-siamo-3.jpg');"></div>
495                                </div>
496                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
497
498                                <!-- Categoria: sempre visibile, accento colore sul poster -->
499                                <div class="absolute top-8 left-8 z-40">
500                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Institutional website</span>
501                                </div>
502
503                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
504                                <div class="absolute bottom-8 left-8 right-8 z-40">
505                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">Liberi, Oltre le Illusioni</h3>
506                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
507                                        
508                                        
509                                    </div>
510                                </div>
511                            </a>
512                        
513                    
514                        
515                            
516                            
517                            
518                            
519                            
520                            
521                            
522                            
523                            
524                            
525                            
526                            
527                                
528                            
529                            
530
531                            <a href="javascript:void(0)"
532                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
533                               data-modal-title="Politèia"
534                               data-modal-typology="Blog"
535                               data-modal-description="&lt;p&gt;
535Politèia è un progetto editoriale indipendente nato per creare uno spazio di approfondimento e confronto su politica, società, cultura e trasformazioni del nostro tempo.&lt;/p&gt;
536&lt;p&gt;NewtVision ha contribuito alla nascita del progetto e ne ha progettato e sviluppato il blog, costruendo uno spazio essenziale in cui sono soprattutto i contenuti ad avere voce. Articoli, analisi e contributi di autori diversi convivono all&#039;interno di una struttura pensata per rendere la lettura semplice e lasciare spazio alle idee.&lt;/p&gt;
537&lt;p&gt;Un progetto più piccolo rispetto ad alcune delle piattaforme presenti nel nostro portfolio, ma particolarmente vicino a noi: perché a volte il web serve anche semplicemente a creare un posto in cui fermarsi, leggere e discutere.&lt;/p&gt;"
538                               data-modal-year="2026"
539                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/politeia.jpg"
540                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/politeia.jpg"
541                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/politeia-bianco-esteso.svg"
542                               data-modal-link="https://politeia.blog/"
543                               data-modal-tags="Mask, Responsive Design, Podcast, News, TYPO3 
543CMS">
544
545                            
546                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
547                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
548                                        
549                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/logos/politeia-bianco-esteso.svg" alt="Politèia" class="max-w-[60%] max-h-[60%] object-contain">
550                                            
551                                    </div>
552                                    <div class="px-8 pb-16">
553                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">Politèia è un progetto editoriale indipendente nato per creare uno spazio di approfondimento e confronto su politica, società, cultura e&amp;hellip;</p>
554                                    </div>
555                                </div>
556
557                                <!-- Screenshot che scorre, rivelato in hover -->
558                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
559                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/politeia.jpg');"></div>
560                                </div>
561                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
562
563                                <!-- Categoria: sempre visibile, accento colore sul poster -->
564                                <div class="absolute top-8 left-8 z-40">
565                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Blog</span>
566                                </div>
567
568                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
569                                <div class="absolute bottom-8 left-8 right-8 z-40">
570                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">Politèia</h3>
571                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
572                                        
573                                        
574                                    </div>
575                                </div>
576                            </a>
577                        
578                    
579                        
580                    
581                        
582                            
583                            
584                            
585                            
586                            
587                            
588                            
589                            
590                            
591                            
592                            
593                            
594                                
595                            
596                                
597                            
598                                
599                            
600                                
601                            
602                            
603
604                            <a href="javascript:void(0)"
605                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
606                               data-modal-title="Cacao of Excellence"
607                               data-modal-typology="Scientific Portal"
608                               data-modal-description="&lt;p&gt;Abbiamo progettato e sviluppato il sito web di Cacao of Excellence, programma internazionale dedicato alla qualità e alla diversità del cacao e alla valorizzazione dei produttori di tutto il mondo.&lt;/p&gt;
609&lt;p&gt;Il progetto riunisce in un&#039;unica piattaforma contenuti istituzionali, news, risorse, attività di ricerca e formazione e tutte le informazioni dedicate ai Cacao of Excellence Awards. Una parte importante del lavoro ha riguardato l&#039;organizzazione e la presentazione di una grande quantità di contenuti e dati, dai produttori alle origini del cacao, fino ai risultati delle diverse edizioni degli Awards.&lt;/p&gt;
610&lt;p&gt;Abbiamo sviluppato la piattaforma in TYPO3 e integrato un e-commerce basato su PrestaShop per la gestione e la vendita dei Chocolate Boxes. Due sistemi diversi che lavorano insieme per gestire contenuti, dati e attività di vendita all&#039;interno dello stesso progetto digitale.&lt;/p&gt;"
611                               data-modal-year="2026"
612                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-of-excellence-1.jpeg"
613                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-of-excellence-1.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/cacao-of-excellence.jpg,/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-of-excellence-2.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-shop.jpeg"
614                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/cacao-logo.png"
615                               data-modal-link="https://www.cacaoofexcellence.org/"
616                               data-modal-tags="Responsive Design, Leaflet, News, TYPO3 
616CMS, E-commerce, Prestashop">
617
618                            
619                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
620                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
621                                        
622                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/logos/cacao-logo.png" alt="Cacao of Excellence" class="max-w-[60%] max-h-[60%] object-contain">
623                                            
624                                    </div>
625                                    <div class="px-8 pb-16">
626                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">Abbiamo progettato e sviluppato il sito web di Cacao of Excellence, programma internazionale dedicato alla qualità e alla diversità del&amp;hellip;</p>
627                                    </div>
628                                </div>
629
630                                <!-- Screenshot che scorre, rivelato in hover -->
631                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
632                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-of-excellence-1.jpeg');"></div>
633                                </div>
634                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
635
636                                <!-- Categoria: sempre visibile, accento colore sul poster -->
637                                <div class="absolute top-8 left-8 z-40">
638                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Scientific Portal</span>
639                                </div>
640
641                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
642                                <div class="absolute bottom-8 left-8 right-8 z-40">
643                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">Cacao of Excellence</h3>
644                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
645                                        
646                                        
647                                    </div>
648                                </div>
649                            </a>
650                        
651                    
652                        
653                    
654                        
655                            
656                            
657                            
658                            
659                            
660                            
661                            
662                            
663                            
664                            
665                            
666                            
667                                
668                            
669                                
670                            
671                                
672                            
673                            
674
675                            <a href="javascript:void(0)"
676                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
677                               data-modal-title="Hotel Villa delle Palme"
678                               data-modal-typology="Microsite"
679                               data-modal-description="&lt;p&gt;Il sito di un hotel ha un compito piuttosto semplice: mostrare il luogo, aiutare le persone a immaginarsi lì e rendere la prenotazione il più immediata possibile.&lt;/p&gt;
680&lt;p&gt;Per Hotel Villa delle Palme abbiamo progettato e sviluppato un sito in TYPO3 partendo proprio da questa idea. Camere, ambienti e servizi hanno tutto lo spazio necessario per raccontarsi attraverso le immagini, mentre la struttura dei contenuti rende la navigazione semplice e immediata, sia da desktop che da mobile.&lt;/p&gt;
681&lt;p&gt;Dietro l&#039;interfaccia, TYPO3 permette allo staff dell&#039;hotel di gestire e aggiornare i contenuti in autonomia, mentre noi ci siamo occupati di performance, responsive design e ottimizzazione SEO.&lt;/p&gt;
682&lt;p&gt;Un progetto relativamente compatto in cui design, contenuti e tecnologia lavorano nella stessa direzione: &lt;strong&gt;trasformare una prima visita in un soggiorno.&lt;/strong&gt;&lt;/p&gt;"
683                               data-modal-year="2023"
684                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/hotel-villa-delle-palme.jpg"
685                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/hotel-villa-delle-palme.jpg,/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/vdp-1.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/vdp-2.jpeg"
686                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/hotel-vdp-logo.png"
687                               data-modal-link="https://www.hotelvilladellepalme.it/"
688                               data-modal-tags="Responsive Design, TYPO3 
688CMS, Web Design">
689
690                            
691                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
692                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
693                                        
694                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/hotel-vdp-logo.png" alt="Hotel Villa delle Palme" class="max-w-[60%] max-h-[60%] object-contain">
695                                            
696                                    </div>
697                                    <div class="px-8 pb-16">
698                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">Il sito di un hotel ha un compito piuttosto semplice: mostrare il luogo, aiutare le persone a immaginarsi lì e rendere la prenotazione il&amp;hellip;</p>
699                                    </div>
700                                </div>
701
702                                <!-- Screenshot che scorre, rivelato in hover -->
703                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
704                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/hotel-villa-delle-palme.jpg');"></div>
705                                </div>
706                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
707
708                                <!-- Categoria: sempre visibile, accento colore sul poster -->
709                                <div class="absolute top-8 left-8 z-40">
710                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Microsite</span>
711                                </div>
712
713                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
714                                <div class="absolute bottom-8 left-8 right-8 z-40">
715                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">Hotel Villa delle Palme</h3>
716                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
717                                        
718                                        
719                                    </div>
720                                </div>
721                            </a>
722                        
723                    
724                        
725                            
726                            
727                            
728                            
729                            
730                            
731                            
732                            
733                            
734                            
735                            
736                            
737                                
738                            
739                            
740
741                            <a href="javascript:void(0)"
742                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
743                               data-modal-title="FORGENIUS"
744                               data-modal-typology="Institutional website"
745                               data-modal-description="&lt;h2&gt;&lt;span&gt;FORGENIUS&lt;/span&gt;&lt;/h2&gt;
746&lt;p&gt;FORGENIUS è un progetto europeo Horizon 2020 che studia la diversità genetica delle foreste europee e la loro capacità di adattarsi ai cambiamenti climatici, mettendo insieme competenze che vanno dalla genomica al telerilevamento, dall&#039;ecologia alla modellistica.&lt;/p&gt;
747&lt;p&gt;NewtVision partecipa al progetto come partner tecnologico. Il nostro lavoro si è concentrato sullo sviluppo della nuova applicazione web di &lt;strong&gt;EUFGIS — European Information System on Forest Genetic Resources&lt;/strong&gt;, trasformando una grande quantità di dati scientifici in strumenti che ricercatori, forest manager e responsabili della conservazione possono esplorare e utilizzare.&lt;/p&gt;
748&lt;p&gt;La piattaforma integra informazioni sulle Unità di Conservazione Genetica europee con dati climatici, ambientali, geografici, genetici e fenotipici prodotti e raccolti dal progetto. Mappe interattive, sistemi di ricerca e interrogazione dei dati permettono di passare dalla scala europea fino alla singola unità di conservazione e alle popolazioni forestali che contiene.&lt;/p&gt;
749&lt;p&gt;Un progetto in cui sviluppo web, database, GIS e integrazione dei dati diventano strumenti per comprendere meglio le foreste europee e contribuire alla loro conservazione.&lt;/p&gt;"
750                               data-modal-year="2022"
751                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/forgenius-matrix.jpg"
752                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/forgenius-matrix.jpg"
753                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/300__horizontal_logo_green_100x37_Px.png"
754                               data-modal-link="https://www.forgenius.eu/"
755                               data-modal-tags="Responsive Design, News, TYPO3">
756
757                            
758                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
759                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
760                                        
761                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/logos/300__horizontal_logo_green_100x37_Px.png" alt="FORGENIUS" class="max-w-[60%] max-h-[60%] object-contain">
762                                            
763                                    </div>
764                                    <div class="px-8 pb-16">
765                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">FORGENIUS
766FORGENIUS è un progetto europeo Horizon 2020 che studia la diversità genetica delle foreste europee e la loro capacità di&amp;hellip;</p>
767                                    </div>
768                                </div>
769
770                                <!-- Screenshot che scorre, rivelato in hover -->
771                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
772                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/forgenius-matrix.jpg');"></div>
773                                </div>
774                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
775
776                                <!-- Categoria: sempre visibile, accento colore sul poster -->
777                                <div class="absolute top-8 left-8 z-40">
778                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Institutional website</span>
779                                </div>
780
781                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
782                                <div class="absolute bottom-8 left-8 right-8 z-40">
783                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">FORGENIUS</h3>
784                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
785                                        
786                                            <div class="flex flex-wrap gap-2 mb-3">
787                                                <span class="border border-white/20 bg-white/5 backdrop-blur-sm px-3 py-1.5 rounded text-xs font-mono text-white uppercase tracking-widest"> FORest GENetic Resources Information and Services for End-USers</span>
788                                            </div>
789                                        
790                                        
791                                    </div>
792                                </div>
793                            </a>
794                        
795                    
796                        
797                            
798                            
799                            
800                            
801                            
802                            
803                            
804                            
805                            
806                            
807                            
808                            
809                                
810                            
811                                
812                            
813                                
814                            
815                            
816
817                            <a href="javascript:void(0)"
818                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
819                               data-modal-title="AgriTech Challenge"
820                               data-modal-typology="Institutional website"
821                               data-modal-description="&lt;p&gt;AgriTech Challenge è la piattaforma digitale che abbiamo sviluppato per &lt;strong&gt;Accelerate for Impact Platform (A4IP)&lt;/strong&gt;, l&#039;iniziativa dell&#039;Alliance of Bioversity International and CIAT che mette in relazione ricerca scientifica, innovazione e imprenditorialità per contribuire allo sviluppo di sistemi agroalimentari più sostenibili e resilienti.&lt;/p&gt;
822&lt;p&gt;La piattaforma raccoglie progetti e innovation challenge realizzati in paesi e contesti diversi, ciascuno con contenuti, programmi, partner, call e risorse dedicate. La sfida è stata costruire una struttura capace di dare un&#039;identità a ogni iniziativa mantenendo allo stesso tempo una navigazione e una gestione dei contenuti coerenti.&lt;/p&gt;
823&lt;p&gt;Abbiamo progettato e sviluppato il portale in &lt;strong&gt;TYPO3&lt;/strong&gt;, lavorando sull&#039;architettura dei contenuti, sull&#039;esperienza utente e sugli strumenti editoriali necessari per permettere al team A4IP di gestire e far crescere autonomamente la piattaforma.&lt;/p&gt;
824&lt;p&gt;Un progetto nato per evolvere insieme alle attività di A4IP: nuovi paesi, nuovi programmi e nuove idee trovano spazio all&#039;interno della stessa struttura.&lt;/p&gt;"
825                               data-modal-year="2022"
826                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/agritech/agricoltura-iot-con-sfondo-di-risaie.jpg"
827                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/agritech/agricoltura-iot-con-sfondo-di-risaie.jpg,/fileadmin/user_upload/NewtVision/Portfolio/agritech.jpg,/fileadmin/user_upload/NewtVision/Portfolio/agritech-challenge.jpeg"
828                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/logo-a4ip.png"
829                               data-modal-link=""
830                               data-modal-tags="Mask, Responsive Design, TYPO3 
830CMS, Back Office">
831
832                            
833                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
834                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
835                                        
836                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/logos/logo-a4ip.png" alt="AgriTech Challenge" class="max-w-[60%] max-h-[60%] object-contain">
837                                            
838                                    </div>
839                                    <div class="px-8 pb-16">
840                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">AgriTech Challenge è la piattaforma digitale che abbiamo sviluppato per Accelerate for Impact Platform (A4IP), l&#039;iniziativa dell&#039;Alliance of&amp;hellip;</p>
841                                    </div>
842                                </div>
843
844                                <!-- Screenshot che scorre, rivelato in hover -->
845                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
846                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/agritech/agricoltura-iot-con-sfondo-di-risaie.jpg');"></div>
847                                </div>
848                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
849
850                                <!-- Categoria: sempre visibile, accento colore sul poster -->
851                                <div class="absolute top-8 left-8 z-40">
852                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Institutional website</span>
853                                </div>
854
855                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
856                                <div class="absolute bottom-8 left-8 right-8 z-40">
857                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">AgriTech Challenge</h3>
858                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
859                                        
860                                        
861                                    </div>
862                                </div>
863                            </a>
864                        
865                    
866                        
867                            
868                            
869                            
870                            
871                            
872                            
873                            
874                            
875                            
876                            
877                            
878                            
879                                
880                            
881                            
882
883                            <a href="javascript:void(0)"
884                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
885                               data-modal-title="Inlingua School Civitavecchia"
886                               data-modal-typology="Web Application"
887                               data-modal-description="&lt;p&gt;Per &lt;strong&gt;inlingua School Civitavecchia&lt;/strong&gt; abbiamo progettato e sviluppato un ecosistema digitale che integra il sito web della scuola con strumenti dedicati alla gestione di studenti, corsi ed esami.&lt;/p&gt;
888&lt;p&gt;Il &lt;strong&gt;sito istituzionale&lt;/strong&gt; presenta la scuola, l’offerta formativa, le certificazioni e i servizi disponibili, rappresentando il principale punto di accesso online per studenti e famiglie.&lt;/p&gt;
889&lt;p&gt;A questo abbiamo affiancato una &lt;strong&gt;piattaforma dedicata agli studenti&lt;/strong&gt;, attraverso la quale è possibile iscriversi a corsi ed esami e accedere ai servizi collegati alle diverse attività formative. La stessa applicazione mette a disposizione dello staff un’&lt;strong&gt;area amministrativa&lt;/strong&gt; per organizzare corsi, sessioni d’esame, iscrizioni e partecipanti, centralizzando attività che in precedenza richiedevano strumenti e procedure separate.&lt;/p&gt;
890&lt;p&gt;La piattaforma supporta inoltre la gestione della comunicazione con i gruppi di corsisti, permettendo allo staff di inviare informazioni e materiali didattici attraverso i canali utilizzati dagli studenti.&lt;/p&gt;
891&lt;p&gt;Completa il sistema un &lt;strong&gt;portale dedicato agli esami Cambridge&lt;/strong&gt;, collegato alla piattaforma gestionale. Le sessioni create dallo staff vengono sincronizzate con il portale e pubblicate nel calendario degli esami, mantenendo allineate le informazioni tra gestione interna e comunicazione pubblica.&lt;/p&gt;
892&lt;p&gt;Il risultato è un’infrastruttura sviluppata intorno ai processi reali della scuola: dal primo contatto sul sito all’iscrizione, dalla gestione dei corsi all’organizzazione e pubblicazione delle sessioni d’esame. &lt;strong&gt;Sito, applicazioni e dati lavorano insieme come parti di un unico sistema&lt;/strong&gt;, riducendo le attività manuali e semplificando il lavoro quotidiano dello staff.&lt;/p&gt;"
893                               data-modal-year="2022"
894                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/inlingua/inlingua.jpeg"
895                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/inlingua/inlingua.jpeg"
896                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/inlingua/Inlingua-logo.png"
897                               data-modal-link="https://www.inlinguaschoolcivitavecchia.net/"
898                               data-modal-tags="TYPO3, Web Portal, Data Integration, Web Design, Web Application, Student Portal, Back Office, Course Management, Exam Management, API Integration, Web Development">
899
900                            
901                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
902                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
903                                        
904                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/inlingua/Inlingua-logo.png" alt="Inlingua School Civitavecchia" class="max-w-[60%] max-h-[60%] object-contain">
905                                            
906                                    </div>
907                                    <div class="px-8 pb-16">
908                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">Per inlingua School Civitavecchia abbiamo progettato e sviluppato un ecosistema digitale che integra il sito web della scuola con strumenti&amp;hellip;</p>
909                                    </div>
910                                </div>
911
912                                <!-- Screenshot che scorre, rivelato in hover -->
913                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
914                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/inlingua/inlingua.jpeg');"></div>
915                                </div>
916                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
917
918                                <!-- Categoria: sempre visibile, accento colore sul poster -->
919                                <div class="absolute top-8 left-8 z-40">
920                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Web Application</span>
921                                </div>
922
923                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
924                                <div class="absolute bottom-8 left-8 right-8 z-40">
925                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">Inlingua School Civitavecchia</h3>
926                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
927                                        
928                                            <div class="flex flex-wrap gap-2 mb-3">
929                                                <span class="border border-white/20 bg-white/5 backdrop-blur-sm px-3 py-1.5 rounded text-xs font-mono text-white uppercase tracking-widest">Un ecosistema digitale per gestire corsi, studenti ed esami linguistici</span>
930                                            </div>
931                                        
932                                        
933                                    </div>
934                                </div>
935                            </a>
936                        
937                    
938                        
939                            
940                            
941                            
942                            
943                            
944                            
945                            
946                            
947                            
948                            
949                            
950                            
951                                
952                            
953                                
954                            
955                                
956                            
957                            
958
959                            <a href="javascript:void(0)"
960                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
961                               data-modal-title="EVOLTREE"
962                               data-modal-typology="Institutional website"
963                               data-modal-description="&lt;p&gt;Per il progetto EvolTree abbiamo progettato e sviluppato la piattaforma web ufficiale a supporto di un&#039;iniziativa europea dedicata allo studio dell&#039;evoluzione, dell&#039;adattamento e della conservazione delle specie forestali.&lt;/p&gt;
964&lt;p&gt;La piattaforma, realizzata con &lt;strong&gt;TYPO3 CMS&lt;/strong&gt;, offre un&#039;infrastruttura digitale flessibile e scalabile per la gestione di contenuti scientifici, pubblicazioni, eventi, aggiornamenti di progetto e informazioni sui partner. Abbiamo progettato un&#039;architettura dell&#039;informazione capace di rendere facilmente accessibili risultati di ricerca complessi attraverso un&#039;esperienza di navigazione chiara e intuitiva.&lt;/p&gt;
965&lt;p&gt;Particolare attenzione è stata dedicata alle prestazioni, all&#039;accessibilità, alla gestione di contenuti multilingua e al design responsive, garantendo una fruizione ottimale da qualsiasi dispositivo e per un pubblico composto da ricercatori, stakeholder e cittadini.&lt;/p&gt;
966&lt;p&gt;Il risultato è una piattaforma moderna e affidabile che rafforza la presenza digitale di EvolTree, facilita la diffusione dei risultati scientifici e supporta la collaborazione all&#039;interno della comunità europea della ricerca forestale.&lt;/p&gt;"
967                               data-modal-year="2022"
968                               data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-first.jpg"
969                               data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-first.jpg,/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-1.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-2.jpeg"
970                               data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-logo.jpeg"
971                               data-modal-link="https://www.evoltree.eu/"
972                               data-modal-tags="Mask, Responsive Design, News, TYPO3 
972CMS">
973
974                            
975                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
976                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
977                                        
978                                                <img src="/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-logo.jpeg" alt="EVOLTREE" class="max-w-[60%] max-h-[60%] object-contain">
979                                            
980                                    </div>
981                                    <div class="px-8 pb-16">
982                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">Per il progetto EvolTree abbiamo progettato e sviluppato la piattaforma web ufficiale a supporto di un&#039;iniziativa europea dedicata allo&amp;hellip;</p>
983                                    </div>
984                                </div>
985
986                                <!-- Screenshot che scorre, rivelato in hover -->
987                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
988                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-first.jpg');"></div>
989                                </div>
990                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
991
992                                <!-- Categoria: sempre visibile, accento colore sul poster -->
993                                <div class="absolute top-8 left-8 z-40">
994                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Institutional website</span>
995                                </div>
996
997                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
998                                <div class="absolute bottom-8 left-8 right-8 z-40">
999                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">EVOLTREE</h3>
1000                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
1001                                        
1002                                        
1003                                    </div>
1004                                </div>
1005                            </a>
1006                        
1007                    
1008                        
1009                            
1010                            
1011                            
1012                            
1013                            
1014                            
1015                            
1016                            
1017                            
1018                            
1019                            
1020                            
1021                                
1022                            
1023                                
1024                            
1025                            
1026
1027                            <a href="javascript:void(0)"
1028                                         class="trigger-modal story-card break-inside-avoid group relative block w-full aspect-square [&:nth-child(6n+1)]:aspect-[9/16] [&:nth-child(6n+3)]:aspect-[4/5] [&:nth-child(6n+5)]:aspect-[9/16] [&:nth-child(6n)]:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-md hover:shadow-2xl transition-shadow duration-500"
1029                               data-modal-title="Optforest"
1030                               data-modal-typology="Microsite"
1031                               data-modal-description="&lt;p&gt;OptFORESTS è un progetto europeo Horizon Europe dedicato alla diversità genetica delle foreste e alla ricerca di nuove strategie per renderle più resilienti ai cambiamenti climatici.&lt;/p&gt;
1032&lt;p&gt;Per il progetto abbiamo progettato e sviluppato il portale web, costruend
1032o in TYPO3 una piattaforma capace di raccogliere e organizzare attività, Work Packages, news, pubblicazioni, deliverable, risorse e strumenti prodotti dai partner durante i cinque anni del progetto.&lt;/p&gt;
1033&lt;p&gt;Una parte del lavoro è dedicata anche ai dati. Abbiamo sviluppato una &lt;strong&gt;mappa interattiva&lt;/strong&gt; che permette di esplorare i siti coinvolti nelle attività di ricerca di OptFORESTS: provenienze, trial e siti sperimentali distribuiti in Europa e oltre.&lt;/p&gt;
1034&lt;p&gt;I dati provenienti da diversi Work Packages vengono elaborati e rappresentati attraverso livelli geografici distinti, filtri per specie, colori e simboli che identificano attività e tipologie di sito. Ogni punto può essere interrogato per accedere alle informazioni disponibili e la mappa può essere esportata per essere utilizzata anche in documenti e presentazioni.&lt;/p&gt;
1035&lt;p&gt;Un progetto in cui comunicazione scientifica, TYPO3, dati e GIS convivono nella stessa piattaforma, trasformando una parte dei dati prodotti dalla ricerca in qualcosa che può essere esplorato direttamente su una mappa.&lt;/p&gt;"
1036                               data-modal-year="2022"
1037                               data-modal-image="/fileadmin/Templates/NewtVision/portfolio/optforest/optforest.jpeg"
1038                               data-modal-images="/fileadmin/Templates/NewtVision/portfolio/optforest/optforest.jpeg,/fileadmin/Templates/NewtVision/portfolio/optforest/optforest-2.jpeg"
1039                               data-modal-logo="/fileadmin/Templates/NewtVision/portfolio/optforest/logo.png"
1040                               data-modal-link="https://www.optforests.eu/"
1041                               data-modal-tags="Leaflet, TYPO3, Data Integration, Scientific Data">
1042
1043                            
1044                                <div class="absolute inset-0 z-20 bg-gradient-to-br from-white via-white to-stonebg flex flex-col transition-opacity duration-700 group-hover:opacity-0">
1045                                    <div class="flex-1 flex items-center justify-center p-10 pb-4">
1046                                        
1047                                                <img src="/fileadmin/Templates/NewtVision/portfolio/optforest/logo.png" alt="Optforest" class="max-w-[60%] max-h-[60%] object-contain">
1048                                            
1049                                    </div>
1050                                    <div class="px-8 pb-16">
1051                                        <p class="text-ink/50 text-xs leading-relaxed line-clamp-4">OptFORESTS è un progetto europeo Horizon Europe dedicato alla diversità genetica delle foreste e alla ricerca di nuove strategie per&amp;hellip;</p>
1052                                    </div>
1053                                </div>
1054
1055                                <!-- Screenshot che scorre, rivelato in hover -->
1056                                <div class="absolute inset-0 z-10 bg-ink overflow-hidden">
1057                                    <div class="w-full h-[250%] bg-cover bg-top transform translate-y-0 group-hover:-translate-y-[40%] transition-transform duration-[4000ms] ease-linear" style="background-image: url('/fileadmin/Templates/NewtVision/portfolio/optforest/optforest.jpeg');"></div>
1058                                </div>
1059                                <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent opacity-0 z-30 transition-opacity duration-500 group-hover:opacity-100"></div>
1060
1061                                <!-- Categoria: sempre visibile, accento colore sul poster -->
1062                                <div class="absolute top-8 left-8 z-40">
1063                                    <span class="inline-block bg-newtgreen text-ink text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-widest">Microsite</span>
1064                                </div>
1065
1066                                <!-- Nome: sempre visibile, pi&ugrave; piccolo di default e in evidenza in hover -->
1067                                <div class="absolute bottom-8 left-8 right-8 z-40">
1068                                    <h3 class="text-lg group-hover:text-4xl font-bold text-ink group-hover:text-white leading-tight font-display transition-all duration-500">Optforest</h3>
1069                                    <div class="mt-0 max-h-0 opacity-0 group-hover:mt-4 group-hover:max-h-32 group-hover:opacity-100 transition-all duration-500 delay-100 overflow-hidden">
1070                                        
1071                                        
1072                                    </div>
1073                                </div>
1074                            </a>
1075                        
1076                    
1077                </div>
1078
1079              
1080
1081                <div class="mt-40 pt-24 pb-20 relative z-10 border-t border-borderline" id="ar
1081chive-section">
1082                    
1083                    <div class="flex flex-col md:flex-row justify-between items-baseline mb-12 gap-4">
1084                        <h2 class="text-4xl md:text-5xl font-black text-ink tracking-tight">Archive.</h2>
1085                        <p class="text-gray-500 font-mono text-xs uppercase tracking-widest max-w-sm md:text-right leading-relaxed">
1086                            // Log storico dei sistemi rilasciati dal 2011 a oggi.
1087                        </p>
1088                    </div>
1089
1090                    
1091                    
1092                    <div class="flex flex-wrap gap-3 mb-8" id="filter-console">
1093                        <button class="filter-btn active px-4 py-2 rounded-full text-[10px] font-mono uppercase tracking-widest bg-ink text-white border border-ink transition-colors" data-filter="all">Tutti</button>
1094                        
1095                            <button class="filter-btn px-4 py-2 rounded-full text-[10px] font-mono uppercase tracking-widest bg-surface text-gray-500 border border-borderline hover:border-ink hover:text-ink transition-colors" data-filter="18">Onepage</button>
1096                        
1097                            <button class="filter-btn px-4 py-2 rounded-full text-[10px] font-mono uppercase tracking-widest bg-surface text-gray-500 border border-borderline hover:border-ink hover:text-ink transition-colors" data-filter="8">Blog</button>
1098                        
1099                            <button class="filter-btn px-4 py-2 rounded-full text-[10px] font-mono uppercase tracking-widest bg-surface text-gray-500 border border-borderline hover:border-ink hover:text-ink transition-colors" data-filter="7">Institutional website</button>
1100                        
1101                            <button class="filter-btn px-4 py-2 rounded-full text-[10px] font-mono uppercase tracking-widest bg-surface text-gray-500 border border-borderline hover:border-ink hover:text-ink transition-colors" data-filter="3">Web Application</button>
1102                        
1103                            <button class="filter-btn px-4 py-2 rounded-full text-[10px] font-mono uppercase tracking-widest bg-surface text-gray-500 border border-borderline hover:border-ink hover:text-ink transition-colors" data-filter="4">Microsite</button>
1104                        
1105                            <button class="filter-btn px-4 py-2 rounded-full text-[10px] font-mono uppercase tracking-widest bg-surface text-gray-500 border border-borderline hover:border-ink hover:text-ink transition-colors" data-filter="5">Scientific Portal</button>
1106                        
1107                    </div>
1108
1109                    
1110                    <div class="flex flex-col border-t border-borderline" id="archive-list">
1111                        
1112                            
1113                                
1114                                
1115                                
1116                                
1117                                
1118                                
1119                                
1120                                
1121                                
1122                                    
1123                                
1124                                    
1125                                
1126                                
1127
1128                                <div class="archive-row block overflow-hidden" data-category="4" data-year="2025" data-date="">
1129                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1130                                         role="button" tabindex="0"
1131                                         data-modal-flip="false"
1132                                         data-modal-title="Bacco Tour"
1133                                         data-modal-typology="Microsite"
1134                                         data-modal-description="&lt;p&gt;Per Bacco Tours abbiamo progettato e sviluppato un sito dedicato alla scoperta di Roma, Civitavecchia e del territorio attraverso tour, esperienze, food &amp;amp; wine e servizi pensati soprattutto per chi vuole conoscere questi luoghi accompagnato da guide locali.&lt;/p&gt;
1135&lt;p&gt;Il cuore del progetto è il catalogo delle esperienze: ogni tour ha una propria pagina con itinerario, informazioni, servizi inclusi e tutto ciò che serve per scegliere e organizzare l&#039;attività. Abbiamo strutturato i contenuti per rendere semplice passare dalla scoperta di un&#039;esperienza alla prenotazione, anche da smartphone e nelle diverse lingue del sito.&lt;/p&gt;
1136&lt;p&gt;Per la gestione delle prenotazioni abbiamo integrato &lt;strong&gt;FareHarbor&lt;/strong&gt;
1136 direttamente nel percorso di navigazione, collegando il racconto dei tour al sistema utilizzato da Bacco Tours per disponibilità e booking.&lt;/p&gt;
1137&lt;p&gt;Un progetto in cui immagini e contenuti fanno venire voglia di partire, mentre dietro le quinte integrazioni e strumenti di prenotazione si occupano di tutto il resto.&lt;/p&gt;"
1138                                         data-modal-year="2025"
1139                                         data-modal-image="/fileadmin/Templates/NewtVision/portfolio/bacco/bacco.jpg"
1140                                         data-modal-images="/fileadmin/Templates/NewtVision/portfolio/bacco/bacco.jpg,/fileadmin/Templates/NewtVision/portfolio/bacco/bacco-1.png"
1141                                         data-modal-logo="/fileadmin/Templates/NewtVision/portfolio/bacco/bacco-logo.png"
1142                                         data-modal-link="https://www.baccotours.com/"
1143                                         data-modal-tags="News, TYPO3 CMS, API Integration, Multilanguage, Blog">
1144                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1145                                            <span class="font-mono text-gray-400 text-sm shrink-0">2025</span>
1146                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Bacco Tour</h3>
1147                                        </div>
1148                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1149                                            
1150                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="4">Microsite</button>
1151                                            
1152                                        </div>
1153                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1154                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1155                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1156                                            </div>
1157                                        </div>
1158                                    </div>
1159                                </div>
1160                            
1161                        
1162                            
1163                                
1164                                
1165                                
1166                                
1167                                
1168                                
1169                                
1170                                
1171                                
1172                                    
1173                                
1174                                
1175
1176                                <div class="archive-row block overflow-hidden" data-category="8" data-year="2021" data-date="2021-01-01">
1177                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1178                                         role="button" tabindex="0"
1179                                         data-modal-flip="false"
1180                                         data-modal-title="Noise from Amerika (nfA)"
1181                                         data-modal-typology="Blog"
1182                                         data-modal-description="&lt;p&gt;NoiseFromAmerika è un blog di analisi e discussione che raccoglie anni di articoli, approfondimenti e conversazioni costruite nel tempo anche attraverso i commenti dei lettori.&lt;/p&gt;
1183&lt;p&gt;
1183Per il nuovo sito abbiamo ridisegnato l&#039;interfaccia e migrato l&#039;intero progetto su &lt;strong&gt;TYPO3&lt;/strong&gt;, ricostruendo un archivio editoriale proveniente dalle precedenti installazioni WordPress e Drupal.&lt;/p&gt;
1184&lt;p&gt;Abbiamo recuperato e riorganizzato articoli, autori, contenuti e commenti, preservando le relazioni tra i dati e riportando nel nuovo sistema anche lo storico del progetto. Un lavoro di migrazione che ci ha permesso di cambiare completamente tecnologia e struttura senza perdere ciò che negli anni aveva costruito l&#039;identità e la memoria del blog.&lt;/p&gt;
1185&lt;p&gt;Nuova grafica, nuova piattaforma, stesso archivio: tutto quello che era stato pubblicato e discusso negli anni è rimasto al suo posto.&lt;/p&gt;"
1186                                         data-modal-year="2021"
1187                                         data-modal-image="/fileadmin/Templates/NewtVision/portfolio/home-nfa.png"
1188                                         data-modal-images="/fileadmin/Templates/NewtVision/portfolio/home-nfa.png"
1189                                         data-modal-logo="/fileadmin/Templates/NewtVision/loghi/nfa.png"
1190                                         data-modal-link="https://www.noisefromamerika.org/"
1191                                         data-modal-tags="News, TYPO3 
1191CMS, Migration, Comments">
1192                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1193                                            <span class="font-mono text-gray-400 text-sm shrink-0">2021</span>
1194                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Noise from Amerika (nfA)</h3>
1195                                        </div>
1196                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1197                                            
1198                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="8">Blog</button>
1199                                            
1200                                        </div>
1201                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1202                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1203                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1204                                            </div>
1205                                        </div>
1206                                    </div>
1207                                </div>
1208                            
1209                        
1210                            
1211                                
1212                                
1213                                
1214                                
1215                                
1216                                
1217                                
1218                                
1219                                
1220                                    
1221                                
1222                                    
1223                                
1224                                    
1225                                
1226                                
1227
1228                                <div class="archive-row block overflow-hidden" data-category="7" data-year="2011" data-date="2011-01-03">
1229                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1230                                         role="button" tabindex="0"
1231                                         data-modal-flip="false"
1232                                         data-modal-title="AssoCTU"
1233                                         data-modal-typology="Institutional website"
1234                                         data-modal-description="&lt;p&gt;Per AssoCTU, Associazione Nazionale dei Consulenti Tecnici del Tribunale in materia bancaria e finanziaria, abbiamo sviluppato una piattaforma che va ben oltre il sito istituzionale.&lt;/p&gt;
1235&lt;p&gt;Il portale gestisce direttamente la registrazione degli associati e il relativo albo professionale, con dati archiviati in MongoDB e visualizzati anche attraverso una mappa interattiva. Abbiamo inoltre sviluppato il sistema di gestione e registrazione agli eventi e le aree dedicate a sentenze, giurisprudenza e pubblicazioni, con contenuti e download riservati agli associati.&lt;/p&gt;
1236&lt;p&gt;Alla piattaforma principale si affianca un portale e-learning dedicato alla formazione: corsi, video, materiali e questionari possono essere gestiti e seguiti online dagli utenti registrati.&lt;/p&gt;
1237&lt;p&gt;Un progetto in cui sito web, database, area riservata, formazione e gestione degli associati lavorano insieme, trasformando il portale in uno strumento utilizzato quotidianamente dall&#039;associazione e dai suoi membri.&lt;/p&gt;"
1238                                         data-modal-year="2011"
1239                                         data-modal-image="/fileadmin/Templates/NewtVision/portfolio/assoctu/corte-sentenze.jpg"
1240                                         data-modal-images="/fileadmin/Templates/NewtVision/portfolio/assoctu/corte-sentenze.jpg,/fileadmin/Templates/NewtVision/portfolio/assoctu/assoctu-home.jpeg,/fileadmin/Templates/NewtVision/portfolio/assoctu/albo-1.png"
1241                                         data-modal-logo="/fileadmin/Templates/NewtVision/loghi/assoctu.png"
1242                                         data-modal-link="https://www.assoctu.it/"
1243                                         data-modal-tags="Responsive Design, Google Maps, Mongo DB, Payments, Restricted Area, TYPO3 
1243CMS, Registration, API Integration, E-learning, Publications">
1244                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1245                                            <span class="font-mono text-gray-400 text-sm shrink-0">2011</span>
1246                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">AssoCTU</h3>
1247                                        </div>
1248                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1249                                            
1250                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="7">Institutional website</button>
1251                                            
1252                                        </div>
1253                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1254                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1255                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1256                                            </div>
1257                                        </div>
1258                                    </div>
1259                                </div>
1260                            
1261                        
1262                            
1263                                
1264                                
1265                                
1266                                
1267                                
1268                                
1269                                
1270                                
1271                                
1272                                    
1273                                
1274                                    
1275                                
1276                                    
1277                                
1278                                    
1279                                
1280                                
1281
1282                                <div class="archive-row block overflow-hidden" data-category="5" data-year="2026" data-date="2026-09-21">
1283                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1284                                         role="button" tabindex="0"
1285                                         data-modal-flip="false"
1286                                         data-modal-title="COLiBRI"
1287                                         data-modal-typology="Scientific Portal"
1288                                         data-modal-description="&lt;p&gt;NewtVision ha progettato e sviluppato il sito web del progetto COLiBRI, creando una piattaforma digitale moderna e flessibile a supporto della comunicazione, della condivisione delle conoscenze e del coinvolgimento degli stakeholder nel settore europeo del miglioramento genetico delle colture.&lt;/p&gt;
1289&lt;p&gt;Sviluppata con TYPO3 CMS, la piattaforma integra un’interfaccia responsive e accessibile, componenti editoriali personalizzati, gestione di partner e stakeholder, strumenti interattivi e aree dedicate alle risorse.&lt;/p&gt;
1290&lt;p&gt;Il risultato è una soluzione scalabile che combina design, gestione avanzata dei contenuti e sviluppo custom, garantendo al team COLiBRI autonomia nella gestione e nell’evoluzione del sito.&lt;/p&gt;"
1291                                         data-modal-year="2026"
1292                                         data-modal-image="/fileadmin/Templates/NewtVision/portfolio/colibri
1292/colibri-hero-img.jpeg"
1293                                         data-modal-images="/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-hero-img.jpeg,/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-home.jpeg,/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-stakeholders.jpeg,/fileadmin/Templates/NewtVision/portfolio/colibri/colibri-partners.jpeg"
1294                                         data-modal-logo="/fileadmin/Templates/NewtVision/portfolio/colibri/logo-colibri-pos.svg"
1295                                         data-modal-link="https://colibri-plantbreeding.eu/"
1296                                         data-modal-tags="Responsive Design, Leaflet, News, TYPO3 CMS, Registration, TYPO3 Custom Ext">
1297                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1298                                            <span class="font-mono text-gray-400 text-sm shrink-0">2026</span>
1299                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">COLiBRI</h3>
1300                                        </div>
1301                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1302                                            
1303                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="5">Scientific Portal</button>
1304                                            
1305                                        </div>
1306                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1307                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1308                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1309                                            </div>
1310                                        </div>
1311                                    </div>
1312                                </div>
1313                            
1314                        
1315                            
1316                                
1317                                
1318                                
1319                                
1320                                
1321                                
1322                                
1323                                
1324                                
1325                                    
1326                                
1327                                    
1328                                
1329                                
1330
1331                                <div class="archive-row block overflow-hidden" data-category="3" data-year="2025" data-date="2025-11-01">
1332                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1333                                         role="button" tabindex="0"
1334                                         data-modal-flip="false"
1335                                         data-modal-title="EUFGIS"
1336                                         data-modal-typology="Web Application"
1337                                         data-modal-description="&lt;p&gt;Per &lt;strong&gt;EUFGIS&lt;/strong&gt;, il sistema informativo europeo dedicato alle risorse genetiche forestali, NewtVision ha progettato e sviluppato una nuova infrastruttura digitale capace di integrare gestione dei dati, strumenti geospaziali e collaborazione scientifica in un’unica piattaforma.&lt;/p&gt;
1338&lt;p&gt;Il lavoro, realizzato nell’ambito del progetto europeo FORGENIUS, ha coinvolto NewtVision come &lt;strong&gt;partner tecnologico&lt;/strong&gt;
1338, con la responsabilità dello sviluppo e dell’evoluzione tecnica della piattaforma.&lt;/p&gt;
1339&lt;p&gt;Abbiamo sviluppato un nuovo &lt;strong&gt;portale pubblico&lt;/strong&gt; per rendere accessibili e navigabili dati sulle Genetic Conservation Units, specie forestali e informazioni ambientali, affiancandolo a una &lt;strong&gt;intranet&lt;/strong&gt; dedicata ai National Coordinators. L’area riservata mette a disposizione strumenti per inserire, aggiornare e validare i dati, gestire informazioni geografiche, lavorare con shapefile ed effettuare analisi ambientali direttamente sulla piattaforma.&lt;/p&gt;
1340&lt;p&gt;Parallelamente abbiamo progettato gli ambienti e i flussi di gestione dei &lt;strong&gt;dati prodotti dai Work Package di FORGENIUS&lt;/strong&gt;, costruendo procedure per raccogliere, armonizzare e integrare dataset scientifici provenienti da fonti e gruppi di ricerca differenti.&lt;/p&gt;
1341&lt;p&gt;Una parte importante dello sviluppo ha riguardato l’integrazione tra &lt;strong&gt;database, dati geografici, climatici, ambientali e biologici&lt;/strong&gt;, con strumenti GIS, processi automatici di elaborazione e connessioni con fonti esterne. L’architettura combina database relazionali e tecnologie graph per mettere in relazione informazioni appartenenti a domini scientifici diversi.&lt;/p&gt;
1342&lt;p&gt;Il risultato è una piattaforma costruita non solo per pubblicare dati, ma per &lt;strong&gt;raccoglierli, organizzarli, collegarli e renderli utilizzabili&lt;/strong&gt;, trasformando informazioni scientifiche complesse in strumenti concreti per la ricerca e la conservazione delle risorse genetiche forestali.&lt;/p&gt;"
1343                                         data-modal-year="2025"
1344                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/eufgis/eufgis.jpeg"
1345                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/eufgis/eufgis.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/eufgis.jpg"
1346                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/EUFGIS_logo_2023.svg"
1347                                         data-modal-link="https://eufgis.org/"
1348                                         data-modal-tags="Leaflet, TYPO3, Web Portal, Intranet, GIS, Data Integration, Scientific Data, Environmental Data, Climate Data, Graph Database, ArangoDB, Horizon 2020">
1349                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1350                                            <span class="font-mono text-gray-400 text-sm shrink-0">2025</span>
1351                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">EUFGIS</h3>
1352                                        </div>
1353                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1354                                            
1355                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="3">Web Application</button>
1356                                            
1357                                        </div>
1358                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1359                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1360                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1361                                            </div>
1362                                        </div>
1363                                    </div>
1364                                </div>
1365                            
1366                        
1367                            
1368                                
1369                                
1370                                
1371                                
1372                                
1373                                
1374                                
1375                                
1376                                
1377                                    
1378                                
1379                                    
1380                                
1381                                    
1382                                
1383                                    
1384                                
1385                                
1386
1387                                <div class="archive-row block overflow-hidden" data-category="7" data-year="2025" data-date="2025-11-01">
1388                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1389                                         role="button" tabindex="0"
1390                                         data-modal-flip="false"
1391                                         data-modal-title="Liberi, Oltre le Illusioni"
1392                                         data-modal-typology="Institutional website"
1393                                         data-modal-description="&lt;p&gt;Per Liberi Oltre le Illusioni abbiamo progettato e sviluppato una piattaforma editoriale pe
1393nsata per supportare la diffusione di analisi, approfondimenti, podcast, eventi e iniziative dell&#039;associazione attraverso un ecosistema digitale moderno e facilmente gestibile.&lt;/p&gt;
1394&lt;p&gt;Realizzata con &lt;strong&gt;TYPO3 CMS&lt;/strong&gt;, la piattaforma è stata progettata per offrire un&#039;esperienza di navigazione fluida e un&#039;organizzazione dei contenuti chiara, valorizzando la produzione editoriale e facilitando la consultazione di articoli, rubriche, podcast e attività associative. L&#039;architettura del sito consente una gestione flessibile dei contenuti e supporta l&#039;evoluzione del progetto nel tempo.&lt;/p&gt;
1395&lt;p&gt;Abbiamo dedicato particolare attenzione alle prestazioni, all&#039;ottimizzazione SEO, all&#039;accessibilità e alla fruizione da dispositivi mobili, integrando funzionalità avanzate per la gestione editoriale, degli eventi e delle aree riservate.&lt;/p&gt;
1396&lt;p&gt;Il risultato è una piattaforma solida, scalabile e orientata ai contenuti, capace di sostenere le attività editoriali e associative di Liberi Oltre le Illusioni e di offrire agli utenti un&#039;esperienza di consultazione moderna, veloce e affidabile.&lt;/p&gt;"
1397                                         data-modal-year="2025"
1398                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/chi-siamo-3.jpg"
1399                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/chi-siamo-3.jpg,/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/liberioltre-new.jpg,/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/eventi.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/podcast.jpeg"
1400                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/LOGO_Final_Black-01.png"
1401                                         data-modal-link="https://www.liberioltreleillusioni.it/"
1402                                         data-modal-tags="Responsive Design, Leaflet, Podcast, News, Payments, Restricted Area, TYPO3 
1402CMS">
1403                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1404                                            <span class="font-mono text-gray-400 text-sm shrink-0">2025</span>
1405                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Liberi, Oltre le Illusioni</h3>
1406                                        </div>
1407                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1408                                            
1409                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="7">Institutional website</button>
1410                                            
1411                                        </div>
1412                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1413                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1414                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1415                                            </div>
1416                                        </div>
1417                                    </div>
1418                                </div>
1419                            
1420                        
1421                            
1422                                
1423                                
1424                                
1425                                
1426                                
1427                                
1428                                
1429                                
1430                                
1431                                    
1432                                
1433                                
1434
1435                                <div class="archive-row block overflow-hidden" data-category="8" data-year="2026" data-date="2026-01-01">
1436                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1437                                         role="button" tabindex="0"
1438                                         data-modal-flip="false"
1439                                         data-modal-title="Politèia"
1440                                         data-modal-typology="Blog"
1441                                         data-modal-description="&lt;p&gt;Politèia è un progetto editoriale indipendente nato per creare uno spazio di approfondimento e confronto su politica, società, cultura e trasformazioni del nostro tempo.&lt;/p&gt;
1442&lt;p&gt;NewtVision ha contribuito alla nascita del progetto e ne ha progettato e sviluppato il blog, costruendo uno spazio essenziale in cui sono soprattutto i contenuti ad avere voce. Articoli, analisi e contributi di autori diversi convivono all&#039;interno di una struttura pensata per rendere la lettura semplice e lasciare spazio alle idee.&lt;/p&gt;
1443&lt;p&gt;Un progetto più piccolo rispetto ad alcune delle piattaforme presenti nel nostro portfolio, ma particolarmente vicino a noi: perché a volte il web serve anche semplicemente a creare un posto in cui fermarsi, leggere e discutere.&lt;/p&gt;"
1444                                         data-modal-year="2026"
1445                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/politeia.jpg"
1446                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/politeia.jpg"
1447                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/politeia-bianco-esteso.svg"
1448                                         data-modal-link="https://politeia.blog/"
1449                                         data-modal-tags="Mask, Responsive Design, Podcast, News, TYPO3 
1449CMS">
1450                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1451                                            <span class="font-mono text-gray-400 text-sm shrink-0">2026</span>
1452                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Politèia</h3>
1453                                        </div>
1454                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1455                                            
1456                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="8">Blog</button>
1457                                            
1458                                        </div>
1459                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1460                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1461                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1462                                            </div>
1463                                        </div>
1464                                    </div>
1465                                </div>
1466                            
1467                        
1468                            
1469                                
1470                                
1471                                
1472                                
1473                                
1474                                
1475                                
1476                                
1477                                
1478                                    
1479                                
1480                                    
1481                                
1482                                    
1483                                
1484                                
1485
1486                                <div class="archive-row block overflow-hidden" data-category="18" data-year="2019" data-date="2019-01-01">
1487                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1488                                         role="button" tabindex="0"
1489                                         data-modal-flip="false"
1490                                         data-modal-title="Bianca Ristorante"
1491                                         data-modal-typology="Onepage"
1492                                         data-modal-description="&lt;p&gt;Per Bianca Ristorante abbiamo progettato e sviluppato un sito one-page costruito intorno a ciò che conta quando si sceglie un ristorante: il luogo, la cucina e la possibilità di prenotare facilmente.&lt;/p&gt;
1493&lt;p&gt;Il sito racconta l&#039;identità di Bianca attraverso immagini e contenuti essenziali, accompagnando l&#039;utente dalla scoperta del ristorante fino alla prenotazione del tavolo. Abbiamo integrato le API di Instagram per alimentare la gallery direttamente dai contenuti social e realizzato un menu digitale accessibile tramite QR code, pensato per essere consultato comodamente anche da smartphone.&lt;/p&gt;
1494&lt;p&gt;Un progetto compatto in cui sito, social, menu e prenotazioni convivono nella stessa esperienza digitale, lasciando alle immagini il compito di raccontare tutto il resto.&lt;/p&gt;"
1495                                         data-modal-year="2019"
1496                                         data-modal-image="/fileadmin/Templates/NewtVision/portfolio/bianca/bianca-ristorante.jpg"
1497                                         data-modal-images="/fileadmin/Templates/NewtVision/portfolio/bianca/bianca-ristorante.jpg,/fileadmin/Templates/NewtVision/portfolio/bianca/book-table-bianca_-_dimensioni_grandi.jpeg,/fileadmin/Templates/NewtVision/portfolio/bianca/bianca-menu.png"
1498                                         data-modal-logo="/fileadmin/Templates/NewtVision/portfolio/bianca/logo-bianca-ristorante-dark.png"
1499                                         data-modal-link="https://www.biancaristorante.it/"
1500                                         data-modal-tags="Responsive Design, TYPO3 
1500CMS, API Integration">
1501                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1502                                            <span class="font-mono text-gray-400 text-sm shrink-0">2019</span>
1503                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Bianca Ristorante</h3>
1504                                        </div>
1505                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1506                                            
1507                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="18">Onepage</button>
1508                                            
1509                                        </div>
1510                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1511                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1512                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1513                                            </div>
1514                                        </div>
1515                                    </div>
1516                                </div>
1517                            
1518                        
1519                            
1520                                
1521                                
1522                                
1523                                
1524                                
1525                                
1526                                
1527                                
1528                                
1529                                    
1530                                
1531                                    
1532                                
1533                                    
1534                                
1535                                    
1536                                
1537                                
1538
1539                                <div class="archive-row block overflow-hidden" data-category="5" data-year="2026" data-date="2026-03-01">
1540                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1541                                         role="button" tabindex="0"
1542                                         data-modal-flip="false"
1543                                         data-modal-title="Cacao of Excellence"
1544                                         data-modal-typology="Scientific Portal"
1545                                         data-modal-description="&lt;p&gt;Abbiamo progettato e sviluppato il sito web di Cacao of Excellence, programma internazionale dedicato alla qualità e alla diversità del cacao e alla valorizzazione dei produttori di tutto il mondo.&lt;/p&gt;
1546&lt;p&gt;Il progetto riunisce in un&#039;unica piattaforma contenuti istituzionali, news, risorse, attività di ricerca e formazione e tutte le informazioni dedicate ai Cacao of Excellence Awards. Una parte importante del lavoro ha riguardato l&#039;organizzazione e la presentazione di una grande quantità di contenuti e dati, dai produttori alle origini del cacao, fino ai risultati delle diverse edizioni degli Awards.&lt;/p&gt;
1547&lt;p&gt;Abbiamo sviluppato la piattaforma in TYPO3 e integrato un e-commerce basato su PrestaShop per la gestione e la vendita dei Chocolate Boxes. Due sistemi diversi che lavorano insieme per gestire contenuti, dati e attività di vendita all&#039;interno dello stesso progetto digitale.&lt;/p&gt;"
1548                                         data-modal-year="2026"
1549                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-of-excellence-1.jpeg"
1550                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-of-excellence-1.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/LiberiOltre/cacao-of-excellence.jpg,/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-of-excellence-2.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/cacao/cacao-shop.jpeg"
1551                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/cacao-logo.png"
1552                                         data-modal-link="https://www.cacaoofexcellence.org/"
1553                                         data-modal-tags="Responsive Design, Leaflet, News, TYPO3 
1553CMS, E-commerce, Prestashop">
1554                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1555                                            <span class="font-mono text-gray-400 text-sm shrink-0">2026</span>
1556                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Cacao of Excellence</h3>
1557                                        </div>
1558                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1559                                            
1560                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="5">Scientific Portal</button>
1561                                            
1562                                        </div>
1563                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1564                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1565                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1566                                            </div>
1567                                        </div>
1568                                    </div>
1569                                </div>
1570                            
1571                        
1572                            
1573                                
1574                                
1575                                
1576                                
1577                                
1578                                
1579                                
1580                                
1581                                
1582                                    
1583                                
1584                                
1585
1586                                <div class="archive-row block overflow-hidden" data-category="18" data-year="2024" data-date="2024-05-08">
1587                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1588                                         role="button" tabindex="0"
1589                                         data-modal-flip="false"
1590                                         data-modal-title="Jordan Mammola"
1591                                         data-modal-typology="Onepage"
1592                                         data-modal-description="&lt;p&gt;Abbiamo progettato e sviluppato il sito one-page di Jordan Mammola Tattoo, costruend
1592o un&#039;esperienza visiva capace di raccontare il lavoro dell&#039;artista e l&#039;identità del suo studio.&lt;/p&gt;
1593&lt;p&gt;Biografia, studio, tatuaggi, piercing, team e gallery convivono in un&#039;unica pagina, con una navigazione semplice e immediata e ampio spazio dedicato alle immagini e ai lavori realizzati.&lt;/p&gt;
1594&lt;p&gt;Un progetto in cui design e sviluppo frontend lavorano soprattutto per lasciare parlare immagini, persone e stile.&lt;/p&gt;"
1595                                         data-modal-year="2024"
1596                                         data-modal-image="/fileadmin/Templates/NewtVision/portfolio/mammola/mammola.jpg"
1597                                         data-modal-images="/fileadmin/Templates/NewtVision/portfolio/mammola/mammola.jpg"
1598                                         data-modal-logo="/fileadmin/Templates/NewtVision/portfolio/mammola/logo-nero.png"
1599                                         data-modal-link="https://www.jordanmammola.com/"
1600                                         data-modal-tags="Responsive Design, TYPO3 CMS">
1601                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1602                                            <span class="font-mono text-gray-400 text-sm shrink-0">2024</span>
1603                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Jordan Mammola</h3>
1604                                        </div>
1605                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1606                                            
1607                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="18">Onepage</button>
1608                                            
1609                                        </div>
1610                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1611                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1612                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1613                                            </div>
1614                                        </div>
1615                                    </div>
1616                                </div>
1617                            
1618                        
1619                            
1620                                
1621                                
1622                                
1623                                
1624                                
1625                                
1626                                
1627                                
1628                                
1629                                    
1630                                
1631                                    
1632                                
1633                                    
1634                                
1635                                
1636
1637                                <div class="archive-row block overflow-hidden" data-category="4" data-year="2023" data-date="2023-09-24">
1638                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1639                                         role="button" tabindex="0"
1640                                         data-modal-flip="false"
1641                                         data-modal-title="Hotel Villa delle Palme"
1642                                         data-modal-typology="Microsite"
1643                                         data-modal-description="&lt;p&gt;Il sito di un hotel ha un compito piuttosto semplice: mostrare il luogo, aiutare le persone a immaginarsi lì e rendere la prenotazione il più immediata possibile.&lt;/p&gt;
1644&lt;p&gt;Per Hotel Villa delle Palme abbiamo progettato e sviluppato un sito in TYPO3 partendo proprio da questa idea. Camere, ambienti e servizi hanno tutto lo spazio necessario per raccontarsi attraverso le immagini, mentre la struttura dei contenuti rende la navigazione semplice e immediata, sia da desktop che da mobile.&lt;/p&gt;
1645&lt;p&gt;Dietro l&#039;interfaccia, TYPO3 permette allo staff dell&#039;hotel di gestire e aggiornare i contenuti in autonomia, mentre noi ci siamo occupati di performance, responsive design e ottimizzazione SEO.&lt;/p&gt;
1646&lt;p&gt;Un progetto relativamente compatto in cui design, contenuti e tecnologia lavorano nella stessa direzione: &lt;strong&gt;trasformare una prima visita in un soggiorno.&lt;/strong&gt;&lt;/p&gt;"
1647                                         data-modal-year="2023"
1648                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/hotel-villa-delle-palme.jpg"
1649                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/hotel-villa-delle-palme.jpg,/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/vdp-1.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/vdp-2.jpeg"
1650                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/hote-vdp/hotel-vdp-logo.png"
1651                                         data-modal-link="https://www.hotelvilladellepalme.it/"
1652                                         data-modal-tags="Responsive Design, TYPO3 
1652CMS, Web Design">
1653                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1654                                            <span class="font-mono text-gray-400 text-sm shrink-0">2023</span>
1655                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Hotel Villa delle Palme</h3>
1656                                        </div>
1657                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1658                                            
1659                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="4">Microsite</button>
1660                                            
1661                                        </div>
1662                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1663                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1664                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1665                                            </div>
1666                                        </div>
1667                                    </div>
1668                                </div>
1669                            
1670                        
1671                            
1672                                
1673                                
1674                                
1675                                
1676                                
1677                                
1678                                
1679                                
1680                                
1681                                    
1682                                
1683                                
1684
1685                                <div class="archive-row block overflow-hidden" data-category="7" data-year="2022" data-date="2022-01-02">
1686                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1687                                         role="button" tabindex="0"
1688                                         data-modal-flip="false"
1689                                         data-modal-title="FORGENIUS"
1690                                         data-modal-typology="Institutional website"
1691                                         data-modal-description="&lt;h2&gt;&lt;span&gt;FORGENIUS&lt;/span&gt;&lt;/h2&gt;
1692&lt;p&gt;FORGENIUS è un progetto europeo Horizon 2020 che studia la diversità genetica delle foreste europee e la loro capacità di adattarsi ai cambiamenti climatici, mettendo insieme competenze che vanno dalla genomica al telerilevamento, dall&#039;ecologia alla modellistica.&lt;/p&gt;
1693&lt;p&gt;NewtVision partecipa al progetto come partner tecnologico. Il nostro lavoro si è concentrato sullo sviluppo della nuova applicazione web di &lt;strong&gt;EUFGIS — European Information System on Forest Genetic Resources&lt;/strong&gt;, trasformando una grande quantità di dati scientifici in strumenti che ricercatori, forest manager e responsabili della conservazione possono esplorare e utilizzare.&lt;/p&gt;
1694&lt;p&gt;La piattaforma integra informazioni sulle Unità di Conservazione Genetica europee con dati climatici, ambientali, geografici, genetici e fenotipici prodotti e raccolti dal progetto. Mappe interattive, sistemi di ricerca e interrogazione dei dati permettono di passare dalla scala europea fino alla singola unità di conservazione e alle popolazioni forestali che contiene.&lt;/p&gt;
1695&lt;p&gt;Un progetto in cui sviluppo web, database, GIS e integrazione dei dati diventano strumenti per comprendere meglio le foreste europee e contribuire alla loro conservazione.&lt;/p&gt;"
1696                                         data-modal-year="2022"
1697                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/forgenius-matrix.jpg"
1698                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/forgenius-matrix.jpg"
1699                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/300__horizontal_logo_green_100x37_Px.png"
1700                                         data-modal-link="https://www.forgenius.eu/"
1701                                         data-modal-tags="Responsive Design, News, TYPO3">
1702                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1703                                            <span class="font-mono text-gray-400 text-sm shrink-0">2022</span>
1704                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">FORGENIUS</h3>
1705                                        </div>
1706                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1707                                            
1708                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="7">Institutional website</button>
1709                                            
1710                                        </div>
1711                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1712                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1713                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1714                                            </div>
1715                                        </div>
1716                                    </div>
1717                                </div>
1718                            
1719                        
1720                            
1721                                
1722                                
1723                                
1724                                
1725                                
1726                                
1727                                
1728                                
1729                                
1730                                    
1731                                
1732                                    
1733                                
1734                                    
1735                                
1736                                
1737
1738                                <div class="archive-row block overflow-hidden" data-category="7" data-year="2022" data-date="2022-07-01">
1739                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1740                                         role="button" tabindex="0"
1741                                         data-modal-flip="false"
1742                                         data-modal-title="AgriTech Challenge"
1743                                         data-modal-typology="Institutional website"
1744                                         data-modal-description="&lt;p&gt;AgriTech Challenge è la piattaforma digitale che abbiamo sviluppato per &lt;strong&gt;Accelerate for Impact Platform (A4IP)&lt;/strong&gt;, l&#039;iniziativa dell&#039;Alliance of Bioversity International and CIAT che mette in relazione ricerca scientifica, innovazione e imprenditorialità per contribuire allo sviluppo di sistemi agroalimentari più sostenibili e resilienti.&lt;/p&gt;
1745&lt;p&gt;La piattaforma raccoglie progetti e innovation challenge realizzati in paesi e contesti diversi, ciascuno con contenuti, programmi, partner, call e risorse dedicate. La sfida è stata costruire una struttura capace di dare un&#039;identità a ogni iniziativa mantenendo allo stesso tempo una navigazione e una gestione dei contenuti coerenti.&lt;/p&gt;
1746&lt;p&gt;Abbiamo progettato e sviluppato il portale in &lt;strong&gt;TYPO3&lt;/strong&gt;, lavorando sull&#039;architettura dei contenuti, sull&#039;esperienza utente e sugli strumenti editoriali necessari per permettere al team A4IP di gestire e far crescere autonomamente la piattaforma.&lt;/p&gt;
1747&lt;p&gt;Un progetto nato per evolvere insieme alle attività di A4IP: nuovi paesi, nuovi programmi e nuove idee trovano spazio all&#039;interno della stessa struttura.&lt;/p&gt;"
1748                                         data-modal-year="2022"
1749                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/agritech/agricoltura-iot-con-sfondo-di-risaie.jpg"
1750                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/agritech/agricoltura-iot-con-sfondo-di-risaie.jpg,/fileadmin/user_upload/NewtVision/Portfolio/agritech.jpg,/fileadmin/user_upload/NewtVision/Portfolio/agritech-challenge.jpeg"
1751                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/logos/logo-a4ip.png"
1752                                         data-modal-link=""
1753                                         data-modal-tags="Mask, Responsive Design, TYPO3 
1753CMS, Back Office">
1754                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1755                                            <span class="font-mono text-gray-400 text-sm shrink-0">2022</span>
1756                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">AgriTech Challenge</h3>
1757                                        </div>
1758                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1759                                            
1760                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="7">Institutional website</button>
1761                                            
1762                                        </div>
1763                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1764                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1765                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1766                                            </div>
1767                                        </div>
1768                                    </div>
1769                                </div>
1770                            
1771                        
1772                            
1773                                
1774                                
1775                                
1776                                
1777                                
1778                                
1779                                
1780                                
1781                                
1782                                    
1783                                
1784                                
1785
1786                                <div class="archive-row block overflow-hidden" data-category="3" data-year="2022" data-date="">
1787                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1788                                         role="button" tabindex="0"
1789                                         data-modal-flip="false"
1790                                         data-modal-title="Inlingua School Civitavecchia"
1791                                         data-modal-typology="Web Application"
1792                                         data-modal-description="&lt;p&gt;Per &lt;strong&gt;inlingua School Civitavecchia&lt;/strong&gt; abbiamo progettato e sviluppato un ecosistema digitale che integra il sito web della scuola con strumenti dedicati alla gestione di studenti, corsi ed esami.&lt;/p&gt;
1793&lt;p&gt;Il &lt;strong&gt;sito istituzionale&lt;/strong&gt; presenta la scuola, l’offerta formativa, le certificazioni e i servizi disponibili, rappresentando il principale punto di accesso online per studenti e famiglie.&lt;/p&gt;
1794&lt;p&gt;A questo abbiamo affiancato una &lt;strong&gt;piattaforma dedicata agli studenti&lt;/strong&gt;, attraverso la quale è possibile iscriversi a corsi ed esami e accedere ai servizi collegati alle diverse attività formative. La stessa applicazione mette a disposizione dello staff un’&lt;strong&gt;area amministrativa&lt;/strong&gt; per organizzare corsi, sessioni d’esame, iscrizioni e partecipanti, centralizzando attività che in precedenza richiedevano strumenti e procedure separate.&lt;/p&gt;
1795&lt;p&gt;La piattaforma supporta inoltre la gestione della comunicazione con i gruppi di corsisti, permettendo allo staff di inviare informazioni e materiali didattici attraverso i canali utilizzati dagli studenti.&lt;/p&gt;
1796&lt;p&gt;Completa il sistema un &lt;strong&gt;portale dedicato agli esami Cambridge&lt;/strong&gt;, collegato alla piattaforma gestionale. Le sessioni create dallo staff vengono sincronizzate con il portale e pubblicate nel calendario degli esami, mantenendo allineate le informazioni tra gestione interna e comunicazione pubblica.&lt;/p&gt;
1797&lt;p&gt;Il risultato è un’infrastruttura sviluppata intorno ai processi reali della scuola: dal primo contatto sul sito all’iscrizione, dalla gestione dei corsi all’organizzazione e pubblicazione delle sessioni d’esame. &lt;strong&gt;Sito, applicazioni e dati lavorano insieme come parti di un unico sistema&lt;/strong&gt;, riducendo le attività manuali e semplificando il lavoro quotidiano dello staff.&lt;/p&gt;"
1798                                         data-modal-year="2022"
1799                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/inlingua/inlingua.jpeg"
1800                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/inlingua/inlingua.jpeg"
1801                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/inlingua/Inlingua-logo.png"
1802                                         data-modal-link="https://www.inl
1802inguaschoolcivitavecchia.net/"
1803                                         data-modal-tags="TYPO3, Web Portal, Data Integration, Web Design, Web Application, Student Portal, Back Office, Course Management, Exam Management, API Integration, Web Development">
1804                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1805                                            <span class="font-mono text-gray-400 text-sm shrink-0">2022</span>
1806                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Inlingua School Civitavecchia</h3>
1807                                        </div>
1808                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1809                                            
1810                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="3">Web Application</button>
1811                                            
1812                                        </div>
1813                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1814                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1815                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1816                                            </div>
1817                                        </div>
1818                                    </div>
1819                                </div>
1820                            
1821                        
1822                            
1823                                
1824                                
1825                                
1826                                
1827                                
1828                                
1829                                
1830                                
1831                                
1832                                    
1833                                
1834                                    
1835                                
1836                                    
1837                                
1838                                
1839
1840                                <div class="archive-row block overflow-hidden" data-category="7" data-year="2022" data-date="2022-01-13">
1841                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1842                                         role="button" tabindex="0"
1843                                         data-modal-flip="false"
1844                                         data-modal-title="EVOLTREE"
1845                                         data-modal-typology="Institutional website"
1846                                         data-modal-description="&lt;p&gt;Per il progetto EvolTree abbiamo progettato e sviluppato la piattaforma web ufficiale a supporto di un&#039;iniziativa europea dedicata allo studio dell&#039;evoluzione, dell&#039;adattamento e della conservazione delle specie forestali.&lt;/p&gt;
1847&lt;p&gt;La piattaforma, realizzata con &lt;strong&gt;TYPO3 CMS&lt;/strong&gt;, offre un&#039;infrastruttura digitale flessibile e scalabile per la gestione di contenuti scientifici, pubblicazioni, eventi, aggiornamenti di progetto e informazioni sui partner. Abbiamo progettato un&#039;architettura dell&#039;informazione capace di rendere facilmente accessibili risultati di ricerca complessi attraverso un&#039;esperienza di navigazione chiara e intuitiva.&lt;/p&gt;
1848&lt;p&gt;Particolare attenzione è stata dedicata alle prestazioni, all&#039;accessibilità, alla gestione di contenuti multilingua e al design responsive, garantendo una fruizione ottimale da qualsiasi dispositivo e per un pubblico composto da ricercatori, stakeholder e cittadini.&lt;/p&gt;
1849&lt;p&gt;Il risultato è una piattaforma moderna e affidabile che rafforza la presenza digitale di EvolTree, facilita la diffusione dei risultati scientifici e supporta la collaborazione all&#039;interno della comunità europea della ricerca forestale.&lt;/p&gt;"
1850                                         data-modal-year="2022"
1851                                         data-modal-image="/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-first.jpg"
1852                                         data-modal-images="/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-first.jpg,/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-1.jpeg,/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-2.jpeg"
1853                                         data-modal-logo="/fileadmin/user_upload/NewtVision/Portfolio/evoltree/evoltree-logo.jpeg"
1854                                         data-modal-link="https://www.evoltree.eu/"
1855                                         data-modal-tags="Mask, Responsive Design, News, TYPO3 
1855CMS">
1856                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1857                                            <span class="font-mono text-gray-400 text-sm shrink-0">2022</span>
1858                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">EVOLTREE</h3>
1859                                        </div>
1860                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1861                                            
1862                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="7">Institutional website</button>
1863                                            
1864                                        </div>
1865                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1866                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1867                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1868                                            </div>
1869                                        </div>
1870                                    </div>
1871                                </div>
1872                            
1873                        
1874                            
1875                                
1876                                
1877                                
1878                                
1879                                
1880                                
1881                                
1882                                
1883                                
1884                                    
1885                                
1886                                    
1887                                
1888                                
1889
1890                                <div class="archive-row block overflow-hidden" data-category="4" data-year="2022" data-date="2022-04-14">
1891                                    <div class="trigger-modal group flex flex-col md:flex-row items-start md:items-center justify-between py-8 border-b border-borderline transition-all duration-300 cursor-pointer"
1892                                         role="button" tabindex="0"
1893                                         data-modal-flip="false"
1894                                         data-modal-title="Optforest"
1895                                         data-modal-typology="Microsite"
1896                                         data-modal-description="&lt;p&gt;OptFORESTS è un progetto europeo Horizon Europe dedicato alla diversità genetica delle foreste e alla ricerca di nuove strategie per renderle più resilienti ai cambiamenti climatici.&lt;/p&gt;
1897&lt;p&gt;Per il progetto abbiamo progettato e sviluppato il portale web, costruendo in TYPO3 una piattaforma capace di raccogliere e organizzare attività, Work Packages, news, pubblicazioni, deliverable, risorse e strumenti prodotti dai partner durante i cinque anni del progetto.&lt;/p&gt;
1898&lt;p&gt;Una parte del lavoro è dedicata anche ai dati. Abbiamo sviluppato una &lt;strong&gt;mappa interattiva&lt;/strong&gt; che permette di esplorare i siti coinvolti nelle attività di ricerca di OptFORESTS: provenienze, trial e siti sperimentali distribuiti in Europa e oltre.&lt;/p&gt;
1899&lt;p&gt;I dati provenienti da diversi Work Packages vengono elaborati e rappresentati attraverso livelli geografici distinti, filtri per specie, colori e simboli che identificano attività e tipologie di sito. Ogni punto può essere interrogato per accedere alle informazioni disponibili e la mappa può essere esportata per essere utilizzata anche in documenti e presentazioni.&lt;/p&gt;
1900&lt;p&gt;Un progetto in cui comunicazione scientifica, TYPO3, dati e GIS convivono nella stessa piattaforma, trasformando una parte dei dati prodotti dalla ricerca in qualcosa che può essere esplorato direttamente su una mappa.&lt;/p&gt;"
1901                                         data-modal-year="2022"
1902                                         data-modal-image="/fileadmin/Templates/NewtVision/portfolio/optforest/optforest.
1902jpeg"
1903                                         data-modal-images="/fileadmin/Templates/NewtVision/portfolio/optforest/optforest.jpeg,/fileadmin/Templates/NewtVision/portfolio/optforest/optforest-2.jpeg"
1904                                         data-modal-logo="/fileadmin/Templates/NewtVision/portfolio/optforest/logo.png"
1905                                         data-modal-link="https://www.optforests.eu/"
1906                                         data-modal-tags="Leaflet, TYPO3, Data Integration, Scientific Data">
1907                                        <div class="flex items-baseline gap-6 md:gap-12 md:w-5/12">
1908                                            <span class="font-mono text-gray-400 text-sm shrink-0">2022</span>
1909                                            <h3 class="text-2xl md:text-3xl font-bold text-ink transform group-hover:translate-x-3 transition-transform duration-500">Optforest</h3>
1910                                        </div>
1911                                        <div class="flex flex-wrap gap-2 mt-4 md:mt-0 md:w-5/12 relative z-20">
1912                                            
1913                                                <button class="filter-btn-inline bg-stonebg hover:bg-ink hover:text-white transition-colors px-4 py-1.5 rounded-full text-[10px] font-mono text-gray-500 uppercase tracking-widest cursor-pointer" data-filter="4">Microsite</button>
1914                                            
1915                                        </div>
1916                                        <div class="mt-6 md:mt-0 flex justify-end md:w-2/12 w-full md:w-auto">
1917                                            <div class="w-12 h-12 rounded-full border border-borderline flex items-center justify-center group-hover:border-newtgreen group-hover:bg-newtgreen group-hover:text-white transition-all duration-300">
1918                                                <svg class="w-5 h-5 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
1919                                            </div>
1920                                        </div>
1921                                    </div>
1922                                </div>
1923                            
1924                        
1925                    </div>
1926
1927                    
1928                    <div class="mt-8 flex items-center justify-between transition-opacity duration-300" id="archive-pagination-container">
1929                        <div class="font-mono text-[10px] text-gray-400 uppercase tracking-widest">
1930                            Pagina <span id="current-page-display" class="text-ink font-bold">1</span> di <span id="total-pages-display">1</span>
1931                        </div>
1932                        <div class="flex gap-2 font-mono text-sm" id="archive-pagination">
1933                            <button class="w-10 h-10 rounded-full border border-borderline flex items-center justify-center hover:bg-stonebg transition-all text-gray-400 disabled:opacity-30 disabled:cursor-not-allowed" id="btn-prev" disabled>&larr;</button>
1934                            <div class="flex gap-2" id="archive-page-buttons"></div>
1935                            <button class="w-10 h-10 rounded-full border border-borderline flex items-center justify-center hover:border-ink hover:text-ink transition-all text-gray-400 disabled:opacity-30 disabled:cursor-not-allowed" id="btn-next">&rarr;</button>
1936                        </div>
1937                    </div>
1938
1939                </div>
1940            </div>
1941        </div>
1942        
1943        
1944        
1945        
1945<script type="application/ld+json">
1946        {
1947          "@context": "https://schema.org",
1948          "@graph": [
1949            {
1950              "@type": "CreativeWork",
1951              "name": "Bacco Tour",
1952              "description": "Per Bacco Tours abbiamo progettato e sviluppato un sito dedicato alla scoperta di Roma, Civitavecchia e del territorio attraverso tour, esperienze, food &amp; wine e servizi pensati soprattutto per chi vuole conoscere questi luoghi accompagnato da guide locali.\r\nIl cuore del progetto \u00e8 il catalogo delle&hellip;",
1953              "dateCreated": "2025",
1954              "url": "https:\/\/www.baccotours.com\/",
1955              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
1956            },
1957            {
1958              "@type": "CreativeWork",
1959              "name": "Noise from Amerika (nfA)",
1960              "description": "NoiseFromAmerika \u00e8 un blog di analisi e discussione che raccoglie anni di articoli, approfondimenti e conversazioni costruite nel tempo anche attraverso i commenti dei lettori.\r\nPer il nuovo sito abbiamo ridisegnato l'interfaccia e migrato l'intero progetto su TYPO3, ricostruendo un archivio&hellip;",
1961              "dateCreated": "2021",
1962              "url": "https:\/\/www.noisefromamerika.org\/",
1963              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
1964            },
1965            {
1966              "@type": "CreativeWork",
1967              "name": "AssoCTU",
1968              "description": "Per AssoCTU, Associazione Nazionale dei Consulenti Tecnici del Tribunale in materia bancaria e finanziaria, abbiamo sviluppato una piattaforma che va ben oltre il sito istituzionale.\r\nIl portale gestisce direttamente la registrazione degli associati e il relativo albo professionale, con dati&hellip;",
1969              "dateCreated": "2011",
1970              "url": "https:\/\/www.assoctu.it\/",
1971              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
1972            },
1973            {
1974              "@type": "CreativeWork",
1975              "name": "COLiBRI",
1976              "description": "NewtVision ha progettato e sviluppato il sito web del progetto COLiBRI, creando una piattaforma digitale moderna e flessibile a supporto della comunicazione, della condivisione delle conoscenze e del coinvolgimento degli stakeholder nel settore europeo del miglioramento genetico delle&hellip;",
1977              "dateCreated": "2026",
1978              "url": "https:\/\/colibri-plantbreeding.eu\/",
1979              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
1980            },
1981            {
1982              "@type": "CreativeWork",
1983              "name": "EUFGIS",
1984              "description": "Per EUFGIS, il sistema informativo europeo dedicato alle risorse genetiche forestali, NewtVision ha progettato e sviluppato una nuova infrastruttura digitale capace di integrare gestione dei dati, strumenti geospaziali e collaborazione scientifica in un\u2019unica piattaforma.\r\nIl lavoro, realizzato&hellip;",
1985              "dateCreated": "2025",
1986              "url": "https:\/\/eufgis.org\/",
1987              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
1988            },
1989            {
1990              "@type": "CreativeWork",
1991              "name": "Liberi, Oltre le Illusioni",
1992              "description": "Per Liberi Oltre le Illusioni abbiamo progettato e sviluppato una piattaforma editoriale pensata per supportare la diffusione di analisi, approfondimenti, podcast, eventi e iniziative dell'associazione attraverso un ecosistema digitale moderno e facilmente gestibile.\r\nRealizzata con TYPO3 CMS, la&hellip;",
1993              "dateCreated": "2025",
1994              "url": "https:\/\/www.liberioltreleillusioni.it\/",
1995              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
1996            },
1997            {
1998              "@type": "CreativeWork",
1999              "name": "Polit\u00e8ia",
2000              "description": "Polit\u00e8ia \u00e8 un progetto editoriale indipendente nato per creare uno spazio di approfondimento e confronto su politica, societ\u00e0, cultura e trasformazioni del nostro tempo.\r\nNewtVision ha contribuito alla nascita del progetto e ne ha progettato e sviluppato il blog, costruend
2000o uno spazio essenziale in&hellip;",
2001              "dateCreated": "2026",
2002              "url": "https:\/\/politeia.blog\/",
2003              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2004            },
2005            {
2006              "@type": "CreativeWork",
2007              "name": "Bianca Ristorante",
2008              "description": "Per Bianca Ristorante abbiamo progettato e sviluppato un sito one-page costruito intorno a ci\u00f2 che conta quando si sceglie un ristorante: il luogo, la cucina e la possibilit\u00e0 di prenotare facilmente.\r\nIl sito racconta l'identit\u00e0 di Bianca attraverso immagini e contenuti essenziali, accompagnando&hellip;",
2009              "dateCreated": "2019",
2010              "url": "https:\/\/www.biancaristorante.it\/",
2011              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2012            },
2013            {
2014              "@type": "CreativeWork",
2015              "name": "Cacao of Excellence",
2016              "description": "Abbiamo progettato e sviluppato il sito web di Cacao of Excellence, programma internazionale dedicato alla qualit\u00e0 e alla diversit\u00e0 del cacao e alla valorizzazione dei produttori di tutto il mondo.\r\nIl progetto riunisce in un'unica piattaforma contenuti istituzionali, news, risorse, attivit\u00e0 di&hellip;",
2017              "dateCreated": "2026",
2018              "url": "https:\/\/www.cacaoofexcellence.org\/",
2019              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2020            },
2021            {
2022              "@type": "CreativeWork",
2023              "name": "Jordan Mammola",
2024              "description": "Abbiamo progettato e sviluppato il sito one-page di Jordan Mammola Tattoo, costruend
2024o un'esperienza visiva capace di raccontare il lavoro dell'artista e l'identit\u00e0 del suo studio.\r\nBiografia, studio, tatuaggi, piercing, team e gallery convivono in un'unica pagina, con una navigazione semplice e&hellip;",
2025              "dateCreated": "2024",
2026              "url": "https:\/\/www.jordanmammola.com\/",
2027              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2028            },
2029            {
2030              "@type": "CreativeWork",
2031              "name": "Hotel Villa delle Palme",
2032              "description": "Il sito di un hotel ha un compito piuttosto semplice: mostrare il luogo, aiutare le persone a immaginarsi l\u00ec e rendere la prenotazione il pi\u00f9 immediata possibile.\r\nPer Hotel Villa delle Palme abbiamo progettato e sviluppato un sito in TYPO3 partendo proprio da questa idea. Camere, ambienti e servizi&hellip;",
2033              "dateCreated": "2023",
2034              "url": "https:\/\/www.hotelvilladellepalme.it\/",
2035              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2036            },
2037            {
2038              "@type": "CreativeWork",
2039              "name": "FORGENIUS",
2040              "description": "FORGENIUS\r\nFORGENIUS \u00e8 un progetto europeo Horizon 2020 che studia la diversit\u00e0 genetica delle foreste europee e la loro capacit\u00e0 di adattarsi ai cambiamenti climatici, mettendo insieme competenze che vanno dalla genomica al telerilevamento, dall'ecologia alla modellistica.\r\nNewtVision partecipa al&hellip;",
2041              "dateCreated": "2022",
2042              "url": "https:\/\/www.forgenius.eu\/",
2043              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2044            },
2045            {
2046              "@type": "CreativeWork",
2047              "name": "AgriTech Challenge",
2048              "description": "AgriTech Challenge \u00e8 la piattaforma digitale che abbiamo sviluppato per Accelerate for Impact Platform (A4IP), l'iniziativa dell'Alliance of Bioversity International and CIAT che mette in relazione ricerca scientifica, innovazione e imprenditorialit\u00e0 per contribuire allo sviluppo di sistemi&hellip;",
2049              "dateCreated": "2022",
2050              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2051            },
2052            {
2053              "@type": "CreativeWork",
2054              "name": "Inlingua School Civitavecchia",
2055              "description": "Per inlingua School Civitavecchia abbiamo progettato e sviluppato un ecosistema digitale che integra il sito web della scuola con strumenti dedicati alla gestione di studenti, corsi ed esami.\r\nIl sito istituzionale presenta la scuola, l\u2019offerta formativa, le certificazioni e i servizi disponibili,&hellip;",
2056              "dateCreated": "2022",
2057              "url": "https:\/\/www.inlinguaschoolcivitavecchia.net\/",
2058              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2059            },
2060            {
2061              "@type": "CreativeWork",
2062              "name": "EVOLTREE",
2063              "description": "Per il progetto EvolTree abbiamo progettato e sviluppato la piattaforma web ufficiale a supporto di un'iniziativa europea dedicata allo studio dell'evoluzione, dell'adattamento e della conservazione delle specie forestali.\r\nLa piattaforma, realizzata con TYPO3 CMS, offre un'infrastruttura digitale&hellip;",
2064              "dateCreated": "2022",
2065              "url": "https:\/\/www.evoltree.eu\/",
2066              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2067            },
2068            {
2069              "@type": "CreativeWork",
2070              "name": "Optforest",
2071              "description": "OptFORESTS \u00e8 un progetto europeo Horizon Europe dedicato alla diversit\u00e0 genetica delle foreste e alla ricerca di nuove strategie per renderle pi\u00f9 resilienti ai cambiamenti climatici.\r\nPer il progetto abbiamo progettato e sviluppato il portale web, costruendo in TYPO3 una piattaforma capace di&hellip;",
2072              "dateCreated": "2022",
2073              "url": "https:\/\/www.optforests.eu\/",
2074              "creator": { "@id": "https:\/\/newt.vision\/#organization" }
2075            }
2076          ]
2077        }
2078        </script>
2078
2079
2080    </main>
2081    
2082
2083
2084
2085
2086
2087
2088<script type="application/ld+json">
2089{
2090  "@context": "https://schema.org",
2091  "@graph": [
2092    {
2093      "@type": "ProfessionalService",
2094      "@id": "https:\/\/newt.vision\/#organization",
2095      "name": "NewtVision",
2096      "legalName": "NewtVision snc di Mori S. e Barbiero V.",
2097      "url": "https:\/\/newt.vision\/",
2098      "email": "[email protected]",
2099      "telephone": "+39065560305",
2100      "vatID": "IT03136850785",
2101      "address": {
2102        "@type": "PostalAddress",
2103        "streetAddress": "Via Pisino, 155",
2104        "postalCode": "00177",
2105        "addressLocality": "Roma",
2106        "addressCountry": "IT"
2107      },
2108      "sameAs": ["https:\/\/www.linkedin.com\/company\/newtvision-snc\/"],
2109      "founder": [{"@type": "Person", "name": "Simone Mori"}, {"@type": "Person", "name": "Valentina Barbiero"}]
2110    },
2111    {
2112      "@type": "WebSite",
2113      "@id": "https:\/\/newt.vision\/#website",
2114      "url": "https:\/\/newt.vision\/",
2115      "name": "NewtVision",
2116      "inLanguage": "it-IT",
2117      "publisher": { "@id": "https:\/\/newt.vision\/#organization" }
2118    },
2119    {
2120      "@type": "BreadcrumbList",
2121      "itemListElement": [
2122        {
2123          "@type": "ListItem",
2124          "position": 1,
2125          "name": "NewtVision",
2126          "item": "https:\/\/newt.vision\/"
2127        },
2128        {
2129          "@type": "ListItem",
2130          "position": 2,
2131          "name": "Portfolio",
2132          "item": "https:\/\/newt.vision\/portfolio"
2133        }
2134      ]
2135    }
2136  ]
2137}
2138</script>
2138
2139
2140<script src="/typo3conf/ext/newtvision/Resources/Public/JavaScript/main.js?1790694577"></script>
vendor: 1 bytes, line 2140
2140
2141<script src="/typo3conf/ext/newtvision/Resources/Public/JavaScript/webkit-masonry.js?1790769255"></script>
2141
2142
2143
2144
2145<script type="text/javascript" src="/typo3temp/assets/vhs/vhs-assets-portfolio-js-project-modal-js.js"></script>
2145</body>
2146</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.