1function site() { 2 return { 3 filter: "all", 4 activeId: null, 5 typedText: "", 6 roleIndex: 0, 7 charIndex: 0, 8 deleting: false, 9 roles: [ 10 "React Native developer", 11 "Full Stack developer", 12 "React developer", 13 "Node JS developer", 14 ], 15 skills: [ 16 "React JS", 17 "React Native", 18 "Node JS", 19 "Typescript", 20 "Javascript", 21 "Design Systems", 22 "REST", 23 "GraphQL", 24 ], 25 services: [ 26 { 27 tag: "</>", 28 color: "#ff7a59", 29 title: "Web Development", 30 text: "From a simple web site, to professional dashboards, up to the most complex enterprise applications: from the idea, to the analysis, until production, I will be your best friend.", 31 }, 32 { 33 tag: "[ ]", 34 color: "#4ea3ff", 35 title: "App Development", 36 text: "Whatever you need, I have the experience to build even the most complex mobile application. Social integrations, offline data, push notifications, mobile payments, e-commerce: I already did it and can do it again for you.", 37 }, 38 { 39 tag: "{ }", 40 color: "#b06bff", 41 title: "Backend Development", 42 text: "Any web or mobile application most probably needs a backend. Systems integrations, REST api, GraphQL, real time data: no matter where the data comes from or where it needs to be stored, it can be done.", 43 }, 44 ], 45 filterDefs: [ 46 { key: "all", label: "All" }, 47 { key: "opensource", label: "Open Source" }, 48 { key: "experience", label: "Past Experience" }, 49 ], 50 projects: [ 51 { 52 id: "tanstack-query-typed", 53 title: "tanstack-query-typed", 54 subtitle: "TypeScript, TanStack Query, React", 55 description: 56 "An open source, lightweight TypeScript library that adds a fully-typed layer over TanStack Query (React Query v5). It provides typed wrappers (useAppQuery, useAppMutation, useAppQueryClient) so that queries and mutations get strongly typed keys, payloads and responses. Operations are declared once in a central registry via TypeScript declaration merging, and variable payloads, response data and cache keys are then type-checked automatically across the whole app, with zero runtime overhead.", 57 imageSrc: "assets/images/portfolio/tanstack-query-typed.svg", 58 category: "opensource", 59 technologies: [ 60 "Typescript", 61 "TanStack Query", 62 "React Query", 63 "React", 64 "tsup", 65 "Type Safety", 66 "Open Source", 67 ], 68 links: [ 69 { 70 text: "Documentation", 71 url: "https://apperside.github.io/tanstack-query-typed", 72 }, 73 { 74 text: "GitHub Repository", 75 url: "https://github.com/apperside/tanstack-query-typed", 76 }, 77 ], 78 imageCaption: 79 "A fully-typed layer over TanStack Query giving strongly typed keys, payloads and responses.", 80 }, 81 // { 82 // id: "doitsmart", 83 // title: "doitsmart.dev", 84 // subtitle: "React, TypeScript, Monaco Editor, Vite", 85 // category: "opensource", 86 // imageSrc: "assets/images/portfolio/doitsmart.png", 87 // technologies: [ 88 // "React", 89 // "TypeScript", 90 // "Monaco Editor", 91 // "Vite", 92 // "Multi-cursor", 93 // "Regex", 94 // ], 95 // links: [ 96 // { 97 // text: "GitHub Repository", 98 // url: "https://github.com/apperside/doitsmart.dev", 99 // }, 100 // ], 101 // description: 102 // "Experimental project, in a very early stage. There is a shortcut for everything â you just have to care about them. doitsmart.dev is my experiment to turn that belief into a training ground: interactive katas teaching smart editor tricks (multi-cursor editing, regex find & replace with capture groups) that collapse ten minutes of mechanical edits into a few keystrokes. Each exercise pairs a step-by-step walkthrough with a real Monaco editor that validates your result live.", 103 // imageCaption: 104 // "Interactive katas for multi-cursor editing and regex find & replace (experimental, early stage).", 105 // }, 106 { 107 id: "balooni", 108 title: "BALOONI", 109 subtitle: "Web3, Ethers, HardHat, Solidity, NextJS", 110 category: "opensource", 111 imageSrc: "assets/images/portfolio/baluni.png", 112 technologies: [ 113 "Web3", 114 "Ethers", 115 "HardHat", 116 "Solidity", 117 "NextJS", 118 "NodeJS", 119 "Typescript", 120 "NX", 121 "NestJS", 122 "CLI", 123 ], 124 links: [ 125 { text: "Live Demo", url: "https://baluni.vercel.app" }, 126 { 127 text: "Read Post", 128 url: "https://dev.to/apperside/creating-a-web3-dapp-with-a-nx-monorepo-56e", 129 }, 130 ], 131 description: 132 "Hired to lead the migration to a monorepo of 5 different linked projects and to give a scalable structure to the project. I also wrote a technical relation of the job in a post for the dev.to platform.", 133 imageCaption: 134 "A monorepo-structured Web3 project with a scalable architecture.", 135 }, 136 { 137 id: "foodelix", 138 title: "Foodelix", 139 subtitle: "React, React Native, NextJS, TypeScript", 140 category: "public", 141 imageSrc: "assets/images/portfolio/foodelix.png", 142 technologies: [ 143 "React", 144 "React Native", 145 "NextJS", 146 "Typescript", 147 "Redux", 148 "NestJS", 149 "Postgres", 150 "TypeORM", 151 "Prisma", 152 "SocketIO", 153 ], 154 links: [ 155 { text: "End Users App", url: "https://foodelix.com" }, 156 { 157 text: "Merchant Onboarding", 158 url: "https://app.foodelix.com/onboarding", 159 }, 160 ], 161 description: 162 "A web application that allows people to search for a dish and immediately see the restaurants serving it. A complex full stack solution including a backend, a B2C app and a B2B a
162pp: the former for final users, the latter a full featured, responsive restaurant management system for digital menus, reservations and online orders.", 163 imageCaption: 164 "A complete food ordering platform with restaurant management system.", 165 }, 166 { 167 id: "boilercoder", 168 title: "BoilerCoder", 169 subtitle: "React, React Native, NextJS, TypeScript", 170 category: "public", 171 imageSrc: "assets/images/portfolio/boilercoder.png", 172 technologies: [ 173 "React", 174 "NextJS", 175 "Typescript", 176 "Redux", 177 "CLI app", 178 "NodeJS", 179 "Postgres", 180 "TypeORM", 181 ], 182 links: [ 183 { text: "Live Demo", url: "https://boilercoder.apperside.com" }, 184 ], 185 description: 186 "A code generation SaaS I am developing by myself which provides a user friendly interface to define the schema of a database and generate from it a typescript codebase for a full admin dashboard with a frontend and backend.", 187 imageCaption: 188 "A code generation platform that creates full-stack admin dashboards from database schemas.", 189 }, 190 { 191 id: "dockerify", 192 title: "Dockerify.ai", 193 subtitle: "TypeScript, NodeJS, OpenAI, Docker, CLI", 194 category: "opensource", 195 imageSrc: "assets/images/portfolio/dockerify.png", 196 technologies: ["Typescript", "NodeJS", "OpenAI", "Docker", "CLI app"], 197 links: [ 198 { 199 text: "GitHub Repository", 200 url: "https://github.com/apperside/dockerify.ai", 201 }, 202 ], 203 description: 204 "Side project developed to experiment with docker and openai APIs. It is a Node JS command line app that allows to quickly generate a docker file and a docker compose file for any project.", 205 imageCaption: 206 "An AI-powered tool for generating Docker configurations.", 207 }, 208 { 209 id: "thunderclone", 210 title: "Thunderclone", 211 subtitle: "TypeScript, NodeJS, Browser Extension, Electron", 212 category: "opensource", 213 imageSrc: "assets/images/portfolio/thunderclone.png", 214 technologies: ["Typescript", "NodeJS", "Browser Extension", "Electron"], 215 links: [ 216 { 217 text: "GitHub Repository", 218 url: "https://github.com/apperside/thunderclone", 219 }, 220 ], 221 description: 222 "Side project developed to play around with browser extension and electron development. A browser extension that adds a button on github repository pages that, when clicked, instantly clones and runs the repository through the desktop agent app.", 223 imageCaption: 224 "A browser extension and desktop app combo for swift GitHub repository cloning.", 225 }, 226 { 227 id: "locate-source", 228 title: "babel-plugin-locate-source", 229 subtitle: "Babel, React, JavaScript, DevTools", 230 category: "opensource", 231 imageSrc: "assets/images/portfolio/locate-source.png", 232 technologies: [ 233 "Babel", 234 "React", 235 "JavaScript", 236 "DevTools", 237 "Rollup", 238 "Webpack", 239 "Vite", 240 ], 241 links: [ 242 { 243 text: "GitHub Repository", 244 url: "https://github.com/apperside/babel-plugin-locate-source", 245 }, 246 ], 247 description: 248 "A powerful Babel plugin that makes it easy to locate your React components in the DOM with source file and line information. Adds HTML attributes to your JSX components in development mode: data-at (source file and line numbers), data-is (component name), and data-in (parent component).", 249 imageCaption: 250 "A developer tool that enhances debugging by providing source location information in the DOM.", 251 }, 252 { 253 id: "signalswarm", 254 title: "SignalSwarm LTD", 255 subtitle: "Vue2, Vue3, Composition API, Charts", 256 category: "experience", 257 imageSrc: "assets/images/portfolio/signalswarm.png", 258 technologies: [ 259 "Vue2", 260 "Vue3", 261 "Composition API", 262 "Charts", 263 "TypeScript", 264 "Data Visualization", 265 ], 266 links: [], 267 description: 268 "A startup which asked for my help to build an admin dashboard for their trading signals anal
268ysis platform. They had something already built with Vue 2 and plain Javascript, I had to migrate it to Vue 3 and Typescript and develop all the missing features including dynamic tables and charts.", 269 imageCaption: 270 "A trading signals analysis platform with dynamic tables and charts.", 271 }, 272 { 273 id: "seetings", 274 title: "Seetings", 275 subtitle: "React, React Native, NextJS, TypeScript", 276 category: "experience", 277 imageSrc: "assets/images/portfolio/seeting.png", 278 technologies: [ 279 "React", 280 "React Native", 281 "NextJS", 282 "Typescript", 283 "Redux", 284 "NodeJS", 285 "Postgres", 286 "TypeORM", 287 ], 288 links: [], 289 description: 290 "Client project: an app allowing music fans to buy 1-to-1 videocalls with their favorite artists. I drove them from the requirements to the complete solution, developing the platform (React Native app + React web dashboard) while coordinating a third party backend team â and later took ownership of the NodeJS backend as well.", 291 imageCaption: 292 "A platform connecting fans to artists through 1-to-1 video calls.", 293 }, 294 { 295 id: "illimity", 296 title: "Illimity Bank", 297 subtitle: "React, React Native, NextJS, TypeScript", 298 category: "experience", 299 imageSrc: "assets/images/portfolio/illimity.png", 300 technologies: [ 301 "React", 302 "React Native", 303 "Typescript", 304 "Redux", 305 "Design Systems", 306 "Banking", 307 ], 308 links: [], 309 description: 310 "In charge to lead the work of one of the many frontend teams working on the home banking react and react native apps. We had both to work on features already designed and creating new ones together with the bank's stakeholders.", 311 imageCaption: "Home banking applications for web and mobile platforms.", 312 }, 313 { 314 id: "capsula", 315 title: "Capsula", 316 subtitle: "React, React Native, NextJS, TypeScript", 317 category: "experience", 318 imageSrc: "assets/images/portfolio/capsula.png", 319 technologies: [ 320 "React", 321 "Typescript", 322 "Redux", 323 "Design Systems", 324 "Healthcare", 325 "Kiosk Applications", 326 ], 327 links: [], 328 description: 329 "Created, and maintained over time, a react application for an e-health kiosk for 100% self health measurements (heart rate, blood pressure etc.). Built the project from scratch on the basis of a provided design, integrating the client's APIs.", 330 imageCaption: "Self-service health measurement kiosk application.", 331 }, 332 { 333 id: "greennetwork", 334 title: "GreeNetwork", 335 subtitle: "React, React Native, NextJS, TypeScript", 336 category: "experience", 337 imageSrc: "assets/images/portfolio/greennetwork.png", 338 technologies: [ 339 "React", 340 "React Native", 341 "Typescript", 342 "Redux", 343 "Energy Sector", 344 "API Integration", 345 ], 346 links: [], 347 description: 348 "Developed from scratch the app for an italian energy service provider allowing people to submit an energy supply contract directly within the app. In charge of understanding the client's requirements and adapting their APIs to the mobile app's needs.", 349 imageCaption: 350 "Energy service provider application for contract management.", 351 }, 352 { 353 id: "conio", 354 title: "Conio", 355 subtitle: "Android Native, React, TypeScript", 356 category: "experience", 357 imageSrc: "assets/images/portfolio/conio.png", 358 technologies: [ 359 "Android Native", 360 "React", 361 "Typescript", 362 "Redux", 363 "Cryptocurrency", 364 "Bitcoin", 365 ], 366 links: [{ text: "Visit Website", url: "https://conio.com" }], 367 description: 368 "Lead developer for an innovative Bitcoin wallet app with buy and sell capabilities and an over-curated UX that makes it easy to understand for everyone. Also developed react dashboards used by merchants using our wallet.", 369 imageCaption: 370 "User-friendly Bitcoin wallet application with trading capabilities.", 371 }, 372 { 373 id: "ntv", 374 title: "NTV â Italo", 375 subtitle: "Android Native", 376 category: "experience", 377 imageSrc: "assets/images/portfolio/ntv.png", 378 technologies: [ 379 "Android Native", 380 "Java", 381 "Transportation", 382 "Enterprise Application", 383 ], 384 links: [], 385 description: 386 "The app used by ground and onboard personnel of Italo spa's trains: ticket checks, meal sales, maintenance tickets and many other features related to their job.", 387 imageCaption: 388 "Enterprise application for train personnel operations management.", 389 }, 390 ], 391 get visibleProjects() { 392 return this.filter === "all" 393 ? this.projects 394 : this.projects.filter((p) => p.category === this.filter); 395 }, 396 get activeProject() { 397 return this.projects.find((p) => p.id === this.activeId) || null; 398 }, 399 categoryLabel(cat) { 400 return cat === "opensource" 401 ? "open source" 402 : cat === "experience" 403 ? "experience" 404 : "product"; 405 }, 406 init() { 407 this.tick(); 408 }, 409 tick() { 410 const role = this.roles[this.roleIndex % this.roles.length]; 411 if (!this.deleting) { 412 this.charIndex++; 413 if (this.charIndex >= role.length) { 414 this.deleting = true; 415 this.typedText = role; 416 setTimeout(() => this.tick(), 2000); 417 return; 418 } 419 } else { 420 this.charIndex--; 421 if (this.charIndex <= 0) { 422 this.deleting = false;
423 this.roleIndex++; 424 } 425 } 426 this.typedText = role.slice(0, this.charIndex); 427 setTimeout(() => this.tick(), this.deleting ? 35 : 65); 428 }, 429 }; 430}
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.