Inspired by JSMastery

GPT3 is a responsive website that is built according to this Figma Design

Tools & Technologies

Built with

• Reactjs [Class/Functional Components, Error Boundries, React lazy]
• SCSS

Useful Tools

• Responsively to test website on different devices
• Angry Tools to generate gradients
• Animista to generate css animations.
• Webp tool to convert images to webp format

Screenshot

Project structure

┣ 📦public
┃  ┣ 📜favicon.ico
┃  ┣ 📜index.html
┃  ┣ 📜logo192.png
┃  ┣ 📜logo512.png
┃  ┣ 📜manifest.json
┃  ┗ 📜robots.txt
┗ 📦src
   ┣ 📂assets
   ┃ ┣ 📜FeatureImage.webp
   ┃ ┣ 📜Header-Illustration.webp
   ┃ ┣ 📜Rectangle22-1.webp
   ┃ ┣ 📜Rectangle22-2.webp
   ┃ ┣ 📜Rectangle22-3.webp
   ┃ ┣ 📜Rectangle22-4.webp
   ┃ ┣ 📜Rectangle22.webp
   ┃ ┣ 📜atlassian.webp
   ┃ ┣ 📜dropbox.webp
   ┃ ┣ 📜error.webp
   ┃ ┣ 📜google.webp
   ┃ ┣ 📜logo.svg
   ┃ ┣ 📜not-implemented.webp
   ┃ ┣ 📜profile.webp
   ┃ ┣ 📜shopify.webp
   ┃ ┗ 📜slack.webp
   ┣ 📂components
   ┃ ┣ 📂article
   ┃ ┃ ┣ 📜Article.jsx
   ┃ ┃ ┗ 📜Article.module.scss
   ┃ ┣ 📂brand
   ┃ ┃ ┣ 📜Brand.jsx
   ┃ ┃ ┗ 📜Brand.module.scss
   ┃ ┣ 📂cta
   ┃ ┃ ┣ 📜CTA.jsx
   ┃ ┃ ┗ 📜CTA.module.scss
   ┃ ┣ 📂feature
   ┃ ┃ ┣ 📜Feature.jsx
   ┃ ┃ ┗ 📜Feature.module.scss
   ┃ ┣ 📂navbar
   ┃ ┃ ┣ 📜Navbar.jsx
   ┃ ┃ ┗ 📜Navbar.module.scss
   ┃ ┗ 📜index.js
   ┣ 📂containers
   ┃ ┣ 📂ErrorBoundary
   ┃ ┃ ┣ 📜ErrorBoundary.jsx
   ┃ ┃ ┗ 📜ErrorBoundary.module.scss
   ┃ ┣ 📂blog
   ┃ ┃ ┣ 📜Blog.jsx
   ┃ ┃ ┗ 📜Blog.module.scss
   ┃ ┣ 📂features
   ┃ ┃ ┣ 📜Features.jsx
   ┃ ┃ ┗ 📜Features.module.scss
   ┃ ┣ 📂footer
   ┃ ┃ ┣ 📜Footer.jsx
   ┃ ┃ ┗ 📜Footer.module.scss
   ┃ ┣ 📂header
   ┃ ┃ ┣ 📜Header.jsx
   ┃ ┃ ┗ 📜Header.module.scss
   ┃ ┣ 📂notImplemented
   ┃ ┃ ┣ 📜NotImplemented.jsx
   ┃ ┃ ┗ 📜NotImplemented.module.scss
   ┃ ┣ 📂possibility
   ┃ ┃ ┣ 📜Possibility.jsx
   ┃ ┃ ┗ 📜Possibility.module.scss
   ┃ ┣ 📂whatGPT3
   ┃ ┃ ┣ 📜WhatGPT3.jsx
   ┃ ┃ ┗ 📜WhatGPT3.module.scss
   ┃ ┗ 📜index.js
   ┣ 📂context
   ┣ 📜App.js
   ┣ 📜App.scss
   ┣ 📜animations.scss
   ┣ 📜index.js
   ┗ 📜variables.scss