fix: code cleanup, custom directives update, eslint and prettier setup;

.eslintignore

@@ -0,0 +1,8 @@
+.git
+build
+node_modules
+public
+package.json
+package-lock.json
+docs
+src/polyfills.ts

.eslintrc.json

@@ -32,15 +32,19 @@
             "style": "kebab-case"
           }
         ],
-        "no-unused-vars": [
+        "@typescript-eslint/no-unused-vars": [
           "error",
           {
             "vars": "all",
             "args": "after-used",
             "ignoreRestSiblings": false
           }
-        ]
-      }
+        ],
+        "unused-imports/no-unused-imports": "error"
+      },
+      "plugins": [
+        "unused-imports"
+      ]
     },
     {
       "files": [

.prettierignore

@@ -0,0 +1,4 @@
+.git
+build
+node_modules
+src/polyfills.ts

package.json

@@ -33,7 +33,9 @@
     "@angular/compiler-cli": "^17.2.2",
     "@typescript-eslint/eslint-plugin": "6.19.0",
     "@typescript-eslint/parser": "6.19.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-unused-imports": "^3.1.0",
     "prettier": "^3.2.5",
     "typescript": "~5.3.3"
   }

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
+import { AppComponent } from './app.component';
 import {
   AboutComponent,
   ContactsComponent,
@@ -10,18 +11,19 @@ import {
   NavbarComponent,
   SocialsComponent,
 } from './components';
-import { AppComponent } from './app.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    HomeComponent,
+    NavbarComponent,
+    AboutComponent,
     ExperienceComponent,
     ContactsComponent,
-    AboutComponent,
-    SocialsComponent,
     FooterComponent,
+    SocialsComponent,
   ],
-  imports: [BrowserModule, HomeComponent, NavbarComponent],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/components/about/about.component.css

@@ -26,19 +26,20 @@
 
 .line1 {
   background-color: var(--important);
-  width: calc(1420px - 29%);
+  width: calc(100% - 29%);
   height: 1.5px;
 }
 
 .section-name {
-  font-size: 25px;
-  line-height: 35px;
-  margin: 0 8px;
+  font-size: 1.5625rem;
+  line-height: 2.1875rem;
+  margin: 0 0.5rem;
+  min-width: 8.125rem;
 }
 
 .line2 {
   background-color: var(--important);
-  width: calc(1420px - 81%);
+  width: calc(100% - 81%);
   height: 1.5px;
 }
 
@@ -86,7 +87,7 @@
 }
 
 #about-img {
-  background-image: url("../../../assets/Vector.svg");
+  background-image: url('../../../assets/Vector.svg');
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;

src/app/components/about/about.component.html

@@ -1,50 +1,49 @@
 <section id="about">
-  <div class="section-heading" data-aos="fade-up" data-aos-duration="500" data-aos-delay="200">
+  <div class="section-heading" appAOS="500" [aosDelay]="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" appAOS="1000" [aosDelay]="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
-        <span class="highlight">JS</span>.
+        Hello, my name is <span appHighlight>Volodymyr Shchebyna</span> and I am
+        <span appHighlight>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 appHighlight>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 appHighlight>HTML</span>, <span appHighlight>CSS</span> and <span appHighlight>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 appHighlight>medium</span>, <span appHighlight>small sized teams</span> and
+        <span appHighlight>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 appHighlight>technologies I’ve been working with recently</span>:
         </p>
 
         <div id="tech-list">
-          <div class="tech-block">
+          <div class="tech-block" appAOS="500" [aosDelay]="300">
             <img src="./assets/tech/Vector-2.svg" alt="" />
             <p>Angular</p>
           </div>
-          <div class="tech-block">
+          <div class="tech-block" appAOS="550" [aosDelay]="400">
             <img src="./assets/tech/Group.svg" alt="" />
             <p>React</p>
           </div>
-          <div class="tech-block">
+          <div class="tech-block" appAOS="600" [aosDelay]="500">
             <img src="./assets/tech/Vector-1.svg" alt="" />
             <p>JavaScript</p>
           </div>
-          <div class="tech-block">
+          <div class="tech-block" appAOS="650" [aosDelay]="600">
             <img src="./assets/tech/Vector-4.svg" alt="" />
             <p>TypeScript</p>
           </div>
-          <div class="tech-block">
+          <div class="tech-block" appAOS="700" [aosDelay]="700">
             <img src="./assets/tech/Vector.svg" alt="" />
             <p>Node.js</p>
           </div>

src/app/components/about/about.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { AnimateOnScrollDirective, HighlightDirective } from 'src/app/shared/directives';
 
 @Component({
+  standalone: true,
   selector: 'app-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.css'],
+  imports: [HighlightDirective, AnimateOnScrollDirective],
 })
-export class AboutComponent {
-  constructor() {}
-}
+export class AboutComponent {}

src/app/components/contacts/contacts.component.css

