🚀 A beautifully crafted portfolio site built with GatsbyJS React Framework, Tailwind CSS, and Daisy UI, featuring dynamic content generation, SEO optimizations, and an elegant user interface with dark and light theme. This site includes a blog section, project showcases, a contact form, and advanced SEO features like schema markup and Google Analytics integration. Perfect for developers looking to create a personal or professional online presence.
This portfolio site is built from scratch using the Gatsby starter template. It includes five main pages: index, projects, blogs, tags, and contact. The site is designed to showcase projects and blogs written in Markdown, processed dynamically by Gatsby's transformer remark plugin.
├── markdown
│ ├── blogs
│ │ ├── blog2.md
│ │ └── blog1.md
│ └── projects
│ ├── project2.md
│ └── project1.md
├── src
│ ├── components
│ │ ├── breadcrumbs.js
│ │ ├── contactForm.js
│ │ ├── graphComment.js
│ │ ├── header.js
│ │ ├── layout.js
│ │ ├── projectCarousel.js
│ │ ├── SeoComponent.js
│ │ ├── socialLinks.js
│ │ └── techIconGrid.js
│ ├── pages
│ │ ├── 404.js
│ │ ├── blogs.js
│ │ ├── contact.js
│ │ ├── index.js
│ │ ├── projects.js
│ │ └── tags.js
│ ├── styles
│ │ └── global.css
│ └── templates
│ ├── blog-template.js
│ └── tag-template.js
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── package.json
├── postcss.config.js
└── tailwind.config.js
The blog and project contents are written in Markdown and processed by Gatsby's gatsby-transformer-remark plugin to generate dynamic pages.
-
Each Markdown file is parsed into a node of type
MarkdownRemark. -
This plugin adds additional fields to the
MarkdownRemarkGraphQL type includinghtml,excerpt,headings, etc.{ allMarkdownRemark { edges { node { html headings { depth value } frontmatter { # Assumes you're using title in your frontmatter. title } } } } } -
Other Gatsby plugins can also enhance the content and add addition fields.
-
Schema Markup: Added schema markup to each page using the
Gatsby Head APIfor better SEO. For multiple meta tags, use React Fragments.export function Head() { return ( <> <html lang="en" /> <body className="my-body-class" /> <title>Hello World</title> </> ) }
-
SEO Component: A reusable
SEO.jsReact component to manage metadata and schema markup across pages. -
Schema Markup:
schemaMarkupis typically a JSON object in theJSON-LDfor structured data, so it can simply be defined as a constant inside theHeadcomponent. The JavaScript object then can be passed as a prop to theSEOcomponent.export const Head = ({ pageContext }) => { const schemaMarkup = { "@context": "https://schema.org", "@type": "WebPage", "name": pageContext.title, "description": pageContext.description, "url": pageContext.url, "image": pageContext.image // You can add more fields as needed for your schema markup }; return ( <SEO title={pageContext.title} description={pageContext.description} image={pageContext.image} schemaMarkup={schemaMarkup} /> ); };
-
A custom
contactForm.jsReact component that validates user inputs and sends email viamailto:protocol or usesWeb3Forms APIto send message. -
Web3Forms API Integration:
// src/components/contactForm.js import React, { useState } from "react"; import PhoneInput from "react-phone-number-input"; const ContactForm = () => { // ... const accessToken = process.env.GATSBY_REACT_APP_WEB3FORMS_ACCESS_TOKEN // Web3Forms access token try { const response = await fetch("https://api.web3forms.com/submit", { method: "POST", body: formData, }) // } return ( <form....> //.... </form> ); };
- A carousel React component built with
react-slickto showcase projects on the homepage.//src/components/projectCarousel.js import React from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css" import "slick-carousel/slick/slick-theme.css" const ProjectCarousel = ({ projects }) => { //... return ( <Slider {...settings}> //..... </Slider> ); }; export default ProjectCarousel;
-
Integrated Google Analytics 4 (GA4) using
gatsby-plugin-google-tagmanagerto get web analytics for the page. -
The plugin dispatches a
gatsby-route-changeevent on every route change, which is captured in GTM by creating a Custom Event Trigger for this event.// gatsby-config.js module.exports = { plugins: [ { resolve: "gatsby-plugin-google-tagmanager", options: { id: process.env.GATSBY_GOOGLE_TAGMANAGER_ID, includeInDevelopment: false, enableWebVitalsTracking: true, }, }, // .... ], };
-
Added
gatsby-plugin-sitemapandgatsby-plugin-robots-txtfor SEO improvements.// gatsby-config.js module.exports = { plugins: [ `gatsby-plugin-sitemap`, `gatsby-plugin-robots-txt`, // ... ], };
-
The
sitemap.xmlandrobots.txtensure search engines can effectively navigate your site while respecting the crawling rules.
-
Clone the repository:
git clone https://github.com/yourusername/your-repo.git
-
Install dependencies:
npm install
-
Install
gastby-cli:npm install -g gatsby-cli
-
Start the development server:
gatsby develop
-
Build the site:
gatsby build
This site is deployed using GitHub Pages. The gh-pages npm package is used to host the public directory after building the site.
gh-pages -d publicContributions are welcome! Please open an issue or pull request if you have any suggestions or find any bugs.
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.