Add portfolio
This commit is contained in:
Lorenzo Iovino
parent
24decc9de4
commit
5e08b353ad
35 changed files with 484 additions and 351 deletions
13
src/app/pages/portfolio/disclaimer/disclaimer.component.html
Normal file
13
src/app/pages/portfolio/disclaimer/disclaimer.component.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<iov-section [title]="'Portfolio'"
|
||||
[backgroundImageUrl]="'/assets/green.JPG'">
|
||||
|
||||
<a href="https://imgflip.com/i/8aw8ki"><img alt="" ngSrc="https://i.imgflip.com/8aw8ki.jpg"
|
||||
width="500" height="500" class="mx-auto"
|
||||
title=""/></a>
|
||||
<div class="items-center text-center flex flex-col">
|
||||
<h2 class="text-warning text-2xl font-bold mt-4">⚠️I accept the risk to get a non-complete portfolio experience ⚠️</h2>
|
||||
<a href="/portfolio" class="text-lg px-12 py-4 rounded-full mt-4 font-bold
|
||||
ring-white text-white bg-secondary ring-2
|
||||
hover:ring-accent hover:text-accent hover:bg-transparent hover:ring-2">I've no fear! Bring me to Mordor</a>
|
||||
</div>
|
||||
</iov-section>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DisclaimerComponent } from './disclaimer.component';
|
||||
|
||||
describe('DisclaimerComponent', () => {
|
||||
let component: DisclaimerComponent;
|
||||
let fixture: ComponentFixture<DisclaimerComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [DisclaimerComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DisclaimerComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
17
src/app/pages/portfolio/disclaimer/disclaimer.component.ts
Normal file
17
src/app/pages/portfolio/disclaimer/disclaimer.component.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {SectionComponent} from "../../../section/section.component";
|
||||
import {NgOptimizedImage} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'iov-disclaimer',
|
||||
standalone: true,
|
||||
imports: [
|
||||
SectionComponent,
|
||||
NgOptimizedImage
|
||||
],
|
||||
templateUrl: './disclaimer.component.html',
|
||||
styleUrl: './disclaimer.component.scss'
|
||||
})
|
||||
export class DisclaimerComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<div class="bg-white shadow-md border border-primary rounded-lg mb-4 p-4 max-h-80 min-h-80 overflow-hidden flex flex-col flex-wrap">
|
||||
<img class="rounded-t-lg float-left max-h-32 min-h-32 object-contain {{expanded ? 'object-left max-w-32' : ''}}" ngSrc="{{job?.image}}" alt="" width="300" height="100">
|
||||
<h5 class="text-gray-900 text-xl tracking-tight mb-2 justify-left" *ngIf="expanded">{{job?.name}} <br/> <em class="text-lg"><i>{{job?.role}}</i></em></h5>
|
||||
<div class="flex {{expanded ? 'max-w-96 flex-col -ml-1/5' : 'items-center'}} flex-1">
|
||||
<h5 class="text-gray-900 text-xl tracking-tight mb-2 justify-left" *ngIf="!expanded">{{job?.name}} <br/> <em class="text-lg"><i>{{job?.role}}</i></em></h5>
|
||||
<div class="font-normal text-gray-700 mb-3" *ngIf="expanded" [innerHTML]="job?.description"></div>
|
||||
<a *ngIf="expanded" class="text-sm px-6 py-2 rounded-full font-bold
|
||||
ring-white text-white bg-secondary ring-2
|
||||
cursor-pointer
|
||||
text-center
|
||||
max-w-48
|
||||
self-end
|
||||
hover:ring-accent hover:text-accent hover:bg-transparent hover:ring-2"
|
||||
href="{{job?.website}}">
|
||||
Visit Website
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center justify-center flex-1" *ngIf="!expanded" >
|
||||
<a class="text-sm px-6 py-2 rounded-full font-bold relative ring-white text-white bg-secondary ring-2
|
||||
hover:ring-accent hover:text-accent hover:bg-transparent hover:ring-2
|
||||
cursor-pointer"
|
||||
(click)="expand.emit()">
|
||||
Show more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PortfolioItemCardComponent } from './portfolio-item-card.component';
|
||||
|
||||
describe('PortfolioCardComponent', () => {
|
||||
let component: PortfolioItemCardComponent;
|
||||
let fixture: ComponentFixture<PortfolioItemCardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PortfolioItemCardComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PortfolioItemCardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {Job} from "../../../models/job";
|
||||
import {NgIf, NgOptimizedImage} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'iov-portfolio-item-card',
|
||||
standalone: true,
|
||||
imports: [
|
||||
NgOptimizedImage,
|
||||
NgIf
|
||||
],
|
||||
templateUrl: './portfolio-item-card.component.html',
|
||||
styleUrl: './portfolio-item-card.component.scss'
|
||||
})
|
||||
export class PortfolioItemCardComponent {
|
||||
@Output() expand: EventEmitter<void> = new EventEmitter<void>();
|
||||
@Input() job: Job | undefined
|
||||
@Input() expanded: boolean = false;
|
||||
}
|
||||
|
|
@ -1,120 +1,11 @@
|
|||
<iov-section [title]="'Professional Odissey'"
|
||||
[backgroundImageUrl]="'/assets/plane.JPG'">
|
||||
<iov-section [title]="'Portfolio'"
|
||||
[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'}}">
|
||||
<iov-portfolio-item-card [job]="job" (expand)="expand(i)" [expanded]="i == expandedJob">
|
||||
</iov-portfolio-item-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</iov-section>
|
||||
|
||||
Ah ah! This is not a real Portfolio page, a fullstack dev like me doesnt have just a list of website to show (even if I have a lot of them). I have a lot of experience in a lot of different fields, and I want to share with you my professional journey.
|
||||
|
||||
I started my career as a mobile developer, and I worked on a lot of different projects, from games to museum apps, from 3D printing to AR. I worked on a lot of different platforms, from Android to iOS, from Windows Phone to Windows 8.1, from Unity3D to Xamarin.
|
||||
|
||||
After that I started to work on web development, and I worked on a lot of different projects, from a 3D printing cloud service to a GDPR crawler, from a football infotainment platform to a vision portal. I worked on a lot of different technologies, from .NET to NodeJS, from Vue to React, from Nuxt to Next, from MongoDB to SQL Server.
|
||||
|
||||
I worked in a lot of different companies, from small startups to big enterprises, from small teams to big teams, from local companies to international companies.
|
||||
|
||||
I worked in a lot of different roles, from mobile developer to fullstack developer, from frontend developer to backend developer, from lead developer to CTO.
|
||||
|
||||
I worked in a lot of different countries, from Italy to Belgium, from Germany to Switzerland, from Spain to UK.
|
||||
|
||||
I worked in a lot of different languages, from Italian to English, from Spanish to French.
|
||||
|
||||
I worked in a lot of different fields, from 3D printing to GDPR, from football to vision, from AR to museum.
|
||||
|
||||
I worked in a lot of different technologies, from .NET to NodeJS, from Vue to React, from Nuxt to Next, from MongoDB to SQL Server.
|
||||
|
||||
I worked in a lot of different frameworks, from Xamarin to Unity3D, from .NET to NodeJS, from Vue to React, from Nuxt to Next.
|
||||
|
||||
I worked in a lot of different platforms, from Android to iOS, from Windows Phone to Windows 8.1, from Unity3D to Xamarin.
|
||||
|
||||
I worked in a lot of different tools, from Visual Studio to Visual Studio Code, from Git to SVN, from Jira to Trello.
|
||||
|
||||
I worked in a lot of different methodologies, from Agile to Scrum, from Kanban to Waterfall.
|
||||
|
||||
I worked in a lot of different environments, from local to remote, from office to home.
|
||||
|
||||
I worked in a lot of different roles, from mobile developer to fullstack developer, from frontend developer to backend developer, from lead developer to CTO.
|
||||
|
||||
I worked in a lot of different projects, from small to big, from simple to complex, from local to international.
|
||||
|
||||
I worked in a lot of different teams, from small to big, from local to international.
|
||||
|
||||
In the end, I worked in a lot of different ways, from small to big, from local to international.
|
||||
|
||||
|
||||
"Tuttifrutti", this is how i explain my professional journey, and this is how I explain my professional skills.
|
||||
|
||||
Professional Odyssey:
|
||||
|
||||
<b>ChiamarsiBomber | CTO | 2023 - Present</b>
|
||||
|
||||
As the CTO of ChiamarsiBomber, I lead the charge in developing a cutting-edge web platform for football infotainment. Navigating the intricacies of real-time data integration and ensuring high availability during peak periods, I orchestrate the IT team to deliver a seamless experience.
|
||||
|
||||
<b>Iubenda | Lead Backend Engineer | 2022 - 2023</b>
|
||||
|
||||
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. This crawler identifies GDPR non-compliant websites, playing a pivotal role in revenue generation.
|
||||
|
||||
<b>Alcon | Frontend Developer | 2021 - 2022</b>
|
||||
|
||||
Contributing to a colossal remote team spanning continents, I served as a Frontend Developer for Alcon, shaping the Alcon Vision portal.
|
||||
|
||||
<b>Welance | Lead Frontend Developer | 2021 - 2022</b>
|
||||
|
||||
As the Lead Frontend Developer at Welance, I spearheaded the development of acker.co, 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.
|
||||
|
||||
<b>CsProject | Fullstack Developer | 2017 - 2021</b>
|
||||
|
||||
My leadership role at CsProject involved creating a new web-based product, rejuvenating a legacy .NET system. Through strategic planning and team collaboration, we successfully bridged the past and future.
|
||||
|
||||
<b>Inn3D | Fullstack Developer | 2015 - 2017</b>
|
||||
|
||||
Inn3D witnessed my expertise in designing and developing a cloud 3D printing service, revolutionizing how users print 3D models while implementing innovative measures to prevent counterfeiting.
|
||||
|
||||
<b>Vargroup and BMS | Fullstack Developer | 2014</b>
|
||||
|
||||
I pioneered an Augmented Reality (AR) software for the Brussels Egyptian Museum using Unity3D and C#, running seamlessly on Epson Moverio Smart Glasses.
|
||||
|
||||
<b>Geckosoft | Mobile Developer | 2012 - 2014</b>
|
||||
|
||||
My journey began at Geckosoft, where I collaborated on developing a Sudoku game using Xamarin, gaining foundational experience and honing best practices.
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 class="font-bold text-xl mt-8 mb-4"> 🚀 Crafting Innovation in Code: A Decade of Software Engineering Excellence 🌐<br/></h2>
|
||||
|
||||
Greetings! I am a highly skilled and motivated software engineer with over a decade of experience, dedicated to shaping the digital landscape through innovative solutions. My journey began at the University of Pisa, where I earned my BA in Computer Science, setting the stage for a career marked by continuous learning and hands-on expertise.
|
||||
|
||||
Educational Pursuits:
|
||||
|
||||
University of Pisa | BA Computer Science | 2020
|
||||
University of Valencia | BA Computer Science | 2020
|
||||
Algebra University of Zagreb | Winter School: Cybersecurity, Artificial Intelligence | 2020
|
||||
|
||||
|
||||
<h2 class="font-bold text-xl mt-8 mb-4">🚀 Current Endeavors: Steering the Technological Symphony<br/></h2>
|
||||
|
||||
ChiamarsiBomber | CTO | 2023 - Present
|
||||
|
||||
In my current role as the Chief Technology Officer at ChiamarsiBomber, I've elevated the IT branch to new heights, overseeing the development of a cutting-edge web platform for football infotainment. This endeavor entails handling the intricacies of embedding real-time data streams alongside static footballer data from diverse sources. My strategic leadership ensures that the service remains in high availability, even during peak periods, creating an immersive and seamless experience for users.
|
||||
|
||||
<h2 class="font-bold text-xl mt-8 mb-4">🛠️ Shaping Success: My Approach to Work<br/></h2>
|
||||
My work philosophy revolves around injecting fresh energy and strategic organization into existing teams, kickstarting new projects, or assembling teams from the ground up. Here's how I contribute:
|
||||
|
||||
<ul>
|
||||
<li>Agile Maestro: Proficient in agile methodologies, I orchestrate projects with a focus on adaptability, collaboration, and timely delivery. Whether it's scrum ceremonies or sprint planning, I bring agility to every aspect of the development process.</li>
|
||||
<li>Innovative Scaling: With a proven track record of scaling products, I've successfully led teams through the challenges of growth. My approach involves balancing scalability with a commitment to delivering high-quality, efficient solutions.</li>
|
||||
<li>Mentorship Maven: Passionate about fostering talent, I believe in creating an environment where team members thrive. I provide mentorship, foster collaboration, and encourage a culture of continuous learning.</li>
|
||||
<li>Architectural Artistry: As a clean coder, I take pride in designing consistent and scalable software architectures. I leverage my expertise to make informed architectural choices, ensuring that the technology foundation is robust and adaptable.</li>
|
||||
<li>Startup Catalyst: Having been a part of startups and initiatives from the ground up, I possess the insight needed to navigate the dynamic challenges of a fledgling project. I'm adept at streamlining processes, fostering creativity, and swiftly moving from ideation to implementation.</li>
|
||||
<li>Team Dynamo: Leading by example, I instill a sense of purpose and dedication in the teams I work with. I believe in the power of collaboration, open communication, and fostering a positive working environment.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
🌟 Joining Forces: Ready for the Next Chapter
|
||||
|
||||
If you're seeking a seasoned professional to join your existing team, breathe new life into ongoing projects, or spearhead the creation of a team from scratch, I bring a wealth of experience, a commitment to excellence, and a passion for building transformative solutions. Let's collaborate and turn your vision into a technological triumph! 🚀
|
||||
|
||||
<h2 class="font-bold text-xl mt-8 mb-4">The Sicilian Symphony:<br/></h2>
|
||||
|
||||
<p>In the picturesque tranquility of Sicily, where time seems to gently sway with the olive groves, I've found not just a home but a canvas for my professional and personal growth. Balancing a thriving career with the joys of family life, Sicily offers a unique blend of serenity, culinary delights, and a pace of life that allows me to savor each moment.
|
||||
|
||||
Let's continue this journey of innovation, where every line of code echoes the rich tapestry of experience and expertise. 🌟</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,18 +2,88 @@ import { Component } from '@angular/core';
|
|||
import {SectionComponent} from "../../section/section.component";
|
||||
import {PageComponent} from "../../page/page.component";
|
||||
import {FooterComponent} from "../../footer/footer.component";
|
||||
|
||||
import {RouterOutlet} from "@angular/router";
|
||||
import {NgForOf, NgIf} from "@angular/common";
|
||||
import {PortfolioItemCardComponent} from "./portfolio-item-card/portfolio-item-card.component";
|
||||
import {Job} from "../../models/job";
|
||||
@Component({
|
||||
selector: 'iov-portfolio-page',
|
||||
standalone: true,
|
||||
imports: [
|
||||
SectionComponent,
|
||||
PageComponent,
|
||||
FooterComponent
|
||||
FooterComponent,
|
||||
RouterOutlet,
|
||||
NgForOf,
|
||||
NgIf,
|
||||
PortfolioItemCardComponent
|
||||
],
|
||||
templateUrl: './portfolio.page.html',
|
||||
styleUrl: './portfolio.page.scss'
|
||||
})
|
||||
export class PortfolioPage {
|
||||
|
||||
expandedJob: number = -1;
|
||||
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.',
|
||||
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/',
|
||||
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/',
|
||||
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.',
|
||||
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/',
|
||||
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.',
|
||||
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/',
|
||||
image: 'assets/portfolio/csproject.png'
|
||||
},
|
||||
]
|
||||
|
||||
expand(index: number) {
|
||||
this.expandedJob = index;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue