Skip to content

Commit

Permalink
fix: removed AOS, fixed navbar, added mock directive;
Browse files Browse the repository at this point in the history
  • Loading branch information
TheSpaceNoodle committed Feb 26, 2024
1 parent f0a4171 commit ae636ac
Show file tree
Hide file tree
Showing 14 changed files with 116 additions and 131 deletions.
4 changes: 2 additions & 2 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css", "./node_modules/aos/dist/aos.css"],
"scripts": ["./node_modules/aos/dist/aos.js"]
"styles": ["src/styles.css"],
"scripts": []
},
"configurations": {
"production": {
Expand Down
31 changes: 2 additions & 29 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
"@angular/core": "^17.2.2",
"@angular/platform-browser": "^17.2.2",
"@angular/platform-browser-dynamic": "^17.2.2",
"aos": "^2.3.4",
"eslint": "^8.57.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
Expand All @@ -32,7 +31,6 @@
"@angular-eslint/template-parser": "17.2.1",
"@angular/cli": "~17.2.1",
"@angular/compiler-cli": "^17.2.2",
"@types/aos": "^3.0.4",
"@typescript-eslint/eslint-plugin": "6.19.0",
"@typescript-eslint/parser": "6.19.0",
"eslint-plugin-prettier": "^5.1.3",
Expand Down
22 changes: 11 additions & 11 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from 'src/app/app.component';
import { AboutComponent } from 'src/app/components/about/about.component';
import { ContactsComponent } from 'src/app/components/contacts/contacts.component';
import { ExperienceComponent } from 'src/app/components/experience/experience.component';
import { FooterComponent } from 'src/app/components/footer/footer.component';
import { HomeComponent } from 'src/app/components/home/home.component';
import { NavbarComponent } from 'src/app/components/navbar/navbar.component';
import { SocialsComponent } from 'src/app/components/socials/socials.component';
import {
AboutComponent,
ContactsComponent,
ExperienceComponent,
FooterComponent,
HomeComponent,
NavbarComponent,
SocialsComponent,
} from './components';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
ExperienceComponent,
ContactsComponent,
AboutComponent,
NavbarComponent,
SocialsComponent,
FooterComponent,
],
imports: [BrowserModule],
imports: [BrowserModule, HomeComponent, NavbarComponent],
providers: [],
bootstrap: [AppComponent],
})
Expand Down
40 changes: 11 additions & 29 deletions src/app/components/about/about.component.html
Original file line number Diff line number Diff line change
@@ -1,48 +1,30 @@
<section id="about">
<div
class="section-heading"
data-aos="fade-up"
data-aos-duration="500"
data-aos-delay="200"
>
<div class="section-heading" data-aos="fade-up" data-aos-duration="500" data-aos-delay="200">
<div class="line1"></div>
<div class="section-name"><span class="number">01.</span> About Me</div>
<div class="line2"></div>
</div>
<div
id="about-content"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="250"
>
<div id="about-content" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="250">
<div id="about-me">
<p class="part-one">
Hello, my name is <span class="highlight">Volodymyr Shchebyna</span> and
I am <span class="highlight">frontend developer</span>. I am really into
fantasy so I am a wizard and development process is my magic. My real
start as frontend developer was at the moment, when my friend said that
I can participate in a
<span class="highlight">Sikorsky Challenge</span> if I’ll help him in
creating a website. Before frontend development was more like a
playground where I just spend some days doing this and that playing with
<span class="highlight">HTML</span>,
<span class="highlight">CSS</span> and
Hello, my name is <span class="highlight">Volodymyr Shchebyna</span> and I am
<span class="highlight">frontend developer</span>. I am really into fantasy so I am a wizard and development
process is my magic. My real start as frontend developer was at the moment, when my friend said that I can
participate in a <span class="highlight">Sikorsky Challenge</span> if I’ll help him in creating a website.
Before frontend development was more like a playground where I just spend some days doing this and that playing
with <span class="highlight">HTML</span>, <span class="highlight">CSS</span> and
<span class="highlight">JS</span>.
</p>
<p class="part-two">
For today I’ve had privilege of working with
<span class="highlight">medium</span>,
<span class="highlight">small sized teams</span> and
<span class="highlight">alone</span>. You can learn more about teams
I’ve been working with at the next section.
<span class="highlight">medium</span>, <span class="highlight">small sized teams</span> and
<span class="highlight">alone</span>. You can learn more about teams I’ve been working with at the next section.
</p>

<div id="techs">
<p class="part-three">
Here are a few
<span class="highlight"
>technologies I’ve been working with recently</span
>:
<span class="highlight">technologies I’ve been working with recently</span>:
</p>

