created components for sections

src/app/about-me/about-me.component.html

@@ -0,0 +1 @@
+<p>about-me works!</p>

src/app/about-me/about-me.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutMeComponent } from './about-me.component';
+
+describe('AboutMeComponent', () => {
+  let component: AboutMeComponent;
+  let fixture: ComponentFixture<AboutMeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AboutMeComponent]
+    });
+    fixture = TestBed.createComponent(AboutMeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/about-me/about-me.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about-me',
+  templateUrl: './about-me.component.html',
+  styleUrls: ['./about-me.component.css']
+})
+export class AboutMeComponent {
+
+}

src/app/app-routing.module.ts

@@ -1,7 +1,21 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { AboutMeComponent } from './about-me/about-me.component';
+import { TechComponent } from './tech/tech.component';
+import { ResumeComponent } from './resume/resume.component';
+import { ContactMeComponent } from './contact-me/contact-me.component';
+import { ProjectsComponent } from './projects/projects.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: 'about-me', component: AboutMeComponent },
+  { path: 'tech', component: TechComponent },
+  { path: 'projects', component: ProjectsComponent },
+  { path: 'resume', component: ResumeComponent },
+  { path: 'contact-me', component: ContactMeComponent },
+  { path: '', redirectTo: '/home', pathMatch: 'full' } 
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,4 +1 @@
-<app-layout></app-layout>
-<div class="">This is the dummy text for testing </div>
-
-<div class="card"> dfsfsdf</div>
+<app-layout></app-layout>

src/app/app.module.ts

@@ -11,12 +11,24 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { FormsModule } from '@angular/forms';
+import { HomeComponent } from './home/home.component';
+import { AboutMeComponent } from './about-me/about-me.component';
+import { TechComponent } from './tech/tech.component';
+import { ResumeComponent } from './resume/resume.component';
+import { ContactMeComponent } from './contact-me/contact-me.component';
+import { ProjectsComponent } from './projects/projects.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LayoutComponent,
-    TopbarComponent
+    TopbarComponent,
+    HomeComponent,
+    AboutMeComponent,
+    TechComponent,
+    ResumeComponent,
+    ContactMeComponent,
+    ProjectsComponent
   ],
   imports: [
     BrowserModule,

src/app/contact-me/contact-me.component.html

@@ -0,0 +1 @@
+<p>contact-me works!</p>

src/app/contact-me/contact-me.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactMeComponent } from './contact-me.component';
+
+describe('ContactMeComponent', () => {
+  let component: ContactMeComponent;
+  let fixture: ComponentFixture<ContactMeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ContactMeComponent]
+    });
+    fixture = TestBed.createComponent(ContactMeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contact-me/contact-me.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-me',
+  templateUrl: './contact-me.component.html',
+  styleUrls: ['./contact-me.component.css']
+})
+export class ContactMeComponent {
+
+}

src/app/home/home.component.html

@@ -0,0 +1 @@
+<p>home works!</p>

src/app/home/home.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomeComponent]
+    });
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent {
+
+}

src/app/layout/layout.component.html

@@ -1 +1,2 @@
-<app-topbar></app-topbar>
+<app-topbar></app-topbar>
+<router-outlet></router-outlet>

src/app/layout/topbar/topbar.component.css

@@ -81,4 +81,40 @@ input:checked+.slider:before {
     border-top-right-radius: 50px;
     border-top-left-radius: 50px;
     transform: rotateZ(-135deg);
-}
+}
+
+
+    /* Style for the navigation button */
+    .nav-button {
+        display: inline-block;
+        position: relative;
+        text-decoration: none;
+        color: #333; /* Change the color as needed */
+        padding: 10px 20px;
+        font-size: 16px;
+        transition: color 0.3s ease-in-out;
+      }
+
+      /* Underline effect */
+      .nav-button::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        background-color: #3498db; /* Change the color as needed */
+        transform: scaleX(0);
+        transform-origin: bottom right;
+        transition: transform 0.3s ease-in-out;
+      }
+
+      /* Hover effect */
+      .nav-button:hover {
+        color: #e74c3c; /* Change the hover color as needed */
+      }
+
+      .nav-button:hover::before {
+        transform: scaleX(1);
+        transform-origin: bottom left;
+      }

src/app/layout/topbar/topbar.component.html

@@ -8,29 +8,24 @@
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                 <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="#">Home</a>
+                    <a class="nav-link active nav-button" aria-current="page" routerLink="/home">Home</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
+                    <a class="nav-link active nav-button" aria-current="page" routerLink="/about-me">About Me</a>
                 </li>
-                <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
-                        data-bs-toggle="dropdown" aria-expanded="false">
-                        Dropdown
-                    </a>
-                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                        <li><a class="dropdown-item" href="#">Action</a></li>
-                        <li><a class="dropdown-item" href="#">Another action</a></li>
-                        <li>
-                            <hr class="dropdown-divider">
-                        </li>
-                        <li><a class="dropdown-item" href="#">Something else here</a></li>
-                    </ul>
+                <li class="nav-item">
+                    <a class="nav-link active nav-button" aria-current="page" routerLink="/tech">Tech</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active nav-button" aria-current="page" routerLink="/projects">Projects</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active nav-button" aria-current="page" routerLink="/resume">Resume</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+                    <a class="nav-link active nav-button" aria-current="page" routerLink="/contact-me">Contact Me</a>
                 </li>
             </ul>
             <div class="mx-2">
@@ -39,10 +34,10 @@
                     <span class="slider round"></span>
                 </label>
             </div>
-            <form class="d-flex">
+            <!-- <form class="d-flex">
                 <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                 <button class="btn btn-outline-success" type="submit">Search</button>
-            </form>
+            </form> -->
         </div>
     </div>
 </nav>

src/app/projects/projects.component.html

@@ -0,0 +1 @@
+<p>projects works!</p>

src/app/projects/projects.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectsComponent } from './projects.component';
+
+describe('ProjectsComponent', () => {
+  let component: ProjectsComponent;
+  let fixture: ComponentFixture<ProjectsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectsComponent]
+    });
+    fixture = TestBed.createComponent(ProjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/projects/projects.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-projects',
+  templateUrl: './projects.component.html',
+  styleUrls: ['./projects.component.css']
+})
+export class ProjectsComponent {
+
+}

src/app/resume/resume.component.html

@@ -0,0 +1 @@
+<p>resume works!</p>

src/app/resume/resume.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResumeComponent } from './resume.component';
+
+describe('ResumeComponent', () => {
+  let component: ResumeComponent;
+  let fixture: ComponentFixture<ResumeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ResumeComponent]
+    });
+    fixture = TestBed.createComponent(ResumeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/resume/resume.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-resume',
+  templateUrl: './resume.component.html',
+  styleUrls: ['./resume.component.css']
+})
+export class ResumeComponent {
+
+}

src/app/tech/tech.component.html

@@ -0,0 +1 @@
+<p>tech works!</p>

src/app/tech/tech.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TechComponent } from './tech.component';
+
+describe('TechComponent', () => {
+  let component: TechComponent;
+  let fixture: ComponentFixture<TechComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TechComponent]
+    });
+    fixture = TestBed.createComponent(TechComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/tech/tech.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tech',
+  templateUrl: './tech.component.html',
+  styleUrls: ['./tech.component.css']
+})
+export class TechComponent {
+
+}