Jan 2026
Alberta Bionix Website
Screenshot of the website’s hero (title) page, featuring a video background, elegant “glassmorphism” appearance, and clearly visible buttons for joining and contacting Alberta Bionix.
As part of my role as VP Outreach, I took it upon myself to redesign Alberta Bionix’s website.
I identified a variety of goals, and developed the new website such that it:
Strategically guides visitors through Alberta Bionix’s mission, projects, people, and contact information.
Has an elegant and cohesive appearance, both on desktop and mobile screens.
Clearly shows buttons for joining and contacting Alberta Bionix.
I built the Alberta Bionix website using React, TypeScript, Tailwind CSS, and Vite, providing optimal website performance and a streamlined development experience. Below are some details that I am especially proud of:
Responsive grid layouts that dynamically adjust from 2 columns on mobile to 6 columns on ultra-wide screens using Tailwind's breakpoint system.
"Glassmorphism” design combining backdrop blur effects, semi-transparent backgrounds, and 3D tilt interactions via react-parallax-tilt for a subtly interactive visual experience.
Automated CI/CD pipeline using GitHub Actions that builds and deploys to GitHub Pages on every commit, with custom domain configuration for albertabionix.ca.
Screenshot of website’s “Mission” section, with an image carousel that displays a new image every two seconds.
Screenshot of website’s “Projects” section, with an image carousel and captions that change to match each image.
Screenshot of website’s “People” section, with a dynamically resizing grid with the names and photos of members, each linked to their personal LinkedIn page.