My Work

This app, developed as a learning exercise, allows users to enter a name and play a timing-based game. Users click on "start challenge" buttons and try to stop the timer before a preset time limit is exceeded. Depending on their timing accuracy, they receive a score from 0 to 100.

Key features and technologies used:

• Hooks: Utilizes several React hooks, including useState for managing state, useRef and forwardRef for creating references to DOM elements, useImperativeHandle for exposing imperative methods to the parent component, and createPortal for rendering components outside the main DOM hierarchy.
• Custom Functions: Includes custom functions to handle the timing mechanics, providing a real-time and interactive experience for users.

As a learning project, this app provided valuable experience in advanced React concepts, such as managing refs and creating dynamic user interfaces, furthering skills in building interactive and responsive applications.

Collaborated with another developer to build a complete website using a custom Sage theme from Roots.io. Leveraged Sage ACF Gutenberg Blocks for dynamic block development, creating a flexible and user-friendly content management experience. Developed custom post types and taxonomies to organize and present content effectively.

This project emphasized modular design and scalability, ensuring the website is easily maintainable and extensible for future updates.

Notable blocks are the integrations filter, team block, pricing block, phones filter, and voice recording samples filter.

Designed and developed a comprehensive single-page site using Sage 10 and ACF Composer. Created several custom blocks to facilitate easy maintenance and updates, ensuring the site remains dynamic and adaptable to content changes.

The site was crafted with a focus on performance, aesthetics, and user experience, utilizing modern web development practices to deliver a polished and professional result. The modular block design not only enhances content management efficiency but also allows for future scalability and customization.

Developed the entire site using a custom WordPress theme, transforming XD mockups provided by the design team into a fully functional and responsive website. Created various custom post types, including those for machines, team members, FAQs, and more, to organize and present content effectively.

The site was designed with a focus on user-friendly backend management, enabling the client to easily update and manage content independently. This approach ensured that the site was not only visually aligned with the design team's vision but also flexible and maintainable for future updates.

This app, developed as a learning exercise, allows users to calculate investment growth based on inputs in four fields. The project provided a practical experience in managing state and utilizing utility functions for real-time calculations.

Key features and technologies used:

• State Management: The app uses React's useState hook to manage input values and update calculations dynamically.
• Utility Functions: Implements utility functions to perform calculations based on user inputs, providing immediate feedback on potential investment growth.

This project offered valuable insights into handling state and data flow within a React application, further enhancing skills in building interactive and responsive user interfaces.

Assisted in maintaining the website by updating styling to keep the design fresh and consistent with brand guidelines. Developed new custom blocks to support the content team, enabling them to easily manage and update various content sections.

These enhancements improved the site's overall user experience and functionality, ensuring that content could be presented in an engaging and organized manner.

Developed a custom WordPress plugin for a client with a large network of over 40 franchisee websites. The plugin was designed to provide a centralized interface for managing products across all franchisee sites from the main website. The key objective was to allow the content team to selectively enable or disable products for each franchisee site without manual updates.

Key features of the plugin included:

• Admin Interface: Created a user-friendly admin page where the content team could select products to be included and available for rent on franchisee sites.
• REST API Integration: Utilized REST API to pull product data from the main site, ensuring real-time updates and consistency across the network.
• Data Caching: Implemented transients for caching data to optimize performance and reduce load times.
• Dynamic Page Creation: Used rewrite rules to generate pages based on the product data pulled from the API, eliminating the need for creating individual posts on each franchisee site.
• Custom Block Development: Developed a new Gutenberg block that allows the content team to display selected products on the frontend. This block can showcase products by category, giving flexibility in presentation and placement across the website.

This solution streamlined the product management process for the client, reduced administrative overhead, and provided a consistent and efficient way to manage product availability across a large network of sites.

Developed the entire website using a custom Sage theme from Roots.io, specifically tailored for a multisite network. The project involved building custom blocks using Sage ACF Gutenberg Blocks, which facilitated easy content management and site maintenance. This approach ensured that each site within the network could be individually customized while maintaining a cohesive overall design and functionality.

