feat: add SEO topic and improve code

Author: sayjeyhi

README.md

@@ -1,4 +1,20 @@
-![Thumbnail video tutorial](https://github.com/wass08/r3f-portfolio-final/assets/6551176/10e190aa-de14-4f34-a6e7-fca23b73bb15)
+# My new 3D portfolio
+>  Built with React, Three.js [Live Demo](https://sayjeyhi.com/)
 
-[Video tutorial](https://youtu.be/LooODvrYXzE)
+## Installation
+You need to have bunjs installed, if you don't have it, install it [bun.sh](https://bun.sh)
+Then run the following command to install the dependencies
+
+```bash
+bun i
+```
+
+## Development
+You can run the following command to start the development server
+```bash
+bun dev
+```
+
+## License
+[MIT](https://choosealicense.com/licenses/mit/)
 

index.html

@@ -6,7 +6,54 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Stylish" />
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=VT323" />
-    <title>Jafar Rezaei | 3D website | sayjeyhi.com</title>
+
+    <!-- SEO Meta Tags -->
+    <meta name="keywords" content="sayjeyhi, Jafar Rezaei, Jafar Rezaei Rouyandaragh, جعفر رضائی, جعفر رضایی">
+    <meta name="description" content="Jafar Rezaei's personal website and portfolio with nice 3D animations and games">
+    <title>Jafar Rezaei | sayjeyhi | 3D portfolio</title>
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@yourTwitterHandle"> <!-- Replace with your Twitter handle -->
+    <meta name="twitter:title" content="Jafar Rezaei | sayjeyhi | 3D portfolio">
+    <meta name="twitter:description" content="Jafar Rezaei's personal website and portfolio with nice 3D animations and games">
+    <meta name="twitter:image" content="URL_TO_IMAGE"> <!-- Replace with the URL to your image -->
+
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="Jafar Rezaei | sayjeyhi | 3D portfolio">
+    <meta property="og:description" content="Jafar Rezaei's personal website and portfolio with nice 3D animations and games">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="URL_TO_YOUR_WEBSITE"> <!-- Replace with the URL to your website -->
+    <meta property="og:image" content="URL_TO_IMAGE"> <!-- Replace with the URL to your image -->
+    <meta property="og:image:alt" content="Jafar Rezaei's 3D Portfolio">
+
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-WMZX9BLX');</script>
+    <!-- End Google Tag Manager -->
+
     <style>
       .loader {
         width: 88px;
@@ -67,6 +114,11 @@
     </style>
   </head>
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WMZX9BLX"
+                      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
     <div id="root" style="width: 100vw; height: 100vh">
       <div style="display: flex; flex-direction:column;align-items: center; justify-content: center; width: 100%; height: 100%">
         <div class="loader" >

public/android-icon-144x144.png

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

public/android-icon-192x192.png

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

public/android-icon-36x36.png

@@ -72,7 +72,7 @@ export const ContactSection = () => {
               <path d="M15.038 18.91C17.981 16.592 22 14 22 9.138c0-4.863-5.5-8.312-10-3.636V20.5c1 0 2-.77 3.038-1.59Z" />
             </g>
           </svg>
-          &nbsp; By me, 2023
+          &nbsp; By me in <strong>Amsterdam</strong>, 2023
         </div>
       </div>
     </Section>