David Alsabrook

Users can upload images of their home to train a custom AI model based on their unique property. With text prompts, they can then explore design possibilities—changing colors, materials, structures, and even the landscaping—creating a personalized vision for their home.

After securely logging in, users gain access to a dashboard where they have complete control over their model options. They can select which model to run, enter text prompts to adjust the image, set "negative" prompts to specify elements to avoid, and control how closely the model adheres to the original images it was trained on.

Once a model is chosen and a prompt is provided, the system generates four images based on the user's input. These images are sent to our database, and the dashboard is automatically updated with the results once they’re processed and returned by the model.

The client’s only design input was a business card with a black background and decorative scrollwork beneath the logo, which he wanted the website to reflect. I used this as a foundation, building the site’s look and feel around that card, starting with the hero section and expanding from there.

Keeping the design straightforward was essential for delivering the info users would need—without any fluff. The focus was on showcasing what the client offers in a clean, minimal way, aligning with the goal of a no-nonsense, bare-bones site.

Giving the user the option to directly reach out to the owner via this form was important to keep a direct to client line open. I was able to have this form send its data directly to the owner via SMS.

Since most users searching for this business will be on mobile, responsiveness was key. It was important to keep the client’s clean look consistent across devices, ensuring an intuitive and seamless experience for every visitor.

For a business that's thrived on word of mouth for the last 30 years, I wanted to give the client a way to showcase those trusted customer experiences.

Getting the right image for the hero section was essential for capturing users' interest. It was also important to include what 90% of people are looking for right away. The client wanted users to be able to immediately call or place an order.

Demonstrating the considerable amount of effort and dedication that they invest into every single aspect of their restaurant was a crucial and pivotal element of the project.

Given that this restaurant currently operates two locations, it was important for the client to emphasize the various methods available for contacting each location, making this a key focus of the project.

It was important to me to present their product in an engaging and playful manner that truly makes it stand out and pop off the page. Utilizing the widely popular "masonry" layout effectively contributes to achieving that vibrant and dynamic feeling.

The client had an image that perfectly captures their fun attitude and emphasizes that the business is locally owned by an individual, not a national corporation. I enjoyed taking their image, editing it, and incorporating it at the bottom of every page to maintain a cohesive look.

The steep learning curve of this project centered around using libraries like Three.js and Tone.js to build the 3D environment and make the objects functional. While load times can sometimes feel like waiting for dial-up, I’m thrilled with how the site turned out. The unique challenges pushed us to think creatively.

The biggest challenge with this site, aside from getting a 3D scene to render in the browser, mastering Blender in just three days, and figuring out how to use a raycaster for interaction, was definitely loading times. We initially faced load times of around five minutes, but through extensive compression and utilizing tools like Draco Loader, we’ve managed to bring those times down to about 45 seconds, depending on internet speeds. It was a major focus of the project!

For the small amount of actual HTML and CSS we implemented for this project, I designed and built a dropdown menu that allows users to interact with the environment. They can add elements like snow and rain, switch between day and night, and load pre-made music for the synth. To enhance the user experience, we also managed to remember user settings using cookies and local storage..

Creating a CLI was an incredible learning experience that gave me a deep understanding of low-level processes, which has benefited every project I've worked on. Parsing command-line inputs, managing memory allocation, and navigating the path variable to provide users with command-line access for opening, editing, and manipulating files at a system level gave me strong fundamentals for handling core processes.

I also recreated a version of the classic printf function to run within the shell, enabling formatted output directly to the command line. This process gave me a deep understanding of how printf handles format specifiers (like %d, %s, %f), parsing them to determine variable types and formatting requirements before outputting. Implementing this taught me how functions manage variable arguments and memory allocation, reinforcing the importance of precision when working at the system level.

Writing this project was a true test of my skills and challenged my ability to follow complex logic paths. I developed the entire program in the vi editor within a terminal environment, working without modern IDE conveniences. This setup pushed me to focus closely on syntax, efficient navigation, and clear logic, all of which were crucial in bringing the project together successfully.

My main goal with this site was to replicate the default VSCode design with pinpoint precision. I matched all hex codes for colors, added icons to mimic the “files” layout, and created a working tab system that’s fully integrated with the “file explorer” on the side.

Connecting the “file explorer” on the side with the tabs at the top of the page was an ideal way to dive into React's component-based structure. React’s routing made this process seamless, letting me link the two components effectively through the router, showcasing the power of organized, component-driven coding.

I added a fun little Easter egg, letting users “close” my portfolio page to reveal the classic Windows XP desktop. It was a lighthearted detail that adds some personality and gives a nostalgic nod to the old-school tech days.

This project started as part of a much larger site that, honestly, grew beyond what I wanted my portfolio to be. I realized I didn’t want users navigating through multiple tabs just to get to the main information, so I pivoted to this streamlined, easy-to-navigate page you’re currently on!