Add meta tag for social media

ducquando · Dec 28, 2023 · 93bfbf7 · 93bfbf7
1 parent ff90be8
commit 93bfbf7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -6,9 +6,24 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Do Duc Quan</title>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <title>Do Duc Quan - The Adventures of a Digital Nomad</title>
+
+    <!-- Facebook Meta Tags -->
+    <meta property='og:url' content='https://www.dodquan.com'>
+    <meta property='og:type' content='website'>
+    <meta property='og:title' content='Do Duc Quan - The Adventures of a Digital Nomad'>
+    <meta property='og:description' content='Join Quan on his adventure as a digital nomad'>
+    <meta property='og:image' content='https://dodquan.com/assets/pictures/Thumbnail@0.33x.png'>
+
+    <!-- Twitter Meta Tags -->
+    <meta name='twitter:card' content='summary_large_image'>
+    <meta property='twitter:domain' content='dodquan.com'>
+    <meta property='twitter:url' content='https://www.dodquan.com'>
+    <meta name='twitter:title' content='Do Duc Quan - The Adventures of a Digital Nomad'>
+    <meta name='twitter:description' content='Join Quan on his adventure as a digital nomad'>
+    <meta name='twitter:image' content='https://dodquan.com/assets/pictures/Thumbnail@0.33x.png'>
 
     <!-- Styling -->
     <link rel='stylesheet', href='./src/stylesheets/fonts.css'>
@@ -17,21 +32,21 @@
     <link rel='stylesheet', href='./src/stylesheets/style.css'>
 
     <!-- Typefaces -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;700&family=Outfit:wght@400;500;600;700&display=swap">
+    <link rel='preconnect' href='https://fonts.googleapis.com'>
+    <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
+    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;700&family=Outfit:wght@400;500;600;700&display=swap'>
 
     <!-- Favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/assets/favicon/site.webmanifest">
+    <link rel='apple-touch-icon' sizes='180x180' href='/assets/favicon/apple-touch-icon.png'>
+    <link rel='icon' type='image/png' sizes='32x32' href='/assets/favicon/favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='16x16' href='/assets/favicon/favicon-16x16.png'>
+    <link rel='manifest' href='/assets/favicon/site.webmanifest'>
 
     <!-- Scripts -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
+    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
 
     <!-- Single Page Apps for GitHub Pages -->
-    <script type="text/javascript">
+    <script type='text/javascript'>
       (function(l) {
         if (l.search[1] === '/' ) {
           var decoded = l.search.slice(1).split('&').map(function(s) { 
@@ -46,7 +61,7 @@
   </head>
 
   <body>
-    <div id="root"></div>
-    <script src="/build/bundle.js"></script>
+    <div id='root'></div>
+    <script src='/build/bundle.js'></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "ducquando.github.io",
   "version": "0.0.1",
   "private": true,
-  "description": "Do Duc Quan's Personal Website",
+  "description": "Do Duc Quan - The Adventures of a Digital Nomad",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --disable-host-check --open",
     "build": "webpack -p"

diff --git a/src/views/about.tsx b/src/views/about.tsx
@@ -160,7 +160,7 @@ export const About: React.FC<AboutProps> = ({
         </picture>
         <div className="width-90">
           <p className="mid width-60">
-            I am Quan, a creative UX engineer with 3 years of experience in
+            I am Quan, a creative UX engineer with 5 years of experience in
             developing and designing innovative solutions. <br />
             <br /> My main fields are Product Development and Software
             Engineering. I also enjoy experimenting with AI and designing

diff --git a/src/views/home.tsx b/src/views/home.tsx
@@ -50,7 +50,7 @@ export const Home: React.FC<HomeProps> = ({
               <p className="mid">
                 Computer intelligence fuels my visual creations
               </p>
-              <h2>I am QUAN. Welcome to my site 👋</h2>
+              <h2>I am QUAN. Welcome to my nomadic advanture 👋</h2>
             </div>
           </div>
         </div>
@@ -80,8 +80,8 @@ export const Home: React.FC<HomeProps> = ({
           <div id="about-container">
             <div className="width-90" style={{ margin: 'auto' }}>
               <p className="mid width-60">
-                Quan is a creative UX engineer with 5 years of experience in
-                developing and designing innovative solutions.
+                Quan is an UX engineer with 5 years of experience in developing
+                and designing innovative solutions.
               </p>
             </div>
             <div className="about-section width-90" style={{ margin: 'auto' }}>