Built and maintained multiple key pages for the Parkson Credit corporate website, including sections like Customer Service, Corporate & Consumer Enquiries, Corporate Address, Governance, CSR, and Career. The project was developed using Next.js for performance and routing, Tailwind CSS for styling, and shadcn/ui for base UI components.

I emphasized reusability by creating shared components and utility functions to populate pages like Sustainability & CSR and Compliance & Corporate Governance. These components dynamically render content using the map() method in JavaScript, making it simple for non-technical users to add or manage content through Directus CMS.

The corporate address page includes a dynamic location integration powered by the Google Maps API. The coordinates are embedded into an <iframe> for visual map rendering.

The navigation menu includes contextual behavior logic—certain pages display dropdowns conditionally based on the current route (e.g. /corporate, /consumer, /career). The entire navigation structure is driven by state and routing checks, providing users with a relevant and streamlined navigation experience.

For form handling across multiple pages, I implemented React Hook Form with Zod for schema validation. These forms support file attachments, which are uploaded to an AWS S3 bucket. Upon successful submission, a confirmation email—complete with the uploaded attachments—is sent via Nodemailer.

I also implemented a dual-language toggle (English ↔ Malay), where the selected language is stored in cookies via a toggle UI component. This language preference persists across navigation, ensuring the correct language content is loaded on every route change.

Directus CMS plays a central role in this project by housing all site content. Every piece of text or data is editable by the client, eliminating the need for developer intervention for future content changes. This integration significantly streamlined the content update process for the client’s internal team.