Personal web implemented with Gatsby.

You can see My web or If you interested you can even check Admin CMS

email: [email protected]
password: admin1234
please do not add or delete content, just look how it works..

---

Getting started:

2. Install dependencies.

Development workflow:

🎉 To start your development process, Run gatsby develop in the terminal. This will prepare the project for work and launch watch tasks to update files on-the-fly as you work.

Production build:

👻 Production-ready files, Run gatsby build and grab entire public folder. 💜

Technologies:

Tech	Description	Using
React	Blazing fast workflow for static web with React.js	Gatsby, React
CSS	Compiled CSS styles, to automate the tedious BEM notation it's better to use CSS/SASS modules, Components are styled using it and inside pages folder is used styled-components.	(sass/modules,autoprefixer,helmet) styled-components
JavaScript	It has been built with default configurations.. Also In this case used prop-types insted of TypeScript but at some points U can omit it at all.	Babel, Typechecking Customization
Offline-first	Progressive Web App (PWA)	Service worker
GraphQL	Compared to be an alternative and even replace to REST web services, 'in a couple of years'. But main reason of usage is that Gatsby is powered by GraphQL.	GraphQL
DATA SOURCE	In this case I used simple Markdown. But it can be any type of database, APIs. etc	remark filesystem
Hosting & CMS	Hosting and Serverless backend services for static websites.	Netlify, Content Management System

Project structure:

• public/ #Production folder

  Contains production-ready files: JavaScript and CSS bundles and all other dependency stuff.

• src/ #Development folder

  • components/

    • '****' #Components

  • pages/

    • index.js #Main page.
    • contact/ #Contact form page.
    • blog/ #Blog page with some content inside.
    • about/ #Info about me.
    • gallery/ #Gallery.
    • projects/ #Projects.

  • templates/ #Actual pages based on Markdown files.

    • post/

  • markdown/ #Data source

    • blog/
    • gallery/
    • projects/

• / #Root files

  • .gatsby-config

    Can Include: siteMetadata, list of different plugins configurations. more info

  • .gatsby-node

    Basically it is used for database access, APIs call. In this case to create page based on Markdown file. more info

  • .package.json

    Gives some useful npm dependency information..

  • static/

    • admin/ #Contains CMS config files.

    • assets/ #Includes image files: '.jpeg', '.jpg', '.png', '.svg', '.mp4', 'webm', 'wav', 'mp3'.. {image}

Feedback

If you have encountered a bug, or have a useful suggestion how to improve code
create issue, or make a pull request!