https://github.com/ankitsamaddar/my-portfolio-blog-site-gatsby

This is the source code for my GatsbyJS site built from scratch using Tailwindcss and DaisyUI. It a JAM Stack application and the blogs and projects are written in markdown.
https://github.com/ankitsamaddar/my-portfolio-blog-site-gatsby

daisyui gatsbyjs react react-phone-number-input react-slick tailwindcss

Last synced: 20 days ago
JSON representation

This is the source code for my GatsbyJS site built from scratch using Tailwindcss and DaisyUI. It a JAM Stack application and the blogs and projects are written in markdown.

• Host: GitHub
• URL: https://github.com/ankitsamaddar/my-portfolio-blog-site-gatsby
• Owner: ankitsamaddar
• License: other
• Created: 2024-11-23T21:53:34.000Z (29 days ago)
• Default Branch: main
• Last Pushed: 2024-12-02T22:17:11.000Z (20 days ago)
• Last Synced: 2024-12-02T23:23:40.138Z (20 days ago)
• Topics: daisyui, gatsbyjs, react, react-phone-number-input, react-slick, tailwindcss
• Language: JavaScript
• Homepage: https://ankitsamaddar.github.io/
• Size: 27.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Gatsby Portfolio with Blog and Projects

🚀 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.

## Table of Contents

- [Project Overview](#project-overview)

- [Project Structure](#project-structure)

- [Key Features](#key-features)

  - [Dynamic Content Generation](#dynamic-content-generation)

  - [SEO Optimizations](#seo-optimizations)

  - [Contact Form](#contact-form)

  - [Project Carousel](#project-carousel)

  - [Google Analytics Integration](#google-analytics-integration)

  - [Sitemap and Robots.txt](#sitemap-and-robots-txt)

- [Setup Instructions](#setup-instructions)

- [Deployment](#deployment)

- [Contributing](#contributing)

- [License](#license)

## Project Overview

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.

## Project Structure

```

├── 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

```

## Key Features

### 📚 Dynamic Content Generation

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 `MarkdownRemark` GraphQL type including `html`, `excerpt`, `headings`, etc. 

  ```graphql

  {

    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.

### 📊 SEO Optimizations

- **Schema Markup**: Added schema markup to each page using the `Gatsby Head API` for better SEO. For multiple meta tags, use React Fragments.

  ```javascript

  export function Head() {

    return (

      <>