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/about/about.component.scss b/src/app/about/about.component.scss index 0bed86b..c4abd7d 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -75,7 +75,6 @@ h2 { transform: translate(15%, -15px); z-index: -1; background: var(--about-shadow); - // background: var(--yqni13-gradient); filter: blur(15px); width: 82%; } diff --git a/src/app/app.component.html b/src/app/app.component.html index 68219f2..0627342 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -8,7 +8,8 @@ @@ -46,42 +47,29 @@ >Portfolio
  • - - - +
    - +
  • -
  • - - - + - diff --git a/src/app/app.component.scss b/src/app/app.component.scss index eee72b4..5f0003f 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -57,7 +57,13 @@ span:hover { } .nav-lightmode { - color: var(--tangerine-yellow); + color: var(--lightmode-yellow); +} + +nav-lightmode, +nav-darkmode { + width: var(--linkicons-size)!important; + height: var(--linkicons-size)!important; } ul>:last-child { @@ -84,31 +90,21 @@ li:nth-child(2) { } .setVisible { - visibility: visible; display: inline; } .setHidden { - visibility:hidden; display: none; } .link-icons i { color: var(--navbar-content); - width: 20px; - height: 20px; - margin: 5px 8.5px; -} - -.link-icons img { - width: 20px; - height: 20px; - color: var(--navbar-content); + width: var(--linkicons-size); + height: var(--linkicons-size); margin: 5px 8.5px; } -.link-icons i:hover, -.link-icons img:hover { +.link-icons i:hover { opacity: 0.4; } 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/cv/cv.component.html b/src/app/cv/cv.component.html index ebba6a7..d885761 100644 --- a/src/app/cv/cv.component.html +++ b/src/app/cv/cv.component.html @@ -39,103 +39,108 @@

    Technical skills

    title="CSS3" href="https://developer.mozilla.org/en-US/docs/Web/CSS?retiredLocale=de" target="_blank" - > + > +
  • + > +
  • + > +
  • -
  • -
  • + > + +
  • + > +
  • -
  • -
  • + > + +
  • + > +
  • + > +
  • + > +
  • + > +
  • + > +
  • + > +
  • + > +
  • + > +
  • + > +

    First Experiences

    @@ -148,6 +153,13 @@

    First Experiences

    target="_blank" > +
  • + +
  • First Experiences
  • + >
  • First Experiences
  • +
  • +
  • + + >
  • -
    -

    - 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 b02ae63..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,70 +53,11 @@ $quotecount: 22; -webkit-text-fill-color: transparent; } -.profile-picture { - rotate: -5deg; - border-radius: 25px; - opacity: 0; - animation: fade-in 3s forwards; - -webkit-animation: fade-in 3s forwards; - -moz-animation: fade-in 3s forwards; - -o-animation: fade-in 3s forwards; - - img { - background-image: var(--home-img); - border-radius:30px; - border: solid var(--navbar-border) 2px; - } -} - -.fading-header { - transform: scale(0.94); - animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1); - -webkit-animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1); - -moz-animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1); - -o-animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1); - - span { +@keyframes appear { + 0% { opacity: 0; - filter: blur(4px); - } -} - -.fading-quote { - transform: scale(0.94); - animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1); - -webkit-animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1); - -moz-animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1); - -o-animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1); - - span { - opacity: 0; - filter: blur(4px); - } -} - -@for $i from 1 through $headercount { - .#{fading-header} span:nth-child(#{$i}) { - animation: fade-in 0.8s #{calc($i / 5)}s forwards cubic-bezier(0.11, 0, 0.5, 0); - -webkit-animation: fade-in 0.8s #{calc($i / 5)}s forwards cubic-bezier(0.11, 0, 0.5, 0); - -moz-animation: fade-in 0.8s #{calc($i / 5)}s forwards cubic-bezier(0.11, 0, 0.5, 0); - -o-animation: fade-in 0.8s #{calc($i / 5)}s forwards cubic-bezier(0.11, 0, 0.5, 0); - } -} - -@for $i from 1 through $quotecount { - .#{fading-quote} span:nth-child(#{$i}) { - animation: fade-in 0.8s #{calc($i / 10)}s forwards cubic-bezier(0.11, 0, 0.5, 0); - -webkit-animation: fade-in 0.8s #{calc($i / 10)}s forwards cubic-bezier(0.11, 0, 0.5, 0); - -moz-animation: fade-in 0.8s #{calc($i / 10)}s forwards cubic-bezier(0.11, 0, 0.5, 0); - -o-animation: fade-in 0.8s #{calc($i / 10)}s forwards cubic-bezier(0.11, 0, 0.5, 0); + } + 100% { + opacity: 1; } -} - -@keyframes fade-in { - 100% { opacity: 1; filter: blur(0); } -} - -@keyframes scale { - 100% { transform: scale(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 c92fff3..bf02ae0 100644 --- a/src/app/shared/data/project-data.json +++ b/src/app/shared/data/project-data.json @@ -103,8 +103,8 @@ "Portfolio": { "type": "frontend", "title": "Portfolio", - "version": "2.6.5", - "keywords": "live demo | portfolio | angular framework | english | responsive | custom design | dark/light theme | animation | custom search filter | template | single page application | custom alert | ESLint | CI/CD workflow", + "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", "githublink": "https://github.com/yqni13/portfolio", @@ -118,5 +118,28 @@ "icon-RxJS", "icon-JSON" ] + }, + "ArtCreation": { + "type": "frontend", + "title": "Art-Gallery", + "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", + "githublink": "https://github.com/yqni13/art-gallery-FE-only", + "techURLs": [ + "https://angular.dev/", + "https://rxjs.dev/", + "https://www.json.org/json-en.html", + "https://www.i18next.com/", + "https://nodejs.org/en" + ], + "techImgClasses": [ + "icon-Angular", + "icon-RxJS", + "icon-JSON", + "icon-i18n", + "icon-NodeJS" + ] } } \ No newline at end of file diff --git a/src/app/templates/portfolio-card/template-portfolio-card.component.html b/src/app/templates/portfolio-card/template-portfolio-card.component.html index 112773a..dcd92ee 100644 --- a/src/app/templates/portfolio-card/template-portfolio-card.component.html +++ b/src/app/templates/portfolio-card/template-portfolio-card.component.html @@ -19,5 +19,6 @@

    {{project.value.title}}

    + \ No newline at end of file diff --git a/src/app/templates/portfolio-card/template-portfolio-card.component.scss b/src/app/templates/portfolio-card/template-portfolio-card.component.scss index c7d498c..0aa919d 100644 --- a/src/app/templates/portfolio-card/template-portfolio-card.component.scss +++ b/src/app/templates/portfolio-card/template-portfolio-card.component.scss @@ -47,11 +47,8 @@ h4 { } .card:hover .card-text { - animation: dimension 0.5s ease-in; - -webkit-animation: dimension 0.5s ease-in; - -moz-animation: dimension 0.5s ease-in; - -o-animation: dimension 0.5s ease-in; - opacity: 1; + display: inline; + transition-delay: .4s; } .card-text h4 { @@ -63,14 +60,27 @@ h4 { margin-left: 10px; } +.icon-HoverMe { + position: absolute; + top: 5px; + left: 5px; + background-image: var(--yqni13-gradient); +} + +.card:hover .icon-HoverMe { + display: none; +} .card-text { - opacity: 0; + display: none; position: absolute; width: 100%; height: 100%; align-content: end; backdrop-filter: blur(2px) brightness(0.5); + -webkit-backdrop-filter: blur(2px) brightness(0.5); + -moz-backdrop-filter: blur(2px) brightness(0.5); + -o-backdrop-filter: blur(2px) brightness(0.5); border-radius: $card-border; } @@ -79,6 +89,11 @@ h4 { text-align: justify; } +.card-text, +img { + transition: .6s all; +} + .card-technology i { margin: 10px 20px 10px 0px; &:hover { @@ -107,7 +122,3 @@ h4 { .a-github { color: var(--alice-blue); } - -@keyframes dimension { - from { transform: rotateX(-90deg); } -} 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/img/web_artcreation.jpg b/src/assets/img/web_artcreation.jpg new file mode 100644 index 0000000..10aaa7d Binary files /dev/null and b/src/assets/img/web_artcreation.jpg 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 254ebba..dda1cdf 100644 --- a/src/stylesheets/colors.scss +++ b/src/stylesheets/colors.scss @@ -2,20 +2,21 @@ /* yqni13 colors */ --yqni13-purple: #650d88; --yqni13-pink: #bc0c79; - + /* basic colors */ --alice-blue: #f0f8ff; --deepnavy-blue: #011222; --rich-black: #020d19; - + /* other defined colors */ + --lightmode-purple: #990066; --accept-green: #127412; --darktext-grey: #5c5470; --header-grey: #352f44; --light-pink: #ca7394; --lightopacity-grey: rgba(128, 128, 128, 0.4); --lighttext-grey: #7e7e7e; - --tangerine-yellow: #f3b20e; + --lightmode-yellow: #e7ce8d; --tyrian-purple: #33002a; --warning-red: #ca2b2b; @@ -24,6 +25,7 @@ --gradient-tyrianpurple: conic-gradient(from 0deg at 0% 0%,#f0f8ff 0%, 25%, #33002a 47% 0%); --portfolio-deepnavyblue: conic-gradient(from 0deg at 0% 0%,#f0f8ff 2% 6%, 7%, #011222 47% 9%); --yqni13-gradient: linear-gradient(167deg, #650d88 42%, #bc0c79 90%); + --gradient-grey: linear-gradient(133deg, #7e7e7e 53% 0%, #5c5470 100% 97%); /* filter to change color of png */ --signature-grey: invert(33%) sepia(9%) saturate(1336%) hue-rotate(216deg) brightness(94%) contrast(85%); @@ -31,24 +33,26 @@ } [data-theme='light'] { - --navbar-bg: var(--tyrian-purple); - --navbar-content: var(--lighttext-grey); - --navbar-text: var(--alice-blue); - --navbar-border: var(--yqni13-pink); + --navbar-bg: var(--lighttext-grey); + --navbar-content: var(--rich-black); + --navbar-text: var(--rich-black); + --navbar-border: var(--lightmode-purple); --body-bg: var(--alice-blue); --header-color: var(--header-grey); - --text-color: var(--darktext-grey); - --button-color: var(--light-pink); - --border-line: var(--yqni13-pink); - --home-img: var(--gradient-tyrianpurple); + --text-color: var(--rich-black); + --button-color: var(--lightmode-purple); + --border-line: var(--lightmode-purple); + --home-img: var(--gradient-grey); --home-frontend: var(--yqni13-gradient); - --about-imgbg: var(--gradient-tyrianpurple); + --about-imgbg: var(--gradient-grey); --about-shadow: var(--portfolio-deepnavyblue); --portfolio-card: var(--yqni13-gradient); - --signature-color: var(--signature-grey); + --signature-color: var(--rich-black); --github-color: var(--rich-black); - --active-link: var(--yqni13-pink); - --opacity-bg: 0.45; + --active-link: var(--lightmode-purple); + --opacity-bg: 0.75; + --home-brightness: 0.1; + --home-grayscale: 1; } [data-theme='dark'] { @@ -69,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/defines.scss b/src/stylesheets/defines.scss index d69f9ee..285ddc5 100644 --- a/src/stylesheets/defines.scss +++ b/src/stylesheets/defines.scss @@ -27,7 +27,7 @@ $phone-portrait-width: 480px; --burgermenu-size: 30px; --copyright-display: none; --copyright-margin: 0 auto 0 5%; - --linkicons-size: 20px; + --linkicons-size: 25px; --nav-direction: row-reverse; --nav-full: none; --nav-padding: 0 30px 0 0; @@ -41,6 +41,7 @@ $phone-portrait-width: 480px; --block-margin: 180px; --copyright-display: block; --copyright-margin: 0 0 5px 0; + --linkicons-size: 30px; --nav-full: block; --nav-logo: 100px; --nav-padding: 30px 0px 0px 0px; diff --git a/src/stylesheets/icons.scss b/src/stylesheets/icons.scss index 7b97a16..cbfc6cc 100644 --- a/src/stylesheets/icons.scss +++ b/src/stylesheets/icons.scss @@ -483,4 +483,51 @@ i { mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; +} +.icon-i18n { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.936 2.487v4.517l5.076 13.036s1.55 3.184-2.882 3.96H7.02s-4.132-.431-3.141-3.702L9.213 7.004V2.487zm2.09 13.108c-4.43-1.374-8.155-.637-9.975-.079l-1.836 4.419c-.783 2.499 2.273 2.941 2.597 2.98l.028.004h8.444c3.54-.598 2.511-2.972 2.415-3.177l-.007-.014zm-7.814.777c.79 0 1.43.386 1.43.865c0 .476-.64.864-1.43.864c-.788 0-1.427-.388-1.427-.864c0-.479.639-.865 1.427-.865m5.084 0c.787 0 1.427.386 1.427.865c0 .476-.64.864-1.427.864c-.79 0-1.429-.388-1.429-.864c0-.479.638-.865 1.43-.865m-4.5-5.213c-.552 0-1 .54-1 1.205c0 .666.448 1.205 1 1.205s1-.54 1-1.205c0-.666-.448-1.205-1-1.205m3.641-1.297c-.655 0-1.186.638-1.186 1.43c0 .786.531 1.426 1.186 1.426c.653 0 1.187-.64 1.187-1.427c0-.79-.533-1.429-1.187-1.429m6.037-2.738s-2.122 1.546-4.086-.42V4.556s2.724-.6 4.086 2.568m-14.844 0c1.36-3.168 4.085-2.568 4.085-2.568v2.148c-1.965 1.966-4.085.42-4.085.42M15.044 0c.495 0 .895.439.895.981s-.4.98-.895.98h-6.09c-.492 0-.894-.438-.894-.98S8.462 0 8.955 0z'/%3E%3C/svg%3E"); + background-color: rgb(44, 146, 186); + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.icon-NodeJS { + display: inline-block; + width: 26.58px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 289'%3E%3Cpath fill='%23539e43' d='M128 288.464c-3.975 0-7.685-1.06-11.13-2.915l-35.247-20.936c-5.3-2.915-2.65-3.975-1.06-4.505c7.155-2.385 8.48-2.915 15.9-7.156c.796-.53 1.856-.265 2.65.265l27.032 16.166c1.06.53 2.385.53 3.18 0l105.74-61.217c1.06-.53 1.59-1.59 1.59-2.915V83.08c0-1.325-.53-2.385-1.59-2.915l-105.74-60.953c-1.06-.53-2.385-.53-3.18 0L20.405 80.166c-1.06.53-1.59 1.855-1.59 2.915v122.17c0 1.06.53 2.385 1.59 2.915l28.887 16.695c15.636 7.95 25.44-1.325 25.44-10.6V93.68c0-1.59 1.326-3.18 3.181-3.18h13.516c1.59 0 3.18 1.325 3.18 3.18v120.58c0 20.936-11.396 33.126-31.272 33.126c-6.095 0-10.865 0-24.38-6.625l-27.827-15.9C4.24 220.885 0 213.465 0 205.515V83.346C0 75.396 4.24 67.976 11.13 64L116.87 2.783c6.625-3.71 15.635-3.71 22.26 0L244.87 64C251.76 67.975 256 75.395 256 83.346v122.17c0 7.95-4.24 15.37-11.13 19.345L139.13 286.08c-3.445 1.59-7.42 2.385-11.13 2.385m32.596-84.009c-46.377 0-55.917-21.2-55.917-39.221c0-1.59 1.325-3.18 3.18-3.18h13.78c1.59 0 2.916 1.06 2.916 2.65c2.12 14.045 8.215 20.936 36.306 20.936c22.261 0 31.802-5.035 31.802-16.96c0-6.891-2.65-11.926-37.367-15.372c-28.886-2.915-46.907-9.275-46.907-32.33c0-21.467 18.02-34.187 48.232-34.187c33.921 0 50.617 11.66 52.737 37.101q0 1.193-.795 2.385c-.53.53-1.325 1.06-2.12 1.06h-13.78c-1.326 0-2.65-1.06-2.916-2.385c-3.18-14.575-11.395-19.345-33.126-19.345c-24.38 0-27.296 8.48-27.296 14.84c0 7.686 3.445 10.07 36.306 14.31c32.597 4.24 47.967 10.336 47.967 33.127c-.265 23.321-19.345 36.571-53.002 36.571'/%3E%3C/svg%3E"); +} +.icon-DailyDev3 { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m36.74 24l-6.37 6.369a2.8 2.8 0 1 0 3.96 3.96l8.35-8.349a2.8 2.8 0 0 0 0-3.96l-8.35-8.35a2.8 2.8 0 0 0-3.96 0L24 20.039l-6.369-6.369a2.8 2.8 0 0 0-3.96 0l-8.35 8.35a2.8 2.8 0 0 0 0 3.96l8.35 8.35a2.8 2.8 0 0 0 3.96 0l18.68-18.68l-2.51 5.411z'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m24 20.039l-12.31 12.31l2.51-5.41L11.26 24l4.39-4.388L20.039 24'/%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.icon-HoverMe { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath fill='%23000' d='M2.828 35.488c.82-.023 1.406-.656 1.43-1.5C4.516 23.77 9.789 16.223 17.78 13.27l7.735 21.304c.21.586-.024 1.008-.399 1.149c-.351.117-.726 0-1.172-.47l-6.89-7.218c-1.196-1.242-2.696-1.172-3.703-.281c-.961.844-1.243 2.437-.024 3.844l8.25 9.609c6.89 8.04 13.453 9.422 20.531 6.844c9.305-3.375 12.563-11.414 8.86-21.586l-1.547-4.219c-1.406-3.89-4.125-5.578-6.234-4.805c-.47.165-.633.516-.47.961l.68 1.875c.329.89.024 1.5-.492 1.688c-.586.21-1.195-.047-1.523-.938l-.446-1.242c-.82-2.273-2.835-3.234-4.804-2.508c-.89.328-1.149.82-.867 1.594l.914 2.531c.328.891.047 1.5-.492 1.688c-.563.21-1.172-.047-1.5-.938l-.868-2.367c-.914-2.555-2.859-3.21-4.757-2.531c-.844.305-1.149.867-.891 1.594l1.828 5.015c.305.89.023 1.477-.516 1.664c-.562.211-1.172-.047-1.5-.937L21.32 7.668c-.586-1.617-2.039-2.297-3.422-1.805c-1.476.54-2.109 1.969-1.5 3.61l.329.96C7.657 13.81 1.328 22.575 1.328 33.942c0 .844.703 1.57 1.5 1.547'/%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; } \ No newline at end of file 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; } }