Front-End Developer & CMS for Creative Director Website
INTRO
Hey, I am a Creative Director with 16 years of experience, and I'm launching my new website.
I'm looking for some steady hands to develop the front-end of the site, the CMS, and (ideally) support with some interaction design and animation work.
GOAL
The goal of the site is to secure new freelance design projects (primary audiences: creative/design agencies, NGOs, and social-impact tech startups). I want to find a dev I can trust and collaborate with as new projects come in.
My practice could likely turn into a creative / design / dev agency if the relationship is right and if enough demand comes to scale. :)
Once the site is live, I'll submit it to Awwwards and other sites, and am happy to share the credit with you.
WORKFLOW & COMMUNICATIONS
Most communication should happen here through Upwork (so we are both protected), but for specific details or questions on the design, we can use comments in Figma no problem.
I will invite you into my Figma pages. I'll leave any clarifying comments there on specific design detailing or points I want to make sure don't slip by.
SCOPE PART 1: FRONT-END + CMS
I have mid/high-fidelity designs in Figma done and notes to clarify the detailing. Your primary role is to implement the designs from Figma into Webflow or Framer and support with several interactive animations.
The website has only 3 page types:
Home
About
Case study template
I will need simple CMS with the ability to edit all content, create new pages (particularly case studies as more are added) and build and modify pages with standardized components (e.g. hero section, logos section, big stats, 2 column images, etc.).
The website will need to be optimized for all screen sizes, and I will include tablet and mobile break-point designs for refernce.
SCOPE PART 2: MOTION, ANIMATION, DETAILING
The homepage will feature project photos that are slowly scrolling to the left, so viewers can quickly see lots of my work. These will just loop, each with 4 image slots. They also need to be able to support video (not sure what the best / optimal practices are for video these days).
Custom, interactive cursor to the site (just a colored dot with slight/smooth motion delay to follow cursor). When hovering over case studies, "View case study" will appear and follow the cursor.
The About page features a section with text and some of my hand-drawn sketches. The idea is that when hovering over each word, the sketch will animate into view. Components in each sketch will either appear, draw in by the line, or fade in. I'm open to your creative input, but I'm also happy to clearly brief specific directions myself if you are more comfortable with just implementation.
I was thinking for to use GSAP for the animations to keep the website super light-weight. I'm open to any suggestions / alternative solutions, so long as they work super smoothly.
Will need standardized text "appearing" animations as well. I was thinking this could be done do it by-the-letter using GSAP, but I don't know how cumbersome this may be compared to by-the-word or by-the-line. You tell me! :)
Links, buttons, and hover effects will need animated interactions as well.
Depending on page load-times, I may need your help with a loading animation as well. This is an open question and will depend on how much we can optimize. We can scope this separately as an extension to the project when it becomes clear.
The CTA section will have a gif of me (new portrait photos in the works). Since the images are still frames, and GIF files are heavy, I was thinking we could set this up with WebP or AVIF images that are overlaying each other and just layer them to appear over each other on a continuous loop.
Silky smooth, slightly heavier scroll speed (feeling of steadiness)
REFERNCES
I've included some screenshots from the Figma file without imagery added yet so you can see the design /creative style.
NEXT STEPS
I'm not sure how fast or slow this site will take now that front-end devs are using Claude and GPT. I want someone I can trust who knows how to do this right. I'm open to getting a full project quote based on you skill level.
Job Qualifications
- I'm looking for some steady hands to develop the front-end of the site, the CMS, and (ideally) support with some interaction design and animation work
- They also need to be able to support video (not sure what the best / optimal practices are for video these days)
- I was thinking this could be done do it by-the-letter using GSAP, but I don't know how cumbersome this may be compared to by-the-word or by-the-line
- Links, buttons, and hover effects will need animated interactions as well
- Depending on page load-times, I may need your help with a loading animation as well
- Since the images are still frames, and GIF files are heavy, I was thinking we could set this up with WebP or AVIF images that are overlaying each other and just layer them to appear over each other on a continuous loop
- I want someone I can trust who knows how to do this right
Job Benefits
Job Responsibilities
- I want to find a dev I can trust and collaborate with as new projects come in
- My practice could likely turn into a creative / design / dev agency if the relationship is right and if enough demand comes to scale
- Most communication should happen here through Upwork (so we are both protected), but for specific details or questions on the design, we can use comments in Figma no problem
- I'll leave any clarifying comments there on specific design detailing or points I want to make sure don't slip by
- SCOPE PART 1: FRONT-END + CMS
- I have mid/high-fidelity designs in Figma done and notes to clarify the detailing
- Your primary role is to implement the designs from Figma into Webflow or Framer and support with several interactive animations
- I will need simple CMS with the ability to edit all content, create new pages (particularly case studies as more are added) and build and modify pages with standardized components (e.g. hero section, logos section, big stats, 2 column images, etc.)
- The website will need to be optimized for all screen sizes, and I will include tablet and mobile break-point designs for refernce
- SCOPE PART 2: MOTION, ANIMATION, DETAILING
- The homepage will feature project photos that are slowly scrolling to the left, so viewers can quickly see lots of my work
- These will just loop, each with 4 image slots
- Custom, interactive cursor to the site (just a colored dot with slight/smooth motion delay to follow cursor)
- When hovering over case studies, "View case study" will appear and follow the cursor
- The About page features a section with text and some of my hand-drawn sketches
- The idea is that when hovering over each word, the sketch will animate into view
- Components in each sketch will either appear, draw in by the line, or fade in
- I'm open to your creative input, but I'm also happy to clearly brief specific directions myself if you are more comfortable with just implementation
- I was thinking for to use GSAP for the animations to keep the website super light-weight
- Will need standardized text "appearing" animations as well