25 move project to nextjs (#27)

* Move the whole project to Next * Fix built files * Add description to links and fix navbar * Add aria label and custom loader
alex-dishen · Jul 11, 2023 · 6811dce · 6811dce
1 parent 144536b
commit 6811dce
Show file tree

Hide file tree

Showing 21 changed files with 757 additions and 319 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -15,7 +15,7 @@ jobs:
       url: https://alex-dishen.web.app
     steps:
       - uses: actions/checkout@v3
-      - run: npm i && npm run build
+      - run: yarn i && yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/hosting-on-pr.yml b/.github/workflows/hosting-on-pr.yml
@@ -0,0 +1,16 @@
+name: Deploy to Firebase Hosting on PR
+on: pull_request
+
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: yarn && yarn build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ALEX_DISHEN }}'
+          expires: 3d
+          projectId: alex-dishen
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,11 @@
 node_modules
 
 # production
-/dist
+/out
+
+.next
+tsconfig.tsbuildinfo
+.eslintcache
 
 .next
 tsconfig.tsbuildinfo

diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@
 
 - React
 - TypeScript
+- Next.js
 - Styled-Components
 
 ## Screenshots
@@ -47,12 +48,7 @@ $ yarn
 4. Run the project.
 
 ```sh
-$ npm start
+$ npm run dev
 or
-$ yarn start
+$ yarn dev
 ```
-
-## Navigation
-
-- See my previous project [Swipi](https://github.com/midstem/swipi)
-- See my next project [Swipi Landing](https://github.com/midstem/swipi-landing)
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -24,11 +24,11 @@ const About = () => {
     <StyledAbout>
       <Header>Meet Oleksandr</Header>
       <Image
+        unoptimized
         src="/red-shirt.webp"
         alt="Oleksandr in red shirt"
         height={350}
         width={600}
-        quality={100}
       />
       <Greeting>Greetings and welcome to my personal website!</Greeting>
       <AboutMe>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
-    <html>
+    <html lang="en">
       <body>
         <StyledComponentsRegistry>
           <Navbar />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import Image from 'next/image'
+import Image, { ImageLoaderProps } from 'next/image'
 import { options } from './constants'
 import RightArrow from 'src/assets/icons/arrow-right.svg'
 import {
@@ -18,6 +18,16 @@ import {
   StyledLink,
 } from './styles'
 
+const imageLoader = ({
+  src,
+  width,
+  quality,
+}: {
+  src: string
+  width: number
+  quality?: number
+}) => `${src}?w=${width}&q=${quality}`
+
 const Home = () => (
   <StyledHome>
     <Welcome>
@@ -29,7 +39,8 @@ const Home = () => (
             alt="Oleksandr in black shirt"
             width={100}
             height={100}
-            unoptimized
+            quality={100}
+            loader={imageLoader}
           />
         </ImageHolder>
         <Name>Oleksandr</Name>

diff --git a/moris.json b/moris.json
@@ -1,3 +1,3 @@
 {
-    "useAbsolutePath": "-"
-}
+  "useAbsolutePath": "-"
+}
diff --git a/next.config.js b/next.config.js
@@ -1,10 +1,29 @@
-module.exports = {
+const nextConfig = {
+  trailingSlash: true,
+  output: 'export',
+  image: {
+    loader: 'custom'
+  },
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ["@svgr/webpack"]
-    });
-
-    return config;
+    const fileLoaderRule = config.module.rules.find(rule =>
+      rule.test?.test?.('.svg'),
+    )
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: /url/ },
+        use: ['@svgr/webpack'],
+      },
+    )
+    fileLoaderRule.exclude = /\.svg$/i
+    return config
   },
-};
+}
+
+export default nextConfig
diff --git a/package.json b/package.json
@@ -2,9 +2,10 @@
   "name": "portfolio",
   "version": "1.0.0",
   "homepage": "http://alex-dishen.github.io/portfolio",
