From e7605311650648e397cbf572dfd0fa40ea867d0d Mon Sep 17 00:00:00 2001 From: Papali Priya Ratan Sahu Date: Mon, 14 Oct 2024 11:16:53 +0530 Subject: [PATCH 1/4] tried to do some changes --- components/Home.js | 69 +++++++++++++++ components/layout.js | 61 +++++++------- package-lock.json | 13 ++- package.json | 1 + pages/_app.js | 33 +++++++- styles/layout.module.css | 178 ++++++++++++++++++++++++++++++++++++--- styles/utils.module.css | 171 ++++++++++++++++++++++++++----------- 7 files changed, 430 insertions(+), 96 deletions(-) create mode 100644 components/Home.js 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/styles/layout.module.css b/styles/layout.module.css index 38cc454..33f124c 100644 --- a/styles/layout.module.css +++ b/styles/layout.module.css @@ -1,17 +1,169 @@ +/* Container and layout styles */ +.container { + max-width: 800px; + margin: 0 auto; + padding: 0 1.5rem; +} +.header { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem 0; +} - .container { - max-width: 36rem; - padding: 0 1rem; - margin: 3rem auto 6rem; +/* Profile Section */ +.profileSection { + text-align: center; + margin: 3rem 0; +} + +.profileContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; +} + +/* Main content fade-in animation */ +.mainContent { + animation: fadeIn 1s ease-in-out; +} + +/* Back to Home styles */ +.backToHome { + margin: 3rem 0 0; +} + +.backButton { + color: #0070f3; + text-decoration: none; + font-weight: bold; + cursor: pointer; + transition: color 0.3s ease; +} + +.backButton:hover { + color: #ff007a; + text-shadow: 0 0 8px rgba(255, 0, 122, 0.8); +} + +/* Glow effects for elements */ +.glowEffect { + box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); + transition: box-shadow 0.3s ease; +} + +.glowEffect:hover { + box-shadow: 0 0 30px rgba(0, 255, 255, 0.7); +} + +.smallProfileGlow { + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + transition: box-shadow 0.3s ease; +} + +.smallProfileGlow:hover { + box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); +} + +/* Futuristic Hero Section */ +.heroSection { + position: relative; + width: 100%; + height: 400px; + margin-bottom: 2rem; + overflow: hidden; +} + +.heroImage { + z-index: -1; + filter: blur(4px) brightness(70%); +} + +.heroOverlay { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + text-align: center; + z-index: 1; +} + +.heroTitle { + font-size: 3rem; + color: #fff; + text-shadow: 0 0 15px rgba(0, 255, 255, 1); + animation: pulseText 1.5s ease-in-out infinite; +} + +.heroSubtitle { + font-size: 1.2rem; + margin-top: 1rem; + color: #fff; + text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); +} + +/* Futuristic Button with glow effect */ +.futuristicButton { + display: inline-block; + padding: 0.75rem 1.5rem; + margin: 1rem; + background: linear-gradient(135deg, #00ffcc, #0070f3); + border-radius: 30px; + font-size: 1.1rem; + font-weight: 600; + color: #fff; + text-transform: uppercase; + text-decoration: none; + transition: background 0.3s ease, box-shadow 0.3s ease; + cursor: pointer; +} + +.futuristicButton:hover { + background: linear-gradient(135deg, #ff007a, #0070f3); + box-shadow: 0 0 20px rgba(255, 0, 122, 0.7); +} + +/* Text effects */ +.titleEffect { + font-size: 2.5rem; + color: #fff; + background: linear-gradient(to right, #00f, #0ff); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: glowText 1.5s ease-in-out infinite alternate; +} + +/* Keyframe animation for glowing title text */ +@keyframes glowText { + from { + text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #0ff, 0 0 20px #0ff; + } + to { + text-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 30px #0ff, 0 0 40px #0ff; + } +} + +/* Keyframe animation for pulsing hero title text */ +@keyframes pulseText { + 0% { + text-shadow: 0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.5); + } + 100% { + text-shadow: 0 0 30px rgba(0, 255, 255, 1), 0 0 50px rgba(0, 255, 255, 1); + } +} + +/* Fade-in animation */ +@keyframes fadeIn { + from { + opacity: 0; } - - .header { - display: flex; - flex-direction: column; - align-items: center; + to { + opacity: 1; } - - .backToHome { - margin: 3rem 0 0; - } \ No newline at end of file +} diff --git a/styles/utils.module.css b/styles/utils.module.css index 744a362..3424fd7 100644 --- a/styles/utils.module.css +++ b/styles/utils.module.css @@ -1,52 +1,129 @@ +/* Heading styles */ .heading2Xl { - font-size: 2.5rem; - line-height: 1.2; - font-weight: 800; - letter-spacing: -0.05rem; - margin: 1rem 0; + font-size: 2.5rem; + line-height: 1.2; + font-weight: 800; + letter-spacing: -0.05rem; + margin: 1rem 0; +} + +.headingXl { + font-size: 2rem; + line-height: 1.3; + font-weight: 800; + letter-spacing: -0.05rem; + margin: 1rem 0; +} + +.headingLg { + font-size: 1.5rem; + line-height: 1.4; + margin: 1rem 0; +} + +.headingMd { + font-size: 1.2rem; + line-height: 1.5; +} + +/* Image border radius */ +.borderCircle { + border-radius: 9999px; /* Maintaining your rounded corners */ +} + +/* Color inherit to ensure consistency in link colors */ +.colorInherit { + color: inherit; +} + +/* Margins and padding */ +.marginBottomSm { + margin-bottom: 1rem; +} + +.padding1px { + padding-top: 1px; +} + +/* List styles */ +.list { + list-style: none; + padding: 0; + margin: 0; +} + +.listItem { + margin: 0 0 1.25rem; +} + +/* Light text color */ +.lightText { + color: #666; +} + +/* Glow Effects (from previous layout) */ +.glowEffect { + box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); + transition: box-shadow 0.3s ease; +} + +.glowEffect:hover { + box-shadow: 0 0 30px rgba(0, 255, 255, 0.7); +} + +.smallProfileGlow { + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + transition: box-shadow 0.3s ease; +} + +.smallProfileGlow:hover { + box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); +} + +/* Title text effect */ +.titleEffect { + font-size: 2.5rem; + color: #fff; + background: linear-gradient(to right, #00f, #0ff); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: glowText 1.5s ease-in-out infinite alternate; +} + +/* Back to home button style */ +.backButton { + color: #0070f3; + text-decoration: none; + font-weight: bold; + cursor: pointer; + transition: color 0.3s ease; +} + +.backButton:hover { + color: #ff007a; + text-shadow: 0 0 8px rgba(255, 0, 122, 0.8); +} + +/* Animation for glowing title */ +@keyframes glowText { + from { + text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #0ff, 0 0 20px #0ff; } - - .headingXl { - font-size: 2rem; - line-height: 1.3; - font-weight: 800; - letter-spacing: -0.05rem; - margin: 1rem 0; + to { + text-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 30px #0ff, 0 0 40px #0ff; } - - .headingLg { - font-size: 1.5rem; - line-height: 1.4; - margin: 1rem 0; +} + +/* Fade-in animation for main content */ +@keyframes fadeIn { + from { + opacity: 0; } - - .headingMd { - font-size: 1.2rem; - line-height: 1.5; + to { + opacity: 1; } - - .borderCircle { - border-radius: 9999px; - } - - .colorInherit { - color: inherit; - } - - .padding1px { - padding-top: 1px; - } - - .list { - list-style: none; - padding: 0; - margin: 0; - } - - .listItem { - margin: 0 0 1.25rem; - } - - .lightText { - color: #666; - } \ No newline at end of file +} + +.mainContent { + animation: fadeIn 1s ease-in-out; +} From b749ca2266e86490f9647413570e79aacd7f6728 Mon Sep 17 00:00:00 2001 From: Papali Priya Ratan Sahu Date: Mon, 14 Oct 2024 11:27:54 +0530 Subject: [PATCH 2/4] trying to update --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index be97521..ec1f578 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,7 @@ if (youEnjoyed) { ``` --------- happy coding fellas!!💕✨ +thank You ----------- From 0ac5fcde173e1412871153babb76a0dee69bbd08 Mon Sep 17 00:00:00 2001 From: Papali Priya Ratan Sahu Date: Mon, 14 Oct 2024 11:40:57 +0530 Subject: [PATCH 3/4] added --- pages/index.js | 221 +------------------------------------------------ 1 file changed, 1 insertion(+), 220 deletions(-) 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 -// -// -//