25 move project to nextjs (#28)

* Move the whole project to Next * Fix built files * Add description to links and fix navbar * Add aria label and custom loader * Move picture to AWS * Fix path for picture * Remove picture for test * Reduce picture size * Remove font and improve metadata * Move picture to AWS * Serve static picture * Change some next.config.js settings * Return to the previous settings
alex-dishen · Jul 13, 2023 · 277cc42 · 277cc42
1 parent 6811dce
commit 277cc42
Show file tree

Hide file tree

Showing 59 changed files with 113 additions and 188 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ## Demo
 
-🔥 [Live Demo](https://github.com/alex-dishen/portfolio)
+🔥 [Live Demo](https://alex-dishen.web.app)
 
 ## Built with
 

diff --git a/app/about/animations.ts b/app/about/animations.ts
diff --git a/app/about/constants.tsx b/app/about/constants.tsx
@@ -1,24 +1,24 @@
 import { nanoid } from 'nanoid'
-import AWS from 'src/assets/images/languages/aws.svg'
-import CSS from 'src/assets/images/languages/css3.svg'
-import GIT from 'src/assets/images/languages/git.svg'
-import GitHub from 'src/assets/images/languages/github.svg'
-import GitLab from 'src/assets/images/languages/gitlab.svg'
-import HTML from 'src/assets/images/languages/html5.svg'
-import JavaScript from 'src/assets/images/languages/javascript.svg'
-import NPM from 'src/assets/images/languages/npm.svg'
-import React from 'src/assets/images/languages/react.svg'
-import Redux from 'src/assets/images/languages/redux.svg'
-import SASS from 'src/assets/images/languages/sass.svg'
-import StyledComponents from 'src/assets/images/languages/styled-components.svg'
-import TypeScript from 'src/assets/images/languages/typescript.svg'
-import Vite from 'src/assets/images/languages/vite.svg'
-import Figma from 'src/assets/images/languages/figma.svg'
-import Next from 'src/assets/images/languages/next.svg'
-import Postman from 'src/assets/images/languages/postman.svg'
-import Node from 'src/assets/images/languages/nodejs.svg'
-import Express from 'src/assets/images/languages/express.svg'
-import Postgres from 'src/assets/images/languages/postgres.svg'
+import AWS from 'src/assets/languages/aws.svg'
+import CSS from 'src/assets/languages/css3.svg'
+import GIT from 'src/assets/languages/git.svg'
+import GitHub from 'src/assets/languages/github.svg'
+import GitLab from 'src/assets/languages/gitlab.svg'
+import HTML from 'src/assets/languages/html5.svg'
+import JavaScript from 'src/assets/languages/javascript.svg'
+import NPM from 'src/assets/languages/npm.svg'
+import React from 'src/assets/languages/react.svg'
+import Redux from 'src/assets/languages/redux.svg'
+import SASS from 'src/assets/languages/sass.svg'
+import StyledComponents from 'src/assets/languages/styled-components.svg'
+import TypeScript from 'src/assets/languages/typescript.svg'
+import Vite from 'src/assets/languages/vite.svg'
+import Figma from 'src/assets/languages/figma.svg'
+import Next from 'src/assets/languages/next.svg'
+import Postman from 'src/assets/languages/postman.svg'
+import Node from 'src/assets/languages/nodejs.svg'
+import Express from 'src/assets/languages/express.svg'
+import Postgres from 'src/assets/languages/postgres.svg'
 
 export const front = [
   { id: nanoid(), name: 'HTML', picture: <HTML /> },

diff --git a/app/about/styles.ts b/app/about/styles.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
-import { showElement, moveUp } from './animations'
-import { AnimationType } from './types'
+import type { AnimationType } from 'src/types'
+import { showElement, moveUp } from 'src/constants/animations'
 
 export const StyledAbout = styled.div`
   display: flex;

diff --git a/app/about/types.ts b/app/about/types.ts
diff --git a/app/contact/animations.ts b/app/contact/animations.ts
diff --git a/app/contact/styles.ts b/app/contact/styles.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { topToBottom, scale, showElement } from './animations'
+import { topToBottom, scale, showElement } from 'src/constants/animations'
 
 export const StyledContact = styled.div`
   flex: 1;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,18 +1,23 @@
 import { ReactNode } from 'react'
 import { Metadata } from 'next'
+import { Manrope } from 'next/font/google'
 import StyledComponentsRegistry from '../lib/registry'
-import '../src/styles/normalize.css'
-import '../src/styles/font.css'
+import 'src/styles/normalize.css'
 import Navbar from 'src/components/Navbar'
 
+const manrope = Manrope({ subsets: ['latin'], display: 'swap' })
+
 export const metadata: Metadata = {
   title: 'Oleksandr Didyshen',
-  description: '...',
+  description:
+    "I'm a Software Engineer with 22+ finished projects. You are welcome to see my creations",
+  keywords:
+    'Portfolio, Front-End Developer, Full-Stack Developer, React, Next.js, TypeScript, Node.js, Express, PostgreSQL',
 }
 
 const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
-    <html lang="en">
+    <html lang="en" className={manrope.className}>
       <body>
         <StyledComponentsRegistry>
           <Navbar />

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

diff --git a/app/projects/animations.ts b/app/projects/animations.ts
diff --git a/app/projects/styles.ts b/app/projects/styles.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
-import { AnimationType } from './types'
-import { moveUp } from './animations'
+import type { AnimationType } from 'src/types'
+import { moveUp } from 'src/constants/animations'
 
 export const StyledProjects = styled.main`
   width: min(850px, 90vw);

diff --git a/app/projects/types.ts b/app/projects/types.ts
diff --git a/app/styles.tsx b/app/styles.tsx
@@ -1,13 +1,13 @@
 import styled, { css } from 'styled-components'
 import Link from 'next/link'
-import { OptionTypes } from './types'
+import type { OptionTypes } from 'src/types'
 import {
   styledHomeAnimation,
   greetingAnimation,
   imageAnimation,
   nameAnimation,
-  showElement,
-} from './animations'
+  showOpacity,
+} from 'src/constants/animations'
 
 export const StyledHome = styled.main`
   position: relative;
@@ -132,7 +132,7 @@ export const Name = styled(Greeting)`
 export const Position = styled(Greeting)`
   z-index: 1;
   transform: translateY(0px) translateX(0px) scale(1);
-  animation: ${showElement} 1.4s ease-out forwards 2.1s;
+  animation: ${showOpacity} 1.4s ease-out forwards 2.1s;
 `
 
 export const NavigationSection = styled.div`
@@ -158,7 +158,7 @@ export const Option = styled(Link)<OptionTypes>(
 
     opacity: 0;
     transition: 0.3s;
-    animation: ${showElement} 0.7s ease-out forwards ${2.5 + (index * 3) / 10}s;
+    animation: ${showOpacity} 0.7s ease-out forwards ${2.5 + (index * 3) / 10}s;
 
     &:hover {
       color: white;
@@ -210,7 +210,7 @@ export const Text = styled.div`
   display: flex;
   font-size: 13px;
   opacity: 0;
-  animation: ${showElement} 0.5s ease-out forwards 3.45s;
+  animation: ${showOpacity} 0.5s ease-out forwards 3.45s;
 
   a {
     position: relative;
@@ -228,6 +228,7 @@ export const Text = styled.div`
 
 export const StyledLink = styled(Link)`
   position: relative;
+  margin-left: 2px;
   cursor: pointer;
   transition: text-shadow 0.5s;
 

diff --git a/app/types.ts b/app/types.ts
diff --git a/next.config.js b/next.config.js
@@ -1,9 +1,6 @@
 const nextConfig = {
-  trailingSlash: true,
   output: 'export',
-  image: {
-    loader: 'custom'
-  },
+  trailingSlash: true,
   webpack(config) {
     const fileLoaderRule = config.module.rules.find(rule =>
       rule.test?.test?.('.svg'),

diff --git a/public/black-shirt.webp b/public/black-shirt.webp
diff --git a/public/home-page.png b/public/home-page.png
diff --git a/src/assets/fonts/Manrope-Bold.ttf b/src/assets/fonts/Manrope-Bold.ttf
diff --git a/src/assets/fonts/Manrope-ExtraBold.ttf b/src/assets/fonts/Manrope-ExtraBold.ttf
diff --git a/src/assets/fonts/Manrope-ExtraLight.ttf b/src/assets/fonts/Manrope-ExtraLight.ttf
diff --git a/src/assets/fonts/Manrope-Light.ttf b/src/assets/fonts/Manrope-Light.ttf
diff --git a/src/assets/fonts/Manrope-Medium.ttf b/src/assets/fonts/Manrope-Medium.ttf
diff --git a/src/assets/fonts/Manrope-Regular.ttf b/src/assets/fonts/Manrope-Regular.ttf
diff --git a/src/assets/fonts/Manrope-SemiBold.ttf b/src/assets/fonts/Manrope-SemiBold.ttf
diff --git a/src/assets/images/languages/aws.svg → src/assets/languages/aws.svg b/src/assets/images/languages/aws.svg → src/assets/languages/aws.svg
diff --git a/src/assets/images/languages/css3.svg → src/assets/languages/css3.svg b/src/assets/images/languages/css3.svg → src/assets/languages/css3.svg
diff --git a/src/assets/images/languages/express.svg → src/assets/languages/express.svg b/src/assets/images/languages/express.svg → src/assets/languages/express.svg
diff --git a/src/assets/images/languages/figma.svg → src/assets/languages/figma.svg b/src/assets/images/languages/figma.svg → src/assets/languages/figma.svg
diff --git a/src/assets/images/languages/git.svg → src/assets/languages/git.svg b/src/assets/images/languages/git.svg → src/assets/languages/git.svg
diff --git a/src/assets/images/languages/github.svg → src/assets/languages/github.svg b/src/assets/images/languages/github.svg → src/assets/languages/github.svg
diff --git a/src/assets/images/languages/gitlab.svg → src/assets/languages/gitlab.svg b/src/assets/images/languages/gitlab.svg → src/assets/languages/gitlab.svg
diff --git a/src/assets/images/languages/html5.svg → src/assets/languages/html5.svg b/src/assets/images/languages/html5.svg → src/assets/languages/html5.svg
diff --git a/src/assets/images/languages/javascript.svg → src/assets/languages/javascript.svg b/src/assets/images/languages/javascript.svg → src/assets/languages/javascript.svg
diff --git a/src/assets/images/languages/next.svg → src/assets/languages/next.svg b/src/assets/images/languages/next.svg → src/assets/languages/next.svg
diff --git a/src/assets/images/languages/nodejs.svg → src/assets/languages/nodejs.svg b/src/assets/images/languages/nodejs.svg → src/assets/languages/nodejs.svg
diff --git a/src/assets/images/languages/npm.svg → src/assets/languages/npm.svg b/src/assets/images/languages/npm.svg → src/assets/languages/npm.svg
diff --git a/src/assets/images/languages/postgres.svg → src/assets/languages/postgres.svg b/src/assets/images/languages/postgres.svg → src/assets/languages/postgres.svg
diff --git a/src/assets/images/languages/postman.svg → src/assets/languages/postman.svg b/src/assets/images/languages/postman.svg → src/assets/languages/postman.svg
diff --git a/src/assets/images/languages/react.svg → src/assets/languages/react.svg b/src/assets/images/languages/react.svg → src/assets/languages/react.svg
diff --git a/src/assets/images/languages/redux.svg → src/assets/languages/redux.svg b/src/assets/images/languages/redux.svg → src/assets/languages/redux.svg
diff --git a/src/assets/images/languages/sass.svg → src/assets/languages/sass.svg b/src/assets/images/languages/sass.svg → src/assets/languages/sass.svg
diff --git a/...ts/images/languages/styled-components.svg → src/assets/languages/styled-components.svg b/...ts/images/languages/styled-components.svg → src/assets/languages/styled-components.svg
diff --git a/src/assets/images/languages/typescript.svg → src/assets/languages/typescript.svg b/src/assets/images/languages/typescript.svg → src/assets/languages/typescript.svg
diff --git a/src/assets/images/languages/vite.svg → src/assets/languages/vite.svg b/src/assets/images/languages/vite.svg → src/assets/languages/vite.svg
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image'
 import Swipi from 'swipi'
 import ChevronLeft from 'src/assets/icons/chevron-left.svg'
 import ChevronRight from 'src/assets/icons/chevron-right.svg'
-import { CarouselProps } from 'src/components/Carousel/types'
+import type { CarouselProps } from 'src/components/Carousel/types'
 import { CarouselWrapper, ImageHolder } from 'src/components/Carousel/styles'
 
 const Carousel = ({ pictures, id, isVisible, name }: CarouselProps) => (

diff --git a/src/components/Carousel/styles.ts b/src/components/Carousel/styles.ts
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { CarouselWrapperTypes } from 'src/components/Carousel/types'
+import type { CarouselWrapperTypes } from 'src/components/Carousel/types'
 import { moveUp } from 'src/components/Carousel/animations'
 
 export const CarouselWrapper = styled.div<CarouselWrapperTypes>(

diff --git a/src/components/Dots/index.tsx b/src/components/Dots/index.tsx
@@ -1,5 +1,5 @@
 import { DotsWrapper, Dot } from 'src/components/Dots/styles'
-import { DotsProps } from 'src/components/Dots/types'
+import type { DotsProps } from 'src/components/Dots/types'
 
 const Dots = ({ isVisible }: DotsProps) => (
   <DotsWrapper isVisible={isVisible}>

diff --git a/src/components/Dots/styles.ts b/src/components/Dots/styles.ts
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { DotsWrapperTypes } from 'src/components/Dots/types'
+import type { DotsWrapperTypes } from 'src/components/Dots/types'
 import { moveUp } from 'src/components/Dots/animations'
 
 export const DotsWrapper = styled.div<DotsWrapperTypes>(

diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx
@@ -1,4 +1,4 @@
-import { DownloadButtonProps } from 'src/components/DownloadButton/types'
+import type { DownloadButtonProps } from 'src/components/DownloadButton/types'
 import {
   DownloadButtonWrapper,
   Info,

diff --git a/src/components/DownloadButton/styles.ts b/src/components/DownloadButton/styles.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
-import { moveUp } from 'app/projects/animations'
-import { DownloadButtonWrapperT } from 'src/components/DownloadButton/types'
+import { moveUp } from 'src/constants/animations'
+import type { DownloadButtonWrapperT } from 'src/components/DownloadButton/types'
 
 export const DownloadButtonWrapper = styled.a<DownloadButtonWrapperT>(
   ({ isVisible }) => css`

diff --git a/src/components/Navbar/styles.ts b/src/components/Navbar/styles.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 import Link from 'next/link'
-import {
+import type {
   ImageHolderTypes,
   StyledNavbarTypes,
 } from 'src/components/Navbar/types'
@@ -56,7 +56,6 @@ export const LinkHolder = styled.div<ImageHolderTypes>(
     svg {
       height: 26px;
       width: 26px;
-      transition: 0.4s;
     }
 
     &:hover {

diff --git a/src/components/Summary/index.tsx b/src/components/Summary/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { SummaryProps } from 'src/components/Summary/types'
+import type { SummaryProps } from 'src/components/Summary/types'
 import { Text, SVGHolder } from 'src/components/Summary/styles'
 import ChevronUp from 'src/assets/icons/chevron-up.svg'
 import ChevronDown from 'src/assets/icons/chevron-down.svg'

diff --git a/src/components/Summary/styles.ts b/src/components/Summary/styles.ts
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { TextTypes } from 'src/components/Summary/types'
+import type { TextTypes } from 'src/components/Summary/types'
 
 export const Text = styled.p<TextTypes>(
   ({ isShowSummary }) => css`