albertogiunta / flexile-feature

Home Page:https://ag-flexile-public-portfolio.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Gumroad Application - Software Engineering Freelance Position - Open Challenge

Author: Alberto Giunta

Object: Flexile - Public Portfolio page + Edit Modal

Live URL: https://ag-flexile-public-portfolio.vercel.app/f/alb

Goal of this feature:

  • for flexile talents: they can flex a unique, custom and no BS flexile shortlink with their portfolio and contact info. Them being part of the Flexile community should feel elitarian for both the talent and the company looking at the portfolio. They can sell services directly from their public page, and ideally the whole monetization flow should go through Flexile itself.
  • for companies: to meet the Flexile brand and product if they're not Flexile clients yet, and to have a trustworthy source of info regarding the past history and work achievements of a certain freelancer.

Stack:

  • Astro
  • Tailwind
  • React

Workflow:

  • Cursor
  • Claude 3.5 Sonnet
  • ~3 hours total (it could have been less tho: I did some experimentation and styling that took some time + didn't want to rush it)

Notes:

  • I tried to reach a look&feel that felt as much like Flexile as I could make it, especially in the public page UI
  • There's no real DB attached to the page and the "Save Changes" button in the Edit modal is not implemented. I didn't think it was too useful to showcase as it'd have been a single POST request. I focused more on making it feel "at home" than go full circle with the functionality.
  • I used astro.build as a meta framework, as it allows to write pages and components each in the most sensical way for their use case and I thought it might have been interesting for you to see what it could look like:
    • the public page is static, SSR and written in pure html
    • the modal is in React and rendered on the client

image CleanShot 2024-08-07 at 17 37 37

About

https://ag-flexile-public-portfolio.vercel.app


Languages

Language:TypeScript 67.8%Language:Astro 30.4%Language:JavaScript 1.7%Language:SCSS 0.2%