Yaron Jing

Full Stack Developer & UI Designer

Computer Engineering BASc 1A

University of Waterloo

My Skills

JavaScriptHTMLCSSC++JavaTypeScriptJavaScriptHTMLCSSC++JavaTypeScriptJavaScriptHTMLCSSC++JavaTypeScriptJavaScriptHTMLCSSC++JavaTypeScript

ReactReduxNextJSNode.jsMochaChaiMongoDBReactReduxNextJSNode.jsMochaChaiMongoDBReactReduxNextJSNode.jsMochaChaiMongoDBReactReduxNextJSNode.jsMochaChaiMongoDB

AzureGitDockerBashGoogle CloudPostmanVercelIntelliJEclipseVSCodeCursorRESTful APIOAuthDNSCloudflareAzureGitDockerBashGoogle CloudPostmanVercelIntelliJEclipseVSCodeCursorRESTful APIOAuthDNSCloudflare

Google DocsMS OfficeJiraConfluenceFigmaPhotoshopLightroomPremiere ProBlenderAdobe ExpressCanvaGoogle DocsMS OfficeJiraConfluenceFigmaPhotoshopLightroomPremiere ProBlenderAdobe ExpressCanvaGoogle DocsMS OfficeJiraConfluenceFigmaPhotoshopLightroomPremiere ProBlenderAdobe ExpressCanvaGoogle DocsMS OfficeJiraConfluenceFigmaPhotoshopLightroomPremiere ProBlenderAdobe ExpressCanva

My Projects

illico - FullStack Chatbot

linkCode Repo

TypeScript React icon

React

Node.js

Next.js

MongoDB

Vercel

I developed a full-stack AI chatbot application using Next.js, where I strengthened my skills in user authentication, secure API integration, and modern UI/UX design.

User Management & Authentication: Implemented user registration, login, and cloud-synced chat history using Next.js and MongoDB, while securing API endpoints against unauthorized access.
Polished UI/UX: Designed a responsive user interface optimized for mobile devices, incorporating Google's Material Design color system and seamless dark mode support.
Continuous Deployment & Monitoring: Set up continuous deployment via GitHub and Vercel, enabling efficient version control and release cycles. Integrated performance and error monitoring to ensure reliability.

Click on the card to explore

photo_libraryView More

AI Powered Browser Extension

linkCode Repo linkFigma Design

Figma

Tailwind CSS TypeScript icon

TypeScript React icon

React

Redux

Vite

I designed and developed a browser extension using Figma and TypeScript that extracts key job information from WaterlooWorks using a large language model (LLM). In which I enhanced my proficiency with tools like Figma and strengthened my ability to design responsive, consistent, and user-friendly interfaces.

Intuitive Design: Created a responsive, elegant, and efficient user interface in Figma that aligns seamlessly with the original website's design, minimizing the learning curve for users.
Centralized State Management: Employed Redux to manage application state efficiently and consistently across components.
Performance Optimization: Leveraged IndexedDB to cache summarized job data and used React's rendering optimizations to reduce unnecessary API calls and re-renders.
LLM Best Practices: Improved output stability and quality by utilizing structured output formats, fine-tuned prompts, and tested parameter settings for the LLM.

Click on the card to explore

GIF Generator Web App

linkWeb Page

Azure

Tailwind CSS TypeScript icon

TypeScript React icon

ReactCursorCline

With the help of AI-powered tools, I developed a feature-rich and visually appealing animated image generator web app within just 8 hours. This project sharpened my ability to rapidly learn and prototype under time constraints.

Rapid Prototyping: Built a fully functional animated image generator in a short time using AI-integrated development tools.
Automated CI/CD: Set up continuous integration and deployment to Azure using GitHub Actions, significantly reducing maintenance overhead.
SEO Optimization: Improved search engine visibility by configuring Google Search Console and Bing Webmaster Tools for effective SEO.

Click on the card to explore

Calendar GPT

linkGPT Store

OAuth

Google Cloud JSON icon

JSONRest API

I developed a ChatGPT-based assistant that enables natural conversation-based Google Calendar management, enhancing my understanding of OAuth authentication, LLM programming, and API integration.

Google OAuth Integration: Implemented secure Google OAuth authentication, allowing users to safely connect their Google Calendar accounts, deepening my experience with third-party authentication protocols.
LLM Function Calling: Designed a comprehensive system prompt with structured function calling schemas, improving my skills in prompt engineering and LLM behavior control. The prompts effectively helps LLMs translate natural language into precise calendar operations.
Image-to-Calendar Processing: Leveraged ChatGPT's vision capabilities to extract calendar events from images, enabling users to quickly add events by simply sharing a photo, advancing my knowledge in multimodal AI applications.
Public Deployment: Published the GPT on OpenAI's GPT Store, gaining practical experience in deploying AI applications for public use and following platform guidelines.

Click on the card to explore

play_circle

LLM Web App Deployment

Linux

Docker

Bash

DigitalOcean SSH icon

SSH

Cloudflare

I deployed and configured an open-source AI chat interface (LiberChat) on a Linux server, strengthening my skills in full-stack deployment, DevOps practices, and system administration.

Server Setup and Configuration: Implemented containerized deployment using Docker on Ubuntu Linux, utilizing SSH and Bash commands for secure remote server management and administration.
Version Control and Collaboration: Managed project updates and configurations through Git and GitHub, practicing industry-standard version control workflows and documentation.
Security and Domain Management: Configured end-to-end HTTPS security using Let's Encrypt CA certificates and established global accessibility through Cloudflare DNS, developing my expertise in domain management and web security protocols.
LLM Performance Optimization: Fine-tuned language model parameters including Top-p sampling and Presence Penalty to achieve optimal response quality, enhancing my understanding of LLM behavior and performance optimization.

Click on the card to explore

3D Modeling

Blender

I self-taught Blender to create a photorealistic 3D donut animation, developing skills in 3D modeling, texturing, lighting, and animation rendering.

3D Modeling and Sculpting: Mastered fundamental Blender tools including extrude, bevel, and loop cuts for base modeling, along with sculpting brushes for organic details, enhancing my understanding of 3D object manipulation.
Material and Texture Creation: Developed custom textures using node-based materials and UV mapping, creating realistic surface properties for the donut's glaze, sprinkles, and dough, strengthening my skills in digital material design.
Modifier Implementation: Applied key Blender modifiers such as Subdivision Surface and Array for mesh refinement and detail enhancement, learning non-destructive modeling workflows.
Lighting and Ray-Tracing: Set up lighting system and configured ray-traced rendering, gaining experience in creating photorealistic lighting and shadows using Cycles render engine.
Animation and Video Production: Designed camera movement paths, configured keyframes, and rendered an image sequence, which I compiled into a final animation, developing skills in virtual cinematography and video production.

Click on the card to explore

play_circle

photo_libraryView More

Photography

Lightroom

Photoshop

As a photography enthusiast, I've developed advanced skills in professional image editing software, enhancing my eye for detail and technical proficiency in digital art manipulation.

Advanced Photoshop Techniques:
- Mastered portrait retouching using advanced selection methods based on color channels and luminosity
- Implemented complex masking techniques for precise image manipulation
- Utilized specialized tools including Liquify and Vanishing Point for creative effects
- Applied non-destructive editing workflows for maximum flexibility and quality
Intermediate Color Grading:
Developed advanced proficiency in Lightroom for sophisticated color grading and tonal adjustments, including:
- Precise exposure and dynamic range control
- Advanced color harmony and mood creation
- Selective adjustments through masking and tone curves for precise local enhancements
- Custom preset development for consistent styling

Click on the card to explore

photo_libraryView More