Merge pull request #1 from fazaljoyia/seo-efficiency

added seo related content
fazaljoyia · Jan 19, 2024 · 395da50 · 395da50
2 parents 2d36c6b + f82b936
commit 395da50
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 23 deletions.
diff --git a/next-sitemap.js b/next-sitemap.js
@@ -1,6 +1,6 @@
 /* eslint-env node */
 module.exports = {
-  siteUrl: 'fazaljoyia.github.io',
+  siteUrl: 'fazaljoyia.github.io/Portfolio',
   exclude: ['/404*', '/500*'],
   transform: async (config, path) => {
     return {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "my-portfolio",
-  "version": "2.0.0",
+  "name": "react-portfolio-template",
+  "version": "2.0.1",
   "private": true,
   "scripts": {
     "build": "yarn compile && yarn next build && yarn next export -o docs",

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
@@ -13,21 +13,15 @@ const Page: NextPage<PropsWithChildren<HomepageMeta>> = memo(({children, title,
       <Head>
         <title>{title}</title>
         <meta content={description} name="description" />
-
-        {/* several domains list the same content, make sure google knows we mean this one. */}
-        <link href={`https://fazaljoyia.github.io${pathname}`} key="canonical" rel="canonical" />
+        <link href={`https://fazaljoyia.github.io/Portfolio${pathname}`} key="canonical" rel="canonical" />
 
         <link href="/favicon.png" rel="icon" sizes="any" />
         <link href="/icon.svg" rel="icon" type="image/svg+xml" />
         <link href="/apple-touch-icon.png" rel="apple-touch-icon" />
         <link href="/site.webmanifest" rel="manifest" />
-
-        {/* Open Graph : https://ogp.me/ */}
         <meta content={title} property="og:title" />
         <meta content={description} property="og:description" />
-        <meta content={`https://fazaljoyia.github.io${pathname}`} property="og:url" />
-
-        {/* Twitter: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup */}
+        <meta content={`https://fazaljoyia.github.io/Portfolio${pathname}`} property="og:url" />
         <meta content={title} name="twitter:title" />
         <meta content={description} name="twitter:description" />
       </Head>

diff --git a/src/components/Sections/Home.tsx b/src/components/Sections/Home.tsx
@@ -28,7 +28,7 @@ const Home: FC = memo(() => {
           src={imageSrc}
         />
         <div className="z-10  max-w-screen-lg px-4 lg:px-0">
-          <div className="flex flex-col items-center gap-y-6 rounded-xl bg-gray-800/40 p-6 text-center shadow-lg backdrop-blur-sm">
+          <div className="flex flex-col items-center gap-y-6 rounded-xl bg-gray-800/40 p-6 text-center shadow-lg backdrop-blur-sm home-item">
             <h1 className="text-4xl font-bold text-white sm:text-5xl lg:text-7xl">{name}</h1>
             {description}
             <div className="flex gap-x-4 text-neutral-100">

diff --git a/src/data/data.tsx b/src/data/data.tsx
@@ -12,7 +12,7 @@ import GithubIcon from '../components/Icon/GithubIcon';
 import InstagramIcon from '../components/Icon/InstagramIcon';
 import LinkedInIcon from '../components/Icon/LinkedInIcon';
 import TwitterIcon from '../components/Icon/TwitterIcon';
-import heroImage from '../images/header-background.webp';
+import heroImage from '../images/background.png';
 import porfolioImage4 from '../images/portfolio/donations.jpg';
 import porfolioImage2 from '../images/portfolio/galileo.jpg';
 import porfolioImage5 from '../images/portfolio/github-actions.jpg';
@@ -34,7 +34,7 @@ import {
 
 export const homePageMeta: HomepageMeta = {
   title: 'My Portfolio',
-  description: 'My portfolio built with react and next js',
+  description: 'React portfolio template built with react and next js',
 };
 
 export const SectionId = {
@@ -254,7 +254,7 @@ export const contact: ContactSection = {
     {
       type: ContactType.Email,
       text: 'ranafazalabbasjoyia@gmail.com',
-      href: 'ranafazalabbasjoyia@gmail.com',
+      href: 'mailto:ranafazalabbasjoyia@gmail.com',
     },
     {
       type: ContactType.Location,

diff --git a/src/globalStyles.scss b/src/globalStyles.scss
@@ -118,3 +118,6 @@ span {
 .react-activity-calendar__count{
   color: white;
 }
+.home-item{
+  background-color: black !important;
+}
diff --git a/src/images/background.png b/src/images/background.png
diff --git a/src/images/header-background.webp b/src/images/header-background.webp
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,18 +1,10 @@
 import {Head, Html, Main, NextScript} from 'next/document';
 
-// next/document <Head /> vs next/head <Head />
-//
-// next/document Head is rendered once on the server. This is different from next/head which will
-// rebuild the next/head fields each time it's called, and won't overwrite next/document's Head.
-
 export default function Document() {
   return (
     <Html lang="en">
       <Head>
         <meta charSet="utf-8" />
-        {/* google translate breaks react:
-          - https://github.com/facebook/react/issues/11538
-          - https://bugs.chromium.org/p/chromium/issues/detail?id=872770 */}
         <meta content="notranslate" name="google" />
       </Head>
       <body className="bg-black">