loke/lorenzoiovino.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added portfolio contents

Browse source
This commit is contained in:
Lorenzo Iovino 2024-01-04 23:09:10 +01:00
parent ba036abb76
commit dcfcb09c16
8 changed files with 88 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/app/hero/hero.component.html
View file

@ -9,25 +9,27 @@
id="originalPhoto"
class="h-[279px]"
alt="" height="300" width="300">
<div>
<div class="self-center">
<h1 class="text-4xl my-2 font-bold tracking-tight text-gray-900 sm:text-4xl">Hey, I'm Lorenzo!</h1>
<h2 class="text-base leading-2 mr-4">
I'm on a quest to uncover life's meaning while diving deep into my passion for Computer Science as a <span class="text-primary font-bold">Software Engineer</span>.
<br>Here, on my personal website, I share my projects and occasional thoughts.
</h2>
<div class="">
<h2 class="text-base leading-2 mr-4">
I'm on a quest to uncover life's meaning while diving deep into my passion for Computer Science as a <span class="text-primary font-bold">Software Engineer</span>.
<br>Here, on my personal website, I share my projects and occasional thoughts.
</h2>
<div class="mt-4 text-base leading-2 mr-4">
Explore more about me and feel free to reach out for any questions or collaborations via email
<a class="cursor-pointer underline text-primary hover:text-accent" href="mailto:thisloke@gmail.com">email</a>
or on socials!
<a class="mx-2 relative cursor-pointer" href="https://www.linkedin.com/in/lorenzoiovino/">
<img ngSrc="/assets/linkedin.svg" class="h-6 inline-block" alt="" height="30" width="30">
</a>
<a class="mx-1 relative cursor-pointer" href="
https://github.com/lokenxo">
<img ngSrc="/assets/github.svg" class="h-6 inline-block" alt="" height="30" width="30">
</a>
<div>
<div class="mt-4 text-base leading-2 mr-4">
Explore more about me and feel free to reach out for any questions or collaborations via email
<a class="cursor-pointer underline text-primary hover:text-accent" href="mailto:thisloke@gmail.com">email</a>
or on socials!
<a class="mx-2 relative cursor-pointer" href="https://www.linkedin.com/in/lorenzoiovino/">
<img ngSrc="/assets/linkedin.svg" class="h-6 inline-block" alt="" height="30" width="30">
</a>
<a class="mx-1 relative cursor-pointer" href="
https://github.com/lokenxo">
<img ngSrc="/assets/github.svg" class="h-6 inline-block" alt="" height="30" width="30">
</a>
<div>
</div>
</div>
</div>
</div>

17
src/app/menu/menu.component.html
View file

@ -1,19 +1,20 @@
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<div class="flex items-center flex-shrink-0 text-white mr-6 {{router.url == '/' ? 'text-white' : 'text-neutral'}}">
<span class="font-semibold text-xl tracking-tight">
<a href="/">Home</a>
</span>
</div>
<div class="text-xl font-bold lg:flex-grow">
<a href="biography" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
<a href="biography"
class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4 {{router.url == '/biography' ? 'text-white' : 'text-neutral'}}">
Bio
</a>
<a href="portfolio/disclaimer" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
<!--<a href="portfolio" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Portfolio
</a>
<a href="projects" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
</a>-->
<!--<a href="projects" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Projects
</a>
</a>-->
<!--<a href="like-dislike" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Like/Dislike
</a>
@ -24,11 +25,11 @@
Blog
</a>-->
</div>
<div class="">
<!--<div class="">
<iov-button-cta
[url]="'mailto:thisloke@gmail.com'">
Say Hello
</iov-button-cta>
</div>
</div>-->
</nav>

6
src/app/menu/menu.component.ts
View file

@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import {ButtonCtaComponent} from "../button-cta/button-cta.component";
import {Router} from "@angular/router";
@Component({
selector: 'iov-menu',
@ -12,4 +13,9 @@ import {ButtonCtaComponent} from "../button-cta/button-cta.component";
})
export class MenuComponent {
constructor(public router: Router) {
}
}

4
src/app/pages/biography/biography.page.html
View file

