diff --git a/README.md b/README.md index 3c8a100..ca45e67 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # yqni13 portfolio -$\texttt{\color{teal}{v2.5.5}}$ +$\texttt{\color{teal}{v2.6.7}}$

@@ -18,7 +18,7 @@ $\texttt{\color{teal}{v2.5.5}}$
-### TRY LIVE DEMO +### WEBPAGE
@@ -104,7 +104,7 @@ My portfolio comes with two theme settings: $\textsf{\color{gray}{Dark mode}}$ & |Firefox | Chrome | Opera | Edge | DuckGo | Brave | |Yes | Yes | Yes | Yes | Yes* | Yes | -* This browser has problems displaying certain animations. +*This browser has problems displaying certain animations.
@@ -129,14 +129,14 @@ Specified unit tests in xyz.component.spec.ts files or other tests are my last s ## Updates [list of all updates](src/docs/update_protocol.md) -### $\textsf{last\ update\ 2.5.5\ >>\ {\color{pink}2.6.5}}$ - -- $\textsf{\color{green}Change:}$ Added page scroll indicators (white arrow animation, left bottom) for the components 'about', 'cv' and 'portfolio'. -- $\textsf{\color{red}Patch:}$ Refactored code in terms of Google Guidelines HTML/CSS. -- $\textsf{\color{red}Patch:}$ Refactored code in terms of Google Guidelines Typescript. -- $\textsf{\color{red}Patch:}$ Refactored code in terms of Angular Best Practices. -- $\textsf{\color{red}Patch:}$ Refactored code to reuse user-data from parent in child component and reduce redundancy. -- $\textsf{\color{red}Bugfix:}$ Navigating to base url redirects to 'home' component and activates nav-menu item accordingly. [Before: Redirecting to 'home' component didn't set 'Home' nav-menu item active.] +### $\textsf{last\ update\ 2.6.5\ >>\ {\color{pink}2.6.7}}$ + +- $\textsf{\color{green}Change:}$ Added video to landingpage and removed single profile picture for gentle appearance. +- $\textsf{\color{green}Change:}$ Changed color of lightmode button to decrease multiple color influence in webpage color theme. +- $\textsf{\color{green}Change:}$ Increased information link icon sizes in footer. +- $\textsf{\color{green}Change:}$ Added portfolio card hover/touch indicator (logo coloured hand icon, left top). +- $\textsf{\color{teal}Addition:}$ New content added to 'Portfolio' component. +
diff --git a/src/app/app.component.html b/src/app/app.component.html index d1ab1c1..0627342 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -61,8 +61,6 @@
  • -
    @@ -70,18 +68,8 @@

    {{copyrightYear}}, {{OWNER}}
    v{{version}}

    • - - - + - diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 13755b5..031f3ac 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -19,7 +19,7 @@ export class AppComponent implements OnInit { private mobileNavExpanded: boolean; private collapseNavbarWidth: number; readonly OWNER: string; - // isAccepted = false; + constructor( private router: Router, @@ -31,7 +31,7 @@ export class AppComponent implements OnInit { } }) - this.version = '2.6.5'; + this.version = '2.6.7'; this.darkMode = ''; this.lightMode = ''; this.copyrightYear = new Date().getFullYear(); @@ -48,7 +48,6 @@ export class AppComponent implements OnInit { ngOnInit() { this.checkThemeCookie(); - // this.checkAlertCookie(); // TODO(yqni13): create service for custom alert this.setNavWidthDynamically(window.screen.width); this.setNavWidthDynamically(document.body.clientWidth); @@ -130,30 +129,5 @@ export class AppComponent implements OnInit { this.setLightMode(); } } - - // checkAlertCookie() { - // const alertCookie = localStorage.getItem("yqni13-alert"); - // switch(alertCookie) { - // case 'true': - // this.isAccepted = true; - // break; - // case 'false': - // this.isAccepted = false; - // break; - // default: - // this.isAccepted = false; - // } - // } - - // openAlertMsg() { - // this.isAccepted = false; - // } - - // closeAlertMsg() { - // this.isAccepted = true; - // localStorage.setItem('yqni13-alert', 'true'); - // } - - } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index e5899a0..3ccb0c6 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,19 +1,19 @@
    -
    -

    - Hi, I'm - {{(userData.firstname)}}! -
    - Frontend - -Developer -

    -

    - "When you take on a task, finding the best ways to achieve the desired result is always your responsibility." - Gilbert's Law -

    -
    -
    -
    - +
    + +
    +

    + Hi, I'm {{(userData.firstname)}}! +
    + Frontend + -Developer +

    +

    + "When you take on a task, finding the best ways to achieve the desired result is always your responsibility." - Gilbert's Law +

    diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index ba55404..df503a4 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,6 +1,3 @@ -$headercount: 6; -$quotecount: 22; - .home { height: 100vh; align-content: center; @@ -13,27 +10,39 @@ $quotecount: 22; background-color: transparent; } -.home::before { - background-image: url(../../assets/img/wallpaper3.png); - background-size: cover; - background-position-y: 20%; - opacity: var(--opacity-bg); - z-index: -1; - width: 100%; - height: 100%; - content: ''; - position: fixed; -} - .column { display: flex; flex-direction: column; } +.home-wrapper { + width: 100%; + display: flex; + justify-content: left; +} + +video { + filter: grayscale(var(--home-grayscale)); + width: 100%; + height: 100vh; + opacity: var(--opacity-bg); + object-fit: cover; +} + .introduction { + position: absolute; + top: 125px; + left: var(--nav-size); align-self: center; text-align: left; + animation: appear 3s ease-in-out; + + h1 span:not(.frontend) { + filter: brightness(var(--home-brightness)); + } + p { + filter: brightness(var(--home-brightness)); color: var(--header-color); } } @@ -44,29 +53,11 @@ $quotecount: 22; -webkit-text-fill-color: transparent; } -.profile-picture { - rotate: -5deg; - border-radius: 25px; - - img { - background-image: var(--home-img); - border-radius:30px; - border: solid var(--navbar-border) 2px; - } -} - -p, -h1, -.profile-picture { - transform-origin: left; - animation: appearance 1s linear; -} - -@keyframes appearance { - from { - transform: scaleX(0); - } - to { - transform: scaleX(1); +@keyframes appear { + 0% { + opacity: 0; + } + 100% { + opacity: 1; } } \ No newline at end of file diff --git a/src/app/shared/data/project-data.json b/src/app/shared/data/project-data.json index 093f1e5..bf02ae0 100644 --- a/src/app/shared/data/project-data.json +++ b/src/app/shared/data/project-data.json @@ -103,7 +103,7 @@ "Portfolio": { "type": "frontend", "title": "Portfolio", - "version": "2.6.5", + "version": "2.6.7", "keywords": "live demo | portfolio | angular framework | english | responsive | custom design | dark/light theme | animation | custom search filter | single page application | ESLint | CI/CD workflow", "technology": "Angular | RxJS | JSON", "cardScreenPath": "assets/img/web_portfolio.jpg", @@ -122,7 +122,7 @@ "ArtCreation": { "type": "frontend", "title": "Art-Gallery", - "version": "1.0.0-beta.3", + "version": "1.0.0-beta.4", "keywords": "live demo | angular 18 | customer order | responsive | custom design | dark/light theme | custom lazy loading | i18n | gallery | custom form | http interception | services | pipes | directives | nested routing", "technology": "Angular | RxJS | JSON | i18n | nodejs", "cardScreenPath": "assets/img/web_artcreation.jpg", diff --git a/src/assets/img/ink4.png b/src/assets/img/ink4.png deleted file mode 100644 index afeabb2..0000000 Binary files a/src/assets/img/ink4.png and /dev/null differ diff --git a/src/assets/img/wallpaper3.png b/src/assets/img/wallpaper3.png deleted file mode 100644 index 8907d2a..0000000 Binary files a/src/assets/img/wallpaper3.png and /dev/null differ diff --git a/src/assets/landingpage_long_compressed.mp4 b/src/assets/landingpage_long_compressed.mp4 new file mode 100644 index 0000000..5237bb1 Binary files /dev/null and b/src/assets/landingpage_long_compressed.mp4 differ diff --git a/src/assets/readme_img/readme_light_mode.png b/src/assets/readme_img/readme_light_mode.png index 027bc68..08c4670 100644 Binary files a/src/assets/readme_img/readme_light_mode.png and b/src/assets/readme_img/readme_light_mode.png differ diff --git a/src/assets/readme_img/readme_responsive_demonstration.png b/src/assets/readme_img/readme_responsive_demonstration.png index 3b3a42d..1102e75 100644 Binary files a/src/assets/readme_img/readme_responsive_demonstration.png and b/src/assets/readme_img/readme_responsive_demonstration.png differ diff --git a/src/docs/update_protocol.md b/src/docs/update_protocol.md index f7cd6bc..f05cf13 100644 --- a/src/docs/update_protocol.md +++ b/src/docs/update_protocol.md @@ -4,6 +4,14 @@
    +### 2024/09/22 - $\textsf{update\ 2.6.5\ >>\ {\color{pink}2.6.7}}$ + +- $\textsf{\color{green}Change:}$ Added video to landingpage and removed single profile picture for gentle appearance. +- $\textsf{\color{green}Change:}$ Changed color of lightmode button to decrease multiple color influence in webpage color theme. +- $\textsf{\color{green}Change:}$ Increased information link icon sizes in footer. +- $\textsf{\color{green}Change:}$ Added portfolio card hover/touch indicator (logo coloured hand icon, left top). +- $\textsf{\color{teal}Addition:}$ New content added to 'Portfolio' component. + ### 2024/07/14 - $\textsf{update\ 2.5.5\ >>\ {\color{pink}2.6.5}}$ - $\textsf{\color{green}Change:}$ Added page scroll indicators (white arrow animation, left bottom) for the components 'about', 'cv' and 'portfolio'. diff --git a/src/stylesheets/colors.scss b/src/stylesheets/colors.scss index 12271e0..dda1cdf 100644 --- a/src/stylesheets/colors.scss +++ b/src/stylesheets/colors.scss @@ -50,7 +50,9 @@ --signature-color: var(--rich-black); --github-color: var(--rich-black); --active-link: var(--lightmode-purple); - --opacity-bg: 0.45; + --opacity-bg: 0.75; + --home-brightness: 0.1; + --home-grayscale: 1; } [data-theme='dark'] { @@ -71,7 +73,9 @@ --signature-color: var(--signature-white); --github-color: var(--alice-blue); --active-link: var(--yqni13-gradient); - --opacity-bg: 0.25; + --opacity-bg: 0.35; + --home-brightness: 1; + --home-grayscale: 0; } diff --git a/src/stylesheets/media.scss b/src/stylesheets/media.scss index 7065894..0051aee 100644 --- a/src/stylesheets/media.scss +++ b/src/stylesheets/media.scss @@ -27,7 +27,7 @@ .home { .introduction { - max-width: 55%; + max-width: 45%; h1 { margin:0px 0px 12px 100px; } @@ -36,13 +36,6 @@ font-size: 24px; } } - .profile-picture { - img { - width: 400px; - height: auto; - margin-left: 50px; - } - } } .about { @@ -135,13 +128,6 @@ font-size: 22px; } } - .profile-picture { - img { - width: 350px; - height: auto; - margin-left: 50px; - } - } } .about { @@ -272,6 +258,7 @@ justify-content: center; .introduction { max-width: 75%; + top: 75px!important; padding-bottom: 50px; h1 { font-size: 40px; @@ -283,13 +270,6 @@ text-align: justify; } } - .profile-picture { - img { - width: 300px; - height: auto; - margin-left: 0; - } - } } .about { @@ -445,11 +425,10 @@ } .home { - &::before { - background-position-x:25%; - } .introduction { max-width: 100%; + top: 125px!important; + left: 0px!important; padding-bottom: 50px; h1 { font-size: 35px; @@ -566,12 +545,8 @@ @media screen and (width <= $phone-portrait-width) { .home { - .profile-picture { - img { - width: 200px; - height: auto; - margin-left: 0; - } + .introduction { + top: 100px!important; } }