The use of a multisite setup allowed for efficient management of multiple sites from a single WordPress installation, making it an ideal solution for handling a network of related sites with shared resources and features.

Collaborated with another developer to build the website, using a custom theme developed with the Sage framework from Roots.io. Leveraged ACF Composer to create custom blocks, ensuring the site was easy to maintain and update. Developed several key blocks that played a crucial role in completing the project, providing a flexible and efficient way to manage content. The custom blocks were designed to streamline site management, allowing for straightforward updates and modifications by the content team.

This approach ensured a robust, scalable, and maintainable site architecture.

This recipe app, built with Next.js using the app routing feature, allows users to view existing recipes and contribute their own. Developed as a learning exercise, the project provided an opportunity to explore and implement various modern web development techniques and tools.

Key features and technologies used:

• Hooks: Utilizes various hooks such as useState and useEffect for state management and side effects, useFormState for managing form inputs, and notFound for handling 404 errors gracefully.
• Next.js Components: Integrates Next.js components like Image for optimized image loading, Link for client-side navigation, and Suspense for managing asynchronous loading of components.
• Client-Side Management: Implements the 'use client' directive to specify client-side rendering for specific components, allowing for effective state management and interactivity.

As a learning project, this app provided valuable hands-on experience with Next.js, React hooks, and modern web development practices, enhancing understanding and skills in building dynamic, interactive web applications.

Focused on optimizing the site's loading speed by eliminating unnecessary code and deactivating obsolete plugins, resulting in a more efficient and faster user experience. Additionally, I developed a new pricing page, utilizing custom blocks to present the information clearly and engagingly.

The new page design not only improved the visual appeal but also enhanced the site's overall performance and usability, making it easier for users to access and understand pricing information.

Collaborated with another developer to finalize the website by adding styling and components to a custom theme. My contributions included refining the visual design to ensure consistency and enhancing the overall user experience. I implemented various components, aligning them with the site's design and functional requirements, and ensuring a cohesive and polished final product.

This collaboration helped to bring the project to completion, delivering a visually appealing and fully functional website.

Collaborated with another developer to complete the project by adding several custom blocks and components. My contributions included developing key features that enhanced the site's functionality and user experience. These blocks and components were designed to be easily maintainable and adaptable, providing flexibility for future content updates.

This work played a crucial role in finalizing the website, ensuring that all required elements were in place and aligned with the project's overall goals.

This Tic Tac Toe app, developed as a learning exercise, allows users to engage in the classic game. The app manages player interactions and game state, providing a smooth and engaging user experience.

Key features and technologies used:

• State Management: Utilizes React's useState hook to manage player clicks, track moves, and display them beneath the game board.
• Custom Player Names: Allows users to enter custom names, which are dynamically managed based on the state of the input fields.

As a learning project, this app provided practical experience in handling game logic, state management, and dynamic user input, enhancing skills in building interactive and responsive web applications.

Developed a custom WordPress plugin to facilitate the addition of aptamer sequences to each aptamer post type. This task required integrating custom admin JavaScript and CSS to enhance the admin interface. To manage the sequences, I created a set of Advanced Custom Fields (ACF), including:

• Sequence Input Field: Designed to accept sequences based on predefined allowed keys, ensuring data consistency and validation.
• Repeater Field: Implemented a repeater field that dynamically generates inputs from the sequence field. This feature allows the content team to preview how the sequence will appear on the frontend, providing a clear visual representation during data entry.
• Sequence Options Field: A group of checkboxes bound to the output of the input values. The selection in these checkboxes determines which sequence variant is rendered on the frontend when the corresponding key is typed.

Upon saving the aptamer post, the plugin processes and displays the correct sequence on the frontend, based on the options selected in the Sequence Options field. This solution not only streamlined the process of managing complex sequence data but also ensured accurate and consistent presentation on the website.