Merge pull request #4 from andrecrjr/migrate-next

Migrate next
andrecrjr · Apr 19, 2024 · 347c231 · 347c231
2 parents fa7a659 + 9a78e21
commit 347c231
Show file tree

Hide file tree

Showing 27 changed files with 5,093 additions and 4,795 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -15,18 +15,21 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v3
+        with:
+          version: '8'
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npm install
-      - run: npm run build-export
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm run build-export
       - run: touch ./out/.nojekyll
       - name: Deploy 🚀
         uses: JamesIves/[email protected]

diff --git a/README.md b/README.md
@@ -1,34 +1,3 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+## My Lovely Portfolio ACJRHUB
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+* Next
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
@@ -1,17 +1,20 @@
 import React from 'react';
 import { GlobalHeader } from './Header.style';
-import Link from 'next/link';
+
 import { MenuLink } from './Header.style';
+import Link from 'next/link';
 
 const Header = () => {
 	return (
 		<GlobalHeader>
-			<Link href="/" passHref><a style={{textDecoration:"none"}}><h1 className="header--logo">ACJRHUB</h1></a></Link>
+			<Link href="/">
+				<h1 className="header--logo">ACJRHUB</h1>
+			</Link>
 			<nav className="header--menu">
-				<Link href="#about-me" passHref>
+				<Link href="#about-me">
 					<MenuLink>About Me</MenuLink>
 				</Link>
-				<Link href="#portfolio" passHref>
+				<Link href="#portfolio">
 					<MenuLink>Portfolio</MenuLink>
 				</Link>
 			</nav>

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/Portfolio/PortfolioCard.tsx b/components/Pages/Portfolio/PortfolioCard.tsx
@@ -18,7 +18,7 @@ const PortfolioCardsList = () => {
 				{PortfolioData.map((portfolio, index) =>{
 					return(
 						<>
-						{ index === 0 && <PortfolioItem>
+						{ index === 0 && <PortfolioItem key={index}>
 							<PortfolioItemImage bgImg="/img/unfinished.jpg" />
 							<PortfolioSoon style={{ padding: '15px' }}>
 								More coming soon!
@@ -43,15 +43,11 @@ const PortfolioCardsList = () => {
 							</PortfolioDescriptionContainer>
 							{portfolio.projectURL && (
 									<PortfolioListButtons>
-										<Link href={portfolio.projectURL} className="button" passHref>
-											<a target="_blank">
+										<Link href={portfolio.projectURL} className="button" >
 												Live View
-											</a>
 										</Link>
-										<Link href={portfolio.githubUrl} passHref>
-											<a target="_blank">
+										<Link href={portfolio.githubUrl} >
 												Github
-											</a>
 										</Link>
 									</PortfolioListButtons>
 							)}

diff --git a/components/Pages/Portfolio/index.tsx b/components/Pages/Portfolio/index.tsx
@@ -22,7 +22,6 @@ export const Portfolio: React.FC = () => {
 				</div>
 			</PortfolioPresentation>
 			<PortfolioCardsList />
-
 		</PortfolioContainer>
 	);
 };
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,3 +1,10 @@
 module.exports = {
 	reactStrictMode: true,
+	output: 'export',
+	compiler: {
+    	styledComponents: {
+			ssr:true
+		}
+  	},
+
 };