Akademik Ev (2024)

Role: Frontend Developer
Tech Stack: React, GSAP, Tailwind CSS

Overview

A modern, animated landing page for a premium coffee brand, aimed at creating a luxurious user experience and high conversion rates.

bank.java

1public class Bank {
2  private String name;
3  private List<Account> accounts = new ArrayList<>();
4
5  public Bank(String name) {
6      this.name = name;
7  }
8
9  public void openAccount(String owner, double initialBalance) {
10      Account account = new Account(owner, initialBalance);
11      accounts.add(account);
12      System.out.println("Account opened for " + owner);
13  }
14
15  public void showAccounts() {
16      for (Account acc : accounts) {
17          System.out.println(acc);
18      }
19  }
20}

bank.cpp

1#include <iostream>
2#include <vector>
3#include <string>
4
5class Bank {
6private:
7  std::string name;
8  std::vector<Account> accounts;
9
10public:
11  Bank(const std::string& name) : name(name) {}
12
13  void openAccount(const std::string& owner, double initialBalance) {
14      accounts.emplace_back(owner, initialBalance);
15      std::cout << "Account opened for " << owner << std::endl;
16  }
17
18  void showAccounts() const {
19      for (const auto& acc : accounts) {
20          std::cout << acc << std::endl;
21      }
22  }
23};
24
25int main() {
26  Bank bank("MyBank");
27  bank.openAccount("John Doe", 1000.0);
28  bank.showAccounts();
29  return 0;
30}

Problem

The brand needed a site that felt premium yet loaded quickly, with subtle animations to improve storytelling without compromising performance.

Process

Planning: Compared similar sites, created a design moodboard in Figma.
Design: Translated wireframes into responsive components.
Development:
- Built layout with Tailwind CSS
- Used GSAP for scroll-triggered animations
- Lazy-loaded video background for performance
Testing: Manually tested across breakpoints, used Lighthouse for optimization.

Highlights

Smooth GSAP scroll animations
Custom video player using HTML5 <video> + responsive container
Fully mobile-optimized
Deployed on Vercel with custom domain

Outcome

Improved perceived brand quality and performance scores across devices. Learned how to integrate GSAP into Next.js effectively.

🔗 Live Site • GitHub Repo