Refactor code structure for improved readability and maintainability

src/app/app.routes.ts

@@ -1,6 +1,58 @@
 import { Routes } from '@angular/router';
 import { OtpComponent } from './auth/otp/otp.component';
+import { authGuard } from './guards/auth-guard';
+import { AdminLayout } from './layout/admin-layout/admin-layout';
+import { About } from './admin/about/about';
+import { Resume } from './admin/resume/resume';
+import { Projects } from './admin/projects/projects';
+
+const enum AdminRouteTitles {
+    Login = 'Login',
+    About = 'About',
+    Resume = 'Resume',
+    Projects = 'Projects',
+}
 
 export const routes: Routes = [
-    { path: '**', pathMatch: 'full', component: OtpComponent }
+    {
+        path: '',
+        redirectTo: 'admin',
+        pathMatch: 'full'
+    },
+    {
+        path: 'admin',
+        component: AdminLayout,
+        title: 'Admin',
+        children: [
+            {
+                path: '',
+                redirectTo: 'about',   // ✔ correct relative redirect
+                pathMatch: 'full'
+            },
+            {
+                path: 'login',
+                component: OtpComponent,
+                title: AdminRouteTitles.Login
+            },
+            {
+                path: 'about',
+                component: About,
+                canActivate: [authGuard],
+                title: AdminRouteTitles.About,
+            },
+            {
+                path: 'resume',
+                component: Resume,
+                canActivate: [authGuard],
+                title: AdminRouteTitles.Resume,
+            },
+            {
+                path: 'projects',
+                component: Projects,
+                canActivate: [authGuard],
+                title: AdminRouteTitles.Projects,
+            },
+        ],
+    }
 ];
+