added scroll progress bar & changed theme

steadyfall · steadyfall · commit d37a1ae44ada · 2024-09-29T20:13:36.000-04:00
diff --git a/src/app/components/experienceTile.tsx b/src/app/components/experienceTile.tsx
@@ -10,7 +10,7 @@ export type ExperienceTileProps = {
 
 export function ExperienceTile({ companyLogo, companyName, position, period, responsibilities }: ExperienceTileProps) {
   return (
-    <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+    <div className="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-md">
       <div className="flex flex-col sm:flex-row items-center sm:items-start mb-4">
         <div className="mb-4 sm:mb-0 sm:mr-4 flex-shrink-0">
           <img
diff --git a/src/app/components/projectTile.tsx b/src/app/components/projectTile.tsx
@@ -9,7 +9,7 @@ export type ProjectTileProps = {
 
 export function ProjectTile({ title, description, repo, repoUrl }: ProjectTileProps) {
   return (
-    <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+    <div className="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-md">
       <div className="flex justify-between items-start mb-2">
         <h3 className="text-xl font-semibold">{title}</h3>
         {repo && (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,20 +5,21 @@ import "./globals.css";
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: "Himank Dave",
+  title: {
+    default: "Himank Dave",
+    template: "%s | Himank Dave"
+  },
   description: "Personal website of Himank Dave.",
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en">
-      <body
-        className={`${inter.className}`}
-      >
+    <html lang="en" className={inter.className}>
+      <body>
         {children}
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,6 +5,7 @@ import { Footer } from './components/footer'
 import { About } from './components/about'
 import { Experiences } from './components/experiences'
 import { Projects } from './components/projects'
+import Navbar from './components/navbar';
 
 export default function Portfolio() {
   // const [darkMode, setDarkMode] = useState(false)
@@ -80,7 +81,8 @@ export default function Portfolio() {
   return (
     // ${darkMode ? 'dark' : ''}
     <div className={`min-h-screen`}> 
-      <div className="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
+      <div className="bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200 transition-colors duration-300">
+        <Navbar />
         <div className="mx-auto max-w-full px-4 sm:px-6 md:px-8 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
           <Header />
           <main className="container mx-auto px-4 py-8">
