Green and Grey Lined Marketing Annual Report

Joy Jama

Web Designer
Website CSS
React
Svelte
TypeScript
The Vesta Tech Web Application is a project designed to
combine functionality and visual appeal. Built with Svelte,
GSAP, and Drizzle ORM, it features smooth animations,
responsive design, and secure authentication to create a
user-friendly experience.
Tools Used:
Svelte for the frontend framework.
Drizzle ORM for database schema management and
queries.
PostgreSQL as the database backend.
GSAP for animations.
Tailwind CSS for styling.
Hostinger for deployment.
Initial Configuration:
Set up the project structure with SvelteKit.
Installed essential dependencies, including Drizzle,
GSAP, Tailwind, and bcrypt for password hashing.
Configured PostgreSQL locally with a database named
vesta_auth.
PROJECT KEY FEATURES
1
www.vesta-techsolutions.com
Why Svelte?
Svelte was chosen for its simplicity and lightweight nature, making it an excellent fit for building fast, efficient, and reactive web applications. Unlike traditional frameworks, Svelte compiles components into optimized vanilla JavaScript at build time, which results in smaller bundles and better performance. This approach reduced the complexity of managing state and DOM updates, enabling a more seamless development process. For this project, Svelte proved invaluable in creating a responsive and dynamic interface with minimal boilerplate code.
GSAP
For animations, GSAP (GreenSock Animation Platform) was the ideal choice due to its robustness and flexibility. GSAP was used to implement smooth scroll-based effects, hover interactions, and dynamic glowing animations—such as the glowing torch logo and animated scroll indicators. These animations added an engaging layer to the user experience while maintaining precise control over timing and performance. Although an initial attempt was made to incorporate Threlte (a Svelte-based Three.js library) for 3D effects, version conflicts posed challenges, and it was set aside for future exploration.
Drizzle ORM
Drizzle ORM was selected for managing database operations with PostgreSQL. Its intuitive schema definition and TypeScript support simplified the integration of database functionality into the project. Using Drizzle, the user authentication data was efficiently stored and queried, ensuring a structured and reliable database flow. The ability to define and update schemas with ease made Drizzle particularly helpful during development, allowing quick iteration while maintaining data integrity.
Tailwind CSS
Tailwind CSS was used to handle styling and layout, providing utility-first classes that sped up the design process. Its responsive design utilities ensured the application looked polished and functioned seamlessly across devices. Dynamic viewport dimensions, such as h-[100dvh] w-[100dvw], were implemented to ensure consistent background coverage and layout responsiveness. Tailwind's flexibility allowed for rapid prototyping and precise styling without writing custom CSS, making it an essential tool for this project.
TECHNOLOGY OVERVIEW
Challenges and Solutions
GSAP Animations
Animations and Hover Effects: Created a glowing torch logo that flickers using GSAP's drop- shadow filter animation. Designed hover effects for interactive elements, such as a glowing dot that toggles a heading image. Implemented scroll-triggered animations for process sections (Discovery, Design, Development, Delivery).
Problem Solved: Flickering and inconsistent animations. Adjusted GSAP timing and logic to ensure hover animations were smooth. Simplified animation triggers by isolating hover effects from background toggles.
Login Flow: Created a login API endpoint (src/routes/api/auth/login/+server.ts) to handle user authentication. Validated user credentials by querying the database and comparing the hashed password using bcrypt.compare.
Problem Solved: Login failed for newly created accounts. Fix: Corrected the query logic using Drizzle ORM and ensured the password comparison logic was consistent.
Authentication System w/ Signup and Login Signup Flow:
Created a signup API endpoint (src/routes/api/auth/signup/+server.ts) to handle user registration. Passwords were hashed using bcrypt before being stored in the PostgreSQL database. Used Drizzle ORM to define the schema and insert users into the database.
Problem Solved: Data was not being stored during signup. Fix: Added logging to verify the flow and corrected a schema mismatch that prevented Drizzle ORM from inserting records into the database.
Delivered a fully functional, visually engaging web application with smooth animations and hover effects.
INTERACTIVE WEBSITE
Designed a responsive UI using Tailwind CSS, ensuring compatibility across devices.
RESPONSIVE DESIGN
Implemented robust signup and login functionality integrated with PostgreSQL and Drizzle ORM.
SECURE AUTHENTICATION
Successfully deployed the application on Hostinger, making it accessible for live testing and demonstration.
LIVE DEPLOYMENT
This project involved creating an interactive and visually engaging web application using Svelte for the frontend, Drizzle ORM and PostgreSQL for the backend, and GSAP for animations. The application features secure signup and login functionality, scroll-triggered animations, and hover-based interactions, all tied together into a responsive and polished user experience. The application was developed in record time, showcasing a robust authentication system, smooth animations, and seamless integration of multiple technologies.
Final Results and Key Accomplishments
Partner With Joy
View Services

More Projects by Joy