README.md

BASIC/DEPT® Website Clone

THIS PROJECT IS MORE OF A PRACTICE RUN AND EDUCATIONAL ENDEAVOR RATHER THAN THE REAL DEAL. JUST SO YOU KNOW, I DON'T OWN ANY OF THE GRAPHICS, VIDEOS, OR OTHER STUFF USED HERE. THIS ISN'T CONNECTED TO OR APPROVED BY THE OFFICIAL SOURCE IN ANY FANCY WAY. SO, KEEP IN MIND, IT'S ALL IN THE SPIRIT OF LEARNING AND NOT THE ACTUAL PRODUCT.

I decided to take up this challenge at Frontend Practice and rebuild the BASIC/DEPT® landing page using Gatsby, along with Tailwind CSS in TypeScript. This is my solution. Feel free to have a peek at the source or take the live version out for a spin.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

The challenge

• Try to re-build the landing page and make it look as much close as possible.
• Make sure the website look good on all screens.
• Bonus: Build the draggable slider under "Featured Engagements".
• Bonus: Try recreating the initial page load animations.

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Live Demo

My process

Built with

• Gatsby JS
• TypeScript
• Framer Motion
• GraphQL
• Tailwind CSS - For styles

What I learned

• Learned to use Gatsby to build websites.
• Learned to use Gatsby's GraphiQL interface.
• Learned how to write basic GraphQL queries.
• Learned about Gatsby GraphQL Typegen.
• Learned to use Framer Motion to implement a custom cursor.

Author

• Frontend Mentor - arjunkdot
• Linktree - arjunkdot
• Twitter - @arjunkdot