This portfolio piece symbolizes my journey as a web developer. SUKHI222, also known as Project222, is a human rights campaign I became involved with in 2017.
Throughout my time as a volunteer web developer, I have rebuilt this website three times: twice in WordPress and once from scratch.
I connected with SUKHI222’s founder, Charles, through the organization that helps people with USA visa.
Charles had a vision he had been working on for years but lacked an online presence to showcase his achievements and attract potential donors to support his great work.
When I started working with Charles, I had limited web development experience, mostly from college using Dreamweaver and building a few websites on Wix. However, Charles believed in me and trusted me to design and develop the website, including the sitemap.
After a long conversation with Charles, which helped me understand his vision, I researched my options and decided to use the WordPress platform with the Elementor page builder.
After a year or two, I decided to build the website from scratch, writing the code myself, as I found WordPress limited in achieving certain features I wanted to integrate (though I can’t recall the specific features now).
Coding the website from scratch was a great opportunity to learn HTML, CSS, SASS, JavaScript, and PHP. However, I won’t discuss developing the website from scratch in this post but will share a link to an article where I do at the end of this post.
The website became so content-heavy that it became difficult to manage when uploading new material.
That’s when I decided to move it back to WordPress. With my newfound knowledge of CSS and JavaScript, I felt capable of achieving anything, even on WordPress.
In this blog post, I’ll walk you through the homepage, website art gallery, newsletter sign-up form, and project page.
And guess what? At the end of it all, I’ll hook you up with the URL link so you can check the website right in your browser.
Feel free to drop a comment, ask questions, or share suggestions. Enjoy the read!
Home Page
Upon landing on the website, users are greeted by a Google Map populated with blue pins representing the countries in which SUKHI222 operates.
Clicking on these pins reveals country flags and links directing visitors to dedicated country pages, offering insights into volunteer activities and recent events through volunteer names and photo galleries.
Subsequently, visitors encounter a post gallery spotlighting SUKHI222’s recent projects, complemented by a blog post titled “What It’s All About,” authored by Charles to articulate his vision and foster a deeper connection with the audience.
A pivotal feature follows: a 5-page slideshow delving into SUKHI222’s core vision, promoting the universal human rights of access to clean water, nutritional sustenance, and secure shelter.
This impactful narrative is reinforced by an elucidation of SUKHI222’s essence through five key questions: “WHO WE ARE,” “WHAT WE DO,” “WHY WE DO IT,” “HOW WE WORK,” and “WHERE WE WORK.”
The journey culminates with a dedicated “WORKS & SERVICES” section, providing comprehensive insights into SUKHI222’s endeavors and offerings.
Users are also encouraged to support the cause through a prominently displayed donate button powered by PayPal, facilitating seamless contributions to SUKHI222’s noble mission.
Website Art Gallery
The website features a total of three galleries, one of which is an art gallery showcasing some of the finest art pieces gifted to SUKHI222 by the artist Teddy Jackson. The art fades in random places on the page, adding a unique and captivating wow factor
Newsletter Sign-up Form
Following 30 seconds of browsing the website, a pop-up emerges, prompting visitors to subscribe to the newsletter. This functionality was seamlessly integrated using Elementor Pro’s pop-up feature, enhancing user engagement and facilitating subscription acquisition.
Project page
SUKHI222 advocates for three essential aspects: water, food, and shelter, yet, due to limited funding, the current focus remains on water and food initiatives.
In the website’s navigation, specifically under the “Projects” section, two additional buttons, “Water Projects” and “Food Projects,” provide access to related projects. Each project page comprehensively showcases pertinent details, including an image, title, concise description, a “Learn More” button, and a tag indicating the project’s country.
Selecting a project leads to a dedicated page with in-depth descriptions and accompanying photos.
As SUKHI222 expanded and content availability increased, efficient content management became imperative. This prompted a return to WordPress, streamlining the process of uploading and managing photos and text.
Portfolio Details
- Explore this portfolio piece in your web browser by following the links below.