diff --git a/components/Home.js b/components/Home.js new file mode 100644 index 0000000..e1a5966 --- /dev/null +++ b/components/Home.js @@ -0,0 +1,69 @@ +import Head from 'next/head'; +import Image from 'next/image'; +import Layout, { siteTitle } from '../components/layout'; +import utilStyles from '../styles/utils.module.css'; +import styles from '../styles/layout.module.css'; +import Link from 'next/link'; + +export default function Home() { + return ( + + + {siteTitle} + + +
+

+ Welcome to TechNexus, where technology meets innovation. + Explore, learn, and connect with the future of tech. +

+
+ + {/* Adding a futuristic hero section */} +
+ Futuristic background +
+

Welcome to the Future

+

+ Explore cutting-edge technology trends and build the future with us. +

+
+
+ +
+

Meet the Creator

+
+ Profile Picture +

+ Hi, I’m Your Name. I’m passionate about coding, robotics, and the future of AI. + Let’s build something amazing together! +

+
+
+ + {/* Futuristic Button Links */} +
+ + Explore Projects + + + Learn More About Us + +
+ + ); +} diff --git a/components/layout.js b/components/layout.js index df60d97..28ab923 100644 --- a/components/layout.js +++ b/components/layout.js @@ -1,9 +1,3 @@ -// import styles from '../styles/layout.module.css'; - -// export default function Layout({ children }) { -// return
{children}
; -// } - import Head from 'next/head'; import Image from 'next/image'; import styles from '../styles/layout.module.css'; @@ -11,7 +5,7 @@ import utilStyles from '../styles/utils.module.css'; import Link from 'next/link'; const name = 'Your Name'; -export const siteTitle = 'Next.js Sample Website'; +export const siteTitle = 'Next.js Futuristic Website'; export default function Layout({ children, home }) { return ( @@ -20,7 +14,7 @@ export default function Layout({ children, home }) { +
{home ? ( <> - -

{name}

+
+ Profile Picture +

{name}

+
) : ( <> - - - + Profile Picture

- - {name} + + {name}

)}
-
{children}
+ +
{children}
+ {!home && (
- ← Back to home + ← Back to home
)} ); -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index abe6b11..a925f57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "nextjs-blog", + "name": "nextjs-basic", "lockfileVersion": 2, "requires": true, "packages": { @@ -7,6 +7,7 @@ "dependencies": { "gray-matter": "^4.0.3", "next": "latest", + "nprogress": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0" } @@ -391,6 +392,11 @@ } } }, + "node_modules/nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -716,6 +722,11 @@ "use-sync-external-store": "1.2.0" } }, + "nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" + }, "picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", diff --git a/package.json b/package.json index 42f5785..daa2043 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "dependencies": { "gray-matter": "^4.0.3", "next": "latest", + "nprogress": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/pages/_app.js b/pages/_app.js index 371678b..a99f446 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,6 +1,33 @@ import '../styles/globals.css'; - +import { useEffect } from 'react'; +import { useRouter } from 'next/router'; +import NProgress from 'nprogress'; // For page load progress bar +import 'nprogress/nprogress.css'; // Import NProgress styles +import Layout from '../components/layout'; // Global Layout component export default function App({ Component, pageProps }) { - return ; - } \ No newline at end of file + const router = useRouter(); + + // NProgress (page transition loading effect) + useEffect(() => { + const handleRouteStart = () => NProgress.start(); + const handleRouteDone = () => NProgress.done(); + + router.events.on('routeChangeStart', handleRouteStart); + router.events.on('routeChangeComplete', handleRouteDone); + router.events.on('routeChangeError', handleRouteDone); + + return () => { + router.events.off('routeChangeStart', handleRouteStart); + router.events.off('routeChangeComplete', handleRouteDone); + router.events.off('routeChangeError', handleRouteDone); + }; + }, [router]); + + return ( + + {/* Wrapping the component with global layout */} + + + ); +} diff --git a/pages/index.js b/pages/index.js index 84136bf..bd387ab 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,222 +1,3 @@ -// import Head from 'next/head' -// import Link from 'next/link'; -// import Script from 'next/script'; - -// export default function Home() { -// return ( -//
-// -// Create Next App -// -// -//