Skip to content

arthemisz/Focus-frame-

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

49 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“· FocusFrame Media β€” Portfolio Website

🌐 Overview

FocusFrame Media is a responsive multi-page portfolio website designed for a professional photography and videography team. The website showcases their creative work, services, and brand identity with a modern editorial-style aesthetic.

This project was developed as part of the Nexus Front-End Boot Camp Project, focusing on UI/UX design and front-end development using Figma, HTML, and CSS.


🎯 Objective

The goal of this project is to simulate a real-world client scenario by:

  • Designing a visually appealing portfolio in Figma
  • Translating the design into a fully responsive website
  • Applying UI/UX principles and design systems
  • Building clean and structured code using HTML & CSS only

πŸ› οΈ Tech Stack

  • Design: Figma
  • Frontend: HTML5, CSS3
  • Fonts: Google Fonts
  • Icons: SVG format

πŸš€ Live Demo

https://focus-frame-media.vercel.app/


🎨 Figma Design

https://www.figma.com/design/ieB91sMVy3QIMcSr31jzlw/Untitled?node-id=0-1&m=dev&t=mg55Ny08rD63rOyr-1


πŸ’» GitHub Repository

https://github.com/amen-meb/FocusFrame_Media


πŸ“š What I Learned

  • UI/UX design workflow from idea β†’ wireframe β†’ final design
  • Converting Figma design into real website
  • Writing clean and structured CSS
  • Creating responsive layouts
  • Improving visual storytelling through design

🧠 Future Improvements

  • Add JavaScript for interactivity (lightbox, sliders)
  • Integrate backend for booking system
  • Optimize images for performance
  • Add animations with libraries (GSAP, etc.)

Releases

Packages

Contributors

Languages