My Projects

I started my career as a web developer at MNLeistung Inc., where I was responsible for developing and maintaining the company's and clients' websites. As a fresh graduate, I was familiar with basic technologies like HTML, CSS, JavaScript, PHP, MySQL, Bootstrap, and cPanel hosting on free providers. Within a few weeks, I began learning Laravel so I could assist with the hospital system development when I didn't have tasks related to the websites I handled.

A few months into my role, while maintaining our company website, I proposed migrating the site to Laravel. This migration would allow me to deepen my understanding of Laravel's folder structure, clean up the existing spaghetti code, and implement a proper folder structure and code splitting to make the codebase more readable and maintainable. Additionally, an upcoming website refresh aligned perfectly with my suggestions, making it the ideal time to implement these improvements.

Before

After

Issue Solved: I resolved the issue of slow and occasionally infinite loading of the preloader during the initial load by removing unnecessary animations. This optimization significantly enhanced the website's performance, providing a smoother and faster user experience from the moment users visit the site.

Technology used:

HTML

CSS

JavaScript

Bootstrap

Cpanel

I successfully migrated and deployed our company website to Laravel, adding new features like dynamic job postings. During this process, I learned how to integrate third-party APIs and use Git for version control with GitLab.

Technology used:

Laravel

jQuery

Sass

Bootstrap

Cpanel

GitLab

Thanks to my friendly nature, I built a strong connection with the mobile team. Their team lead eventually invited me to join and assist with their front-end tasks. This was when I was introduced to React.js. In just two weeks, I learned the basics of React Router, Ionic Framework with Capacitor, and how styling works in React.

A few months later, I was assigned to redesign the company website to make it unique and appealing to potential developer applicants. As the only developer on the project, I worked closely with a Graphic Designer to bring the design to life. I used React.js with Vite to ensure a modern and efficient development process.

When Next.js 13.4 was released, I was eager to explore its new features like the App Router, Image component, and built-in support for SSG, SSR, and SEO. Since my current project was built with React, I decided to migrate it to Next.js. However, without a Node server, I couldn't fully utilize Next.js's capabilities. I found a workaround by building the project statically using the next export command and successfully deployed it on shared hosting.

During this project, I learned to use Tailwind CSS, which was easy to grasp thanks to my strong background in vanilla CSS. I also addressed browser compatibility issues with transparent animated videos, explored Framer Motion for animations, and improved my front-end skills, focusing on responsive design and best practices like contrast and spacing.

Technology used:

Next Js

TypeScript

Tailwind CSS

Framer Motion

Radix UI

GitLab

I was tasked with creating a German version of our company website, featuring instant content translation. While I initially planned to use Internationalization (i18n), the lack of a Node server required me to implement a custom solution using React's useContext. To ensure accurate translations, I attended German lessons and worked closely with a German instructor.

Throughout this project, I learned to introduce myself in German, count, and understand cultural nuances. I also gained knowledge in GDPR compliance and best practices by collaborating with the content creator on the privacy policy. Additionally, I learned about managing cookies and local storage.

Technology used:

Next Js

TypeScript

Tailwind CSS

GitLab

My boss aimed to provide a free website service for clients using our hospital system and affordable website solutions for small German businesses. To achieve this, I spent several weeks researching and testing various page builders. The challenge was to create websites within 1-3 days, as my boss mentioned that in Germany, websites can be built in just a few hours, setting a high standard of completing them within one day.

Through this project, I explored various website builders and their limitations, such as which ones are self-hosted and cannot be exported. I gained experience with platforms like Wix, Nicepage, WordPress, and other drag-and-drop builders. Ultimately, we decided to focus on the Philippine market.

With no ongoing projects at the time, I chose to help the mobile team develop a Patient's Portal app. This opportunity allowed me to stay engaged, sharpen my skills, and contribute to an important aspect of our company's offerings.

Technology used:

React Js

Ionic

TypeScript

Sass

Capacitor

GitLab

A new project came in with the challenge of delivering four websites within a month. The project was complicated by a lack of planning, an inexperienced designer, and a client who requested unlimited revisions despite the absence of a formal contract. Despite these hurdles, I remained committed to meeting the deadline. I continued working even after working hours, driven by my passion for web development. While my colleagues were playing games at night, I focused on completing the designs provided by the Graphic Designer. The hard work was challenging but fulfilling, as it felt like pursuing a hobby I truly enjoy.

Technology used:

HTML

CSS

JavaScript

Php

Wordpress

Elementor

During the project, we faced an additional challenge when one of the four websites needed to be redone due to the client's dissatisfaction with the previously approved design. Amidst this, a significant new project emerged: a government housing initiative. I was assigned to this project because three of the websites I managed needed to integrate an application form submission for beneficiaries.

I worked closely with the C# team to develop the API needed for integrating the application form with the websites I managed. This ensured smooth functionality and allowed me to contribute to a high-impact project while juggling multiple tasks. Despite the added responsibility, it was a valuable experience.

Technology used:

HTML

CSS

JavaScript

Php

Wordpress

Elementor

After completing all my ongoing projects, my final task was to implement all sales and marketing suggestions into the websites. This involved adding Google Ads, conversion tracking, booking systems, and call-to-action (CTA) elements, as well as ensuring form submissions were routed to the company's CRM via API. I also created dedicated pages for each of the company's SaaS products, highlighting their unique features, optimizing them for SEO, and making them searchable on Google. Finally, I compiled detailed documentation for all the websites I managed, outlining the work completed and the integrations implemented.

Throughout this journey, I learned a great deal and am very grateful for my time with the company. I had the opportunity to work with many talented and amazing people, which made the experience even more rewarding.

Technology used:

Next Js

TypeScript

Tailwind CSS

Framer Motion

Radix UI

GitLab