-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
29 changed files
with
1,418 additions
and
29 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <div class="card"> | ||
| <div class="card-content"> | ||
| <!--TODO: cut off text properly--> | ||
| <div #text> | ||
| <span class="heading" [innerHTML]="content.heading"></span> | ||
| <span class="text" [innerHTML]="content.text"></span> | ||
| <ng-content></ng-content> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="about-control-container"> | ||
| <div class="title-card"> | ||
| <div class="icon-row"> | ||
| <div class="icon-container"><span class="pi pi-info-circle icon"></span></div> | ||
| </div> | ||
| <div class="title" [innerHTML]="content.title"></div> | ||
| </div> | ||
|
|
||
| <div class="show-more-button" (click)="toggleExtension()"> | ||
| <div class="show-more"> | ||
| <span *ngIf="!extended; else showLess">{{ langPack.showMore }}</span> | ||
| <ng-template #showLess>{{ langPack.showLess }}</ng-template> | ||
| </div> | ||
| <span class="icon pi pi-arrow-down" [class.extended]="extended"></span> | ||
| </div> | ||
| </div> |
116 changes: 116 additions & 0 deletions
116
src/app/components/about-card/about-card.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| :host { | ||
| display: flex; | ||
| flex-direction: var(--flex-row); | ||
| gap: 2rem; | ||
| transition: max-height 0.8s cubic-bezier(0.9, 0, 0.9, 1.0); | ||
| } | ||
|
|
||
| .about-container { | ||
| max-height: 20rem; | ||
| display: flex; | ||
| gap: 2rem; | ||
| } | ||
|
|
||
| .card { | ||
| width: auto; | ||
| min-width: 40rem; | ||
| border-radius: 1.5rem; | ||
| padding: 2rem; | ||
| background: #262626; | ||
|
|
||
| .card-content { | ||
| color: white; | ||
| height: 100%; | ||
| font-family: 'Inter', sans-serif; | ||
| font-weight: 200; | ||
| text-align: justify; | ||
| font-size: 1.4rem; | ||
| line-height: 1.8rem; | ||
| overflow: hidden | ||
| } | ||
| } | ||
|
|
||
| .about-control-container { | ||
| min-width: 16rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| gap: 2rem | ||
| } | ||
|
|
||
| .title-card { | ||
| border-radius: 1.5rem; | ||
| padding: 2rem; | ||
| background: #262626; | ||
|
|
||
| .icon-row { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| flex-direction: var(--flex-row); | ||
| margin-bottom: 3rem; | ||
|
|
||
| .icon-container { | ||
| background: black; | ||
| height: 3rem; | ||
| width: 3rem; | ||
| border-radius: 50%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| .icon { | ||
| color: white; | ||
| font-size: 1.5rem; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .title { | ||
| color: white; | ||
| font-family: 'Inter', sans-serif; | ||
| font-weight: 400; | ||
| letter-spacing: 0.1rem; | ||
| font-size: 1.9rem; | ||
| text-align: var(--title-align); | ||
| } | ||
| } | ||
|
|
||
| .heading { | ||
| font-weight: 200; | ||
| font-size: 2rem; | ||
| line-height: 2rem; | ||
| letter-spacing: 0.1rem; | ||
| background: -webkit-linear-gradient(left, #a445b2, #fa4299); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| } | ||
|
|
||
| .show-more-button { | ||
| border-radius: 1.5rem; | ||
| padding: 2rem; | ||
| background: #262626; | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| flex-direction: var(--flex-row); | ||
| gap: .5rem; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| cursor: pointer; | ||
|
|
||
| .show-more { | ||
| color: white; | ||
| font-family: 'Inter', sans-serif; | ||
| font-weight: 400; | ||
| letter-spacing: 0.1rem; | ||
| font-size: 1.3rem | ||
| } | ||
|
|
||
| .icon { | ||
| color: white; | ||
| font-size: 1.3rem; | ||
| transition: transform 1s cubic-bezier(0.6, 0, 0.6, 1.0); | ||
| &.extended { | ||
| transform: rotateX(180deg); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import {Component, ElementRef, HostBinding, Input, ViewChild} from '@angular/core'; | ||
| import {NgIf} from "@angular/common"; | ||
| import {AboutCard, LanguagePack} from "../../data/model"; | ||
| import {ScrollTrigger} from "gsap/ScrollTrigger"; | ||
|
|
||
| @Component({ | ||
| selector: 'about-card', | ||
| standalone: true, | ||
| imports: [ | ||
| NgIf | ||
| ], | ||
| templateUrl: './about-card.component.html', | ||
| styleUrl: './about-card.component.scss' | ||
| }) | ||
| export class AboutCardComponent { | ||
|
|
||
| @Input({required: true}) content: AboutCard; | ||
| @Input({required: true}) langPack: LanguagePack; | ||
|
|
||
| @ViewChild("text", {read: ElementRef}) textElement: ElementRef; | ||
|
|
||
| @HostBinding("style.max-height") maxHeight: string = "22rem"; | ||
|
|
||
| extended: boolean = false; | ||
|
|
||
| toggleExtension() { | ||
| this.extended = !this.extended; | ||
| if (this.extended) { | ||
| const height = this.textElement.nativeElement.offsetHeight; | ||
| this.maxHeight = `calc(4rem + ${height}px + 1px)`; | ||
| } else { | ||
| this.maxHeight = "22rem"; | ||
| } | ||
| // smoothly reset GSAP markers | ||
| for (let i = 1; i <= 40; i++) { | ||
| setTimeout(() => ScrollTrigger.refresh(), i * 20); | ||
| } | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <div class="container"> | ||
| <div #glow class="glow"></div> | ||
| <div *ngIf="iconRef" class="icon"> | ||
| <img [src]="iconRef" alt="" height="32"> | ||
| </div> | ||
| <span *ngIf="iconClass" [class]="'icon pi ' + iconClass" [style]="{'color': iconColor}"></span> | ||
| <span class="text"><ng-content></ng-content></span> | ||
| <a *ngIf="link" [href]="link" target="_blank"></a> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| :host { | ||
| min-width: 2.25rem; | ||
| height: 2.75rem; | ||
| line-height: 2.75rem; | ||
| border-radius: 1rem; | ||
| text-align: center; | ||
| padding: .5rem .5rem; | ||
| color: black; | ||
|
|
||
| display: inline-block; | ||
| position: relative; | ||
|
|
||
| transition-duration: 300ms; | ||
| transition-property: transform, box-shadow; | ||
| transition-timing-function: ease-out; | ||
|
|
||
| &:hover { | ||
| transition-duration: 150ms; | ||
| box-shadow: 0 5px 20px 5px #00000044; | ||
| } | ||
|
|
||
| a { | ||
| border-radius: 1rem; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| left: 0; | ||
| top: 0; | ||
| } | ||
| } | ||
|
|
||
| .glow { | ||
| border-radius: 1rem; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| left: 0; | ||
| top: 0; | ||
|
|
||
| background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f); | ||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| gap: 0.3rem; | ||
| align-items: center; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .icon { | ||
| max-height: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| //margin-right: 0.3rem; | ||
| //max-height: 2.25rem; | ||
| //height: 100%; | ||
| //width: auto; | ||
| font-size: 2rem; | ||
|
|
||
| object { | ||
| //height: 100%; | ||
| //width: auto; | ||
| } | ||
|
|
||
| //img { | ||
| // height: 100%; | ||
| //} | ||
| } | ||
|
|
||
| .text { | ||
| font-weight: 700; | ||
| font-size: 1.25rem; | ||
| transform: translateY(2px); | ||
| } |
Oops, something went wrong.