@ -4,7 +4,7 @@
<div class="mb-10">
<h2 class="font-bold text-4xl mt-8 mb-4">Hello world!</h2>
<p class="text-lg">
Greetings! I'm Lorenzo Iovino, and i hope that i would be something more that only a "Software Engineer" (that's my job and one of my passions)<br/>
Hello! I'm Lorenzo Iovino, and i hope that i would be something more that only a "Software Engineer" (that's my job and one of my passions)<br/>
I'm embarking on an exhilarating journey that began back in December 1988 and continues to evolve with each passing day.
<br />
Join me on this riveting expedition where technology meets creativity, thoughts are shared, and passions are pursued. That's my life.
@ -151,7 +151,7 @@
<h2 class="font-bold text-4xl mt-8 mb-4">Life at 35</h2>
<div class="text-lg">
Fast forward to the present day, where I've embraced the roles of a husband to my wonderful wife, Amanda, and a proud father of a little joy named Leonardo. <br/>Life's journey has woven a tapestry of experiences, blending the worlds of technology, family, and personal passions.<br/>
From here i'm starting sharing my experience and my knowledge with the world using this old-fashioned and anachronistic <a class="text-accent underline" href="blog">blog</a>, and i'm really excited to see what the future will bring to me.
<!--From here i'm starting sharing my experience and my knowledge with the world using this old-fashioned and anachronistic <a class="text-accent underline" href="blog">blog</a>, and i'm really excited to see what the future will bring to me.-->
<div class="mb-2 mt-4 w-full">
<img ngSrc="/assets/photos/me-amanda.jpg" alt="Me and my wife" class="w-full h-80 rounded-2xl shadow-lg object-cover"

2
src/app/pages/portfolio/portfolio-item-card/portfolio-item-card.component.html
View file

@ -11,7 +11,7 @@
max-w-48
self-end
hover:ring-accent hover:text-accent hover:bg-transparent hover:ring-2"
href="{{job?.website}}">
href="{{job?.website}}" target="_blank">
Visit Website
</a>
</div>

2
src/app/pages/portfolio/portfolio.page.html
View file

@ -2,7 +2,7 @@
[backgroundImageUrl]="'/assets/green.JPG'">
<div class="mb-10">
<div class="grid grid-cols-3 bg-slate-100 p-4">
<div *ngFor="let job of jobs; index as i" class="m-4 {{expandedJob == i ? 'col-span-3' : 'col-span-1'}}">
<div *ngFor="let job of jobs; index as i" class="m-4 {{expandedJob == i ? ('col-span-3 order-' + i) : 'col-span-1 order-'+ i}}">
<iov-portfolio-item-card [job]="job" (expand)="expand(i)" [expanded]="i == expandedJob">
</iov-portfolio-item-card>
</div>

57
src/app/pages/portfolio/portfolio.page.ts
View file

