A portfolio website is just as much a collection of design elements that create a sense of the designer’s personality as it is a collection of past work.

The first part was a big priority for Ron Porat, a designer based in Tel Aviv. “It’s important for potential clients to get a glimpse of my personality before we work together,” she says. “I believe my website should describe me without words.”

This is partially why she featured ticker tape at the top of her portfolio, highlighting her various nicknames in a fun, friendly, approachable way. Here, as part of our How I Made This series, she shares how she created it.

Ron Porat's homepage, which features scrolling ticker tape instead of a traditional top nav menu.

Describe your website and company.

I created my website as a part of Wix Playground. It’s my personal portfolio showing my work in the field, mainly branding projects for restaurants, production companies, and events.

What was your goal in designing this website?

The original goal was to present my work in the most interesting and engaging way possible. I wanted to show my spontaneous personality and design aesthetic through the site. It’s important for the designer and client to get to know each other so that both sides stay happy and engaged throughout the design process.

What’s the one design feature on your site with a major wow factor?

I used the purple ticker tape to add a twist of humor and personality to my site. The strip features all of the nicknames people have called me throughout my life, and it ultimately leads to my ‘about me’ page. I think it’s a fun twist.

Now spill: how’d you do it?

Follow along with Porat's how-to screen recording and make your own ticker tape in under 8 minutes.

And here's the code:

import wixWindow from 'wix-window';
import wixAnimations from 'wix-animations';

const StripRunningTxt = wixAnimations.timeline({ repeat: -1 }) ;

$w. onReady(function () {
    playRunningTxt();
});


function playRunninqTxt() {
    let sliderWidth;
    
    wixWindow.getBoundingRect()
        .then((windowSizeInfo) => {
            let windowWidth = windowSizeInfo.window.width;
            
            if (windowWidth > 1000) {
                //Desktop
                sliderWidth = 4087 / 2;
            } else if (windowWidth >= 751) -
                // Tablet
                sliderWidth = 1815 / 2:
            } else if (windowwidth <= 750) {
                // Mobile
                sliderWidth = 1725 / 2;
            }
            
        StripRunningTxt
                . add($w('#RuningTxt'), { x: -sliderWidth, duration: 30000, easing: 'easeLinear' }).play() ;
        });
}

How long did it take you to build the feature from start to finish?

It took a month to create the website and about a week to create the feature.

Do you have any advice for fellow web designers?

First, figure out your values as a designer and as an individual in the world. Once those are concrete and set in stone, you'll be able to create more freely.

Did you notice any changes in user behavior?

Site visits increased by about 44 percent, and I got positive feedback from employers who were interviewing me for potential positions. They said that it was a very unique way to present myself and a nicely laid out portfolio. Now, I work as a brand designer for Studio&More, a visual design studio.

Screenshots of the ticker tape in progress.