From 277cc42614149d9c481b8ff8c2bfd837792997c2 Mon Sep 17 00:00:00 2001 From: Oleksandr Didyshen <102871422+alex-dishen@users.noreply.github.com> Date: Thu, 13 Jul 2023 06:39:22 +0300 Subject: [PATCH] 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 --- README.md | 2 +- app/about/animations.ts | 15 ------- app/about/constants.tsx | 40 ++++++++--------- app/about/styles.ts | 4 +- app/about/types.ts | 3 -- app/contact/animations.ts | 32 -------------- app/contact/styles.ts | 2 +- app/layout.tsx | 13 ++++-- app/page.tsx | 19 +++----- app/projects/animations.ts | 8 ---- app/projects/styles.ts | 4 +- app/projects/types.ts | 3 -- app/styles.tsx | 13 +++--- app/types.ts | 3 -- next.config.js | 5 +-- public/black-shirt.webp | Bin 85180 -> 27552 bytes public/home-page.png | Bin 0 -> 537095 bytes src/assets/fonts/Manrope-Bold.ttf | Bin 96364 -> 0 bytes src/assets/fonts/Manrope-ExtraBold.ttf | Bin 97116 -> 0 bytes src/assets/fonts/Manrope-ExtraLight.ttf | Bin 96304 -> 0 bytes src/assets/fonts/Manrope-Light.ttf | Bin 96312 -> 0 bytes src/assets/fonts/Manrope-Medium.ttf | Bin 96492 -> 0 bytes src/assets/fonts/Manrope-Regular.ttf | Bin 96412 -> 0 bytes src/assets/fonts/Manrope-SemiBold.ttf | Bin 96528 -> 0 bytes src/assets/{images => }/languages/aws.svg | 0 src/assets/{images => }/languages/css3.svg | 0 src/assets/{images => }/languages/express.svg | 0 src/assets/{images => }/languages/figma.svg | 0 src/assets/{images => }/languages/git.svg | 0 src/assets/{images => }/languages/github.svg | 0 src/assets/{images => }/languages/gitlab.svg | 0 src/assets/{images => }/languages/html5.svg | 0 .../{images => }/languages/javascript.svg | 0 src/assets/{images => }/languages/next.svg | 0 src/assets/{images => }/languages/nodejs.svg | 0 src/assets/{images => }/languages/npm.svg | 0 .../{images => }/languages/postgres.svg | 0 src/assets/{images => }/languages/postman.svg | 0 src/assets/{images => }/languages/react.svg | 0 src/assets/{images => }/languages/redux.svg | 0 src/assets/{images => }/languages/sass.svg | 0 .../languages/styled-components.svg | 0 .../{images => }/languages/typescript.svg | 0 src/assets/{images => }/languages/vite.svg | 0 src/components/Carousel/index.tsx | 2 +- src/components/Carousel/styles.ts | 2 +- src/components/Dots/index.tsx | 2 +- src/components/Dots/styles.ts | 2 +- src/components/DownloadButton/index.tsx | 2 +- src/components/DownloadButton/styles.ts | 4 +- src/components/Navbar/styles.ts | 3 +- src/components/Summary/index.tsx | 2 +- src/components/Summary/styles.ts | 2 +- {app => src/constants}/animations.ts | 40 ++++++++++++++++- src/hooks/useInView/index.ts | 2 +- src/hooks/useScrollToTop/index.ts | 15 ------- src/styles/GlobalStyle.ts | 4 +- src/styles/font.css | 41 ------------------ src/types/index.ts | 12 +++++ 59 files changed, 113 insertions(+), 188 deletions(-) delete mode 100644 app/about/animations.ts delete mode 100644 app/about/types.ts delete mode 100644 app/contact/animations.ts delete mode 100644 app/projects/animations.ts delete mode 100644 app/projects/types.ts delete mode 100644 app/types.ts create mode 100644 public/home-page.png delete mode 100644 src/assets/fonts/Manrope-Bold.ttf delete mode 100644 src/assets/fonts/Manrope-ExtraBold.ttf delete mode 100644 src/assets/fonts/Manrope-ExtraLight.ttf delete mode 100644 src/assets/fonts/Manrope-Light.ttf delete mode 100644 src/assets/fonts/Manrope-Medium.ttf delete mode 100644 src/assets/fonts/Manrope-Regular.ttf delete mode 100644 src/assets/fonts/Manrope-SemiBold.ttf rename src/assets/{images => }/languages/aws.svg (100%) rename src/assets/{images => }/languages/css3.svg (100%) rename src/assets/{images => }/languages/express.svg (100%) rename src/assets/{images => }/languages/figma.svg (100%) rename src/assets/{images => }/languages/git.svg (100%) rename src/assets/{images => }/languages/github.svg (100%) rename src/assets/{images => }/languages/gitlab.svg (100%) rename src/assets/{images => }/languages/html5.svg (100%) rename src/assets/{images => }/languages/javascript.svg (100%) rename src/assets/{images => }/languages/next.svg (100%) rename src/assets/{images => }/languages/nodejs.svg (100%) rename src/assets/{images => }/languages/npm.svg (100%) rename src/assets/{images => }/languages/postgres.svg (100%) rename src/assets/{images => }/languages/postman.svg (100%) rename src/assets/{images => }/languages/react.svg (100%) rename src/assets/{images => }/languages/redux.svg (100%) rename src/assets/{images => }/languages/sass.svg (100%) rename src/assets/{images => }/languages/styled-components.svg (100%) rename src/assets/{images => }/languages/typescript.svg (100%) rename src/assets/{images => }/languages/vite.svg (100%) rename {app => src/constants}/animations.ts (51%) delete mode 100644 src/hooks/useScrollToTop/index.ts delete mode 100644 src/styles/font.css create mode 100644 src/types/index.ts diff --git a/README.md b/README.md index 19bea72..54c0c2a 100644 --- 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 deleted file mode 100644 index 736c7aa..0000000 --- a/app/about/animations.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { keyframes } from 'styled-components' - -export const showElement = keyframes` - to { - opacity: 1; - transform: translateY(0) scale(1) skewY(0deg); - } -` - -export const moveUp = keyframes` - to { - opacity: 1; - transform: translateY(0px); - } -` diff --git a/app/about/constants.tsx b/app/about/constants.tsx index 6ba2e01..cbbc991 100644 --- 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:
}, diff --git a/app/about/styles.ts b/app/about/styles.ts index 961efff..7da02e6 100644 --- 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 deleted file mode 100644 index 64040ac..0000000 --- a/app/about/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type AnimationType = { - isVisible: boolean -} diff --git a/app/contact/animations.ts b/app/contact/animations.ts deleted file mode 100644 index a9367bf..0000000 --- a/app/contact/animations.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { keyframes } from 'styled-components' - -export const topToBottom = keyframes` - 0% { - transform: translateY(-40px); - } - 50% { - transform: translateY(200px); - } - 100% { - transform: translateY(-40px); - } -` - -export const scale = keyframes` - 0% { - transform: scale(1); - } - 50% { - transform: scale(0.6); - } - 100% { - transform: scale(1); - } -` - -export const showElement = keyframes` - to { - opacity: 1; - transform: translateY(0px) scale(1) skewY(0deg); - } -` diff --git a/app/contact/styles.ts b/app/contact/styles.ts index cb55bce..8e97eaf 100644 --- 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 index 16c53da..6b479b0 100644 --- 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 ( - +J|6!E=MJfHup44}zc4zME z%ilE@mNJl?qxKat(wG7k4Sgv~elwn{myy(tLfGYS8v^TZ+MVj2QbTe_dr38Gus19= z=n|X%fzs`4{?p-YQ(mA(11ne2{a0c}( zro$^$;8gS3W@9GnbJ!)dxcp>m*K2B6dnC_z@)FUn==+ze-(aO-PqXv$q`HaMl@mM- zfBSU6Ewmx?-`mUgg~9Bfn`^a-zEzI|p!qu=!+_TnlY;H=y#C8;E+ihg+lLQ5xi~82 z^pQ`w>?^kCxSq*Y*_SAOh*hrC%!=l>qxM(Zxb7ti!j}CzXKy!c!f-K8Haz7&q;xr{ zDt@7#>d(8CSJAw7YrtAcpI9P3+s$NY2qIXHv4g9Vo}IVGSGZlHZ7ja|->Z6@AX@LI ze&^s4ZcfRb<|d6oU3D)y4RYk)I_*S9ERyr=(elzLxumu<41hA#>rF?GT&qkH%YBxI zNcGDZo&bLO)S^}W<`D!iFanu*k!qIXET*FMhs#Wo=T+_;L6>Su-i} z!=Ues< _qDxKkqgzP?Td(qv9U8+D9 zkVD1##1#5*F_9WEmiyZAOl(s%^a`e(u*x@Z{o@)}4!xbu+W@aL$DG$~=9bOb=Vzpr zXHtBLgDn;dYcUis3^>RIP#$4r`b 5hI>>r ~fD~WH9vhWVB+lKjQSM?SEdlIq5oqut6qIUTt?73)u*JScZYY zLo^b)nz9wb@yc_5nLug3=XSA}5?R^newH55*72=WHKKK-;Lt4qLHQ^P3XTj1w%ONw z-A0aBFv7cCy8)a?&6C5kJz5p(&ZFlU16DFk^Zgk3V{cmBHEJd)>yDN?JxR;7S&ju+ z%v-g{(_gMNJBUkRP)_L=yGYG-*N)4U3`StkOChu@HV*^bE_p`fg4wjC;fJR}EDW5T z?dLovg(+YS$&1eApx #>eIV71b1#bDoNeJVJQG@O ++1A*M| zPqqt@(7^LHg(aKWdNyABD7Ce3lb^q8zq;dUI9BAdI?cGf1l6b)v)eb7!lhI2B1Dqn zZBF6Fm+JgYLD!iK8qdU*`9oB$mWv5egF&|Tw_skss9!hy}CG}~ulsRpKy&eMIv-8}reh?PiQo>isz ze6x!}Exs?CcJ}U?z-4o{tF?s1n9emX@>6*Ej-BLJKK^^n)2j2fd9LUz5y+IY=doLb z{gxN#+LMJm?BnM}gio3W4_TK}H8^t*MzHb&lwZ)OyJDk1F^eq6#<8qOyJRidQs-08 znAAN(Cx>oB20$2sVFt3lJtjQT^67Z1pYVUJ*d$E;&2c n3h#yUjr8LP;A>cw8se zKfOGGQQa812#zEPqdEVsFzW5{i#n4>Tyb|ONF9-o_>OH|lC_e=hGV!(*a(7@&DF&f zgsdc0Wjqmb=Az&dov_G6UR6=^AS?M%sSgILr0x`N4lijeEhzzK&f`niNAK9*2jNrQ z_c!tT*YHv)6{vT2|IeqLSHRfX74C7;iLr&vj+fUJ`iiN!za6)GLDuW1XDFNGmTm85 zt!wGH@^#Vl;^c*Ld}hwUFVCCW8#mo2P*Af6=f}hZ5GYg{PcQVSW1^0!F5`I)^P!)_ z{+{Lu$|6=<^8fcSdw=S p3mPCyF*%!O%6!aIl{6MMHzwB+#xsA2q-X(vWck@d zgEk5_MzLgnqi5)Pe)ph6_BY09Ct3b;)c#osy7T;w*Y)XAp=iO%o!W{R<+bhet}(F! zo#&G}^}-kEXSuoQ7T{DdRbkx4_SIhN`%}nN8`MLT@_e`AJpxXHd=C^N1BgjL1d>7u zlOR88;lfcJ4q+K!H#T3pet86dm?wq~TmVX2k$dFCH ZB* zQ;{V{%1kH-V5950@r-<8D^WFQ(>Z*9i3%ytx)6=}<|z6NfA&>oWlM_;^r;(5Ai>RP z3hgV;>R4rWkYQbG9opN66PBO1!7D;dM&}FTw|PF &UoEK)bUwkg@VQXJ( z252`rq{Vd$@|}8=LV5LbBLGD58MXH5#SX{L0M1glwaOJ?8P>6C*4^+oY5gKB6*-to zfL@bO=H9n$un5k(-0Mcr^{WMX&4oA^S`;kVgc>A)ESbjB<8h8^*|JbV+e!S%gTm#X z%j21*km&iYxG@-T94YNGa5qg}6hcoCT2GQ=^2S4*Po2k!gOxu?nK^E|k5C0(= r)W?Mm{SUU*6CC+LA2jvjuMzC)*f(x47Oxu&toi o)eQ)$B4O+(HdLa^lHFqil z@=RN|PgiEU>PnPc!&=5DUqgT`O8UTFA~e5`p5w;6g{2(R9B>ch7d=GfjR|25yU_JB zm!Hor(LS3z3tbeT#Lhb;xEvFM{YhhsENbFOy(JbKBjU=X1!2;76Vqz4JQP_OS=gW5 zfu%3i&+n_Fcly^(lB^djto_*u%66yCyF|>x)no`o2q;%Iq#)%P$E3gHh0TAPb^T4K z7k{ZVu6g!+C-i&geklZXUU)0SF -(sZ8^ z%V%yL_6EDV-ZKzA-LRot=+W@2zD0Ry2dxArVnE#_c8SC~UD~KlQQ#DqJv#45CT6=j ze%_}-M{4Uh?Kn=%d+YVd?iQBPgi z?Qg|9*~cdfVi{ko0Bi5DYB7i94ei}DcV-Wg)>xb z_nbnczc3_La7MY@0jirdQ8<*~y`SpVK-yI5L)qTGNK=?e!o?s7<8v2+OMjyTsm{EA zus!2|lGeXn5d6A@P0JVIHbh5Lsz@<$^&Y56r=A|6(YYlr^fj?P8%Wxnp^;f+Xb6|D z?LNNx`nV3A7P{)x^eHJK*f=dADyUgG@ >y&fc6{tx-;)3zYB`^K0VDVf@+bW z@GsR6tj!~cjP_C7RKyp2@LTScSxxsF@C+(J4bK;4(r0s;Dk9#^gn8Ed)%921mReUF zcD`(zwaqr&_TdU8dwQ x zkp$dlkbtPiVA+wZsb_(&c)@W;e_8H+H6>m5M#`e33?}_uJM~pzF-myFD4mOSrL+l9 z=SGSw>y+}k!mElQ?^{~GU9-Tur}#B=&c@lwlUu5>MS9s%pFEwd`Xk1I3OHZvyeq%8 zH(xOO!a)G5S((r7ZQ-PDn7r{=S_pIvLB!8rXq1uWQsQ*13r{43D!}HnQu1XR?rpF( z8@3~>@*l+zC?2xs%LPO#_*YpZ$G2~w`K$91(8=b`?SUoR87{BkqCzLUE76mgGHGI` zsi+y7hEkny`<)JRpbT^!ulRrv@msZ@b 2CWY{lyG38aslrlhTs3Qu6MpMQ z8hMn4w)!8*`SJ4BXXw3HPPcEde;ZEs&o-X7o~KHI*AuH;+O#^?C>XzDIZl-slC8bO z>C&7}V02{%^MHSr?3(^+`RkVQ | pW1x<51kPiV;SL _`*J=5X}1qr3w zK;%2{(Qr1Vx|9fQ3t#0>jVY<