Projects
Web, UX, design,
and video work
Baited by the Odds - Gambling Awareness Campaign
This was a client campaign for Ottawa Public Health about gambling risks in sport. I helped turn a serious message into a bold visual system that could work across posters, social mockups, a presentation, and a short video.
Team Project Led the campaign concept and visual direction. I designed the poster, social assets, presentation, and video while my team focused on the written content.
Brief
- Ottawa Public Health needed a clear campaign about gambling risks in sport.
- The audience was coaches and athletes, so the message had to feel direct.
- The idea needed to work across print, social media, presentation slides, and video.
- My team handled the written content while I led the visual concept and production.
Design challenge
- Make a serious warning memorable without making it feel like shock content.
- Use one visual hook people could understand quickly.
- Connect gambling to sport in a way that made sense for coaches and athletes.
- Keep the campaign consistent across every deliverable.
Concept & production
- Built the “Baited by the Odds” idea around the feeling of being pulled in.
- Used a fishing hook, sports jersey, and bold warning copy to make the risk clear fast.
- Illustrated and refined the poster and social media mockups.
- Designed the presentation deck to explain the campaign direction.
- Produced the final video with the same visual style and message.
Outcome
- Created a campaign package that could move from print to social to video.
- Made the warning easier to understand through one repeated metaphor.
- Showed how the campaign could work in real public-health and social-media contexts.
Final deliverables
- Hubbub poster and campaign poster
- Instagram/Reels mockup and Facebook mockup
- Client presentation deck
- 25-second awareness video
Tools & skills
Illustrator
Premiere Pro
After Effects
Client Work
Campaign Design
UPS Motion Graphics Spec Ad
A short UPS-inspired spec ad built as a motion graphics project. I focused on timing, brand-style movement, sound effects, and a clean final edit.
Team Project Animated the ad in After Effects, added sound and final edits in Premiere Pro, and cleaned the audio in Audition. A team member recorded the voice-over.
Focus
- UPS-inspired spec commercial
- Short brand-style animation
- Clean motion timing and transitions
- Voice-over from a team member
- Sound effects sourced from Pixabay
Production highlights
- Motion concept and timing
- After Effects animation
- Premiere Pro sound and final edit
- Audition audio cleanup
After Effects
Premiere Pro
Audition
Motion Graphics
Spec Ad
Pokemon TCG Community Documentary
This student documentary follows the Pokemon Trading Card Game community through four different perspectives: a casual player, a rising champion, a collector, and a shopkeeper.
Team Project Developed the concept, operated camera, edited the documentary in Premiere Pro, and cleaned audio in Audition. A team member handled the storyboard and script.
Focus
- Pokemon TCG community storytelling
- Casual player, champion, collector, and shopkeeper perspectives
- Competition, nostalgia, and community themes
- Student documentary format
Production highlights
- Concept development
- Storyboard and script by a team member
- Camera operation
- Premiere Pro editing
- Audition audio cleanup
Premiere Pro
Audition
Documentary
Pokemon TCG
Childhood, Sports, and Pokemon
An interview with Sam about childhood, sports, and how his connection to Pokemon changed over time.
Team Project Developed the concept, operated camera, edited the interview in Premiere Pro, and cleaned audio in Audition. A team member handled the storyboard and script.
Focus
- Sam’s childhood experiences
- Sports and personal background
- His changing connection to Pokemon
- Interview assignment format
Production highlights
- Interview concept development
- Storyboard and script by a team member
- Camera operation
- Premiere Pro editing
- Audition audio cleanup
Premiere Pro
Audition
Interview
Production
Warhammer 40k Tabletop Showdown
A short cinematic video following two friends during a Warhammer 40k match, focused on the atmosphere, strategy, and energy of tabletop gaming.
Team Project Developed the concept, operated camera, edited the video in Premiere Pro, and cleaned audio in Audition. A team member handled the storyboard and script.
Focus
- Warhammer 40k tabletop match
- Two-player game narrative
- Atmosphere and strategy
- Tabletop gaming energy
Production highlights
- Cinematic concept development
- Storyboard and script by a team member
- Camera operation
- Premiere Pro editing
- Audition audio cleanup
Premiere Pro
Audition
Cinematography
Production
Why Sam Chose Algonquin
A short interview with Sam Rubinoff about why he chose Algonquin College and what shaped his background.
Solo Project Planned, filmed, edited the interview in Premiere Pro, and cleaned audio in Audition.
Focus
- Sam Rubinoff interview
- Why he chose Algonquin College
- Personal background and education context
- Practical Skills Assessment 1 format
Production highlights
- Interview planning
- Camera operation
- Premiere Pro editing
- Audition audio cleanup
Premiere Pro
Audition
Interview
Solo Production
Yoonearthwork - Handcrafted Pottery E-Commerce Platform
A full-stack e-commerce site for an Ottawa pottery business. I designed the shopping experience around the artwork: simple product browsing, clean checkout, shipping, payments, order management, and a gallery-like feel.
Solo Project Gathered requirements, mapped the catalog and checkout flow, designed the visual direction, built the store, tested payment and shipping flows, optimized the site, and deployed it for launch.
Key features
- Shopping cart with Square payments
- Real-time shipping rates through Stallion Express
- Admin dashboard for products, orders, and settings
- Automatic image optimization with Sharp
- Order tracking and email notifications
- SEO setup with Schema.org structured data
Technical highlights
- Node.js and Express backend with REST APIs
- AES-256-CBC encryption for sensitive credentials
- bcrypt password hashing with session authentication
- Rate limiting and input validation
- Render deployment with persistent storage
- Optimized for a 512MB memory limit
Contact Book - Vue Contact Manager
A Vue 3 contact manager for saving, searching, viewing, adding, editing, and deleting contacts. The app keeps data in localStorage, uses route-based modals, and stays easy to use on desktop and mobile.
Solo Project Built the app structure, routes, contact composable, reusable form, searchable list, modal flows, and responsive header behavior.
Key features
- Create, view, edit, and delete contacts
- Saved contact data in localStorage
- Search drawer for quickly filtering contacts
- Detail, add, and edit modals tied to routes
- Mobile header that hides and returns on scroll
Technical highlights
- Vue 3 single-page app built with Vite
- TypeScript components and composables
- Vue Router routes for list, detail, add, and edit views
- Reusable ContactForm component
- Deployed as a Render static site
Ghibli Reviews - Studio Ghibli Review Platform
A deployed Studio Ghibli review platform with a Nuxt 3 frontend and a Strapi CMS backend. The frontend supports browsing and search, while the backend handles structured review content, media, and API delivery.
Team Project Built as a team project across the frontend and backend. The work connected review content, media hosting, search, CMS management, and deployment into one working platform.
Frontend
- Browse Studio Ghibli movie reviews
- Search reviews by title, director, or genre
- Individual review pages with full write-ups
- Top picks, About, and Contact pages
- Backend wake notice for hosted API availability
Technical highlights
- Nuxt 3 frontend consuming a Strapi REST API
- Tailwind CSS for responsive page layouts
- Cloudinary-hosted media delivered through the CMS
- Retry and timeout handling for API requests
- Deployed as a Render static site
Backend CMS
- Structured movie review content type
- Fields for title, director, genre, release year, rating, cover image, and full review
- REST API used by the Nuxt frontend
- Cloudinary media upload setup
- Hosted admin panel for content management
Technical highlights
- Strapi 5 backend configured for production
- PostgreSQL database support through Neon
- Environment-based database and secret settings
- Cloudinary upload provider configuration
- Deployed on Render as the content API
Frontend Mentor - Intro Section with Dropdown Navigation
A Frontend Mentor landing page challenge focused on rebuilding an intro section with dropdown navigation, responsive images, desktop menus, and a mobile slide-out menu.
Solo Project Built the HTML structure, responsive CSS, dropdown interactions, mobile menu state, and accessible menu button behavior.
Key features
- Desktop dropdowns for feature and company menus
- Mobile overlay menu with open and close states
- Responsive hero image and content layout
- Client logo row and call-to-action section
- Updated expanded states for menu buttons
Technical highlights
- Static HTML, CSS, and JavaScript
- CSS breakpoints for desktop and mobile layouts
- JavaScript click handlers for dropdown and sidebar state
- Body scroll lock while the mobile menu is open
- Deployed through GitHub Pages
Game Server Configuration Generator
A web tool for game server admins who do not want to edit long configuration files by hand. It turns hundreds of settings into a visual form, then generates clean config files ready to use.
Solo Project Defined the user problem, organized the settings, designed the interface, built the parser and generator, tested import/export flows, and added localization support.
Key features
- Visual form for 200+ configuration options
- One-click presets for common setups
- Import existing config files with drag and drop
- Export as ZIP, individual files, or copied text
- Auto-save progress in browser storage
- Translated into nine languages
Technical highlights
- Vanilla JavaScript single-page app
- Custom file parser and generator
- Data-driven form generation
- Custom internationalization system
- Client-side ZIP file creation
- Responsive design with CSS variables
MealMate - Meal Planning & Budgeting App
MealMate is a UX project where my team designed a meal planning and budgeting app for mobile and tablet. We moved through research, user flows, wireframes, prototypes, usability testing, and final UI improvements.
Team Project Led UX research, built wireframes and user flows, created low- and high-fidelity prototypes for mobile and tablet, ran Maze tests, and improved navigation, labels, and tap targets based on results.
Early wireframes based on our research, flows, and personas
Step 1: Research & Problem Definition
We used research to define the problem, then turned the findings into personas, task flows, and core requirements.
- User interviews and focus groups
- Problem statement
- Personas and user needs
- User flow mapping
Clickable prototype exploring the tablet layout
Step 2: Responsive Layout Exploration
Moved the research into low-fidelity mobile and tablet layouts to test structure, hierarchy, and navigation.
- Responsive layout structure
- Tablet navigation patterns
- Content hierarchy adjustments
- Clickable prototype for testing
Improved labels, navigation, and tap targets after Maze testing
Step 3: Usability Testing & Iteration
Used Maze results to find pain points, then improved labels, navigation, and tap targets.
- Maze usability testing
- Success rate and drop-off review
- Clearer labels and navigation
- Larger tap targets for mobile
Final prototype with a more polished layout and clearer task flow
Step 4: Final High-Fidelity Prototype
Built the final prototypes, documented the results, and polished the mobile and tablet experience.
- Visual design and branding
- Complete interactive prototype
- Responsive tablet adaptation
- Test report documentation
Pokedex Web App
A web app for browsing Pokemon with live data from PokeAPI. I focused on a clear card layout, smooth JavaScript data fetching, search, filtering, and a fast browsing experience.
Solo Project Planned the browsing flow, designed the card layout, connected the API, built search and filtering, tested loading states and responsiveness, and deployed the final build.
Key features
- Live data from PokeAPI
- Dynamic content rendering
- Search and filter tools
- Responsive card layout
Technical highlights
- Async/await API calls
- DOM manipulation
- Event handling
- CSS Grid layout
Wikimedia Content Browser
A content browser that pulls real data from the Wikimedia API and presents it in a simple browsing experience. I focused on clear structure, useful feedback states, and organized results.
Solo Project Planned the browsing experience, designed the content layout, connected the API, handled loading and error states, tested responsiveness, and refined the presentation.
Key features
- Wikimedia API integration
- Content parsing and display
- Loading and error feedback
- Organized data presentation
Technical highlights
- REST API consumption
- JSON data parsing
- Loading and error states
- Responsive design
Interactive Image Gallery
A dynamic image gallery with category filters. I focused on smooth filtering, clear state changes, and a layout that stays clean while results update.
Solo Project Planned the gallery structure, designed the filtering interface, built the interaction logic, tested layout changes, and refined the final interactions.
Key features
- Category filtering
- Smooth state changes
- Dynamic layout updates
- Interactive UI patterns
Technical highlights
- JavaScript filtering logic
- CSS transitions
- State management
- Grid and Flexbox layout
Real Estate Property Listing
A responsive property listing site built to practise mobile-first layout, spacing, card design, and consistent typography across screen sizes.
Solo Project Started with a mobile-first layout, set up the spacing and typography system, built responsive listing cards, tested breakpoints, and refined the layout for consistency.
Key features
- Mobile-first responsive layout
- Clean spacing and structure
- Consistent typography
- Property card components
Technical highlights
- CSS media queries
- Flexbox and Grid
- Semantic HTML
- Typography scale