Featured Projects
Recent UX, web, design, and video work
Baited by the Odds - Gambling Awareness Campaign
A client campaign for Ottawa Public Health that turned a serious gambling-risk message into a clear visual system for coaches and athletes. Deliverables included the Hubbub poster, campaign poster, Instagram/Reels mockup, Facebook mockup, presentation design, and a short awareness video.
Team Project Led the campaign concept, built the visual direction, designed the poster and social assets, designed the presentation, and produced the video while the team handled the written content.
Project Brief
- Ottawa Public Health needed an awareness campaign about gambling risks in sport
- The audience was coaches and athletes, so the message had to feel direct and relevant
- The campaign needed to work as poster artwork, social content, presentation material, and video
- My team handled the written content while I led the concept, design system, and production work
Design Challenge
- Make a serious public-health warning feel memorable without relying on shock value
- Create a visual hook that explains the risk quickly before people read the details
- Connect gambling to sport in a way that felt clear for both coaches and athletes
- Build one campaign idea strong enough to stay consistent across every deliverable
Concept & Production
- Developed the "Baited by the Odds" concept around the idea of being pulled in
- Used a fishing hook, sports jersey, and bold warning copy to make the risk visible fast
- Illustrated and refined the campaign visuals for poster and social mockup formats
- Designed the presentation deck to explain the concept and campaign direction
- Produced the final video using the same visual system, motion style, and message
Outcome
- Created a cohesive campaign package that could move from print to social to video
- Made the warning easy to understand through one repeated visual metaphor
- Showed how the campaign could appear in real social media and public-health 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 animated spec commercial for UPS, built as a motion graphics project with a focused brand message and finished sound effects.
Team Project Animated the commercial in After Effects, added sound and completed the final edit in Premiere Pro, then cleaned the audio in Audition. A team member provided the voice-over.
Content Focus
- UPS-inspired spec commercial
- Short-form brand animation
- Motion graphics pacing and transitions
- Voice-over provided by a team member
- Sound effects sourced from Pixabay
Production Highlights
- Motion concept development
- 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
A student documentary by In Motion Studio exploring the Pokemon Trading Card Game through four community perspectives: a casual trainer, a rising champion, a collector, and a shopkeeper.
Team Project Developed the concept, operated camera, edited in Premiere Pro, and cleaned audio in Audition. A team member handled the storyboard and script.
Content Focus
- Pokemon TCG community storytelling
- Casual trainer, 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 his changing relationship with the Pokemon franchise.
Team Project Developed the concept, operated camera, edited in Premiere Pro, and cleaned audio in Audition. A team member handled the storyboard and script.
Content Focus
- Sam's childhood experiences
- Sports and personal background
- Evolving 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 cinematic video following two friends in a Warhammer 40k match, highlighting the atmosphere, strategy, and passion behind tabletop gaming.
Team Project Developed the concept, operated camera, edited in Premiere Pro, and cleaned audio in Audition. A team member handled the storyboard and script.
Content Focus
- Warhammer 40k tabletop match
- Two-player game narrative
- Atmosphere and strategy
- Tabletop gaming passion
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
An interview with Sam Rubinoff about why he chose Algonquin College and his background, created as a Practical Skills Assessment 1 video.
Solo Project Planned, filmed, edited in Premiere Pro, and cleaned audio in Audition.
Content 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 website designed for an artisan pottery business based in Ottawa, Canada. The platform features an elegant art gallery-inspired aesthetic that showcases handcrafted ceramics while providing a seamless shopping experience with integrated payments, shipping, and order management.
Solo Project Gathered business requirements, mapped the catalog and checkout flow, designed the visual direction, built the full-stack store, tested payments and shipping, then optimized and deployed the site for launch.
Key Features
- Shopping cart with Square payment integration
- Real-time shipping rates via Stallion Express API
- Admin dashboard for products, orders, and settings
- Automatic image optimization with Sharp
- Order tracking and email notifications
- SEO with Schema.org structured data
Technical Highlights
- Node.js + Express.js backend with RESTful APIs
- AES-256-CBC encryption for sensitive credentials
- bcrypt password hashing with session authentication
- Rate limiting and input validation
- Deployed on Render with persistent storage
- Memory-optimized for 512MB constraint
Contact Book - Vue Contact Manager
A Vue 3 and TypeScript contact manager for storing, searching, viewing, adding, editing, and deleting contacts. The app keeps data in localStorage, uses route-driven modal states, and stays usable across desktop and mobile layouts.
Solo Project Built the app structure, routing, contact composable, reusable form, searchable contact list, modal workflows, and responsive header behavior.
Key Features
- Create, read, update, and delete contacts
- localStorage persistence for saved contact data
- Search drawer for quickly filtering contacts
- Detail, add, and edit modals tied to routes
- Mobile-responsive header with scroll hide and reveal behavior
Technical Highlights
- Vue 3 single-page application built with Vite
- TypeScript components and composables
- Vue Router routes for list, detail, add, and edit states
- 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 Strapi CMS backend. The frontend handles browsing, search, and review pages, while the backend manages structured movie review content, media, and API delivery.
Team Project Built as a complete frontend and backend web project, connecting review content, media hosting, search behavior, CMS management, and production deployment into one working platform.
Frontend Section
- 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 styling
- Cloudinary-backed media delivered through the CMS
- Retry and timeout handling for API requests
- Deployed as a Render static site
Backend CMS Section
- Movie review content type for structured CMS entries
- Fields for title, director, genre, release year, rating, cover image, and full review body
- REST API consumed by the Nuxt frontend
- Cloudinary media upload integration
- Hosted admin panel for content management
Technical Highlights
- Strapi 5 backend configured for production hosting
- PostgreSQL database support through Neon
- Environment-based database and secret configuration
- Cloudinary upload provider configuration
- Deployed on Render as the frontend content API
Frontend Mentor - Intro Section with Dropdown Navigation
A static landing page challenge focused on recreating an intro section with dropdown navigation, responsive imagery, desktop dropdowns, and a mobile slide-out menu.
Solo Project Built the HTML structure, responsive CSS, dropdown interactions, mobile menu state, and accessible button attributes for the navigation controls.
Key Features
- Desktop dropdown navigation 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 area
- Accessible expanded-state updates for menu buttons
Technical Highlights
- Static HTML, CSS, and JavaScript implementation
- CSS breakpoint handling for desktop and mobile layouts
- JavaScript click handlers for dropdown and sidebar state
- Body scroll locking while the mobile menu is open
- Deployed through GitHub Pages
Game Server Configuration Generator
A web-based tool that helps game server administrators configure their servers without manually editing complex configuration files. Instead of navigating hundreds of settings in raw text files, users interact with a clean visual interface that organizes options into categories, provides helpful descriptions, and generates properly formatted files ready for use.
Solo Project Defined the user problem, organized the settings into a clear structure, designed the interface, built the parser and generator, tested import and export flows, then deployed the tool with localization support.
Key Features
- Visual form for 200+ configuration options
- One-click presets for common configurations
- Import existing config files via drag-and-drop
- Export as ZIP, individual files, or clipboard
- Auto-save progress in browser storage
- Translated into 9 languages
Technical Highlights
- Vanilla JavaScript single-page application
- 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 both mobile and tablet. We followed a complete UX process from research to high-fidelity prototypes, iterating based on real user feedback.
Team Project Led UX research, built wireframes and user flows, created lo-fi and hi-fi prototypes for mobile and tablet, ran usability testing through Maze, then iterated on navigation, labels, and tap targets based on test results.
Early wireframes based on user flows and personas from our research
Step 1: Research & Problem Definition
Defined the problem through user research, then turned the findings into personas, task flows, and core requirements.
- User interviews and focus groups
- Problem statement definition
- Personas and user needs documentation
- User flow mapping
Clickable prototype exploring responsive layout structure
Step 2: Responsive Layout Exploration
Translated the research into low-fidelity mobile and tablet layouts, testing structure, hierarchy, and navigation across screen sizes.
- Responsive layout structure
- Navigation patterns for tablet
- Content hierarchy adjustments
- Clickable prototype for testing
Improved labels, navigation, and tap targets based on Maze test results
Step 3: Usability Testing & Iteration
Used Maze test results to identify pain points, then refined labels, navigation, and tap targets based on the findings.
- Maze usability testing
- Success rate and drop-off analysis
- Improved labels and navigation clarity
- Enhanced tap targets for mobile
Polished prototype that better supports real tasks and feels easier to use
Step 4: Final High-Fidelity Prototype
Built the final high-fidelity prototypes, documented the outcomes, and polished the experience for mobile and tablet.
- Visual design and branding
- Complete interactive prototype
- Responsive tablet adaptation
- Test report documentation
Pokedex Web App
A web app to browse and explore Pokemon using a live API. Focused on clear layout, JavaScript data fetching, and a clean, fast experience.
Solo Project Planned the browsing flow, designed the card layout, integrated the API, built search and filtering, tested loading states and responsiveness, then deployed the final build and refined usability.
Key Features
- Live API data fetching from PokeAPI
- Dynamic content rendering
- Search and filter functionality
- Responsive card layout
Technical Highlights
- Async/await API calls
- DOM manipulation
- Event handling
- CSS Grid layout
Wikimedia Content Browser
Pulls real content from the Wikimedia API into an easy browsing experience. Built around clean structure, clear feedback, and organized data display.
Solo Project Planned the browsing experience, designed a simple content layout, connected the API, handled loading and error states, tested responsive behavior, then deployed and refined the presentation for clarity.
Key Features
- Wikimedia API integration
- Content parsing and display
- User feedback states
- 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 filters. Focused on smooth filtering, state changes, and a layout that stays clean as results update.
Solo Project Planned the gallery structure, designed the filtering interface, built the interaction logic, tested transitions and layout changes, then deployed the final experience and refined the interactions.
Key Features
- Category filtering
- Smooth state transitions
- Dynamic layout updates
- Interactive UI patterns
Technical Highlights
- JavaScript filtering logic
- CSS transitions
- State management
- Grid/Flexbox layout
Real Estate Property Listing
A responsive property listing site practicing clean layout, spacing, and mobile-first design with consistent typography across screen sizes.
Solo Project Started with a mobile-first layout, established the typography and spacing system, built responsive listing components, tested breakpoints across screen sizes, then deployed and refined the layout for consistency.
Key Features
- Mobile-first responsive design
- Clean layout and spacing
- Consistent typography
- Property card components
Technical Highlights
- CSS media queries
- Flexbox and Grid
- Semantic HTML
- Typography scale