AccentFolio - Portfolio Framer Template

✨ Live Preview:

https://accentfolio.framer.website/

✨ Product page:

https://schemetastic.gumroad.com/l/accentfolio

AccenFolio is a Framer portfolio template with high contrasts and vibrant colors, made for people who want to highlight their projects with visual appeal and a touch of humor. Humor? Head to the footer and press the “?” button.

Important features

+25 Components

Code components I wrote

High scores in accessibility (contrast, ARIA)

Highly customizable (e.g. Can change color to illustrations and patterns)

Documented (includes a Starting guide and comments)

Responsive (Mobile-friendly)

Details about some specific challenges

Implementation of Tabler icons (code component)

Tabler icons are an amazing library with thousands of icons that I knew that I wanted to implement for AccentFolio. That's why I wrote a code component that makes it super easy, not just to add Tabler icons, also allows you to modify their size, color and thickness. But one of my favorite features is that creates automation aria-labels for the icon; for example, if an icon is called “building-state” it will add an aria-label with the value “Icon building estate”.

Making SVG illustrations and patterns customizable

To allow the users to modify the colors of the illustrations and patterns, I exported those in SVG, and then I converted the code to JSX, with it, I created code components where I implemented Framer controls to make them customizable.

Adding some humor

Another thing that I wanted to do, is to add some humor, because I believe that humor generates trust. For the next video, I generate a code component that uses Framer Motion to animate the objects rain (that cats).