TRAIC Website | Philos Portfolio

Organization: Ted Rogers Alternative Investments Club (TRAIC), Toronto Metropolitan University

Overview

As VP of Technology at TRAIC, I was responsible for designing, building, and deploying the club's official website from scratch — end-to-end, with no existing digital presence to build on. The site needed to serve as the primary touchpoint for prospective members, sponsors, and the broader TMU community, communicating the club's identity, investment focus areas, and upcoming events.

The Problem

TRAIC launched in 2025 as a rebrand of the former Ted Rogers Sales & Trading (TRST) club, pivoting from traditional markets to the full spectrum of alternative investments — Private Equity, Crypto & Digital Assets, Real Estate, and Commodities. With a new identity and no existing web presence, the club had no credible platform to:

Communicate its mission and brand to prospective members
Drive event registrations and hiring intake
Establish credibility with corporate sponsors and industry partners
Serve as a digital home for a rapidly growing 30+ member organization

How might we design a website that reflects TRAIC's professional, merit-driven identity while being fast to build, easy to maintain, and scalable as the club grows?

Constraints & Context

Solo ownership: I was the sole designer and developer on this project, coordinating with Marketing for brand alignment
Tight turnaround: The site needed to launch in time for early Fall 2025 recruitment
Non-technical stakeholders: VPs across Events, Corporate Relations, and Marketing needed to be able to request content changes without touching code
Dual audience: The site needed to appeal to both TMU undergrads (prospective members) and external professionals (sponsors, alumni, industry partners)

Design Process

Brand Foundation

TRAIC's visual identity was built around a dark, finance-forward aesthetic — conveying professionalism and ambition without feeling stiff. I established a full design system in code:

Color palette: Deep navy backgrounds (#0f172a), cyan primary (#0891b2 light / #22d3ee dark), emerald accent (#10b981) — projecting trust and precision
Typography: Geist Sans for its clean, modern geometry suited to financial contexts
Motion: Framer Motion entrance animations (fade + slide) with spring easing curves ([0.16, 1, 0.3, 1]) to give the site energy without distraction
Texture: Subtle grain noise overlay on the hero using SVG fractalNoise to add depth and premium feel

Information Architecture

The site is structured around four core user goals:

User Goal	Page / Section
Understand what TRAIC is	Home → Welcome, Rebranding, Focus Areas
Learn about investment areas	/investment-areas
Register for events	Home → Upcoming Event (Lu.ma embed)
Join the club / apply	/get-involved
Learn about the team	/about

Navigation uses a card-based mega menu pattern — each top-level item reveals a styled preview card with a distinct background color (navy for About, teal for Investments, green for Get Involved) to create visual distinction and orient users quickly.

Component & Design System

To ensure visual consistency across contributors and future maintainability, I built a documented design system with CSS custom properties:

Spacing: 8-point grid via Tailwind defaults
Radius: sm=4px, md=8px, lg=12px
Shadows: Neutral-only — no colored shadows except on hover glows (--glow-primary)
Transitions: 200ms with cubic-bezier(0.25, 0.1, 0.25, 1) standard; cubic-bezier(0.16, 1, 0.3, 1) for entrances
Reusable patterns: .card-hover-glow, .gradient-text, .grain-overlay, .glass, .section-padding, .page-hero

Sector cards use distinct top border accents (accent-bar-pe, accent-bar-crypto, accent-bar-re, accent-bar-alts) to visually differentiate TRAIC's four investment focus areas at a glance.

Key UX Decisions

Typewriter hero tagline: Instead of a static subtitle, the hero cycles through six rotating taglines ("Inform. Invest. Improve.", "Analyze. Act. Advance.", etc.) using a custom TextType component. This communicates TRAIC's multi-dimensional mission without cluttering the layout.

Split hero layout: A two-column hero (team photo left, headline + CTAs right) humanizes the club immediately — prospective members see real people before reading a single word of copy.

Lu.ma event embed: Rather than a custom events page that requires manual updates, I embedded TRAIC's Lu.ma event registration directly into the homepage. This keeps event information always live and reduces maintenance burden on non-technical team members.

Dark mode support: Full dark/light theme implementation using CSS custom property swaps — dark mode is the default to match TRAIC's finance aesthetic, with light mode available for accessibility.

Development Approach

Stack: Next.js 14 (App Router), TypeScript, Tailwind CSS v4, shadcn/ui (Radix primitives), Framer Motion, Vercel

I used GitHub Copilot heavily throughout, focusing my own effort on design direction, UX decisions, motion choreography, and the design system — while leveraging AI pair programming to accelerate component scaffolding and repetitive implementation. This approach allowed me to ship a production-quality site solo in a compressed timeline while maintaining high design fidelity.

The codebase uses:

AnimatedSection / StaggerContainer / StaggerItem — reusable Framer Motion wrapper components for consistent scroll-triggered entrance animations across every page
App Router for clean page-based routing (/about, /investment-areas, /get-involved)
shadcn/ui for accessible, unstyled-base components (cards, buttons, badges) customized to TRAIC's design tokens

Outcomes

Successfully launched in time for Fall 2025 recruitment — serving as the club's primary digital presence throughout its inaugural year
Coordinated with VP of Marketing to align site content with social campaigns, driving event registrations via the homepage Lu.ma embed
Established a reusable component library and design system that enables future Technology team members to build new pages and features with visual consistency
Website became a key asset in TRAIC's corporate sponsorship packages, reinforcing credibility with external partners

What I Learned

Design systems pay off fast: Defining tokens and utility classes upfront made every new page significantly faster to build and visually consistent without manual effort
AI-assisted development is a design multiplier: Using GitHub Copilot for implementation freed me to spend more time on motion design, hierarchy, and brand decisions — the things that actually differentiate the product
Stakeholder constraints shape better decisions: The need for low-maintenance content (like the Lu.ma embed) pushed me toward smarter architectural choices rather than over-engineered custom solutions

Next Steps

Migrate event content to a CMS (e.g., Notion API or Contentlayer) so Marketing can update events without touching code
Build a dedicated member portal for analyst submissions and internal resources
Add analytics dashboard to track event registration conversions and hiring page performance