Feat WIP responsive layout
This commit is contained in:
Lorenzo Iovino
parent
dcfcb09c16
commit
191719918a
13 changed files with 53 additions and 116 deletions
95
package-lock.json
generated
95
package-lock.json
generated
|
|
@ -10466,11 +10466,6 @@
|
|||
"integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
|
||||
"dev": true
|
||||
},
|
||||
"add-subtract-date": {
|
||||
"version": "1.0.15",
|
||||
"resolved": "https://registry.npmjs.org/add-subtract-date/-/add-subtract-date-1.0.15.tgz",
|
||||
"integrity": "sha512-MiL4wnMyM999meyCrSA3LME9uZ/b5ptSd0ACDVUoTfutFwvkMyIN7nG7gjrU56WEk5RlFLBghabcgdYwY8s+nQ=="
|
||||
},
|
||||
"adjust-sourcemap-loader": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
|
||||
|
|
@ -12081,11 +12076,6 @@
|
|||
"integrity": "sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==",
|
||||
"dev": true
|
||||
},
|
||||
"days": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/days/-/days-1.1.1.tgz",
|
||||
"integrity": "sha512-vzeIwVsEIyA35GH4+mPd4hjVDNI87wYANyZFs0BHjBr5kIBH5zEl7LfD6Wr4SFZca4D3CU9IH1w4DuZLlXzKRw=="
|
||||
},
|
||||
"debounce-promise": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
|
||||
|
|
@ -12430,15 +12420,6 @@
|
|||
"integrity": "sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==",
|
||||
"dev": true
|
||||
},
|
||||
"elly": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/elly/-/elly-1.1.11.tgz",
|
||||
"integrity": "sha512-WFKVcEKEOjdSOhNYFKWQoJDk0Sb0re6v0fIsGkePn97dmPpKM/YoOKRdYIb34T1R13KPRNzDBDmT/Flb/54NXg==",
|
||||
"requires": {
|
||||
"iterate-object": "^1.3.2",
|
||||
"sliced": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
|
|
@ -12999,11 +12980,6 @@
|
|||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"fillo": {
|
||||
"version": "1.0.14",
|
||||
"resolved": "https://registry.npmjs.org/fillo/-/fillo-1.0.14.tgz",
|
||||
"integrity": "sha512-XLFFqNMeODV7pEH70lDla0SdOOW2T34X+2VmtCLWC1TyhtTEvX5IddIwBqlZhVb1K8bOOB0EuOM00FMZ+Njmtg=="
|
||||
},
|
||||
"finalhandler": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
|
||||
|
|
@ -13093,17 +13069,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"formatoid": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/formatoid/-/formatoid-1.2.4.tgz",
|
||||
"integrity": "sha512-9wWHOPJvbIheSpiHGl0xaBwdszlzPaeh2KqHVexGQnKpO85xrMoKvuf6M3q0B4uC3I9lkXjH6+8ipQC8PQ/7Gw==",
|
||||
"requires": {
|
||||
"days": "^1.0.1",
|
||||
"fillo": "^1.0.0",
|
||||
"months": "^1.0.0",
|
||||
"parse-it": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"formdata-polyfill": {
|
||||
"version": "4.0.10",
|
||||
"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
|
||||
|
|
@ -13262,30 +13227,6 @@
|
|||
"resolve-pkg-maps": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"github-calendar": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/github-calendar/-/github-calendar-2.3.2.tgz",
|
||||
"integrity": "sha512-PZWDI4kcOG2vFCOUzLhUL5xA1Vu4ZF5qJ653CWyr/Q/8yLiTEDjNenhG7djlHoza9u/unnPtrhnHDiNLY9kTlQ==",
|
||||
"requires": {
|
||||
"add-subtract-date": "^1.0.15",
|
||||
"elly": "^1.1.11",
|
||||
"formatoid": "^1.2.4",
|
||||
"github-calendar-parser": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"github-calendar-legend": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/github-calendar-legend/-/github-calendar-legend-1.0.11.tgz",
|
||||
"integrity": "sha512-V7AkszKw2fMeU+g6W5dQ7vDGzJ3giSaukdOUEdUqhcHhQDVYcQf7c0Q3korbQzJsh+Wh3MqyPtN+ZSAuEnHP2A=="
|
||||
},
|
||||
"github-calendar-parser": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/github-calendar-parser/-/github-calendar-parser-1.2.2.tgz",
|
||||
"integrity": "sha512-lA47NHVu5lTH0kZf71W+NXhqr3hvsHLwMRqUxTNsopLDQNCQTAgyhzHwi5iJegq2cTTn4p1ZeqmHyt8RbbhPOw==",
|
||||
"requires": {
|
||||
"github-calendar-legend": "^1.0.11"
|
||||
}
|
||||
},
|
||||
"glob": {
|
||||
"version": "7.2.3",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
|
||||
|
|
@ -14276,11 +14217,6 @@
|
|||
"istanbul-lib-report": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"iterate-object": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/iterate-object/-/iterate-object-1.3.4.tgz",
|
||||
"integrity": "sha512-4dG1D1x/7g8PwHS9aK6QV5V94+ZvyP4+d19qDv43EzImmrndysIl4prmJ1hWWIGCqrZHyaHBm6BSEWHOLnpoNw=="
|
||||
},
|
||||
"jackspeak": {
|
||||
"version": "2.3.6",
|
||||
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
|
||||
|
|
@ -15178,11 +15114,6 @@
|
|||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
||||
"dev": true
|
||||
},
|
||||
"months": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/months/-/months-1.2.0.tgz",
|
||||
"integrity": "sha512-zFM7hUpziSYGk2DNObYGWgHdRRxAOgjl8CC1Rbl50p/q0rGDsREfk0nbxxmSIquVi/lEAuUY8nwbwkZ8biNCOQ=="
|
||||
},
|
||||
"mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
@ -15266,6 +15197,14 @@
|
|||
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
|
||||
"dev": true
|
||||
},
|
||||
"ng2-fittext": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/ng2-fittext/-/ng2-fittext-1.4.0.tgz",
|
||||
"integrity": "sha512-l6Vkq/3dRPXy5yJYmTBmHSWAFd7FCSxTP8iz+Jn+X5xmSaLoX0PTeI9Y4SQTa+K3tB28TrF7mXSdDKGaiutnFw==",
|
||||
"requires": {
|
||||
"tslib": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"nice-napi": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
|
||||
|
|
@ -15780,14 +15719,6 @@
|
|||
"integrity": "sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==",
|
||||
"dev": true
|
||||
},
|
||||
"parse-it": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/parse-it/-/parse-it-1.0.10.tgz",
|
||||
"integrity": "sha512-VAG4EuoNd2TT2wSRUuKyLEkZR3MhdWc+3UPp5CDQzqSt/FiniG+yJ5RXyJYiuzVAMEKL4d97gx6O3LR5jEB3uQ==",
|
||||
"requires": {
|
||||
"regex-escape": "^3.4.0"
|
||||
}
|
||||
},
|
||||
"parse-json": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
|
||||
|
|
@ -16388,11 +16319,6 @@
|
|||
"@babel/runtime": "^7.8.4"
|
||||
}
|
||||
},
|
||||
"regex-escape": {
|
||||
"version": "3.4.10",
|
||||
"resolved": "https://registry.npmjs.org/regex-escape/-/regex-escape-3.4.10.tgz",
|
||||
"integrity": "sha512-qEqf7uzW+iYcKNLMDFnMkghhQBnGdivT6KqVQyKsyjSWnoFyooXVnxrw9dtv3AFLnD6VBGXxtZGAQNFGFTnCqA=="
|
||||
},
|
||||
"regex-parser": {
|
||||
"version": "2.2.11",
|
||||
"resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
|
||||
|
|
@ -17120,11 +17046,6 @@
|
|||
"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
|
||||
"dev": true
|
||||
},
|
||||
"sliced": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
|
||||
"integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA=="
|
||||
},
|
||||
"smart-buffer": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"aws-cdk-lib": "^2.117.0",
|
||||
"constructs": "^10.3.0",
|
||||
"express": "^4.18.2",
|
||||
"ng2-fittext": "^1.4.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.2"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<a href="{{url}}" class="mr-2 text-lg px-12 py-4 rounded-full mt-4 font-bold
|
||||
<a href="{{url}}" class="mr-2 text-lg px-4 sm: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">
|
||||
<ng-content></ng-content>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="text-2xl font-bold text-center self-center">
|
||||
<ng-content select="[left]"></ng-content>
|
||||
</div>
|
||||
<div class="text-lg self-center">
|
||||
<div class="self-center">
|
||||
<ng-content select="[center]"></ng-content>
|
||||
</div>
|
||||
<div class="self-center">
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ svg.fish{
|
|||
width: 235px;
|
||||
height: 104px;
|
||||
left: -235px;
|
||||
margin-top: 8rem;
|
||||
position: absolute;
|
||||
opacity: 0.4;
|
||||
animation: swim 20s;
|
||||
-webkit-animation: swim 20s;
|
||||
animation-iteration-count: infinite;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="block bottom-0 bg-secondary w-full">
|
||||
<div class="bottom-0 min-h-[200px] bg-secondary w-full my-4 h-full grid grid-cols-1 content-end justify-end bg-slate-100 gap-8">
|
||||
<iov-fish></iov-fish>
|
||||
<iov-card [ctaUrl]="'mailto:thisloke@gmail.com'"
|
||||
[borderRounded]="false"
|
||||
class="mr-8 ml-8 relative -top-12">
|
||||
class="mr-8 ml-8 relative -top-12 hidden">
|
||||
<span left>
|
||||
<span class="text-accent"> Talk is cheap</span>
|
||||
</span>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
Let's Talk!
|
||||
</span>
|
||||
</iov-card>
|
||||
<div class="text-right text-xs text-white p-4 leading-tight">
|
||||
<div class="text-right text-xs text-white p-4 leading-none sm:leading-tight relative">
|
||||
<div class="">Made with Angular
|
||||
<a href="https://angular.io/">
|
||||
<img class="h-6 w-6 mx-1 inline-grid" ngSrc="/assets/angular.svg" height="16" width="16">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
:host-context {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
|
@ -1,33 +1,38 @@
|
|||
<div class="bg-secondary">
|
||||
<div class="relative px-6 pt-14 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl py-32 sm:py-48 lg:py-56">
|
||||
<div class="relative px-6 pt-0 lg:pt-14 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl py-16 pb-32 sm:py-48 lg:py-56">
|
||||
<div class="flex rounded-2xl text-sm leading-6 text-gray-600 border-l-8 border-primary hover:ring-gray-900/20 overflow-hidden bg-white max-h-[279px]">
|
||||
<iov-ascii-photo [index]="1"
|
||||
id="asciiPhoto"
|
||||
class="absolute text-[5px] rounded-x-2xl leading-none tracking-tighter overflow-hidden"></iov-ascii-photo>
|
||||
class="hidden sm:block absolute text-[5px] rounded-x-2xl leading-none tracking-tighter overflow-hidden"></iov-ascii-photo>
|
||||
<img ngSrc="/assets/photos/me.png"
|
||||
id="originalPhoto"
|
||||
class="h-[279px]"
|
||||
class="h-[279px] hidden sm:block "
|
||||
alt="" height="300" width="300">
|
||||
<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>
|
||||
<div class="self-center pt-6 sm:pt-0">
|
||||
<img ngSrc="/assets/photos/me.png"
|
||||
class="h-[120px] sm:hidden block float-left"
|
||||
alt="" height="120" width="120">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl sm:py-8 sm:top-8 mt-4 sm:mt-0 mb-2 sm:mb-0">Hey, I'm Lorenzo!</h1>
|
||||
<div class="">
|
||||
<h2 class="text-base leading-2 mr-4">
|
||||
<h2 class="text-sm mx-4 sm:mx-0 sm: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
|
||||
<div class="mt-4 mx-4 sm:mx-0 text-sm sm:text-base leading-2 mr-4">
|
||||
Explore more about me and feel free to reach out for any questions or collaborations via
|
||||
<a class="cursor-pointer underline text-primary hover:text-accent" href="mailto:thisloke@gmail.com">email</a>
|
||||
or on socials!
|
||||
<div class="flex justify-center sm:justify-end h-[60px] mr-0 sm:mr-4">
|
||||
<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">
|
||||
<img ngSrc="/assets/linkedin.svg" class="h-6 sm:h-8 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 class="mx-2 relative cursor-pointer" href="
|
||||
https://github.com/thisloke">
|
||||
<img ngSrc="/assets/github.svg" class="h-6 sm:h-8 inline-block" alt="" height="30" width="30">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {AsciiPhotoComponent} from "../ascii-photo/ascii-photo.component";
|
||||
import {AsyncPipe, NgClass, NgIf, NgOptimizedImage} from "@angular/common";
|
||||
import {Ng2FittextModule} from "ng2-fittext";
|
||||
|
||||
@Component({
|
||||
selector: 'iov-hero',
|
||||
|
|
@ -11,6 +12,7 @@ import {AsyncPipe, NgClass, NgIf, NgOptimizedImage} from "@angular/common";
|
|||
NgClass,
|
||||
AsyncPipe,
|
||||
NgOptimizedImage,
|
||||
Ng2FittextModule,
|
||||
],
|
||||
templateUrl: './hero.component.html',
|
||||
styleUrl: './hero.component.scss'
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
|
||||
<nav class="flex items-center flex-wrap bg-teal-500 p-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">
|
||||
<span class="font-semibold text-xl tracking-tight">
|
||||
<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'}}">
|
||||
class="block mt-0 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4 {{router.url == '/biography' ? 'text-white' : 'text-neutral'}}">
|
||||
Bio
|
||||
</a>
|
||||
</span>
|
||||
<!--<a href="portfolio" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
|
||||
Portfolio
|
||||
</a>-->
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="relative">
|
||||
<div class="relative bg-white">
|
||||
<div class="mx-auto pb-24">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<iov-section [title]="'About me'"
|
||||
[titleColor]="'light'"
|
||||
[backgroundImageUrl]="'/assets/cloud.JPG'">
|
||||
[backgroundImageUrl]="'/assets/cat.jpg'">
|
||||
<div class="mb-10">
|
||||
<h2 class="font-bold text-4xl mt-8 mb-4">Hello world!</h2>
|
||||
<p class="text-lg">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<body class="bg-secondary">
|
||||
<iov-root></iov-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue