feat: add deployment and fix issues

sayjeyhi · Dec 25, 2023 · 83f90db · 83f90db
1 parent 36de200
commit 83f90db
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 40 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -0,0 +1,37 @@
+name: Build and Deploy
+on: [push]
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+
+      - name: Cache  💾
+        uses: actions/cache@v2
+        with:
+          path: ${{ github.workspace }}/.cache
+          key: ${{ runner.os }}-3d-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Setup node 🎱
+        uses: actions/setup-node@v2
+        with:
+          node-version: '13.x'
+
+      - name: Install 🎢
+        run: yarn install --force
+
+      - name: Build 🧩
+        run: yarn run build
+        env:
+          CI: true
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: dist
+          CLEAN: true # Automatically remove deleted files from the deploy branch
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.24",
     "prettier": "3.0.3",
+    "r3f-perf": "^7.1.2",
     "tailwindcss": "^3.3.2",
     "vite": "^4.1.5"
   }

diff --git a/public/models/base-ams-14.glb b/public/models/base-ams-14.glb
diff --git a/src/App.jsx b/src/App.jsx
@@ -10,6 +10,7 @@ import state from './state.json'
 import { ThreeD } from '@/components/3D/index.jsx'
 import { useAtomValue } from 'jotai'
 import { isAmsterdamAtom } from '@/atoms/3d.js'
+// import { Perf } from 'r3f-perf'
 
 // import studio from '@theatre/studio'
 // import extension from '@theatre/r3f/dist/extension'
@@ -28,6 +29,7 @@ function App() {
         ...framerMotionConfig
       }}>
       <Canvas gl={{ preserveDrawingBuffer: true }} shadows dpr={[1, 1.5]}>
+        {/*<Perf />*/}
         <SheetProvider sheet={sheet}>
           <PerspectiveCamera theatreKey="Camera" makeDefault position={[0, 3, 10]} />
           <color attach="background" args={[isAmsterdam ? 'rgba(195,235,255,0.7)' : '#ffffff']} />

diff --git a/src/components/2D/Game/Prizes/Items.jsx b/src/components/2D/Game/Prizes/Items.jsx
@@ -143,7 +143,9 @@ export function HorizontalItem({
               {date}
             </time>
           )}
