- migrated to new next

andrecrjr · Apr 19, 2024 · 309a17c · 309a17c
1 parent eba4d32
commit 309a17c
Show file tree

Hide file tree

Showing 22 changed files with 265 additions and 250 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,62 @@
+import { Metadata } from 'next'
+import Script from 'next/script'
+import { fontPrimaryTheme } from '@/styles/theme';
+import StyledComponentsRegistry from '@/lib/registry';
+import { GlobalThemeProvider } from '@/components/Contexts/ThemeProvider';
+
+export const metadata: Metadata = {
+  title: 'ACJRHUB - Portfolio do Ac Junior',
+  description: `André Carlos Jr's Portfolio to maintain its portfolio projects and works in Front-end development!`,
+  robots: "index, follow"
+}
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode
+}) {
+
+  return (
+    <html lang="en">
+      <head>
+      <Script
+				strategy="afterInteractive"
+				async
+				src={'https://www.googletagmanager.com/gtag/js?id=G-YCSLXN1PVV'}
+			/>
+			<Script id="google-analytics" strategy="afterInteractive">
+				{process.env.NODE_ENV !== "development" && `
+						window.dataLayer = window.dataLayer || [];
+						function gtag(){
+							dataLayer.push(arguments);
+						}
+						gtag('js', new Date());
+						gtag('config', 'G-YCSLXN1PVV');
+				`}
+			</Script>
+          <link rel="preconnect" 
+          href="https://fonts.googleapis.com" />
+					<link
+              rel="preconnect"
+              href="https://fonts.gstatic.com"
+              crossOrigin={''}
+					/>
+					<link href={`${fontPrimaryTheme.urlGoogleFont}`} 
+            rel="stylesheet" />
+					{<meta
+						name="google-site-verification"
+						content="google504a726bb71d2ea2"
+					/>}
+      </head>
+      <body>
+        <StyledComponentsRegistry>
+          <GlobalThemeProvider>
+            {children}
+          </GlobalThemeProvider>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,19 @@
+import Header from "@/components/Layout/Header";
+import { AboutMe } from "@/components/Pages/AboutMe";
+import { AboutMeContainer } from "@/components/Pages/AboutMe/About.style";
+import MainPage from "@/components/Pages/MainPage";
+import { Portfolio } from "@/components/Pages/Portfolio";
+import { GlobalContainer } from "@/styles/global";
+
+type Props = {};
+
+export default function Page({}: Props) {
+  return (
+      <GlobalContainer>
+        <Header />
+        <MainPage />
+        <AboutMe />
+        <Portfolio />
+      </GlobalContainer>
+  );
+}
diff --git a/components/Contexts/ThemeProvider.tsx b/components/Contexts/ThemeProvider.tsx
@@ -0,0 +1,51 @@
+"use client"
+import { theme } from "@/styles/theme";
+import React, { useEffect } from "react";
+import { ThemeProvider } from "styled-components";
+import { createGlobalStyle } from "styled-components";
+import Aos from 'aos';
+import 'aos/dist/aos.css';
+
+const GlobalStyle = createGlobalStyle`
+*{
+	margin:0;
+	padding:0;
+}
+
+body{
+	font-family: ${(props) => props.theme.fontFamily};
+}
+
+a{
+	&:hover{
+		transition:transform 200ms linear;
+	}
+	opacity: 0.7;
+	transition: opacity 300ms ease-out;
+	&:hover{
+		opacity: 1;
+	}
+	&:visited{
+		color: ${(props) => props.theme.colors.primary}
+	}
+}
+`;
+
+type Props = {
+    children: React.ReactNode
+};
+
+export const GlobalThemeProvider = ({children}: Props) => {
+
+
+useEffect(() => {
+		Aos.init({ duration: 1500 });
+	}, []);
+
+  return (
+        <ThemeProvider theme={theme}>
+			<GlobalStyle />
+			{children}
+    	</ThemeProvider>
+    );
+};
diff --git a/components/Layout/Header/Header.style.tsx b/components/Layout/Header/Header.style.tsx
@@ -1,3 +1,5 @@
+
+"use client"
 import styled from 'styled-components';
 
 export const MenuLink = styled.div`
@@ -19,7 +21,7 @@ export const GlobalHeader = styled.header`
 	align-items: center;
 	background-color: transparent;
 	border-bottom: 1px solid white;
-	height: ${(props) => props.theme.heights.menuHeight};
+	height: ${({theme}) => theme.heights.menuHeight};
 	color: ${(props) => props.theme.colors.primary};
 	position: absolute;
 	top: 0;
@@ -33,6 +35,9 @@ export const GlobalHeader = styled.header`
 	.header--menu {
 		display: flex;
 	}
+	a{
+		text-decoration: none;
+	}
 	@media (min-width: 767px) {
 		display: grid;
 		grid-template-columns: ${(props) => props.theme.gridHeader};

diff --git a/components/Layout/Header/index.tsx b/components/Layout/Header/index.tsx
@@ -7,7 +7,9 @@ import Link from 'next/link';
 const Header = () => {
 	return (
 		<GlobalHeader>
-			<Link href="/"><h1 className="header--logo">ACJRHUB</h1></Link>
+			<Link href="/">
+				<h1 className="header--logo">ACJRHUB</h1>
+			</Link>
 			<nav className="header--menu">
 				<Link href="#about-me">
 					<MenuLink>About Me</MenuLink>

diff --git a/components/Pages/AboutMe/About.style.tsx b/components/Pages/AboutMe/About.style.tsx
@@ -1,3 +1,4 @@
+"use client"
 import { Container, PresentationContainer } from '../styles';
 import styled from 'styled-components';
 import { Presentation } from '../styles';

diff --git a/components/Pages/AboutMe/Experience/Experience.style.tsx b/components/Pages/AboutMe/Experience/Experience.style.tsx
@@ -1,3 +1,4 @@
+"use client"
 import styled from "styled-components";
 
 

diff --git a/components/Pages/MainPage/index.tsx b/components/Pages/MainPage/index.tsx
@@ -1,12 +1,11 @@
 import React, { ReactElement } from 'react';
 import { Container, Presentation, PresentationContainer } from '../styles';
-import { SocialNetwork } from '../../Layout/SocialNetwork';
 import { Stacks } from '../../Layout/Stacks';
 import {
 	MyStackContainer,
-	PresentationPic,
 	SocialNetworkContainer
 } from './style';
+import { SocialNetwork } from '@/components/Layout/SocialNetwork';
 
 export default function MainPage({}): ReactElement {
 	return (

diff --git a/components/Pages/MainPage/style.tsx b/components/Pages/MainPage/style.tsx
@@ -1,3 +1,4 @@
+"use client"
 import styled from 'styled-components';
 
 export const PresentationPic = styled.div<{ bgImage: string }>`

diff --git a/components/Pages/Portfolio/Portfolio.style.tsx b/components/Pages/Portfolio/Portfolio.style.tsx
@@ -1,3 +1,4 @@
+"use client"
 import styled from 'styled-components';
 import { Container, Presentation } from '../styles';
 

diff --git a/components/Pages/styles/index.tsx b/components/Pages/styles/index.tsx
@@ -1,3 +1,4 @@
+"use client"
 import styled from 'styled-components';
 
 export const Container = styled.section`

diff --git a/lib/registry.tsx b/lib/registry.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager, ThemeProvider, createGlobalStyle } from 'styled-components'
+import { theme } from '@/styles/theme'
+
+
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+ console.log(theme)
+  return (
+	  	<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+				{children}
+		</StyleSheetManager>
+  )
+}
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,10 @@
 module.exports = {
 	reactStrictMode: true,
 	output: 'export',
+	compiler: {
+    	styledComponents: {
+			ssr:true
+		}
+  	},
+
 };
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
 		"next": "^14.2.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"styled-components": "^5.3.11"
+		"styled-components": "^6.1.8"
 	},
 	"devDependencies": {
 		"@types/aos": "^3.0.7",

diff --git a/pages/_app.tsx b/pages/_app.tsx