PORTFOLIO 2023 CASE STUDY

OBJECTIVE

Creating a visually stunning and responsive website that effectively showcases my skills and serves as a dynamic portfolio. The goal was not only to capture attention but also to demonstrate proficiency in newer technologies like Three.js, GSAP, and Barbajs.

METHODS

Research and Documentation:

  • Extensive exploration of Three.js documentation to understand and implement 3D graphics.
  • Utilized Barbajs for smooth transitions and multipage functionality, seeking support from online communities and forums when challenges arose.
  • Studied online tutorials to grasp the intricacies of GSAP animations.

Inspiration from Award-Winning Sites:

  • Analyzed the code of award-winning websites to understand design principles and implementation details.
  • Gained insights into modern web development trends by examining industry-leading portfolios.

DURATION

2 MONTHS

CREDITS

LEAD DEVELOPER: DAVID J. FIGUEROA
MENTOR: NIZAR TRIKI + THEANO EIRINI
TUTOR: AHMED MAHFOUDH

SKILLS AND TOOLS USED

THREE.JS, GSAP AND BARBAJS

  • Leveraged Three.js for creating engaging 3D graphics and interactive elements, enhancing the visual appeal of the portfolio.
  • Implemented Barbajs for a multipage structure, enabling an immersive and fluid transition between pages while maintaining a consistent user interface.
  • Utilized GSAP for seamless animations, adding a dynamic touch to the user experience and ensuring smooth transitions between different sections.

TYPOGRAPHY

GOOGLE FONTS

DESIGN AND VISUALIZATION TOOLS

FIGMA

  • Utilized Figma for visualization and conceptualization, allowing for efficient planning and design before implementation. Figma played a crucial role in the initial stages of the project, helping to define the visual aspects and layout.

MIDJOURNEY, PHOTOSHOP AND AFTER EFFECTS

  • Prompted Midjourney AI to generate visually appealing images and backgrounds, contributing to the overall aesthetic of the portfolio.
  • Used those backgrounds to create textures for 3D Objects and to create cubemaps
  • Edited assets using Photoshop and Adobe After Effects to achieve a cohesive and professional look. These tools were instrumental in refining visual elements and ensuring a polished presentation.

CHALLENGES

RESPONSIVNESS

  • Challenge: Ensuring the website looked appealing and functioned well across various devices.
  • Solution: Implemented responsive design principles and extensively tested on multiple devices to fine-tune the user experience.

Barbajs and Three.js Integration

  • Challenge: Integrating Barbajs seamlessly with Three.js in a multipage application.
  • Solution: Created modular scenes as functions and initialized them on each page load, overcoming the issue of JS and CSS loading only on the initial page visit.

Discrepancy Between Phone View and Chrome Dev Tools

  • Challenge: The appearance of the site on an actual phone differed from what was observed in Chrome Dev Tools.
  • Solution: Conducted thorough testing and made adjustments to the design and layout to ensure consistency across different viewing environments.

CONCLUSION

The Portfolio 2023 project not only served as a means to showcase personal skills but also became a journey of continuous learning and problem-solving. By combining creativity with the latest web technologies, the website successfully communicates a unique and captivating narrative. The challenges encountered throughout the project presented valuable opportunities for personal and professional growth. Undertaking one of my most significant projects to date, I navigated through complex hurdles, ultimately learning a multitude of new technologies.