AccentFolio - Portfolio Framer Template

Rodrigo Calix

AccentFolio UI preview
AccentFolio UI preview
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”.
Tabler Icons implementation

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.
Customization

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).
Cats rain component
Like this project
0

Posted Sep 21, 2024

5 Pages, +25 components, code components, code overrides. High scores in accessibility, very customizable, documented, responsive.

Schemetastic Renders
Schemetastic Renders
Documpany - SaaS Documentation Framer Template
Documpany - SaaS Documentation Framer Template