```
root                                => the root of the project/repo
├── components                      => includes all the building blocks of the website
│   ├── custom                      => includes all the custom components that are being used by other components in different ways.
│   │   ├── button.js
│   │   ├── headline.js             => H1 Heading
│   │   └── paragraph.js            => long paragraphs.
│   ├── inner-components            => includes all the components that are inserted inside other components.
│   │   ├── computer.js             => The laptop component shown in the header
│   │   ├── hamburgerMenu.js
│   │   ├── nav-options.js          => Navigation options only.
│   │   └── typing.js               => the typing effect on laptop component.
│   ├── about.js                    => the about section
│   ├── analytics.js                => the analytics section
│   ├── blog.js                     => the blog section
│   ├── contact.js                  => the contact section
│   ├── footer.js                   => the footer section
│   ├── header.js                   => the header section
│   ├── layout.js                   => Layout which is a component that wraps all sections.
│   ├── loader.js                   => the loader
│   ├── navigation.js               => the navigation
│   ├── testimonials.js             => the testimonials
│   └── work.js                     => the work section
├── content                         => includes all the content of the website for easy update.
│   ├── about
│   │   └── about.md
│   ├── contact
│   │   └── contact.md
│   ├── header
│   │   └── header.md
│   ├── navigation
│   │   └── navigation.md
│   ├── testimonials
│   │   └── testimonials.md
│   └── work
│   │   └── work.md
├── lib                             => includes functions that are acting like libraries.
│   ├── queryMarkdown.js            => this queries all the markdown files in the content folder.
│   ├── animation.js                => this has all the CSS animations that the website uses.
│   ├── carousel.js                 => this is responsible for the carousels on the website
│   └── isInView.js                 => this checks if a given element is in the view port
├── pages                           => includes all pages that structure the website.
│   ├── _app.js                     => Next.js App component to initialize pages.
│   ├── _document.js                => This custom Component is used to inject things that are the same for all pages in the head.
│   ├── blog.js                     => Blog Page
│   └── index.js                    => Home Page
├── public                          => includes all assets and fonts.
│   ├── brand
│   ├── fonts
│   ├── icons
│   ├── images
│   ├── projects
│   └── favicon.ico
├── styles                          => includes all custom OR global styles and fonts.
│   └── fonts.css
├── theme                           => includes all theme related things.
│   └── media.js
├── .gitignore
├── babel.config.json               => custom babel config that takes care of SVG's and Styled-Components.
├── package.json
├── start-here.md                   => You are here.
├── README.md
└── yarn.lock
```