@@ -52,6 +52,7 @@
   -webkit-transition: 0.3s ease-in-out;
   -o-transition: 0.3s ease-in-out;
   transition: 0.3s ease-in-out;
+  text-decoration: none;
 }
 
 .contact-me-button:hover {

src/app/components/contacts/contacts.component.html

@@ -1,27 +1,13 @@
 <section id="contacts">
-  <div
-    class="section-heading"
-    data-aos="fade-up"
-    data-aos-duration="500"
-    data-aos-delay="200"
-  >
+  <div class="section-heading" appAOS="500" [aosDelay]="200">
     <div class="line1"></div>
     <div class="section-name"><span class="number">03. </span>My Contacts</div>
     <div class="line2"></div>
   </div>
 
-  <div
-    class="contact-me"
-    data-aos="fade-up"
-    data-aos-duration="500"
-    data-aos-delay="250"
-  >
+  <div class="contact-me" appAOS="500" [aosDelay]="250">
     <h1>I’m open to new proposals!</h1>
 
-    <a
-      href="https://www.linkedin.com/in/thespacenoodle/"
-      class="contact-me-button highlight"
-      >Contact me</a
-    >
+    <a href="https://www.linkedin.com/in/thespacenoodle/" class="contact-me-button" appHighlight>Contact me</a>
   </div>
 </section>

src/app/components/contacts/contacts.component.ts

@@ -1,8 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { AnimateOnScrollDirective, HighlightDirective } from 'src/app/shared/directives';
 
 @Component({
+  standalone: true,
   selector: 'app-contacts',
   templateUrl: './contacts.component.html',
   styleUrls: ['./contacts.component.css'],
+  imports: [HighlightDirective, AnimateOnScrollDirective],
 })
 export class ContactsComponent {}

src/app/components/experience/constants.ts

@@ -0,0 +1,66 @@
+import { MyWork } from './interfaces';
+
+export const myWorks: MyWork[] = [
+  {
+    title: 'Kherson Tours',
+    links: {
+      outLink: 'https://www.ntours.ks.ua',
+      gitHub: 'https://github.com/SheogorathD/KTurism',
+    },
+    text: 'This website was my wery first big project so it’s design not that good. Built with <span class="highlight">HTML</span>, <span class="highlight">CSS</span>, <span class="highlight">JS</span> and than switched to <span class="highlight">WordPress</span>.',
+  },
+  {
+    title: 'KSU Pool',
+    links: {
+      outLink: 'http://test2.kspu.edu',
+    },
+    text: 'KSU Pool website. My mission was to create design and frontend part of the website. Built with <span class="highlight">Angular</span> (<span class="highlight">TypeScript</span>), <span class="highlight">Angular Materal</span>, <span class="highlight">SCSS</span>.',
+  },
+  {
+    title: 'Accessible Schedule',
+    links: {
+      outLink: 'https://accessible-cringe-schedule.herokuapp.com',
+      gitHub: 'https://github.com/SheogorathD/DaySchedule',
+    },
+    text: 'My personal project. Built with <span class="highlight">MERN</span> stack as my university project more like skill test. Can be used but there is better apps for such things.',
+  },
+  {
+    title: 'Advice Generator',
+    links: {
+      gitHub: 'https://github.com/SheogorathD/advice-generator',
+    },
+    text: 'Simple app that shows advices from <span class="highlight">Advice Slip API</span>. Built with <span class="highlight">Angular</span> and <span class="highlight">SCSS</span>.',
+  },
+  {
+    title: 'SpaceNoodleForge',
+    links: {
+      outLink: '#home',
+      gitHub: 'https://github.com/SheogorathD/SpaceNoodleForge',
+    },
+    text: 'My <span class="highlight">portfolio website</span> (the one you are reading this at). Built with <span class="highlight">Angular</span> and <span class="highlight">CSS</span>.',
+  },
+  {
+    title: 'Random Challenges',
+    links: {
+      outLink: 'https://randomnoodlechallenges.web.app',
+      gitHub: 'https://github.com/SheogorathD/random-challenges',
+    },
+    text: 'The idea of this project is to help developers to get more hands-on experience by completing challenges proposed by other people. Built with <span class="highlight">Angular</span>, <span class="highlight">SCSS</span> and <span class="highlight">Firebase</span>.',
+  },
+  {
+    title: 'KSU Startups',
+    links: {
+      outLink: 'https://startup.kspu.edu/welcome',
+      gitHub: 'https://github.com/SheogorathD/ksu-startups',
+    },
+    text: 'My <span class="highlight">latest project</span> and my diploma project. This website will help startup founders find investors for their projects. Built with <span class="highlight">Angular</span>, <span class="highlight">NgRx</span>, <span class="highlight">SCSS</span> and <span class="highlight">Firebase</span>.',
+  },
+  // {
+  //   title: '',
+  //   links: {
+  //     outLink: '',
+  //     gitHub: '',
+  //   },
+  //   text: '',
+  // },
+];