+  "type": "module",
   "scripts": {
     "dev": "next dev",
-    "start": "next start",
+    "start": "serve out",
     "build": "next build",
     "lint": "eslint --cache ./src ./app",
     "lint:format": "prettier --write --loglevel warn \"./**/*.{js,jsx,ts,tsx,css,md,json}\"",
@@ -37,6 +38,7 @@
     "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "serve": "^14.2.0",
     "styled-components": "^6.0.3",
     "swipi": "^1.1.8",
     "typescript": "^4.9.5"

diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/src/components/Navbar/constants.tsx b/src/components/Navbar/constants.tsx
@@ -1,3 +1,4 @@
+import { Paths } from 'src/constants'
 import Bolt from 'src/assets/icons/bolt.svg'
 import FBolt from 'src/assets/icons/bolt-filled.svg'
 import Pen from 'src/assets/icons/pen.svg'
@@ -10,24 +11,34 @@ import FMail from 'src/assets/icons/mail-filled.svg'
 
 export const pages = [
   {
-    path: '/',
+    path: Paths.HOME,
+    ariaLabel: 'Home',
     filledPicture: <FExplore />,
     plainPicture: <Explore />,
   },
   {
-    path: '/projects',
+    path: Paths.PROJECTS,
+    ariaLabel: 'Projects',
     filledPicture: <FBolt />,
     plainPicture: <Bolt />,
   },
   {
-    path: 'https://medium.com/@oleksandrdidyshen',
+    path: Paths.BLOG,
+    ariaLabel: 'Blog',
     filledPicture: <Pen />,
     plainPicture: <Pen />,
   },
   {
-    path: '/about',
+    path: Paths.ABOUT,
+    ariaLabel: 'About',
     filledPicture: <FPerson />,
     plainPicture: <Person />,
   },
-  { path: '/contact', filledPicture: <FMail />, plainPicture: <Mail /> },
+  {
+    path: Paths.CONTACT,
+    ariaLabel: 'Contact information',
+
+    filledPicture: <FMail />,
+    plainPicture: <Mail />,
+  },
 ]
diff --git a/src/components/Navbar/helpers.ts b/src/components/Navbar/helpers.ts
@@ -1,14 +1,15 @@
+import { Paths } from 'src/constants'
 import { glowingColors } from 'src/styles/palette'
 
 export const getGlowingColor = (
   location: string,
   setGlowingColor: (a: string) => void,
 ) => {
-  if (location === '/') return setGlowingColor(glowingColors.blue)
+  if (location === Paths.HOME) return setGlowingColor(glowingColors.blue)
 
-  if (location === '/projects') return setGlowingColor(glowingColors.orange)
+  if (location === Paths.PROJECTS) return setGlowingColor(glowingColors.orange)
 
-  if (location === '/about') return setGlowingColor(glowingColors.red)
+  if (location === Paths.ABOUT) return setGlowingColor(glowingColors.red)
 
-  if (location === '/contact') return setGlowingColor(glowingColors.purple)
+  if (location === Paths.CONTACT) return setGlowingColor(glowingColors.purple)
 }
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -15,11 +15,12 @@ const Navbar = () => {
   return (
     <>
       <StyledNavbar delay={animationDelay} isMobile={isMobile}>
-        {pages.map(({ path, filledPicture, plainPicture }) => (
+        {pages.map(({ path, filledPicture, plainPicture, ariaLabel }) => (
           <LinkHolder key={path} glowingColor={glowingColor}>
             <StyledLink
               href={path}
               target={path.includes('http') ? '_blank' : ''}
+              aria-label={ariaLabel}
             >
               {pathName === path ? filledPicture : plainPicture}
             </StyledLink>

diff --git a/src/components/Navbar/styles.ts b/src/components/Navbar/styles.ts
@@ -38,7 +38,6 @@ export const StyledLink = styled(Link)`
   height: 100%;
   width: 100%;
   border-radius: 12px;
-  /* padding: 10px; */
   background-color: black;
 `
 
@@ -55,8 +54,6 @@ export const LinkHolder = styled.div<ImageHolderTypes>(
     overflow: hidden;
 
     svg {
-      /* height: 100%; */
-      /* width: 100%; */
       height: 26px;
       width: 26px;
       transition: 0.4s;

diff --git a/src/components/Navbar/useNavbar.ts b/src/components/Navbar/useNavbar.ts
@@ -1,5 +1,6 @@
 import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
+import { Paths } from 'src/constants'
 import { getGlowingColor } from 'src/components/Navbar/helpers'
 
 const useNavbar = () => {
@@ -9,7 +10,7 @@ const useNavbar = () => {
   const pathName = usePathname()
 
   const getAnimationDelay = () =>
-    setAnimationDelay(pathName === '/' ? 3.4 : 0.9)
+    setAnimationDelay(pathName === Paths.HOME ? 3.4 : 0.9)
 
   const getIsMobile = () => setIsMobile(window.innerWidth < 1050 ? true : false)
 

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -0,0 +1,7 @@
+export enum Paths {
+  HOME = '/',
+  ABOUT = '/about/',
+  BLOG = 'https://medium.com/@oleksandrdidyshen',
+  PROJECTS = '/projects/',
+  CONTACT = '/contact/',
+}
diff --git a/src/hooks/useInView/types.ts b/src/hooks/useInView/types.ts
@@ -1,3 +1,3 @@
 export interface IVisibleSections {
-  [key: string]: boolean;
+  [key: string]: boolean
 }
diff --git a/src/styles/font.css b/src/styles/font.css
@@ -1,41 +1,41 @@
 @font-face {
-    font-family: 'Manrope';
-    src: url('../assets/fonts/Manrope-ExtraLight.ttf') format('truetype');
-    font-weight: 100;
+  font-family: 'Manrope';
+  src: url('../assets/fonts/Manrope-ExtraLight.ttf') format('truetype');
+  font-weight: 100;
 }
 
 @font-face {
-    font-family: 'Manrope';
-    src: url('../assets/fonts/Manrope-Light.ttf') format('truetype');
-    font-weight: 300;
+  font-family: 'Manrope';
+  src: url('../assets/fonts/Manrope-Light.ttf') format('truetype');
+  font-weight: 300;
 }
 
 @font-face {
-    font-family: 'Manrope';
-    src: url('../assets/fonts/Manrope-Regular.ttf') format('truetype');
-    font-weight: normal;
+  font-family: 'Manrope';
+  src: url('../assets/fonts/Manrope-Regular.ttf') format('truetype');
+  font-weight: normal;
 }
 
 @font-face {
-    font-family: 'Manrope';
-    src: url('../assets/fonts/Manrope-Medium.ttf') format('truetype');
-    font-weight: 500;
+  font-family: 'Manrope';
+  src: url('../assets/fonts/Manrope-Medium.ttf') format('truetype');
+  font-weight: 500;
 }
 
 @font-face {
-    font-family: 'Manrope';
-    src: url('../assets/fonts/Manrope-SemiBold.ttf') format('truetype');
-    font-weight: 600;
+  font-family: 'Manrope';
+  src: url('../assets/fonts/Manrope-SemiBold.ttf') format('truetype');
+  font-weight: 600;
 }
 
 @font-face {
-    font-family: 'Manrope';
-    src: url('../assets/fonts/Manrope-Bold.ttf') format('truetype');
-    font-weight: bold;
+  font-family: 'Manrope';
+  src: url('../assets/fonts/Manrope-Bold.ttf') format('truetype');
+  font-weight: bold;
 }
 
 @font-face {
-    font-family: 'Manrope';
-    src: url('../assets/fonts/Manrope-ExtraBold.ttf') format('truetype');
-    font-weight: 900;
+  font-family: 'Manrope';
+  src: url('../assets/fonts/Manrope-ExtraBold.ttf') format('truetype');
+  font-weight: 900;
 }