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.
- 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.
- Gatsby JS
- TypeScript
- Framer Motion
- GraphQL
- Tailwind CSS - For styles
- 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.
- Frontend Mentor - arjunkdot
- Linktree - arjunkdot
- Twitter - @arjunkdot