Portfolio

My goal was to create a more user-friendly experience on my website while showcasing a practical example of what I’ve learned in prompt engineering and AI chatbot development. Additionally, this bot collects user feedback, which I can use to further improve its performance over time.

I built this chatbot using a low-code plugin solution rather than developing it entirely from scratch. However, I was responsible for all prompt engineering, UI design, integration, and testing to ensure smooth operation on my website.

• Chatbase.co

• OpenAI GPT-4 API

• WordPress

• Custom JavaScript embeds

• CSS styling

Planning

• Defined the chatbot’s purpose, target users, and scope

• Identified key questions it should be able to answer

Prompt Engineering

• Trained the bot using multiple information sources

• Developed system instructions and example prompts

• Tested variations to optimize response quality

Development

• Integrated the API with a frontend chat interface via Chatbase

• Configured display and styling using WordPress, HTML, and CSS

Testing and Refinement

• Collected test queries from different users to evaluate performance across a range of question types

• Iteratively adjusted prompts to ensure answers were clear and accurate

One challenge was ensuring the bot stayed on topic and did not generate inaccurate or irrelevant responses when faced with indirect questions like “Contact?”

This was resolved by providing more specific and detailed instructions to guide the agent’s behavior in such cases.

With Sammy’s Transportation’s website the goal was to create a site that worked not only as an advertisement for their services but also as a page that clients could use to book their rides directly. The booking form also sends confirmation emails to the drivers and customers as soon as the rides are confirmed in the business’s calendar.

I worked closely with the multiple members of the company to decide on multiple aspects and needs of the website. After determining the needs for the website we discussed the build and hosting options for the website as the options were practically endless. Multiple mockups of the website and logo were made and discussed with the company before we went ahead with the build and hosting. In the end we decided on building the website and booking form in wordpress with options and plans to upgrade the website to a different format later on. I then helped the client take the finished website and host it under their domain along with helping with the upkeep of the website as needed

• HTML
• CSS
• Javascript
• PHP
• WordPress
• Figma

• Planning
• Discussion of wants and needs for website with client
• Notes of ideas for designs
• Discussion of programming and hosting options
• Design
• User flow built in FigJam 
• Low Fidelity wireframe of the website built in Figma
• High Fidelity mockup of the website with placeholder photos and text created in Figma
• Development
• Translating the design mockups to native HTML, CSS and Javascript as well as using the built in plugins in WordPress
• Program the specifics of the booking plugin to fit the needs of the client such as timeslots, pricing, extras, pickup and drop off address, as well as an option to add a flight number
• Testing and Refinement
• Launched website and allowed some closed cases to book to confirm functionality of booking form
• Continuously taking in user feedback on updates to the booking form as well as the general website

A key challenge in this project was balancing the limitations of the booking plugin with the client’s requirements for flexible booking and pricing options. This challenge was addressed by clarifying the precise requirements for the plugin and enhancing the backend programming and input options to better support the needed flexibility.

This website was built to be a home for my portfolio projects as well as an active advertisment for myself and my skills.

I personally maintain and update this website on an ongoing basis to ensure it remains the most accurate and up-to-date reflection of my skills across multiple technologies, programming languages, and disciplines. Additionally, I have taken the initiative to host the site in a cost-effective manner while implementing reasonable backend security measures to keep it stable and protected.

• HTML
• CSS styling
• Javascript embeds
• PHP
• WordPress
• Figma
• chatbase.co
• Digital Ocean Hosting

• Planning
  • Outline of basic needs for site
  • Decision of hosting and build options
  • Rough paper drafts of looks, want, and needs
• Design
  • User flow built in FigJam 
  • Low Fidelity wireframe of the website built in Figma
  • High Fidelity mockup of the website with placeholder photos and text created in Figma
• Development
  • Translating the design mockups to native HTML, CSS and Javascript as well as using the built in plugins in WordPress
  • Program the specifics of the Chatbot to integrate seemlessly with the website via training, prompting and styling
• Testing and Refinement
  • Launched website and asked aggressive case testing done by myself and a few select individuals to confirm no active bugs or typos
  • Updates done whenever new skills are aquired or projects are launched
  • Continuously taking in user feedback on updates to the information chat bot as well as the general website

A key challenge in this project was maintaining a design that is both simple and visually engaging while presenting detailed, up-to-date information without overwhelming the user or comprimising usability. I believe I have achieved a strong balance, showcasing my projects in a way that is both sleek and informative.