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

Feat WIP responsive layout

Browse source
This commit is contained in:
Lorenzo Iovino 2024-01-10 05:10:45 +01:00
parent dcfcb09c16
commit 191719918a
13 changed files with 53 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/button-cta/button-cta.component.html
View file

@ -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>

2
src/app/card-cta/card-cta.component.html
View file

@ -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">

2
src/app/fish/fish.component.scss
View file

@ -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;

6
src/app/footer/footer.component.html
View file

@ -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">

6
src/app/footer/footer.component.scss
View file

@ -0,0 +1,6 @@
:host-context {
position: relative;
width: 100%;
display: block;
bottom: 0px;
}

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

@ -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>
<iov-ascii-photo [index]="1"
id="asciiPhoto"
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!
<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 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 sm:h-8 inline-block" alt="" height="30" width="30">
</a>
<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>

2
src/app/hero/hero.component.ts
View file

@ -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'

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

@ -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>-->

2
src/app/page/page.component.html
View file

@ -1,4 +1,4 @@
<div class="relative">
<div class="relative bg-white">
<div class="mx-auto pb-24">
<router-outlet></router-outlet>
</div>

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

@ -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">