Golf
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
index 7b0d44d..0bed86b 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/about/about.component.scss
@@ -13,54 +13,60 @@ h2 {
margin-top: 100px;
}
-.wrapper_about_profile {
+.wrapper-about-profile {
margin: 0px 100px;
display: flex;
}
-#about_first_info {
+.about-first-info {
width: 30%;
float: left;
order: 1;
+
+ text-align: center;
+ text-align: -webkit-center;
+ text-align: -moz-center;
+
+ .profile-img {
+ width: 85%;
+ max-width: 300px;
+ height: auto;
+ border-radius: 20px;
+ }
}
-#about_second_info {
+.about-second-info {
width: 40%;
order: 2;
+
+ p {
+ text-align: justify;
+ font-size: 16px;
+ margin-left: 50px;
+ opacity: 0.7;
+ }
}
-#about_third_info {
+.about-third-info {
width: 30%;
order: 3;
}
-#about_second_info p {
- text-align: justify;
- font-size: 16px;
- margin-left: 50px;
- opacity: 0.7;
-}
-
-#about_second_info h5,
-#about_third_info h5 {
+.about-second-info h5,
+.about-third-info h5 {
margin: 0px 0px 25px 50px;
}
-.profile_picture {
- text-align: center;
-}
-
-#signature_img {
- // TODO: first vers only for 1440px width!!
- // width: 200px;
+.signature-img {
position: absolute;
top: 85%;
left: 30%;
filter: var(--signature-color);
}
-.wrapper_img {
+.wrapper-img {
position: relative;
+ max-width: 330px;
&:before {
content: '';
@@ -75,73 +81,45 @@ h2 {
}
}
-.profile_picture img {
- width: 85%;
- max-width: 330px;
- height: auto;
- border-radius: 20px;
-}
-
-#profile_img {
+.profile-img {
background-image: var(--about-imgbg);
}
-#info_form,
-.download_button {
+.info-form,
+.btn-about {
text-align: left;
margin-left: 50px;
font-size: 18px;
}
-#info_form label {
- color: var(--header-color);
- font-weight: bold;
- font-size: 20px;
-}
-
-#info_form input {
- color: var(--text-color);
- opacity: 0.7;
- padding-left: 10px;
- border: none;
- background-color: transparent;
- font-size: 16px;
- font-family: TimesNewRoman;
-}
+.info-form {
+ padding-bottom: 25px;
+ label {
+ color: var(--header-color);
+ font-weight: bold;
+ font-size: 20px;
+ }
-#info_form div {
- padding: 5px 0px;
- width: max-content;
-}
+ input {
+ color: var(--text-color);
+ opacity: 0.7;
+ padding-left: 10px;
+ border: none;
+ background-color: transparent;
+ font-size: 16px;
+ font-family: TimesNewRoman;
+ }
-.download_button {
- margin-top: 25px;
+ div {
+ padding: 5px 0px;
+ width: max-content;
+ }
}
-.download_button a {
- padding: 10px 25px;
- border: solid var(--button-color) 3px;
- text-decoration: none;
- background: transparent;
- color: var(--button-color);
- border-color: var(--button-color);
- border-style: outset;
- border-radius: 10px;
- font-weight: bold;
- cursor: pointer;
- letter-spacing: 1px;
-}
-.download_button a:hover {
- background-color: var(--button-color);
- color: var(--alice-blue);
- opacity: 0.6;
- border: solid var(--button-color) 1px;
- border-style: inset;
-}
-.about_service,
-.about_funfacts {
+.about-service,
+.about-funfacts {
h5 {
text-align: center;
margin-bottom: 50px;
@@ -151,16 +129,16 @@ h2 {
margin: 100px 100px 25px 100px;
}
-.column_service h6,
-.column_funfacts h6 {
+.column-service h6,
+.column-funfacts h6 {
text-transform: uppercase;
font-size:20px;
color: var(--header-color);
margin:10px 0px 20px 0px;
}
-.about_service,
-.about_funfacts {
+.about-service,
+.about-funfacts {
p {
width: 75%;
font-size: 16px;
@@ -169,26 +147,26 @@ h2 {
}
}
-.column_service {
+.column-service {
width: 33.33%;
display: inline-table;
text-align: -webkit-center;
}
-.column_service i,
-.column_funfacts i {
+.column-service i,
+.column-funfacts i {
background-image: var(--yqni13-gradient);
width:50px;
height:50px;
}
-.column_service p {
+.column-service p {
margin-left: 0px;
max-width: 60%;
}
-.column_funfacts {
+.column-funfacts {
width: 25%;
display: inline-table;
text-align: -webkit-center;
-}
\ No newline at end of file
+}
diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
index 9dbaef2..bccfbe8 100644
--- a/src/app/about/about.component.ts
+++ b/src/app/about/about.component.ts
@@ -1,20 +1,35 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ScrollService } from '../shared/service/scroll-window.service';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrl: './about.component.scss'
})
-export class AboutComponent implements OnInit{
+export class AboutComponent implements OnInit, AfterViewInit, OnDestroy {
- public user_age = 0;
+ protected userAge: number;
+ protected isBottomScrolled: boolean;
- constructor() {
- // comment to avoid triggering eslint
+ constructor(private scrollService: ScrollService, private elementRef: ElementRef) {
+ this.userAge = 0;
+ this.isBottomScrolled = false;
}
-
+
ngOnInit() {
- this.user_age = this.getAge(new Date("1993/06/03"));
+ this.userAge = this.getAge(new Date("1993/06/03"));
+ }
+
+ ngAfterViewInit() {
+ const scrollMaxHeight = this.scrollService.getScrollMaxHeight();
+ window.onscroll = () => {
+ if (Math.ceil(document.documentElement.scrollTop) >= scrollMaxHeight ||
+ Math.ceil(document.body.scrollTop) >= scrollMaxHeight) {
+ this.isBottomScrolled = true;
+ } else {
+ this.isBottomScrolled = false;
+ }
+ };
}
getAge(birthday: Date) {
@@ -22,9 +37,13 @@ export class AboutComponent implements OnInit{
let thisYear = 0;
if (today.getMonth() < birthday.getMonth()) {
thisYear = 1;
- } else if ((today.getMonth() == birthday.getMonth()) && today.getDate() < birthday.getDate()) {
+ } else if ((today.getMonth() === birthday.getMonth()) && today.getDate() < birthday.getDate()) {
thisYear = 1;
}
return today.getFullYear() - birthday.getFullYear() - thisYear;
-}
+ }
+
+ ngOnDestroy() {
+ this.elementRef.nativeElement.remove();
+ }
}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 8022e88..e9473b9 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -8,8 +8,8 @@ import { PortfolioComponent } from './portfolio/portfolio.component';
const routes: Routes = [
{
path: '',
- component: HomeComponent,
- title: 'Home'
+ redirectTo: '/home',
+ pathMatch: 'full'
},
{
path: 'home',
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 283444d..68219f2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,44 +1,74 @@
-
-
-
+
-
+
- Home
+ Home
- About
+ About
- CV
+ CV
- Portfolio
+ Portfolio
-
-
+
+
+
+
-
+
-
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 64646c1..eee72b4 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -51,11 +51,12 @@ span:hover {
color: var(--navbar-text);
}
-#nav-darkmode {
- color: var(--darkmode6-grey2);
+.nav-darkmode {
+ color: var(--darktext-grey);
+ padding-left: 5px;
}
-#nav-lightmode {
+.nav-lightmode {
color: var(--tangerine-yellow);
}
@@ -67,7 +68,7 @@ ul>:last-child {
li:nth-child(2) {
cursor: default!important;
- #nav-logo {
+ .nav-logo {
cursor: pointer;
}
}
@@ -92,30 +93,26 @@ li:nth-child(2) {
display: none;
}
-.link_icons i {
+.link-icons i {
color: var(--navbar-content);
width: 20px;
height: 20px;
margin: 5px 8.5px;
}
-.link_icons img {
+.link-icons img {
width: 20px;
height: 20px;
color: var(--navbar-content);
margin: 5px 8.5px;
}
-.link_icons i:hover,
-.link_icons img:hover {
+.link-icons i:hover,
+.link-icons img:hover {
opacity: 0.4;
}
-#nav-darkmode {
- padding-left: 5px;
-}
-
-#nav-copyright {
+.nav-copyright {
width:12px;
height: 12px;
color: var(--navbar-content);
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 3ada027..184f8d6 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -25,7 +25,7 @@ describe('AppComponent', () => {
it(`should have as owner 'Lukas Varga'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
- expect(app.owner).toEqual('Lukas Varga');
+ expect(app.OWNER).toEqual('Lukas Varga');
});
it('should render owner name', () => {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2c9f207..13755b5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import _ from 'underscore';
+import { UserDataModel } from './shared/interface/userData';
+import { SharedDataService } from './shared/service/shared-data.service';
@Component({
selector: 'app-root',
@@ -9,27 +11,44 @@ import _ from 'underscore';
})
export class AppComponent implements OnInit {
- public version = '2.5.5';
- public copyrightYear: number = new Date().getFullYear();
- public setDark = "";
- public setLight = "";
- // public isAccepted = false;
+ protected version: string;
+ protected copyrightYear: number;
+ protected darkMode: string;
+ protected lightMode: string;
+ protected author: UserDataModel;
+ private mobileNavExpanded: boolean;
+ private collapseNavbarWidth: number;
+ readonly OWNER: string;
+ // isAccepted = false;
- private mobileNavExpended = false;
- private collapseNavbarWidth = 768;
- owner: string;
-
- constructor(private router: Router) {
+ constructor(
+ private router: Router,
+ private sharedDataService: SharedDataService
+ ) {
router.events.subscribe(e => {
- if(e instanceof NavigationStart)
- window.scrollTo(0,0)
+ if(e instanceof NavigationStart) {
+ window.scrollTo(0,0);
+ }
})
- this.owner = 'Lukas Varga';
+
+ this.version = '2.6.5';
+ this.darkMode = '';
+ this.lightMode = '';
+ this.copyrightYear = new Date().getFullYear();
+ this.author = {
+ firstname: 'Lukas',
+ lastname: 'Varga',
+ alias: 'yqni13'
+ };
+ this.OWNER = `${this.author.firstname} ${this.author.lastname}`;
+ this.mobileNavExpanded = false;
+ this.collapseNavbarWidth = 768;
+
}
ngOnInit() {
this.checkThemeCookie();
- // this.checkAlertCookie(); // TODO: disabled unless hotfix necessary
+ // this.checkAlertCookie(); // TODO(yqni13): create service for custom alert
this.setNavWidthDynamically(window.screen.width);
this.setNavWidthDynamically(document.body.clientWidth);
@@ -45,25 +64,30 @@ export class AppComponent implements OnInit {
this.setNavWidthDynamically(document.body.clientWidth);
}, 250)
window.addEventListener("resize", clientWidthRequestSlowedDown, false);
+
+ this.shareDataWithHomeComp();
+ }
+
+ shareDataWithHomeComp() {
+ this.sharedDataService.setSharedData(this.author);
}
setDarkMode() {
- this.setDark = "setVisible";
- this.setLight = "setHidden";
- localStorage.setItem("theme", "dark");
+ this.darkMode = 'setVisible';
+ this.lightMode = 'setHidden';
+ localStorage.setItem("theme", 'dark');
document.body.setAttribute("data-theme", 'dark');
}
setLightMode() {
- this.setDark = "setHidden";
- this.setLight = "setVisible";
- localStorage.setItem("theme", "light");
+ this.darkMode = 'setHidden';
+ this.lightMode = 'setVisible';
+ localStorage.setItem("theme", 'light');
document.body.setAttribute("data-theme", 'light');
}
setNavWidthDynamically(width: number): void {
// sets data attribute for body and in media.scss style settings are applied
-
if(width > this.collapseNavbarWidth) {
document.body.setAttribute("data-nav", 'navDesktop');
} else {
@@ -73,22 +97,28 @@ export class AppComponent implements OnInit {
expandNavMobile(closeAfterRouting = false): void {
const screenWidth = window.screen.width;
- if(screenWidth <= this.collapseNavbarWidth && closeAfterRouting) this.mobileNavExpended = true;
- if(screenWidth > this.collapseNavbarWidth && !closeAfterRouting) return;
+
+ if(screenWidth <= this.collapseNavbarWidth && closeAfterRouting) {
+ this.mobileNavExpanded = true;
+ }
+
+ if(screenWidth > this.collapseNavbarWidth && !closeAfterRouting) {
+ return;
+ }
if(screenWidth <= this.collapseNavbarWidth) {
- if(this.mobileNavExpended) {
+ if(this.mobileNavExpanded) {
document.body.setAttribute("data-nav", 'navMobileCollapsed')
- this.mobileNavExpended = false;
+ this.mobileNavExpanded = false;
} else {
- document.body.setAttribute("data-nav", 'navMobileExtended')
- this.mobileNavExpended = true;
+ document.body.setAttribute("data-nav", 'navMobileExpanded')
+ this.mobileNavExpanded = true;
}
}
}
checkThemeCookie() {
- const theme = localStorage.getItem("theme");
+ const theme = localStorage.getItem('theme');
if(!theme) {
this.setDarkMode();
return;
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 39cc749..b8c5ed0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,10 +6,10 @@ import { MatToolbarModule } from '@angular/material/toolbar';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
-import { AboutComponent } from './about/about.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { CvComponent } from './cv/cv.component';
-import { TemplateModule } from './templates/template.module';
+import { SharedModule } from './shared/shared.module';
+import { AboutComponent } from './about/about.component';
@NgModule({
@@ -18,14 +18,14 @@ import { TemplateModule } from './templates/template.module';
HomeComponent,
AboutComponent,
CvComponent,
- PortfolioComponent
+ PortfolioComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
- TemplateModule,
+ SharedModule,
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/common/directives/ng-var.directives.ts b/src/app/common/directives/ng-var.directives.ts
new file mode 100644
index 0000000..91d59ba
--- /dev/null
+++ b/src/app/common/directives/ng-var.directives.ts
@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
+
+@Directive({
+ selector: '[yqni13Var]',
+})
+export class VarDirective {
+ @Input()
+ set yqni13Var(context: unknown) {
+ this.context.$implicit = this.context.yqni13Var = context;
+
+ if (!this.hasView) {
+ this.vcRef.createEmbeddedView(this.templateRef, this.context);
+ this.hasView = true;
+ }
+ }
+
+ private context: {
+ $implicit: unknown;
+ yqni13Var: unknown;
+ } = {
+ $implicit: null,
+ yqni13Var: null,
+ };
+
+ private hasView = false;
+
+ constructor(
+ private templateRef: TemplateRef
,
+ private vcRef: ViewContainerRef
+ ) {}
+}
\ No newline at end of file
diff --git a/src/app/common/yqni13-common.modules.ts b/src/app/common/yqni13-common.modules.ts
new file mode 100644
index 0000000..693b45b
--- /dev/null
+++ b/src/app/common/yqni13-common.modules.ts
@@ -0,0 +1,15 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { VarDirective } from "./directives/ng-var.directives";
+
+@NgModule({
+ imports: [CommonModule],
+ providers: [],
+ declarations: [
+ VarDirective
+ ],
+ exports: [
+ VarDirective
+ ]
+})
+export class Yqni13CommonModule {}
\ No newline at end of file
diff --git a/src/app/cv/cv.component.html b/src/app/cv/cv.component.html
index 939be3a..ebba6a7 100644
--- a/src/app/cv/cv.component.html
+++ b/src/app/cv/cv.component.html
@@ -1,65 +1,203 @@
CV.
-
+
+
-
-
+
+
+
Experience
Evolit Consulting GmbH, Vienna
07/2022 - 12/2023
- Fullstack-Development | Testing
+ Fullstack-Development
-
+
Education
UAS Technikum Vienna
- 2020 - 2023
+ 09/2020 - 06/2023
Computer Science, BSc
-
-
+
Technical skills
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
First Experiences
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
diff --git a/src/app/cv/cv.component.scss b/src/app/cv/cv.component.scss
index 470614a..945491c 100644
--- a/src/app/cv/cv.component.scss
+++ b/src/app/cv/cv.component.scss
@@ -8,31 +8,8 @@ h2 {
}
}
-.cv_download {
- text-align: center;
- margin: 50px 100px;
- text-transform: uppercase;
-}
-
-.cv_download a {
- padding: 10px 25px;
- text-decoration: none;
- background: transparent;
- color: var(--yqni13-pink);
- border: solid var(--yqni13-pink) 3px;
- border-style: outset;
- border-radius: 10px;
- font-weight: bold;
- cursor: pointer;
- letter-spacing: 1px;
-}
-
-.cv_download a:hover {
- background-color: var(--yqni13-pink);
- color: var(--alice-blue);
- opacity: 0.6;
- border: solid var(--yqni13-pink) 1px;
- border-style: inset;
+.btn-cv {
+ margin-top: 50px;
}
.block {
@@ -45,23 +22,24 @@ h2 {
}
}
-h4, p {
+h4,
+p {
padding:0;
margin:0;
}
-.wrapper_cv h4 {
+.wrapper-cv h4 {
margin-bottom: 25px;
}
-.wrapper_cv {
+.wrapper-cv {
display: grid;
grid-template-columns: 50% 50%;
- margin-left: 100px;
- margin-right: 100px;
+ margin: 0 100px;
+ padding-top: 50px;
}
-.left_exp {
+.experience-list {
margin-left: 50px;
text-align: left;
h4 {
@@ -76,7 +54,7 @@ h4, p {
}
}
-.right_edu {
+.education-list {
margin-right: 50px;
text-align: right;
h4 {
@@ -91,39 +69,39 @@ h4, p {
}
}
-.wrapper_techstack {
+.wrapper-techstack {
margin: 0px 100px;
}
-.wrapper_techstack h4 {
+.wrapper-techstack h4 {
margin-top: 100px;
text-align: center;
}
-.wrapper_ul {
+.techstack-list {
text-align: -webkit-center;
}
-.wrapper_ul ul {
+.techstack-list ul {
padding-inline-start: 0;
}
-.wrapper_ul li {
+.techstack-list li {
display: inline;
}
-.wrapper_ul i {
+.techstack-list i {
width: 60px;
height: 60px;
margin: 25px 25px;
}
-#horizontal {
+.horizontal {
height: 60px;
width:90px!important;
}
-#black_fill {
+.black-fill {
background-color: var(--github-color);
}
diff --git a/src/app/cv/cv.component.ts b/src/app/cv/cv.component.ts
index 956605d..6e98331 100644
--- a/src/app/cv/cv.component.ts
+++ b/src/app/cv/cv.component.ts
@@ -1,10 +1,32 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy } from '@angular/core';
+import { ScrollService } from '../shared/service/scroll-window.service';
@Component({
selector: 'app-cv',
templateUrl: './cv.component.html',
styleUrl: './cv.component.scss'
})
-export class CvComponent {
+export class CvComponent implements AfterViewInit, OnDestroy {
+ protected isBottomScrolled: boolean;
+
+ constructor(private scrollService: ScrollService, private elementRef: ElementRef) {
+ this.isBottomScrolled = false;
+ }
+
+ ngAfterViewInit() {
+ const scrollMaxHeight = this.scrollService.getScrollMaxHeight();
+ window.onscroll = () => {
+ if (Math.ceil(document.documentElement.scrollTop) >= scrollMaxHeight ||
+ Math.ceil(document.body.scrollTop) >= scrollMaxHeight) {
+ this.isBottomScrolled = true;
+ } else {
+ this.isBottomScrolled = false;
+ }
+ };
+ }
+
+ ngOnDestroy() {
+ this.elementRef.nativeElement.remove();
+ }
}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 3f2d523..ab275ec 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,19 +1,41 @@
-