We collaborated as a team of two developers to create a website for a Senior VFX Compositor, who as a visual artist had a clear vision of the looks and interactive elements for his website. To bring his ideas to life, we began by designing the website mockup using Figma. This approach allowed us to incorporate his recommendations and concepts, ensuring a comprehensive understanding of our project goals.

For the website's front page, we proposed the use of a JavaScript (JS) slider that showcased four of his most significant works, alongside his showreel. Additionally, we included a secondary slider at the bottom, featuring a selection of movie cards. One of my contributions to the project was developing the front-page slider functionality. In the HTML, I defined the structure and individual sections, while employing JS to provide interactive navigation, enabling users to seamlessly explore different project sections using left and right arrows and indicator dots. This interactive slider also presented various movies, with their titles, associated studios, and background images, creating an engaging platform to showcase his portfolio.

I was also responsible for creating individual show pages for each portfolio card using HTML and CSS. These pages established connections between other movies and TV shows, using the next and previous buttons, allowing users to explore related content and providing links to their respective IMDB pages. Additionally, I integrated Vimeo embedded code into the front page HTML while maintaining essential password security features.Furthermore, I designed the 'About Me' section using JS code, incorporating tabs for skills, experience, and education. This approach streamlined the user experience, presenting comprehensive information in a concise and accessible way

Throughout this project, I gained valuable experience collaborating with another developer using Git and Github. We worked on different branches and provided constructive feedback to make our work better. I also utilised browser developer tools for debugging and optimization, ensuring an error-free user experience. Lastly, I successfully learned how to host a static website on GitHub pages. This involved acquiring a domain name for the artist, establishing the necessary connection with Github, and obtaining an SSL certificate to ensure the website's security.

As part of a collaborative effort by a team of four, we created 'My Event Radar,' a web application designed to streamline the process of discovering local events in London that align with user interests. To achieve this, we implemented a variety of features aimed at simplifying the event discovery process. One of our key priorities was to ensure that users didn't feel overwhelmed when searching for events. To address this concern, we developed a user-friendly search feature using the PG Search Ruby Gem. This feature allows users to filter events based on specific categories, names, and dates

My contribution to the project included building an events carousel, using Bootstrap for the carousel and card components, and using Ruby for the card logic. The carousel was designed to display three events at a time, enabling users to effortlessly explore multiple options without feeling overwhelmed. Each card also includes a link to access detailed event information. Additionally, I created a chat feature for each event. This chat functionality was implemented using Action Cable, a WebSocket technology, along with the Stimulus JS framework and the Ruby on Rails MVC pattern. Integrating these diverse frameworks and patterns while ensuring optimal performance and usability was challenging yet very rewarding. The end result was a real-time communication platform that facilitated interaction among attendees of specific events.

As a full-stack developer on this project, I collaborated with my team members to build the app's architecture, design the user interface, and support various features, including integrating mapping functionality using APIs such as MapBox. I also supported in deploying the application using the Heroku cloud service. This project provided valuable learning experiences, and you can explore the results by following the link below."

This is the first iteration of my website, it is built to showcase my background, skills and projects I have worked on as a full-stack developer. I was both the designer and developer of the project, being responsible for creating the entire website, including its layout, design and functionality using Figma, HTML, CSS and Javascript.The website features a responsive navigation menu that allows users to easily navigate between sections like Home, About me, Portfolio and contact. The about me section features tabbed content that allows users to switch between sections for skills, experience and education, this provides a structured way of presenting my qualifications and it was built using vanilla JavaScript.

One of my achievements was the integration of a contact form that sends messages to my email address using the Google Apps script which makes it easier for visitors to easily get in contact with me. In addition I integrated an embedded Google Maps tool to provide a visual representation of my location.

Moreover, I’ve developed a portfolio section with JavaScript which allows visitors to see a more detailed description of each project using a pop-up window that displays detailed project information, including title, description, technologies used and a link to the online project.The visitors can close the pop-up by clicking the close button or clicking outside of the pop-up.

Creating this website has been a valuable learning experience that allows me to show my developer journey. Expect ongoing improvements and exciting updates in the future.

In a team of four, we developed Music Box, a web application that allows users to easily find and book musical instruments. You can perform part of the CRUD (Create and Read) actions, and we are working on creating a dashboard for the instrument renters. Once you select an instrument that you want to book, you are also able to leave a review for it.

We built the app using:

- Ruby on Rails for the backend, with HTML, CSS, and Bootstrap for the frontend.

- PG Search for creating a search bar that allows you to search by categories or specific words such as 'Piano' or 'guitar.'

- Devise for user authentication

- PostgreSQL for database management

- Simple Form for booking or leaving a review for an instrument

- Cloudinary for image cloud storage, and Heroku for web hosting

My contribution to the project consisted of hosting our web application using Heroku, integrating our GitHub with Heroku deployment, as well as solving and analyzing problems when presented in the production environment. I also used the PG Search Gem to create the search bar logic in Ruby, allowing users to find instruments by keywords. Additionally, I used Bootstrap for the design of the cards while implementing the card logic in Ruby. Each card also includes a link to access detailed instrument information.

As a full-stack developer on this project, I collaborated with my team members to build the app's architecture, design the user interface, and support various features. We are still continually improving some of the app's features, and you will be able to see more changes in the future.

Coming soon..

Developing a Ruby on Rails expense tracker app, SpendWise, using Turbo Frames and Stimulus for dynamic functionality; created a Docker image and container, and I am currently deploying the app to Heroku