@ -27,60 +27,71 @@ export class PortfolioPage {
jobs: Job[] = [
{
name: 'ChiamarsiBomber',
role: 'CTO',
description: 'As the CTO of ChiamarsiBomber, I lead the charge in developing a cutting-edge web platform for football infotainment. <br/>Navigating the intricacies of real-time data integration and ensuring high availability during peak periods, I orchestrate the small (3 person) IT team to deliver a seamless experience.',
role: 'Tech Lead',
description: 'I lead the charge in developing a cutting-edge web platform for football infotainment. <br/>Navigating the intricacies of real-time data integration and ensuring high availability during peak periods, I orchestrate the small (3 person) team to deliver the best experience for our customers.',
website: 'https://chiamarsibomber.com/',
image: 'assets/portfolio/chiamarsibomber.jpeg'
},
{
name: 'Iubenda',
role: 'Lead Backend Engineer',
description: 'At Iubenda, I assumed the role of Lead Backend Engineer, steering a small team in the maintenance and evolution of the critical Radar code product. <br/>This crawler identifies GDPR non-compliant websites, playing a pivotal role in revenue generation',
website: 'https://iubenda.com/',
description: 'I assumed the role of Lead Backend Engineer, steering a small team in the maintenance and evolution of the critical Radar code product (<b>NodeJs + Typescript</b>).<br/>' +
'This crawler identifies GDPR non-compliant websites, playing a pivotal role in revenue generation.<br/>',
website: 'https://radar.iubenda.com/docs/',
image: 'assets/portfolio/iubenda.png'
},
{
name: 'Alcon',
role: 'Frontend Developer',
description: 'At Alcon, I was responsible for the development of a new web platform for the Vision Care. <br/>I worked closely with the UX team to deliver a seamless experience, and with the backend team to ensure a smooth integration with the existing systems.',
website: 'https://alcon.com/',
description: 'I was responsible for the development of a new web platform for the Vision Care department.<br/>' +
'I worked closely with the UX team and a huge FE team (30 people) to deliver a seamless experience, and with the backend team to ensure a smooth integration with the existing systems.<br/>' +
'The whole project was based on <b>Angular + SAP Spartacus</b> for FE.<br/>',
website: 'https://www.myalcon.com',
image: 'assets/portfolio/alcon.png'
},
{
name: 'Acker',
role: 'Lead Frontend Developer',
description: 'As the Lead Frontend Developer at Welance, I spearheaded the development of <a href="https://acker.co">Acker.co</a>, an educational website for a green kids project. Balancing speed and optimization, I made architectural decisions, utilizing Nuxt (a Vue framework), and collaborated on crafting a captivating user experience.',
description: 'I spearheaded the development of an educational website for kids for the acker german startup.<br/>' +
'I also made architectural decisions in order to improve SEO and speed, deciding to utilize <b>Nuxt</b> (a <b>Vue</b> framework) for FE and <b>Strapi</b> for the BE and to manage the myriad of integrated external services.<br/>' +
'I’ve also worked on the implementation of their backoffice bootstrapping the project and then handing over the know-how and the codebase to their internal tech team.<br/>',
website: 'https://acker.co/',
image: 'assets/portfolio/acker.svg'
},
{
name: 'Medicami',
role: 'Fullstack Developer',
description: 'I\'ve realized a mobile App with Ionic that connected with neoped to manage the medical visits. <br/>I\'ve also realized the backend with Loopback and the frontend with Angular. The app was in the stores for 4 years, then the company was dismissed and neoped product sell.',
website: 'https://hotel-net.it/',
role: 'Tech Lead',
description: 'I\'ve realized a mobile App with <b>Angular + Ionic + Loopack</b> that communicates with neoped (pediatric CRM) to manage medical remote visits, managing health documents. I’ve also built the whole <b>CI/CD</b< and the <b>AWS</b> infrastructure (ECS + ECR). <br/>' +
'The backoffice and the landing page was realized in <b>Nuxt</b> with a focus on SEO and performance.<br/>' +
'The app was in the app stores for 3 years (with 4.5 avg point review), then the company was dismissed and neoped product sold.<br/>',
website: undefined,
image: 'assets/portfolio/medicami.png'
},
{
name: 'HotelNet',
role: 'Lead Frontend Developer',
description: 'I realized the frontend of the HotelNet\'s Booking Engine widget. Hotelnet is a company that provides IT services to hotels. <br/>I worked closely with the UX team to deliver a seamless experience, and with the backend team to ensure a smooth integration with the existing systems.',
website: 'https://hotel-net.it/',
image: 'assets/portfolio/hotelnet.png'
},
{
name: 'FullstackAgency',
role: 'Lead Frontend Developer',
description: 'As the Lead Frontend Developer at FullstackAgency, I was responsible for the development of the first version of the frontend of Romeo. <br/>I worked closely with the UX team to deliver a seamless experience, and with the backend team to ensure a smooth integration with the existing systems.',
name: 'Fullstack Agency',
role: 'Frontend Developer',
description: 'As a Frontend Developer at FullstackAgency, I was responsible for the development of the first version of the frontend of one of their MVP products.<br/>' +
'I worked closely with the UX team and with the backend team to ensure a smooth integration with the existing systems.<br/>' +
'I also realized for the project (in <b>Angular</b>) a huge UI library with Storybook with reusable components.<br/>',
website: 'https://www.fullstackagency.it/',
image: 'assets/portfolio/fullstackagency.png'
},
{
name: 'CsProject',
role: 'Lead Frontend Developer',
description: 'My role at CsProject involved creating a new web-based product based on a legacy .NET system (PROMAN), not only from the execution point of view but also taking care of building up a new team, making a delivery plan and allocating resources. Through strategic planning and team collaboration, we successfully bridged the past and future, delivering a modern, responsive, and user-friendly experience.',
website: 'https://csproject.com/',
role: 'Tech Lead',
description: 'My role at CsProject involved creating a new web-based product based on a legacy .NET system (PROMAN), not only from the implementation point of view (<b>Angular + Express</b>) but also taking care of creating up a development team, making a delivery plan and allocating resources.<br/>' +
'Through strategic planning and team collaboration, we successfully bridged the past and future, delivering a modern, responsive, and user-friendly experience.<br/>',
website: 'https://www.csproject.it/',
image: 'assets/portfolio/csproject.png'
},
{
name: 'Tuotempo',
role: 'Frontend Developer',
description: 'As part of the team at Tuotempo, I actively contributed to the development of a crucial web application for healthcare management. This application is a SaaS and it serves multiple hospitals (worldwide), streamlining patient care processes.<br/>' +
'I evolved and maintained the existing application utilizing <b>Backbone.js</b> to ensure an efficient and responsive user experience.<br/>',
website: 'https://tuotempo.it/',
image: 'assets/portfolio/tuotempo.svg'
},
]
expand(index: number) {