Experience
6+ Years
Completed
20+ Projects
Skills
10+
John Afolabi's Portfolio Website
Hi, I'm John
Web Developer
Thank you for taking time out to check my portfolio website. I specialize in building simple to complex web applications, leading front-end teams, digital product design and developing visually attractive UI/UX…
Hi, I'm John
Web Developer
Thank you for taking time out to check my portfolio website. I specialize in building simple to complex web applications, leading front-end teams, digital product design and developing visually attractive UI/UX…
About Me
I am a Front End Web Developer with over 7 years of experience in creating and executing web applications to enhance business performance. As an expert in creating online stores, I have successfully built and optimized numerous e-commerce platforms. My expertise also extends to SEO, digital marketing, and paid media, which enables me to drive traffic and engagement effectively. I enjoy creating user experiences and designing digital products, blending technical skills with a keen eye for design to deliver impactful solutions.
Experience
6+ Years
Completed
20+
Skills
10+
I am a Front End Web Developer with over 7 years of experience in creating and executing web applications to enhance business performance. As an expert in creating online stores, I have successfully built and optimized numerous e-commerce platforms. My expertise also extends to SEO, digital marketing, and paid media, which enables me to drive traffic and engagement effectively. I enjoy creating user experiences and designing digital products, blending technical skills with a keen eye for design to deliver impactful solutions.
Skills
Frontend Developer
- HTML
- CSS
- Javascript
- React
- Git
- Bootstrap
Backend Developer
- PHP
- Python
- Java
- C++
- SQL
- DJango
Services
Web
Developer
UI/UX
Designer
Brand
Designer
Digital
Marketer
Qualifications
Web Developer
Justbuy
2022 – till date
UI/UX Developer
Biconcepts
2019 – 2021
Web Designer
Freelance
2015 – 2018
Digital designer
Daade Ventures
2011 – 2012
BSc Computer Science Degree
University of South Africa
2022 -2024
Visual Elements of UI Design
Duke University, USA | Cousera
2020
Programming with JS, HTML & CSS
Duke University, USA | Cousera
2019
Media & Interactive Design (NQF 5)
AAA School of Advertising
2011 – 2012
Portfolio
Online Store
TTP - Online Shoe Store.
Tech Stack: HTML | CSS | JavaScript | PHP | WordPress
Introduction:
I am delighted to present my portfolio showcasing the successful development of the online shoe store “TTP (Truly Trusted Products)” for my client, in collaboration with the parent company JUSTBUY. As the project lead, I was responsible for creating the brand identity, establishing the overall style guide, handling the designs, and crafting compelling content. Additionally, I built the online store using WordPress, HTML, CSS, JavaScript, and PHP, and managed digital advertising campaigns using Facebook and Google Ads. I also implemented newsletter campaigns using Mailchimp. This write-up provides an overview of the project, highlighting my expertise in creating an engaging and accessible online store for middle-class customers.
Project Overview:
Client: JUSTBUY
Project Name: TTP (Truly Trusted Products) – Online B2B and B2C Shoe Store
Role: Project Lead, Brand Identity Designer, Content Creator, Web Developer, Digital Marketer
Brand Identity:
To establish TTP as a trustworthy and reliable shoe store catering to the middle-class segment, I invested considerable effort in developing a strong brand identity. Extensive market research and competitor analysis helped me gain insights into the target audience’s preferences and expectations. Drawing upon these insights, I created a brand identity for TTP that conveyed trust, affordability, and style. The brand identity formed the foundation for the entire project, influencing the visual and tonal direction of the online store.
Style Guide:
To ensure visual consistency and cohesiveness, I developed a comprehensive style guide that encompassed various design elements. This style guide served as a reference for the design team, providing clear guidelines for typography, color palette, iconography, and imagery. By adhering to the style guide, we maintained a unified and professional look throughout the online store. The consistent visual language enhanced the user experience and strengthened TTP’s brand identity.
Design and Development:
Using WordPress as the content management system, I utilized my skills in HTML, CSS, JavaScript, and PHP to build the dynamic and user-friendly online store for TTP. Collaborating closely with the design team, I transformed the brand identity and style guide into visually appealing designs. I ensured a responsive web design approach, optimizing the store’s layout and functionality for seamless user experiences across devices. The online store showcased a diverse range of shoes, allowing both B2B and B2C customers to explore and make purchases effortlessly.
Content Creation:
In addition to design and development, I handled content creation for TTP’s online store. I crafted persuasive and informative product descriptions, emphasizing the quality, style, and affordability of the shoes. Employing persuasive language and a customer-centric approach, I aimed to drive engagement and conversions. Additionally, I collaborated with the marketing team to create engaging blog posts, articles, and educational content related to shoes, positioning TTP as an authoritative source in the industry.
Digital Advertising:
To increase brand awareness and drive traffic to the online store, I managed digital advertising campaigns using Facebook and Google Ads. Through targeted audience segmentation and strategic ad placements, I aimed to reach the middle-class demographic effectively. I optimized the campaigns to maximize return on investment and continuously monitored performance, making data-driven adjustments to improve results.
Newsletter Campaigns:
To nurture customer relationships and promote repeat business, I implemented newsletter campaigns using Mailchimp. I curated personalized and engaging newsletters, highlighting new shoe arrivals, promotions, and exclusive offers. By leveraging effective email marketing strategies, I aimed to drive customer engagement, loyalty, and conversions.
Conclusion:
Building the online shoe store “TTP (Truly Trusted Products)” for JUSTBUY was an enriching and multifaceted project. Through meticulous brand identity development, the creation of a comprehensive style guide, and proficient design and development using WordPress, HTML
Online Store
Tradaily - Online Electronic Store.
Tech Stack: HTML | CSS | JavaScript | PHP | WordPress
Introduction:
I am excited to present my portfolio showcasing the successful development of the electronic online store “Tradaily” for my client, in collaboration with the parent company JUSTBUY. As the project lead, I was responsible for creating the brand identity, establishing the overall style guide, handling the designs, and crafting compelling content. This write-up provides an overview of the project, highlighting my expertise in building a dynamic and visually appealing online store using WordPress, HTML, CSS, JavaScript, and PHP.
Project Overview:
Client: JUSTBUY
Project Name: Tradaily – Real-Time Quote Generating Online Store
Role: Project Lead, Brand Identity Designer, Content Creator, Web Developer
Brand Identity:
To establish Tradaily as a unique and memorable brand, I invested significant effort in developing a strong brand identity that aligned with JUSTBUY’s vision and target audience. Conducting thorough market research and competitor analysis allowed me to gain insights into the electronic industry and customer preferences. Drawing from these insights, I created a brand identity for Tradaily that conveyed trust, innovation, and reliability in real-time quote generation. The brand identity served as the foundation for the entire project, guiding the visual and tonal direction of the online store.
Style Guide:
To maintain a consistent and cohesive user experience, I developed a comprehensive style guide that encompassed various design elements. This style guide acted as a reference for the design team, providing clear guidelines for typography, color palette, iconography, and imagery. Adhering to the style guide ensured a unified and professional look throughout the online store. The consistent visual language enhanced the brand’s perception and facilitated a seamless user journey.
Design and Development:
Using WordPress as the content management system, I leveraged my expertise in HTML, CSS, JavaScript, and PHP to build the dynamic and functional online store for Tradaily. Collaborating closely with the design team, I transformed the brand identity and style guide into visually stunning designs. Implementing responsive web design principles, I ensured that the online store provided an optimal viewing experience across devices. Customizing WordPress themes and plugins, I incorporated real-time quote generation functionality, enabling users to generate quotes instantly for electronic products.
Content Creation:
In addition to design and development, I handled the content creation for Tradaily’s online store. I crafted persuasive and informative product descriptions, highlighting the advantages and features of real-time quote generation. By employing persuasive language and a customer-centric approach, I aimed to influence purchasing decisions and drive conversions. Collaborating with the marketing team, I also contributed to the creation of blog posts, articles, and educational content, establishing Tradaily as an authoritative source in the industry.
Conclusion:
Building the electronic online store “Tradaily” for JUSTBUY was an exciting and fulfilling endeavor. Through meticulous brand identity development, the establishment of a comprehensive style guide, and proficient design and development using WordPress, HTML, CSS, JavaScript, and PHP, I successfully brought Tradaily to life. The online store now stands as a visually striking, user-friendly platform that empowers users to generate real-time quotes effortlessly. I am proud to have contributed to this project, showcasing my expertise in building engaging and functional online stores for clients in the electronic industry
Website & UI/UX
Metropolitan Police Protection - Website
Tech Stack: Figma | HTML | CSS | JavaScript | PHP | WordPress
Introduction:
I present my portfolio showcasing the successful development of the website for Metropolitan Police Protection, a private security company in the US. As the lead developer, I undertook the entire process, starting from designing a high-fidelity prototype using Figma to developing the website using WordPress, HTML, CSS, JavaScript, and PHP. I also took charge of graphic design, ensuring comprehensive online security measures, and implementing search engine optimization (SEO) strategies. This write-up provides an overview of the project, highlighting my expertise in creating a visually appealing, secure, and SEO-friendly website for a private security company.
Project Overview:
Client: Metropolitan Police Protects
Role: Lead Developer, Designer, Graphic Designer, SEO Specialist
Design Phase:
To establish a strong foundation for the website, I began by designing a high-fidelity prototype using Figma. Collaborating closely with the business owner, I gathered requirements and translated them into a visually captivating design. By incorporating the company’s branding, target audience preferences, and industry standards, I created a user-friendly interface that effectively showcased the company’s services and values.
Development Phase:
After obtaining the client’s approval on the prototype, I proceeded to develop the website using a combination of WordPress, HTML, CSS, JavaScript, and PHP. Leveraging my expertise in these technologies, I transformed the design into a fully functional website. My focus was on delivering a responsive and intuitive user experience, ensuring optimal display across different devices and screen sizes. I implemented custom features to enhance functionality and user interaction, catering to the specific needs of the private security industry.
Graphic Design:
As part of the website development process, I handled all aspects of graphic design. This included creating visually appealing elements such as logos, icons, banners, and other visual assets. By aligning the design elements with the overall brand identity and incorporating modern design principles, I enhanced the website’s visual appeal and created a cohesive user experience.
Online Security:
Understanding the critical importance of online security for a private security company, I implemented robust security measures to protect the website and its users. By adhering to industry best practices, I ensured secure data transmission, incorporated SSL certificates, and applied appropriate user authentication protocols. These measures safeguarded sensitive information and instilled trust in the company’s online presence.
SEO Optimization:
Recognizing the significance of search engine visibility, I incorporated SEO strategies throughout the website development process. This included optimizing page titles, meta tags, URLs, and content structure to improve search engine rankings. Additionally, I conducted thorough keyword research and implemented relevant keywords in the website’s content to enhance its discoverability and attract organic traffic.
Conclusion:
Building the website for the private security company was an exciting and fulfilling project. Through meticulous design, development using WordPress, HTML, CSS, JavaScript, and PHP, graphic design expertise, robust online security implementation, and SEO optimization, I successfully created a visually appealing, secure, and SEO-friendly website. The website now serves as an effective digital platform, showcasing the private security company’s services and establishing their online presence. I am proud to have contributed to this project, demonstrating my skills in creating professional and functional websites for clients in the private security industry.
Website
Biconcepts IT Group - Website
Tech Stack: HTML | CSS | JavaScript | JQuery
Introduction:
I am thrilled to present my portfolio showcasing the successful development of the website for Biconcepts IT Group. As the sole developer, I worked on the project from initial brief to final delivery. I developed the brand identity, designed the logo and style guide using Adobe Suites, and created a high-fidelity prototype. Upon approval, I proceeded to develop the website using HTML, CSS, JavaScript, and JQuery. This write-up provides an overview of the project, highlighting my expertise in creating a visually appealing and functional website for an IT company.
Project Overview:
Client: Biconcepts IT Group
Role: Web Developer, Brand Identity Developer, Logo Designer
Brand Identity Development:
To establish a strong brand identity for Biconcepts IT Group, I started by understanding the company’s goals, values, and target audience. Leveraging this knowledge, I developed a brand identity that reflected the company’s professionalism, expertise, and innovative approach. This included designing a logo and creating a comprehensive style guide that provided guidelines for typography, color palette, imagery, and other visual elements. The brand identity formed the foundation for the website design, ensuring consistency across all aspects of the company’s visual communication.
Logo Design:
Using Adobe Suites, I designed a unique and memorable logo for Biconcepts IT Group. The logo encapsulated the essence of the company’s brand, incorporating relevant elements and representing their IT expertise. Through careful consideration of color, typography, and symbolism, I created a logo that conveyed professionalism, reliability, and technological proficiency.
High-Fidelity Prototype:
With the brand identity and logo in place, I proceeded to design a high-fidelity prototype of the website. Using design tools such as Adobe XD or Sketch, I created a visually engaging and user-friendly interface. The prototype showcased the website’s layout, navigation, and interactive elements, allowing the client to visualize the final product before development began. Collaborating closely with the client, I incorporated their feedback to refine the prototype, ensuring alignment with their expectations.
Website Development:
After receiving approval on the prototype, I utilized my expertise in HTML, CSS, JavaScript, and JQuery to develop the website. Leveraging these technologies, I transformed the prototype into a fully functional website that met the client’s requirements. I focused on delivering a seamless user experience, ensuring responsive design to optimize the website’s display across various devices and screen sizes. I also implemented interactive features and animations to enhance user engagement and create an immersive browsing experience.
Conclusion:
Developing the website for Biconcepts IT Group was a fulfilling and rewarding project. From developing the brand identity and designing the logo to creating a high-fidelity prototype and implementing the website using HTML, CSS, JavaScript, and JQuery, I successfully brought the client’s vision to life. The website now serves as an effective digital platform for Biconcepts IT Group, showcasing their expertise and providing a seamless user experience. I am proud to have contributed to this project, demonstrating my skills in web development, brand identity development, and design.
Website & UI/UX
Rideaux D'Or - Website
Tech Stack: Figma | HTML | CSS | JavaScript | PHP | WordPress
Introduction:
I am delighted to present my portfolio showcasing the successful redesign of the website for Rideaux D’or, an event and interior decor company based in Pretoria Johannesburg. The project involved revamping their outdated website, which lacked modernism and consistency. As the lead designer and developer, I designed and presented a high-fidelity prototype to the client, and upon approval, I proceeded to develop the website using WordPress. Additionally, I created all the graphics, developed graphic content, and handled copywriting. This write-up provides an overview of the project, highlighting my expertise in transforming the website into a visually appealing and cohesive online presence for Rideaux D’or.
Project Overview:
Client: Rideaux D’or
Role: Lead Designer, Developer, Graphic Designer, Content Creator
Redesign Phase: Recognizing the need to modernize the website and create a consistent brand image, I began by thoroughly understanding Rideaux D’or’s goals, target audience, and aesthetic preferences. Building upon this understanding, I designed a high-fidelity prototype that showcased a fresh and visually captivating look. The prototype incorporated modern design elements, intuitive navigation, and an improved user experience. Collaborating closely with the client, I refined the prototype until it accurately represented their vision and received their approval.
Website Development:
After finalizing the design prototype, I utilized WordPress as the content management system to develop the new website for Rideaux D’or. Leveraging my skills in web development, HTML, CSS, and WordPress, I transformed the approved design into a fully functional website. With a focus on user-friendliness and responsiveness, I ensured that the website was accessible across various devices and screen sizes. The website featured intuitive navigation, seamless transitions, and interactive elements to enhance user engagement.
Graphic Design:
To maintain consistency and convey the desired brand image, I designed all the graphics for the website. This included creating custom icons, banners, and visual elements that complemented Rideaux D’or’s aesthetic and communicated their services effectively. By incorporating visually appealing graphics, I enhanced the overall visual appeal and professionalism of the website.
Graphic Content Development:
In addition to graphic design, I developed engaging graphic content for Rideaux D’or’s website. This involved showcasing their event and interior decor services through visually compelling imagery. By carefully curating and presenting their portfolio, I effectively conveyed the company’s expertise and quality of work. The graphic content played a crucial role in creating a captivating and immersive experience for visitors to the website.
Copywriting:
To ensure a consistent and cohesive brand voice, I also handled the copywriting for Rideaux D’or’s website. I crafted persuasive and informative content that effectively conveyed the company’s unique value proposition and showcased their services. Through compelling language and a customer-centric approach, I aimed to engage visitors and drive conversions.
Conclusion:
Redesigning the website for Rideaux D’or was an exciting and fulfilling project. By designing a high-fidelity prototype, developing the website using WordPress, creating custom graphics, and providing engaging copywriting, I successfully transformed their online presence. The new website now reflects Rideaux D’or’s modernism, consistency, and professionalism, effectively showcasing their event and interior decor services. I am proud to have contributed to this project, demonstrating my skills in design, development, graphic content creation, and copywriting.
Website
GOGM - Website
Introduction:
I am pleased to present my portfolio showcasing the successful web development project for GOGM (God’s Own Grace Mission), a religious organization. The project involved redesigning their old website and adding new functionality to enhance their online presence and facilitate better communication with their members. As the web developer, I created a custom theme for the organization using WordPress and incorporated a donation plugin and other relevant features. Additionally, I played a crucial role in creating digital designs, including flyers and videos, using Adobe Suite. This write-up provides an overview of the project, highlighting my expertise in web development, digital design, and custom theme creation for a religious organization.
Project Overview:
Client: GOGM (God’s Own Grace Mission)
Role: Web Developer, Digital Designer
Website Redesign: To meet the organization’s goals of improving their online presence and member engagement, I started by redesigning their existing website. Collaborating closely with the client, I gathered their requirements and integrated their feedback throughout the design process. The redesigned website aimed to create a visually appealing and user-friendly experience that aligned with GOGM’s mission and values.
Functionality Enhancements:
In addition to the redesign, I implemented various functionalities to assist GOGM in better connecting with their members. One of the key additions was a donation plugin, allowing visitors to contribute to the organization’s initiatives securely. I also incorporated features such as event management, blog integration, member registration, and newsletter subscription. These functionalities facilitated seamless communication, engagement, and event coordination for GOGM.
Custom Theme Development:
To ensure a unique and tailored online presence for GOGM, I built a custom theme using WordPress. Leveraging my expertise in web development, HTML, CSS, JavaScript, and PHP, I developed a theme that reflected the organization’s values and aesthetics. The custom theme provided a consistent and visually appealing design across all website pages, creating a cohesive brand experience.
Digital Design:
As part of the project, I created a range of digital designs for GOGM. This included designing eye-catching flyers and graphics that conveyed important messages, events, and initiatives. I utilized Adobe Suite tools such as Photoshop and Illustrator to design these materials, ensuring that they were visually appealing and aligned with the organization’s branding guidelines.
Video Creation:
To enhance GOGM’s digital presence, I also created videos that effectively conveyed their mission, events, and messages. Using Adobe Suite tools like Premiere Pro and After Effects, I combined visuals, audio, and animations to produce engaging and impactful videos. These videos served as powerful communication tools, enabling GOGM to connect with a wider audience.
Conclusion:
Redesigning the website for GOGM and incorporating new functionalities was an enriching and rewarding project. Through my expertise in web development, custom theme creation, digital design, and video creation, I successfully transformed their online presence and enhanced member engagement. The redesigned website, along with the addition of a donation plugin and other functionalities, allowed GOGM to better communicate with their members and connect with a broader audience. I am proud to have contributed to this project, showcasing my skills in web development, digital design, and multimedia content creation for a religious organization.