<div id="tech-list">
Expand Down
18 changes: 3 additions & 15 deletions src/app/components/home/home.component.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
<header id="home">
<div id="home-bg-image"></div>
<div id="header-welcome">
<h1
class="small-heading highlight"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="180"
>
<div id="header-welcome" aos>
<h1 class="small-heading highlight" data-aos="fade-up" data-aos-duration="600" data-aos-delay="180">
Hi, my name is
</h1>
<h1
class="big-heading"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="220"
>
Volodymyr Shcherbyna.
</h1>
<h1 class="big-heading" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="220">Volodymyr Shcherbyna.</h1>
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="250">
<h2>I am a <span class="highlight">frontend developer</span>.</h2>
<p>Before you decide anything, let me introduce myself first.</p>
Expand Down
5 changes: 4 additions & 1 deletion src/app/components/home/home.component.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { ViewportAnimateDirective } from 'src/app/shared/directives/viewportAnimate.directive';

@Component({
standalone: true,
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
imports: [ViewportAnimateDirective],
})
export class HomeComponent {
constructor() {}
Expand Down
7 changes: 7 additions & 0 deletions src/app/components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export { AboutComponent } from './about/about.component';
export { ContactsComponent } from './contacts/contacts.component';
export { ExperienceComponent } from './experience/experience.component';
export { FooterComponent } from './footer/footer.component';
export { HomeComponent } from './home/home.component';
export { NavbarComponent } from './navbar/navbar.component';
export { SocialsComponent } from './socials/socials.component';
20 changes: 10 additions & 10 deletions src/app/components/navbar/navbar.component.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
#navbar {
.navbar {
position: fixed;
background-color: rgba(44, 54, 63, 0.8);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(0.9375rem);
backdrop-filter: blur(0.9375rem);
width: 100%;
padding: 5px 20px;
height: 80px;
padding: 0.3125rem 1.25rem;
height: 5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
Expand All @@ -15,15 +15,15 @@
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
font-size: 1.125rem;
z-index: 1;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}

#main-logo img {
width: 75px;
.main-logo img {
width: 4.6875rem;
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 3s;
Expand All @@ -35,7 +35,7 @@
animation-timing-function: linear;
}

#nav-links ul {
.nav-links {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
Expand All @@ -46,7 +46,7 @@
justify-content: space-between;
}

#nav-links ul li a {
.nav-links li a {
text-decoration: none;
}

Expand Down
37 changes: 14 additions & 23 deletions src/app/components/navbar/navbar.component.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,15 @@
<div
id="navbar"
[ngClass]="
scrolled == 1 ? 'fixed-hidden' : scrolled == 2 ? 'fixed-shown' : ''
"
>
<div id="main-logo">
<a href="#home"><img src="./assets/logo.png" alt="" /></a>
</div>
<navbar [ngClass]="navbarClassList">
<a href="#home" class="main-logo"><img src="./assets/logo.png" alt="" /></a>

<div id="nav-links">
<ul>
<li data-aos="fade-down" data-aos-duration="1000">
<a href="#about"><span class="number">01.</span> About</a>
</li>
<li data-aos="fade-down" data-aos-duration="1000" data-aos-delay="50">
<a href="#experience"><span class="number">02.</span> Experience</a>
</li>
<li data-aos="fade-down" data-aos-duration="1000" data-aos-delay="100">
<a href="#contacts"><span class="number">03.</span> Contacts</a>
</li>
</ul>
</div>
</div>
<ul class="nav-links">
<li data-aos="fade-down" data-aos-duration="1000">
<a href="#about"><span class="number">01.</span> About</a>
</li>
<li data-aos="fade-down" data-aos-duration="1000" data-aos-delay="50">
<a href="#experience"><span class="number">02.</span> Experience</a>
</li>
<li data-aos="fade-down" data-aos-duration="1000" data-aos-delay="100">
<a href="#contacts"><span class="number">03.</span> Contacts</a>
</li>
</ul>
</navbar>
34 changes: 27 additions & 7 deletions src/app/components/navbar/navbar.component.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,43 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { NgClass } from '@angular/common';
import { Component, HostListener } from '@angular/core';

@Component({
standalone: true,
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css'],
imports: [NgClass],
})
export class NavbarComponent {
scrolled: number = 0;
scrolled: number = document.scrollingElement?.scrollTop || 0;
prevScroll!: number;

@HostListener('window:scroll', ['$event']) onScroll(event: any) {
if (event.path[1].scrollY > this.prevScroll) {
navbarClassList: Record<string, boolean> = {
navbar: true,
};

setNavbarClassList(): void {
this.navbarClassList = {
...this.navbarClassList,
'fixed-hidden': this.scrolled === 1,
'fixed-shown': this.scrolled === 2,
};
}

@HostListener('window:scroll') onScroll() {
const currentScroll = document.scrollingElement?.scrollTop || 0;

if (currentScroll > this.prevScroll) {
this.scrolled = 1;
} else if (event.path[1].scrollY < this.prevScroll && event.path[1].scrollY > 0) {
}

if (currentScroll < this.prevScroll && currentScroll > 0) {
this.scrolled = 2;
} else {
this.scrolled = 0;
}
this.prevScroll = event.path[1].scrollY ? event.path[1].scrollY : 0;
console.log(this.scrolled);

this.prevScroll = currentScroll;
this.setNavbarClassList();
}
}
Loading

0 comments on commit ae636ac

Please sign in to comment.