Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve home #34

Merged
merged 14 commits into from
Jan 6, 2025
Prev Previous commit
Next Next commit
split title name into firstname and lastname & rocket anim:ation
theophane-girard committed Jan 1, 2024
commit 1148ad5b70a2a318436390d73a1db6bfba7f8f1d
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
grid-column-start: 2;
align-items: center;
justify-content: center;
h1 {
.name {
margin-bottom: 0;
}
}
Original file line number Diff line number Diff line change
@@ -15,12 +15,12 @@ import {SKILLS} from '../../data/tags.mock';
<img src="assets/logo.svg" alt="" id="logo" />
</div>
<div id="title" flex>
<h1 id="name">Hi, I'm Théophane Girard</h1>
<h1 id="firstname" class="name">Théophane</h1>&nbsp;<h1 id="lastname" class="name">Girard</h1>
</div>
<div id="skill-tag-list" flex>
@for (skill of skills; track skill) {
<cv-skill-chip [skill]="skill" />
<cv-skill-chip [skill]="skill" />
}
</div>
<div id="subtitle">
229 changes: 159 additions & 70 deletions src/app/shared/ui/components/clouds-devider/clouds-devider.component.ts
Original file line number Diff line number Diff line change
@@ -8,14 +8,18 @@ import { FlamesComponent } from "@shared/ui/components/flames/flames.component";
standalone: true,
selector: 'clouds-devider',
template: `
@for(cloud of clouds; track cloud; let index = $index) { @if (index % 2) {
<div class="cloud even" flip absolute [style.right]="cloud.right"></div>
} @else {
<div class="cloud odd" absolute [style.right]="cloud.right"></div>
} }
<div>
@for (cloud of clouds; track cloud; let index = $index) {
@if (index % 2) {
<div class="cloud even" flip absolute [style.right]="cloud.right"></div>
} @else {
<div class="cloud odd" absolute [style.right]="cloud.right"></div>
}
}
<div id="rocket" absolute>
<div id="cloud-piece-1" class="cloud-piece"></div>
<div id="cloud-piece-2" class="cloud-piece"></div>
<div id="cloud-piece-3" class="cloud-piece"></div>
<cv-flames />
<div></div>
</div>
`,
styles: `
@@ -26,41 +30,61 @@ import { FlamesComponent } from "@shared/ui/components/flames/flames.component";
$delay-animation-delay: .3s;
$cloud-animation: 4s linear infinite alternate;
$flame-animation: .5s ease-in infinite;
$rocket-animation-duration: 10s;
$cloud-piece-animation: $rocket-animation-duration linear infinite 1s;
$rocket-animation: $rocket-animation-duration ease-in infinite 1s;
$rocket-rotate-deg: 20deg;
cv-flames {
#rocket {
left: 65vw;
animation: rocketAnimation $rocket-animation;
width: 3em;
opacity: 0;
height: 5em;
}
.cloud-piece {
background: white;
position: absolute;
left: 70vw;
transform: rotate(-155deg);
left: 1em;
z-index: 1;
}
#cloud-piece-1 {
width: 1em;
height: 1em;
border-radius: 1em;
animation: cloudPiece1Animation $cloud-piece-animation;
}
#cloud-piece-2 {
width: 1em;
height: 1em;
border-radius: 1em;
animation: cloudPiece2Animation $cloud-piece-animation;
}
#cloud-piece-3 {
width: 1em;
height: 1em;
border-radius: 1em;
animation: cloudPiece3Animation $cloud-piece-animation;
}
cv-flames {
&:before {
content: "🚀";
left: -.3em;
font-size: 4em;
position: absolute;
transform: rotate(137deg);
top: 1.2em;
}
&:after {
content: "";
position: absolute;
transform: rotate(137deg);
top: 1.2em;
background: white;
// width
transform: rotate(-45deg);
}
::ng-deep {
.flames {
top: 16em;
left:0;
font-size: 6px;
transform: rotate(45deg)
}
}
// &:after {
// content: '';
// width: 2em;
// height: 2em;
// background: red;
// position: absolute;
// }
}
.cloud {
@@ -70,27 +94,29 @@ import { FlamesComponent } from "@shared/ui/components/flames/flames.component";
height: $base-cloud-height;
width: $base-cloud-width;
opacity: 0;
// ::after, ::before {
// background-color: #fff;
// content: '';
// border-radius: 100%;
// }
// ::before {
// position: absolute;
// background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, 0.07));
// left: calc($left-part-width / 10);
// top: - calc($left-part-width / 2);
// width: $left-part-width;
// height: $left-part-width;
// }
// ::after {
// position: absolute;
// background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.04));
// right: 1em;
// top: - calc($right-part-width / 2);
// width: $right-part-width;
// height: $right-part-width;
// }
z-index: 1;
&:after, &:before {
background-color: #fff;
content: '';
border-radius: 100%;
}
&:before {
position: absolute;
background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, 0.07));
left: calc($left-part-width / 10);
top: - calc($left-part-width / 2);
width: $left-part-width;
height: $left-part-width;
}
&:after {
position: absolute;
background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.04));
right: 1em;
top: - calc($right-part-width / 2);
width: $right-part-width;
height: $right-part-width;
}
}
.even {
@@ -100,27 +126,6 @@ import { FlamesComponent } from "@shared/ui/components/flames/flames.component";
animation: oddCloudAnimation $cloud-animation $delay-animation-delay, cloudEnterAnimation 0.3s ease-in-out $delay-animation-delay;
}
.cloud:after, .cloud:before {
background-color: #fff;
content: '';
border-radius: 100%;
}
.cloud:before {
position: absolute;
background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, 0.07));
left: calc($left-part-width / 10);
top: - calc($left-part-width / 2);
width: $left-part-width;
height: $left-part-width;
}
.cloud:after {
position: absolute;
background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.04));
right: 1em;
top: - calc($right-part-width / 2);
width: $right-part-width;
height: $right-part-width;
}
@keyframes evenCloudAnimation {
0% {
opacity: 1;
@@ -168,6 +173,90 @@ import { FlamesComponent } from "@shared/ui/components/flames/flames.component";
transform: scale(.1) translateY(1em) translateX(1em);
}
}
@keyframes cloudPiece1Animation {
20%, 30%, 100% {
transform: translateX(2em) translateY(-3em);
}
0% {
opacity: 1;
transform: translateX(0) translateY(0);
}
5% {
opacity: 1;
transform: translateX(.5em) translateY(-1.5em);
}
10% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes cloudPiece2Animation {
20%, 30%, 100% {
transform: translateX(-2em) translateY(-3em);
}
0% {
opacity: 1;
transform: translateX(0) translateY(0);
}
5% {
opacity: 1;
transform: translateX(-.5em) translateY(-1.5em);
}
10% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes cloudPiece3Animation {
20%, 30%, 100% {
transform: translateX(1em) translateY(-3em);
}
0% {
opacity: 1;
transform: translateX(0) translateY(0);
}
5% {
opacity: 1;
transform: translateX(.5em) translateY(-1.5em);
}
10% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rocketAnimation {
0%, 10%, 50% {
opacity: 1;
}
0% {
transform: rotate($rocket-rotate-deg) translateY(-.5em);
}
50% {
transform: rotate($rocket-rotate-deg) translateX(.5em) translateY(-60em);
}
51% {
opacity: 0;
}
100% {
opacity: 0;
}
}
`,
imports: [AbsoluteDirective, FlipDirective, FlamesComponent],
})