Total refactoring of file structure for better and simple organization

angular.json

@@ -23,7 +23,7 @@
             "assets": [
               {
                 "glob": "**/*",
-                "input": "public",
+                "input": "assets",
                 "output": "/"
               }
             ],
@@ -90,7 +90,7 @@
             "assets": [
               {
                 "glob": "**/*",
-                "input": "public",
+                "input": "assets",
                 "output": "/"
               }
             ],

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { FooterComponent } from './layout/components/footer/footer.component';
+import { FooterComponent } from './components/footer/footer.component';
-import { HeaderComponent } from './layout/components/header/header.component';
+import { HeaderComponent } from './components/header/header.component';
 
 @Component({
   selector: 'app-root',

src/app/app.routes.ts

@@ -1,33 +1,31 @@
 import { Routes } from '@angular/router';
-import { HeroComponent } from './layout/components/hero/hero.component';
+import { HeroComponent } from './pages/hero/hero.component';
 
 export const routes: Routes = [
   { path: '', component: HeroComponent },
   {
     path: 'about',
     loadComponent: () =>
-      import('./layout/components/about/about.component').then(
+      import('./pages/about/about.component').then((c) => c.AboutComponent),
-        (c) => c.AboutComponent,
-      ),
   },
   {
     path: 'contact',
     loadComponent: () =>
-      import('./layout/components/contact/contact.component').then(
+      import('./pages/contact/contact.component').then(
         (c) => c.ContactComponent,
       ),
   },
   {
     path: 'projects',
     loadComponent: () =>
-      import(
+      import('./pages/projects/projects.component').then(
-        './features/project-display/components/projects-list/projects-list.component'
+        (c) => c.ProjectsComponent,
-      ).then((c) => c.ProjectListComponent),
+      ),
   },
   {
     path: 'experience',
     loadComponent: () =>
-      import('./layout/components/experience/experience.component').then(
+      import('./pages/experience/experience.component').then(
         (c) => c.ExperienceComponent,
       ),
   },

src/app/components/footer/footer.component.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
-import {FooterDisplayComponent} from '../../../features/footer-display/footer-display.component';
 
 @Component({
   selector: 'app-footer',
-  imports: [FooterDisplayComponent],
+  imports: [],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.css',
 })

src/app/components/header/header-nav-links/header-nav-links.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NavButtonComponent } from '../../../shared/ui/button/nav-button.component';
+import { NavButtonComponent } from '../../../components/button/nav-button.component';
 
 @Component({
   selector: 'app-header-nav-links',

src/app/components/header/header.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { HeaderNavLinksComponent } from './header-nav-links/header-nav-links.component';
+import { HeaderLogoComponent } from './header-logo/header-logo.component';
+import { HeaderContactLinksComponent } from './header-contact-links/header-contact-links.component';
+import { HeaderTextAnimateSectionComponent } from './header-text-animate-section/header-text-animate-section.component';
+
+@Component({
+  selector: 'app-header',
+  imports: [
+    HeaderNavLinksComponent,
+    HeaderLogoComponent,
+    HeaderContactLinksComponent,
+    HeaderTextAnimateSectionComponent,
+  ],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.css',
+})
+export class HeaderComponent {}

src/app/features/about-display/about-display.component.ts

@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { SectionTitleComponent } from '../../shared/ui/section-title/section-title.component';
-import { HoloVideoContainerComponent } from '../../shared/ui/holo-video-container/holo-video-container.component';
-import { NeuralProfileTreeComponent } from './neural-profile-tree/neural-profile-tree.component';
-
-@Component({
-  selector: 'app-about-display',
-  imports: [
-    SectionTitleComponent,
-    HoloVideoContainerComponent,
-    NeuralProfileTreeComponent,
-  ],
-  templateUrl: './about-display.component.html',
-  styleUrl: './about-display.component.css',
-})
-export class AboutDisplayComponent {}

src/app/features/contact-display/contact-display.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import {SectionTitleComponent} from '../../shared/ui/section-title/section-title.component';
-
-@Component({
-  selector: 'app-contact-display',
-  imports: [SectionTitleComponent],
-  templateUrl: './contact-display.component.html',
-  styleUrl: './contact-display.component.css',
-})
-export class ContactDisplayComponent {}

src/app/features/experience-display/experience-display.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import {SectionTitleComponent} from '../../shared/ui/section-title/section-title.component';
-
-@Component({
-  selector: 'app-experience-display',
-  imports: [SectionTitleComponent],
-  templateUrl: './experience-display.component.html',
-  styleUrl: './experience-display.component.css',
-})
-export class ExperienceDisplayComponent {}

src/app/features/footer-display/footer-display.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-footer-display',
-  imports: [],
-  templateUrl: './footer-display.component.html',
-  styleUrl: './footer-display.component.css'
-})
-export class FooterDisplayComponent {
-
-}

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

@@ -1 +0,0 @@
-<app-about-display />

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import {AboutDisplayComponent} from '../../../features/about-display/about-display.component';
-
-@Component({
-  selector: 'app-about',
-  imports: [AboutDisplayComponent],
-  templateUrl: './about.component.html',
-  styleUrl: './about.component.css',
-})
-export class AboutComponent {}

src/app/layout/components/contact/contact.component.html

@@ -1 +0,0 @@
-<app-contact-display />

src/app/layout/components/experience/experience.component.html

@@ -1 +0,0 @@
-<app-experience-display />

src/app/layout/components/footer/footer.component.html

@@ -1 +0,0 @@
-<app-footer-display />

src/app/layout/components/header/header.component.ts

@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-import { HeaderNavLinksComponent } from '../../../features/header-display/header-nav-links/header-nav-links.component';
-import { HeaderLogoComponent } from '../../../features/header-display/header-logo/header-logo.component';
-import { HeaderContactLinksComponent } from '../../../features/header-display/header-contact-links/header-contact-links.component';
-import { HeaderTextAnimateSectionComponent } from '../../../features/header-display/header-text-animate-section/header-text-animate-section.component';
-
-@Component({
-  selector: 'app-header',
-  imports: [
-    HeaderNavLinksComponent,
-    HeaderLogoComponent,
-    HeaderContactLinksComponent,
-    HeaderTextAnimateSectionComponent,
-  ],
-  templateUrl: './header.component.html',
-  styleUrl: './header.component.css',
-})
-export class HeaderComponent {}

src/app/layout/components/hero/hero.component.html

@@ -1 +0,0 @@
-<app-hero-display />

src/app/layout/components/hero/hero.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import {HeroDisplayComponent} from '../../../features/hero-display/hero-display.component';
-
-@Component({
-  selector: 'app-hero',
-  imports: [HeroDisplayComponent],
-  templateUrl: './hero.component.html',
-  styleUrl: './hero.component.css',
-})
-export class HeroComponent {}

src/app/layout/components/projects/projects.component.html

@@ -1 +0,0 @@
-<app-projects-list />

src/app/layout/components/projects/projects.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  ProjectsListComponent
-} from '../../../features/project-display/components/projects-list/projects-list.component';
-
-@Component({
-  selector: 'app-projects',
-  imports: [ProjectsListComponent],
-  templateUrl: './projects.component.html',
-  styleUrl: './projects.component.css',
-})
-export class ProjectsComponent {}

src/app/pages/about/about.component.html

@@ -2,7 +2,7 @@
 
   <!-- Header section with NieR styling -->
   <div class="mb-6 lg:mb-8">
-    <app-section-title title="NEURAL PROFILE" />
+    <app-section-title title="NEURAL PROFILE"/>
     <!-- Subtle divider line -->
     <div class="mt-3 h-px bg-nier-border opacity-50"></div>
   </div>
@@ -15,7 +15,7 @@
       <div class="h-full bg-nier-bg border-2 border-nier-border font-terminal text-nier-dark">
         <!-- Inner content container with proper padding -->
         <div class="h-full p-4 lg:p-6">
-          <app-neural-profile-tree />
+          <app-neural-profile-tree/>
         </div>
       </div>
     </div>
@@ -29,7 +29,7 @@
           <div class="w-full h-full bg-nier-bg/10 border border-nier-border/50">
             <app-holo-video-container
               containerClasses="w-full h-full"
-              videoSrc="cyber_skull.mp4" />
+              videoSrc="video/cyber_skull.mp4"/>
           </div>
         </div>
       </div>

src/app/pages/about/about.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { SectionTitleComponent } from '../../components/section-title/section-title.component';
+import { HoloVideoContainerComponent } from '../../components/holo-video-container/holo-video-container.component';
+import { NeuralProfileTreeComponent } from './neural-profile-tree/neural-profile-tree.component';
+
+@Component({
+  selector: 'app-about',
+  imports: [
+    SectionTitleComponent,
+    HoloVideoContainerComponent,
+    NeuralProfileTreeComponent,
+  ],
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.css',
+})
+export class AboutComponent {}

src/app/pages/about/chip-container/chip-container.component.ts

@@ -4,8 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-chip-container',
   imports: [],
   templateUrl: './chip-container.component.html',
-  styleUrl: './chip-container.component.css'
+  styleUrl: './chip-container.component.css',
 })
-export class ChipContainerComponent {
+export class ChipContainerComponent {}
-
-}

src/app/pages/about/neural-profile-tree/neural-profile-tree.component.html

@@ -1,6 +1,7 @@
 <div class="flex gap-6 h-auto">
   <!-- Tree Component -->
-  <div class="bg-nier-bg border-2 border-nier-border text-nier-dark w-96 md:w-[28rem] lg:w-[32rem] font-terminal text-sm md:text-base lg:text-lg leading-relaxed p-4 md:p-6 h-auto">
+  <div
+    class="bg-nier-bg border-2 border-nier-border text-nier-dark w-96 md:w-[28rem] lg:w-[32rem] font-terminal text-sm md:text-base lg:text-lg leading-relaxed p-4 md:p-6 h-auto">
     @for (node of treeData(); track node.id) {
       <div
         class="border-l-2 border-transparent"
@@ -31,11 +32,19 @@
               {{ node.isExpanded ? '▼' : '▶' }}
             } @else {
               @switch (node.level) {
-                @case (2) { ├ }
+                @case (2) {
-                @case (3) {
+                  ├
-                  @if (isLastChild(node)) { └ } @else { ├ }
+                }
+                @case (3) {
+                  @if (isLastChild(node)) {
+                    └
+                  } @else {
+                    ├
+                  }
+                }
+                @default {
+                  +
                 }
-                @default { + }
               }
             }
           </span>

src/app/pages/about/neural-profile-tree/neural-profile-tree.component.ts

@@ -264,6 +264,7 @@ export class NeuralProfileTreeComponent {
   hoverChipChild(childId: string): void {
     this.hoveredNodeId.set(childId);
   }
+
   selectToolChild(childId: string): void {
     // Find the node in the tree and select it
     this.treeState.update((state) => {

src/app/pages/contact/contact.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import {ContactDisplayComponent} from '../../../features/contact-display/contact-display.component';
+import { SectionTitleComponent } from '../../components/section-title/section-title.component';
 
 @Component({
   selector: 'app-contact',
-  imports: [ContactDisplayComponent],
+  imports: [SectionTitleComponent],
   templateUrl: './contact.component.html',
   styleUrl: './contact.component.css',
 })

src/app/pages/experience/experience.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { ExperienceDisplayComponent } from '../../../features/experience-display/experience-display.component';
+import { SectionTitleComponent } from '../../components/section-title/section-title.component';
 
 @Component({
   selector: 'app-experience',
-  imports: [ExperienceDisplayComponent],
+  imports: [SectionTitleComponent],
   templateUrl: './experience.component.html',
   styleUrl: './experience.component.css',
 })

src/app/pages/hero/hero.component.html

@@ -1,7 +1,7 @@
 <section class="h-screen relative">
   <app-holo-video-container
     containerClasses="absolute inset-0 w-full h-full"
-    videoSrc="cyber_hands.mp4" />
+    videoSrc="video/cyber_hands.mp4" />
 
   <!-- Changed from justify-center to justify-start with top padding -->
   <div class="absolute inset-0 flex flex-col items-center justify-start pt-16 sm:pt-20 md:pt-24 lg:pt-28 xl:pt-32 2xl:pt-36 pointer-events-none px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20">

src/app/pages/hero/hero.component.ts

@@ -1,13 +1,13 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { HoloVideoContainerComponent } from '../../shared/ui/holo-video-container/holo-video-container.component';
+import { HoloVideoContainerComponent } from '../../components/holo-video-container/holo-video-container.component';
 
 @Component({
-  selector: 'app-hero-display',
+  selector: 'app-hero',
   imports: [HoloVideoContainerComponent],
-  templateUrl: './hero-display.component.html',
+  templateUrl: './hero.component.html',
-  styleUrl: './hero-display.component.css',
+  styleUrl: './hero.component.css',
 })
-export class HeroDisplayComponent implements OnInit, OnDestroy {
+export class HeroComponent implements OnInit, OnDestroy {
   displayText: string = '';
   nameText: string = '';
 

src/app/pages/projects/project-card/project-card.component.ts

@@ -8,7 +8,7 @@ import {
   ElementRef,
 } from '@angular/core';
 
-import { type Project } from '../../../../shared/models/project.model';
+import { type Project } from '../../../shared/models/project.model';
 
 @Component({
   selector: 'app-project-card',

src/app/pages/projects/projects.component.ts

@@ -1,17 +1,17 @@
 // project-list.component.ts
 import { Component, signal, computed, effect, OnInit } from '@angular/core';
-import { ProjectCardComponent } from '../project-card/project-card.component';
+import { ProjectCardComponent } from './project-card/project-card.component';
-import { SectionTitleComponent } from '../../../../shared/ui/section-title/section-title.component';
+import { SectionTitleComponent } from '../../components/section-title/section-title.component';
-import { type Project } from '../../../../shared/models/project.model';
+import { type Project } from '../../shared/models/project.model';
 
 @Component({
-  selector: 'app-project-list',
+  selector: 'app-projects',
   standalone: true,
   imports: [ProjectCardComponent, SectionTitleComponent],
-  templateUrl: './projects-list.component.html',
+  templateUrl: './projects.component.html',
-  styleUrl: './projects-list.component.css',
+  styleUrl: './projects.component.css',
 })
-export class ProjectListComponent implements OnInit {
+export class ProjectsComponent implements OnInit {
   // Signals
   projects = signal<Project[]>([]);
   selectedProject = signal<Project | null>(null);