Techtrix 2026 (Tech Fest Website)

• 

  Hero section with the fest name, tagline, and register CTA

• 

  Origin story of the fest with stats and a Tony Stark quote

• 

  Event categories mapped to Marvel characters — the Tech Heroes Roster

• 

  User picks a specific event after selecting a category

• 

  Individual event page showing rules, dates, fees, and coordinator list

• 

  Message from the principal with a space-themed background

• 

  Navigation, contacts, and credits section

Inspiration

Techtrix is RCCIIT's annual tech fest. I was asked to design the official website for it. I wanted to give it a clear theme that felt relevant to a college crowd, so I went with Marvel. The idea was to map each event category to a character and build the whole site around that.

What it does

It's a website design with multiple pages:

• Landing page — hero section with the fest name, tagline, and CTA buttons
• About section — origin story of the fest with stats
• Events page — event categories shown as character cards
• Events page — event categories shown as character cards (Automata, Robotics, Gaming, etc.)
• Event mediate page — after picking a category, shows the specific events under it with a "Choose Your Destiny" layout
• Event detail page — rules, registration date, venue, fees, and coordinator list for each event
• Principal's desk — message from the principal
• Footer — navigation, contacts, and credits

How we built it

Built fully in Figma. Started with the landing page and built outward from there. Kept a shared color system — dark backgrounds, yellow accents — across all pages to hold everything together.

Challenges we ran into

Fitting a lot of information without making pages look heavy. Event detail pages had rules, coordinators, dates, and fees all in one place. Getting the layout to feel clean took a few rounds of iteration.

Accomplishments that we're proud of

The events flow. Breaking events into three levels — category, selection, and detail — kept the pages clean instead of dumping everything in one place. The "Choose Your Destiny" page in the middle made the navigation feel more intentional.

What we learned

How to work with a theme across multiple pages without losing consistency. Also learned to make dense content pages readable through spacing and typographic hierarchy.

What's next for Techtrix 2026 (Tech Fest Website)

Hand it off for development in Framer or Next.js, and add animations for the event card interactions on the events page.

Built With

• figma