https://github.com/arjunkdot/basic-dept
Basic Agency clone using Gatsby & Tailwind CSS.
https://github.com/arjunkdot/basic-dept
framer-motion gatsbyjs tailwindcss
Last synced: 4 months ago
JSON representation
Basic Agency clone using Gatsby & Tailwind CSS.
- Host: GitHub
- URL: https://github.com/arjunkdot/basic-dept
- Owner: arjunkdot
- Created: 2023-08-31T12:53:48.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-09-30T17:13:15.000Z (over 2 years ago)
- Last Synced: 2025-04-08T05:48:55.446Z (about 1 year ago)
- Topics: framer-motion, gatsbyjs, tailwindcss
- Language: TypeScript
- Homepage: https://basic-dept-arjunkdot.netlify.app/
- Size: 44.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://www.frontendpractice.com/projects/basic) challenge at [Frontend Practice](https://www.frontendpractice.com) 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](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Author](#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](https://github.com/arjunkdot/basic-dept/)
- Live Site URL: [Live Demo](https://basic-dept-arjunkdot.netlify.app/)
## My process
### Built with
- [Gatsby JS](https://gatsbyjs.com/)
- [TypeScript](https://typescriptlang.org)
- [Framer Motion](https://www.framer.com/motion/)
- [GraphQL](https://graphql.org/)
- [Tailwind CSS](https://tailwindcss.com/) - 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](https://www.frontendmentor.io/profile/arjunkdot)
- Linktree - [arjunkdot](https://linktr.ee/arjunkdot)
- Twitter - [@arjunkdot](https://www.twitter.com/arjunkdot)