-          <p className="text-sm font-normal text-gray-500 whitespace-pre-line">{description}</p>
+          <p className="text-xs font-normal inter text-gray-500 whitespace-pre-line">
+            {description}
+          </p>
         </div>
         <div>
           {!!image && (

diff --git a/src/components/2D/Game/constants.js b/src/components/2D/Game/constants.js
@@ -23,16 +23,17 @@ export const CERTIFICATIONS = [
     date: 'Sep 2023',
     description: 'iSAQB® Certified Professional for Software Architecture Foundation Level',
     tags: ['Software Architecture', 'iSAQB'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.isaqb.org/en/',
+    link: 'https://tectrain.ch/de/certificate/847d3d2fb25342d96b2a',
     image: './certifications/isaqb.png'
   },
   {
     title: 'Advanced Terraform',
     subtitle: 'LinkedIn',
     date: 'Nov 2022',
-    description: 'I passed the linked course exam and got the certificate for Advanced Terraform',
+    description:
+      'After using Terraform for a while, I decided to pass the LinkedIn course and exam.',
     tags: ['Terraform', 'DevOps', 'Infrastructure as Code'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/learning/certificates/76ca5435d0cc3159768db7196587fbe54d7766e3c7b2e7477aeb3eef86282bce',
     image: './certifications/tf.png'
   },
   {
@@ -42,7 +43,7 @@ export const CERTIFICATIONS = [
     description:
       'I passed the linked course exam and got the certificate for Kubernetes: Microservices',
     tags: ['K8s', 'Microservices', 'DevOps'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/learning/certificates/b46fca3c8e46248680653cb0ded7a204a408d1340d57ed4e7ade5be85b2f6a0c?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_certifications_details%3B2xXZK5TeSVWZunpReSq2nw%3D%3D',
     image: './certifications/k8s.png'
   },
   {
@@ -52,7 +53,7 @@ export const CERTIFICATIONS = [
     description:
       'I passed the exam and got the certificate for Kubernetes: Package Management with Helm',
     tags: ['Kubernetes', 'Helm', 'DevOps'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/learning/certificates/5c81766f6c077055b51f979ca7e2360641d498e511ded43ac6688a7ecd4adf65?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_certifications_details%3B2xXZK5TeSVWZunpReSq2nw%3D%3D',
     image: './certifications/k8s.png'
   },
   {
@@ -62,7 +63,7 @@ export const CERTIFICATIONS = [
     description:
       'I have been using Tailwind in my projects for a long time and decided to learn more about it and get the certificate.',
     tags: ['Tailwind', 'CSS', 'Frontend'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/learning/certificates/aab79cc92f337d82468629f0249598ac94941fae71e1b173c592e0dc032b7eba?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_certifications_details%3B2xXZK5TeSVWZunpReSq2nw%3D%3D',
     image: './certifications/tailwind.png'
   },
   {
@@ -72,7 +73,7 @@ export const CERTIFICATIONS = [
     description:
       'I was using NGINX for a long time and I decided to get the certificate for it and learn more about it.',
     tags: ['NGINX', 'Web Server', 'DevOps'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/learning/certificates/1f16ab62a3aff0b23fa4a0a04e0a028391696394800154d4d000e304bb35ba63?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_certifications_details%3B2xXZK5TeSVWZunpReSq2nw%3D%3D',
     image: './certifications/nginx.jpg'
   },
   {
@@ -82,7 +83,7 @@ export const CERTIFICATIONS = [
     description:
       'I learned the basics of python and how to use it in my projects. I developed a REST API with python and fastAPI.',
     tags: ['Python', 'Backend', 'DevOps'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/learning/certificates/d904ff27c33b852e44ffbbf14ed1ca0b5568e435b961b5b3ab80b291a76f6c18?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_certifications_details%3B2xXZK5TeSVWZunpReSq2nw%3D%3D',
     image: './certifications/python.png'
   },
   {
@@ -91,7 +92,7 @@ export const CERTIFICATIONS = [
     date: 'Oct 2022',
     description: 'This was my first course about Terraform and I learned the basics of Terraform.',
     tags: ['Terraform', 'DevOps', 'Infrastructure as Code'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/learning/certificates/7a4789828696cfa3064aee01a5ea7174aace0e02faac7dc61719c5faccb8af81?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_certifications_details%3B2xXZK5TeSVWZunpReSq2nw%3D%3D',
     image: './certifications/tf.png'
   },
   {
@@ -101,7 +102,7 @@ export const CERTIFICATIONS = [
     description:
       'This course was about SEO and how to manage SEO for websites. I learned a lot for that time and used it in my projects.',
     tags: ['SEO', 'Marketing'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/',
     image: './certifications/seo.png'
   },
   {
@@ -111,7 +112,7 @@ export const CERTIFICATIONS = [
     description:
       'I learned how to write secure code in PHP and how to prevent attacks. Cowered topics like SQL injection, XSS, CSRF, etc.',
     tags: ['PHP', 'Backend', 'Security', 'Full-Stack'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/',
     image: './certifications/php.png'
   },
   {
@@ -121,7 +122,7 @@ export const CERTIFICATIONS = [
     description:
       'I learned how to write window applications with C# and I built a windows app for my startup Citygram with C#.',
     tags: ['C#', 'Windows', 'Desktop', 'Backend'],
-    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/https://www.linkedin.com/in/sayjeyhi/',
+    link: 'https://www.linkedin.com/in/jafar-rezaei/details/certifications/',
     image: './certifications/csharp.png'
   }
 ]
@@ -156,7 +157,7 @@ export const PROJECTS = [
     subtitle: 'A group of open-source book writers for Javascript.',
     date: 'Feb 2019 - Present',
     description:
-      'Github organization to write open-source books in markdown and generate books with different formats in CI.',
+      'A Github organization created by me to write open-source books in markdown and generate books with different formats in CI.',
     skills: ['Github', 'Software Development', 'Team Leadership'],
     image: './projects/Mariotek.png',
     link: 'https://github.com/Mariotek',

diff --git a/src/components/2D/Menu.jsx b/src/components/2D/Menu.jsx
@@ -35,7 +35,7 @@ export const Menu = props => {
       </button>
       <button
         onClick={handleAudioMute}
-        className="z-20 fixed focus:outline-lime-700 top-16 mt-2 right-4 p-3 bg-primary w-12 h-12 rounded-2xl"
+        className="z-10 fixed focus:outline-lime-700 top-16 mt-2 right-4 p-3 bg-primary w-12 h-12 rounded-2xl"
         {...cursorHandlers}>
         {!isMusicEnabled ? (
           <svg
@@ -69,7 +69,7 @@ export const Menu = props => {
         <div className="mt-10 mb-10">
           <img className="rounded-full w-48 h-48 mx-auto" src="me.jpeg" alt="Jafar Rezaei" />
         </div>
-        <div className="flex items-start justify-center flex-col gap-4 px-8">
+        <div className="flex items-start justify-center flex-col gap-4 px-8 inter">
           <MenuButton label="About" onClick={() => setSection(0)} />
           <MenuButton label="Skills" onClick={() => setSection(1)} />
           <MenuButton label="Books" onClick={() => setSection(2)} />
@@ -78,7 +78,7 @@ export const Menu = props => {
           <button
             {...cursorHandlers}
             onClick={() => setShowFullInformation(true)}
-            className="w-full justify-center p-2 text-lg font-bold bg-white text-gray-500 rounded text-center transition-all hover:shadow-lg hover:shadow-amber-200 hover:text-gray-700">
+            className="w-full justify-center px-2 py-3 mt-3 text-md font-semibold bg-white text-gray-500 rounded  text-center transition-all hover:shadow-lg hover:shadow-amber-200 hover:text-gray-700">
             Full Information
           </button>
         </div>
@@ -90,13 +90,13 @@ export const Menu = props => {
             {...cursorHandlers}
             title="LinkedIn"
             rel="noreferrer"
-            className="text-white cursor-pointer hover:text-secondary transition-colors">
+            className="text-white cursor-pointer opacity-80 hover:opacity-100 transition-colors">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="#fff"
               aria-label="LinkedIn"
               viewBox="0 0 512 512"
-              className="w-8 h-8"
+              className="w-9 h-9"
               id="linkedin">
               <rect width="512" height="512" fill="#0077b5" rx="15%"></rect>
               <circle cx="142" cy="138" r="37"></circle>
@@ -110,12 +110,12 @@ export const Menu = props => {
             {...cursorHandlers}
             rel="noreferrer"
             title="GitHub"
-            className="text-white cursor-pointer hover:text-secondary transition-colors">
+            className="text-white cursor-pointer opacity-80 hover:opacity-100 transition-colors">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               aria-label="GitHub"
               viewBox="0 0 512 512"
-              className="w-8 h-8"
+              className="w-9 h-9"
               id="github">
               <rect width="512" height="512" fill="#1B1817" rx="15%"></rect>
               <path
@@ -129,10 +129,10 @@ export const Menu = props => {
             {...cursorHandlers}
             rel="noreferrer"
             title="X (twitter)"
-            className="text-white cursor-pointer hover:text-secondary transition-colors">
+            className="text-white cursor-pointer opacity-80 hover:opacity-100 transition-colors">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="w-8 h-8"
+              className="w-9 h-9"
               aria-label="Twitter"
               viewBox="0 0 512 512"
               id="twitter">
@@ -148,9 +148,9 @@ export const Menu = props => {
             {...cursorHandlers}
             rel="noreferrer"
             title="Stack Overflow"
-            className="text-white cursor-pointer hover:text-secondary transition-colors">
+            className="text-white cursor-pointer opacity-80 hover:opacity-100 transition-colors">
             <svg
-              className="w-8 h-8"
+              className="w-9 h-9"
               aria-label="Stack Overflow"
               viewBox="0 0 512 512"
               id="stackoverflow">
@@ -175,7 +175,7 @@ export const MenuButton = props => {
   return (
     <button
       onClick={onClick}
-      className={`text-2xl font-bold text-white cursor-pointer hover:text-secondary transition-colors ${className}`}
+      className={`text-xl font-bold text-white cursor-pointer hover:text-gray-700 transition-colors ${className}`}
       {...cursorHandlers}>
       {children || label}
     </button>

diff --git a/src/components/2D/Skills.jsx b/src/components/2D/Skills.jsx
@@ -5,8 +5,7 @@ import { isTalkingAtom } from '@/atoms/audio.js'
 const FRONT_SKILLS = [
   {
     title: 'Javascript (ES6 and above)',
-    titleSpoken:
-      '<speak>Javascript <break time="0.2s"/> I wrote a book called Javascript fundamentals in persian</speak>',
+    titleSpoken: '<speak>Javascript</speak>',
     level: 90
   },
   {
@@ -16,7 +15,7 @@ const FRONT_SKILLS = [
   },
   {
     title: 'React.js',
-    titleSpoken: '<speak>React.js, I wrote a book called react top interview questions</speak>',
+    titleSpoken: '<speak>React.js</speak>',
     level: 90
   },
   {
@@ -26,8 +25,7 @@ const FRONT_SKILLS = [
   },
   {
     title: 'Vue.js',
-    titleSpoken:
-      '<speak>View J S <break time="0.2s"/>, I used view 2 , view 3 , view x and penia</speak>',
+    titleSpoken: '<speak>View J S <break time="0.2s"/>, 2 , 3 , view x and penia</speak>',
     level: 90
   },
   { title: 'Redux (Toolkit, Saga)', level: 90 },

diff --git a/src/components/2D/index.jsx b/src/components/2D/index.jsx
@@ -29,7 +29,7 @@ export const TwoD = () => {
               onClick={() => {
                 setShowFullInformation(false)
               }}
-              className="absolute top-0 right-0 p-2 z-20 bg-white rounded-xl">
+              className="absolute top-0 right-0 p-2 z-20 bg-white rounded-bl-2xl">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="w-10 h-10"
@@ -80,6 +80,7 @@ export const TwoD = () => {
 
             <br />
             <br />
+            <br />
           </div>
         </Section>
       )}

diff --git a/src/components/3D/index.jsx b/src/components/3D/index.jsx
@@ -15,13 +15,13 @@ import { avatarCurrentAnimationAtom, isAmsterdamAtom } from '@/atoms/3d.js'
 
 export const ThreeD = () => {
   const { camera } = useThree()
-  const menuOpened = useAtomValue(isSidebarOpenedAtom)
   const data = useScroll()
   const [isAmsterdam, setIsAmsterdam] = useAtom(isAmsterdamAtom)
   const sheet = useCurrentSheet()
   const [animation, setCharacterAnimation] = useAtom(avatarCurrentAnimationAtom)
   const isStarted = useAtomValue(gameIsStartedAtom)
-  const setIsPaused = useSetAtom(gamePauseAtom)
+  const [isPaused, setIsPaused] = useAtom(gamePauseAtom)
+  const [menuOpened, setMenuOpened] = useAtom(isSidebarOpenedAtom)
 
   const [section, setSection] = useState(0)
 
@@ -94,6 +94,7 @@ export const ThreeD = () => {
     if (sheet.sequence.position < 0.5) {
       setCharacterAnimation('Typing')
     } else if (sheet.sequence.position < 1.5 && sheet.sequence.position >= 0.5) {
+      if (menuOpened) setMenuOpened(false)
       setCharacterAnimation('Falling')
     } else if (sheet.sequence.position < 2.5 && sheet.sequence.position >= 1.5) {
       setCharacterAnimation('ShowOff')
@@ -105,6 +106,8 @@ export const ThreeD = () => {
       if (!isAmsterdam && sheet.sequence.position > 6.1) setIsAmsterdam(true)
       else if (isAmsterdam && sheet.sequence.position <= 6.1) setIsAmsterdam(false)
 
+      if (!isPaused && sheet.sequence.position < 5.4) setIsPaused(true)
+
       setCharacterAnimation('Running')
     } else if (sheet.sequence.position > 10.08) {
       setCharacterAnimation('PhoneCall')