JOYGIRL PORTFOLIO

I developed a portfolio website for Joygirl, a Product Designer. The website, built from scratch using Next.js and Tailwind CSS, features a captivating dark-themed design, making it both beautiful and engaging.

OVERVIEW

  • Client: Joygirl (a Product Designer)
  • Purpose: Develop a new website from Figma design to showcase the client's work.
  • Technology Stack: Next.js, Tailwind CSS, Swiper.js
  • Live Link: View site
A sreenshot from the website of Joygirl portfolio showing the About section of the home page
A sreenshot from the website of Joygirl portfolio showing an embedded Google Slide

FEATURES

  • Video and Google Slides: The home page features a video set to autoplay and loop indefinitely. Additionally, Google Slides are embedded to showcase features of select client projects.
  • Testimonial slider: A custom Slider.js slider for testimonials.
  • Filter tabs: Tabs are used to filter projects by categories.
A sreenshot from the website of ...

CHALLENGES

Styling the testimonial section was difficult and time consuming. This is because the UI is somewhat complex and the design for mobile screen is quite different from the desktop design. Though not very challenging, it was fun figuring out how to customize the border styling of form inputs when they are focused, which was needed for the contact form.
A sreenshot from the website of Joygirl portfolio showing the testimonial section
A sreenshot from the website of Joygirl portfolio showing a section of the My Designs page

LESSONS LEARNED

(1) An HTML element's attribute (e.g. 'target') can be passed in as a prop. (2) Used the flex-row-reverse CSS property for the first time. (3) It's acceptable practice to apply flexbox properties to heading elements (such as h2). This helped with styling an inline span element within an h2 element. (4) Used the CSS unit svh (small viewport height) in place of vh (viewport height) for the first time.

LET'S CONNECT

nnejiben@gmail.com+234-806-306-2992