/floema-awwwards

This project is a re-build of an amazing website that was featured as the Site of the Day on awwwards.com. The goal of this project is to showcase my web design and development skills and recreate the visual and interactive elements of the original website.

Primary LanguageJavaScriptMIT LicenseMIT

Creative Website Re-build Project

This project is a rebuild of an amazing website that was featured as Site of the Day on awwwards.com by Luca Franceschetti and Luis Henrique Bizarro Website Link. The goal of this project is to showcase my web design and development skills and recreate the visual and interactive elements of the original website.

floema-preview.mp4

Demo

See it live on Digital Ocean

See it live on Vercel

Installation

To run this project locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/peperini/floema-awwwards.git
  1. Add your .env environment variables file to the project folder

Your .env file should contain:

PRISMIC_REPOSITORY=
PRISMIC_ACCESS_TOKEN=

Ensure these are properly set to connect with Prismic services.

  1. Install dependencies:
npm install
  1. Start the development server:
npm start

Technologies Used

  • PUG (HTML Template Engine)
  • SCSS
  • JavaScript
  • Express
  • Prismic
  • GSAP
  • Lodash
  • WebGL (with OGL)
  • GLSL
  • Webpack
  • Digital Ocean

Features and Functionality

  • Interactive animations
  • Responsive design for different screen sizes
  • Smooth transitions and scroll effects and interactions
  • Optimized performance and loading times

License

License: MIT

Contact

If you have any questions or comments regarding this project, feel free to reach out to me: