Merge pull request #44 from yqni13/update-vX.Y.Z

Update_v2.6.7
yqni13 · Sep 22, 2024 · 54bd3a3 · 54bd3a3
2 parents c166714 + cab4657
commit 54bd3a3
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 141 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # yqni13 portfolio
-$\texttt{\color{teal}{v2.5.5}}$
+$\texttt{\color{teal}{v2.6.7}}$
 
 
 <br><br>
@@ -18,7 +18,7 @@ $\texttt{\color{teal}{v2.5.5}}$
 </div>
 <br>
 
-### <a href="https://yqni13.github.io/portfolio/home">TRY LIVE DEMO</a>
+### <a href="https://yqni13.com">WEBPAGE</a>
 
 <br>
 
@@ -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.
 
 </center>
 <br>
@@ -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.
+
 
 <br>
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -61,27 +61,15 @@
             </div>
         </li>
         <li>
-            <!-- <p class="nav-full nav-issues" (click)="openAlertMsg(); expandNavMobile(true)"
-            (keydown.enter)="openAlertMsg(); expandNavMobile(true)">-current issues-</p> -->
             <div class="link-icons">
                 <a href="https://github.com/yqni13" target="_blank"><i class="icon-GitHub"></i></a>
                 <a href="https://app.daily.dev/yqni13" target="_blank"><i class="icon-DailyDev3"></i></a>
                 <a href="https://www.xing.com/profile/Lukas_Varga2" target="_blank"><i class="icon-Xing"></i></a>
             </div>
             <p class="footer-verification"><i class="icon-CopyRight nav-copyright"></i> {{copyrightYear}}, {{OWNER}}<br>v{{version}}</p>
         </li>
-    </ul>
-
-
+    </ul>  
 </nav>
-<!-- <div class="error-msg-box" *ngIf="!isAccepted">
-    <div class="error-wrapper">
-        <p>
-            There are currently problems with the hosting of this project on GitHub => normal navigating by nav-menu works perfectly, <span class="red-msg">refreshing (F5)</span> will lead to <span class="red-msg">Error: 404</span>. I am currently working on this issue. Until issue is closed, this message is available in nav-menu '-current issues-'<br><span class="green-msg">Accept to continue.</span><br>Started: 22.06.2024, v2.2.2<br>
-        </p>
-        <a (click)="closeAlertMsg()" (keydown.enter)="closeAlertMsg()">ACCEPT</a>
-    </div>
-</div> -->
 
 
 <router-outlet><router-outlet />
diff --git 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
@@ -1,19 +1,19 @@
 <section class="box home" *yqni13Var="user$ | async as userData">
-    <div class="column introduction">
-        <h1 class="fading-header">
-            Hi, I'm 
-            <span>{{(userData.firstname)}}!</span>
-            <br>
-            <span class="frontend">Frontend</span>
-            <span>-Developer</span>
-        </h1>
-        <p class="fading-quote">
-            "When you take on a task, finding the best ways to achieve the desired result is always your responsibility." - Gilbert's Law
-        </p>
-    </div>
-    <div class="column profile">
-        <div class="profile-picture">
-            <img src="assets/img/transparent_profile_home.png" alt="">
+    <div class="home-wrapper">
+        <video autoplay loop [muted]="'muted'">
+            <source src="../../assets/landingpage_long_compressed.mp4" type="video/mp4"/>
+            Your browser does not support the video file (mp4).
+        </video>
+        <div class="column introduction">
+            <h1 class="fading-header">
+                <span>Hi, I'm {{(userData.firstname)}}!</span>
+                <br>
+                <span class="frontend">Frontend</span>
+                <span>-Developer</span>
+            </h1>
+            <p class="fading-quote">
+                "When you take on a task, finding the best ways to achieve the desired result is always your responsibility." - Gilbert's Law
+            </p>
         </div>
     </div>
 </section>
diff --git 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;
     }
 }
diff --git 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
diff --git a/src/assets/img/wallpaper3.png b/src/assets/img/wallpaper3.png
diff --git a/src/assets/landingpage_long_compressed.mp4 b/src/assets/landingpage_long_compressed.mp4
diff --git a/src/assets/readme_img/readme_light_mode.png b/src/assets/readme_img/readme_light_mode.png
diff --git a/src/assets/readme_img/readme_responsive_demonstration.png b/src/assets/readme_img/readme_responsive_demonstration.png
diff --git a/src/docs/update_protocol.md b/src/docs/update_protocol.md
@@ -4,6 +4,14 @@
 
 <br>
 
+### 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
@@ -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;
 }