Web Development

Showcasing my projects in frontend and backend development.

A laptop displaying a webpage with the text 'I design and develop experiences that make people's lives simple.' is placed on a wooden table. It is set in an outdoor seating area with white furniture and greenery in the background. The setting appears to be calm and conducive to work or relaxation.

A laptop displaying a webpage with the text 'I design and develop experiences that make people's lives simple.' is placed on a wooden table. It is set in an outdoor seating area with white furniture and greenery in the background. The setting appears to be calm and conducive to work or relaxation.

Teaching Excellence

As a lecturer, I inspire students in computer science and technology.

A person wearing a smartwatch types on a laptop with a website about web development displayed on the screen. The background includes a bookshelf with some books and a decorative horse sculpture.

A person wearing a smartwatch types on a laptop with a website about web development displayed on the screen. The background includes a bookshelf with some books and a decorative horse sculpture.

Faith Driven

My work reflects my commitment to faith, education, and community service.

Web Development

Showcasing projects in frontend and backend development by Gabriel Op.

A close-up of a computer screen displays lines of HTML and CSS code. The code includes elements such as a navigation bar, container, and various task items with unique IDs. The screen also shows a styles section with properties like margin and padding.

A close-up of a computer screen displays lines of HTML and CSS code. The code includes elements such as a navigation bar, container, and various task items with unique IDs. The screen also shows a styles section with properties like margin and padding.

A computer screen displays a code editor with various files in a directory. The code being edited is written in JavaScript, identifiable by the .js file extension. There are highlighted lines in different colors to distinguish syntax elements. The left pane lists files such as 'assets', '.env', and 'index.js'. A web browser is visible at the top of the screen with multiple open tabs.

A computer screen displays a code editor with various files in a directory. The code being edited is written in JavaScript, identifiable by the .js file extension. There are highlighted lines in different colors to distinguish syntax elements. The left pane lists files such as 'assets', '.env', and 'index.js'. A web browser is visible at the top of the screen with multiple open tabs.

A computer screen displaying a text editor with several files open. Code is written in TypeScript or JavaScript, showing imports and configurations for a web application. The directory structure is visible on the left sidebar, highlighting different folders and files related to the project.

A computer screen displaying a text editor with several files open. Code is written in TypeScript or JavaScript, showing imports and configurations for a web application. The directory structure is visible on the left sidebar, highlighting different folders and files related to the project.

A laptop displays a coding interface with lines of HTML and CSS. The screen shows a dark-themed code editor, possibly for web development, with various tags and attributes visible. The ambient lighting suggests a focused work environment.

A laptop displays a coding interface with lines of HTML and CSS. The screen shows a dark-themed code editor, possibly for web development, with various tags and attributes visible. The ambient lighting suggests a focused work environment.

A close-up of a computer screen displaying HTML code in a text editor. The code includes elements such as sections, headers, and paragraphs, with various class attributes for styling. The interface shows file tabs at the top, suggesting it's part of a larger project.

A close-up of a computer screen displaying HTML code in a text editor. The code includes elements such as sections, headers, and paragraphs, with various class attributes for styling. The interface shows file tabs at the top, suggesting it's part of a larger project.

A web browser window displays a landing page for Webflow, featuring a tagline about building web content visually without coding. The background transitions from blue to pink, with various web design interfaces and tools depicted. Logos for partner companies are aligned at the bottom.

A web browser window displays a landing page for Webflow, featuring a tagline about building web content visually without coding. The background transitions from blue to pink, with various web design interfaces and tools depicted. Logos for partner companies are aligned at the bottom.