Background

Oh

My passion with design started early, at primary school. Decades later, I still have the curiosity of a kid, finding inspiration everywhere, solving problems through compelling ideas to positively impact users, using innovation to create interactive experiences, that can lead positively to shape our future.

/*CSS Vars*/ document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables."); // helper functions const MathUtils = { // map number x from range [a, b] to [c, d] map: (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c, // linear interpolation lerp: (a, b, n) => (1 - n) * a + n * b, // Random float getRandomFloat: (min, max) => (Math.random() * (max - min) + min).toFixed(2) }; // body element const body = document.body; // calculate the viewport size let winsize; const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight}; calcWinsize(); // and recalculate on resize window.addEventListener('resize', calcWinsize); // scroll position let docScroll; // for scroll speed calculation let lastScroll; let scrollingSpeed = 0; // scroll position update function const getPageYScroll = () => docScroll = window.pageYOffset || document.documentElement.scrollTop; window.addEventListener('scroll', getPageYScroll); // Item class Item { constructor(el) { // the .item element this.DOM = {el: el}; // the inner image this.DOM.image = this.DOM.el.querySelector('.content__item-img'); this.DOM.imageWrapper = this.DOM.image.parentNode; this.DOM.title = this.DOM.el.querySelector('.content__item-title'); this.renderedStyles = { // here we define which property will change as we scroll the page and the item is inside the viewport // in this case we will be: // - scaling the inner image // - translating the item's title // we interpolate between the previous and current value to achieve a smooth effect imageScale: { // interpolated value previous: 0, // current value current: 0, // amount to interpolate ease: 0.1, // current value setter setValue: () => { const toValue = 1.5; const fromValue = 1; const val = MathUtils.map(this.props.top - docScroll, winsize.height, -1 * this.props.height, fromValue, toValue); return Math.max(Math.min(val, toValue), fromValue); } }, titleTranslationY: { previous: 0, current: 0, ease: 0.1, fromValue: Number(MathUtils.getRandomFloat(30,400)), setValue: () => { const fromValue = this.renderedStyles.titleTranslationY.fromValue; const toValue = -1*fromValue; const val = MathUtils.map(this.props.top - docScroll, winsize.height, -1 * this.props.height, fromValue, toValue); return fromValue { entries.forEach(entry => this.isVisible = entry.intersectionRatio > 0); }); this.observer.observe(this.DOM.el); // init/bind events this.initEvents(); } update() { // sets the initial value (no interpolation) for (const key in this.renderedStyles ) { this.renderedStyles[key].current = this.renderedStyles[key].previous = this.renderedStyles[key].setValue(); } // apply changes/styles this.layout(); } getSize() { const rect = this.DOM.el.getBoundingClientRect(); this.props = { // item's height height: rect.height, // offset top relative to the document top: docScroll + rect.top } } initEvents() { window.addEventListener('resize', () => this.resize()); } resize() { // gets the item's height and top (relative to the document) this.getSize(); // on resize reset sizes and update styles this.update(); } render() { // update the current and interpolated values for (const key in this.renderedStyles ) { this.renderedStyles[key].current = this.renderedStyles[key].setValue(); this.renderedStyles[key].previous = MathUtils.lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].ease); } // and apply changes this.layout(); } layout() { // scale the image this.DOM.image.style.transform = `scale3d(${this.renderedStyles.imageScale.previous},${this.renderedStyles.imageScale.previous},1)`; // translate the title this.DOM.title.style.transform = `translate3d(0,${this.renderedStyles.titleTranslationY.previous}px,0)`; } } // SmoothScroll class SmoothScroll { constructor() { // the element this.DOM = {main: document.querySelector('main')}; // the scrollable element // we translate this element when scrolling (y-axis) this.DOM.scrollable = this.DOM.main.querySelector('div[data-scroll]'); // the items on the page this.items = []; this.DOM.content = this.DOM.main.querySelector('.content'); [...this.DOM.content.querySelectorAll('.content__item')].forEach(item => this.items.push(new Item(item))); // here we define which property will change as we scroll the page // in this case we will be translating on the y-axis // we interpolate between the previous and current value to achieve the smooth scrolling effect this.renderedStyles = { translationY: { // interpolated value previous: 0, // current value current: 0, // amount to interpolate ease: 0.1, // current value setter // in this case the value of the translation will be the same like the document scroll setValue: () => docScroll } }; // set the body's height this.setSize(); // set the initial values this.update(); // the element's style needs to be modified this.style(); // init/bind events this.initEvents(); // start the render loop requestAnimationFrame(() => this.render()); } update() { // sets the initial value (no interpolation) - translate the scroll value for (const key in this.renderedStyles ) { this.renderedStyles[key].current = this.renderedStyles[key].previous = this.renderedStyles[key].setValue(); } // translate the scrollable element this.layout(); } layout() { this.DOM.scrollable.style.transform = `translate3d(0,${-1*this.renderedStyles.translationY.previous}px,0)`; } setSize() { // set the heigh of the body in order to keep the scrollbar on the page body.style.height = `${this.DOM.scrollable.scrollHeight}px`; } style() { // the needs to "stick" to the screen and not scroll // for that we set it to position fixed and overflow hidden this.DOM.main.style.position = 'fixed'; this.DOM.main.style.width = this.DOM.main.style.height = '100%'; this.DOM.main.style.top = this.DOM.main.style.left = 0; this.DOM.main.style.overflow = 'hidden'; } initEvents() { // on resize reset the body's height window.addEventListener('resize', () => this.setSize()); } render() { // Get scrolling speed // Update lastScroll scrollingSpeed = Math.abs(docScroll - lastScroll); lastScroll = docScroll; // update the current and interpolated values for (const key in this.renderedStyles ) { this.renderedStyles[key].current = this.renderedStyles[key].setValue(); this.renderedStyles[key].previous = MathUtils.lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].ease); } // and translate the scrollable element this.layout(); // for every item for (const item of this.items) { // if the item is inside the viewport call it's render function // this will update item's styles, based on the document scroll value and the item's position on the viewport if ( item.isVisible ) { if ( item.insideViewport ) { item.render(); } else { item.insideViewport = true; item.update(); } } else { item.insideViewport = false; } } // loop.. requestAnimationFrame(() => this.render()); } } /********** Preload stuff **********/ // Preload images const preloadImages = () => { return new Promise((resolve, reject) => { imagesLoaded(document.querySelectorAll('.content__item-img'), {background: false}, resolve); }); }; // And then.. preloadImages().then(() => { // Remove the loader document.body.classList.remove('loading'); // Get the scroll position and update the lastScroll variable getPageYScroll(); lastScroll = docScroll; // Initialize the Smooth Scrolling new SmoothScroll(); }); /********** GSAP **********/ let split = new SplitText(".headerText"), splitz = new SplitText(".quote") let tl = gsap.timeline({scrollTrigger:{ trigger:".vport", start:"top 50%", end:"bottom top", toggleActions:"restart none none reset", markers:true }}) .from(split.chars, {yPercent:-100, stagger:0.05, duration:0.3, ease:"back"}) .from(split.chars, {opacity:0, stagger:0.05, duration:0.2}, 0.2) .from(splitz.lines, {y:50, autoAlpha:0, position:"relative", stagger:0.5, ease:"back.out(2.8)", overwrite: "auto"}, 1.5) .from("button",{y:100, opacity:0, ease:"back", duration:1,})
Splitting(); //TweenMax.staggerFrom('.line', 2.25, {y:50, autoAlpha:0, position:"relative", stagger:0.5, ease:"back.out(2.8)", overwrite: "auto"}, 1.5) //.from(splitz.lines, {y:150, autoAlpha:0, position:"relative", stagger:0.5, ease:"back.out(2.8)", overwrite: "auto"}, 1.5)

Hey there,

good to see you!

My passion with design started early, at primary school. Decades later, I still have the curiosity of a kid, finding inspiration everywhere, solving problems through compelling ideas to positively impact users, using innovation to create interactive experiences, that can lead positively to shape our future.

My name is Mariana

(but call me Mari)

I graduated in Digital Design, and specialization in Interactive Media in 2008 in São Paulo, Brazil, and was transplanted to the Bay Area in 2013.

I worked as a Web Designer & Art Director, and was proudly involved in projects for a wide variety of environments including startups, tech companies & digital agencies with clients in United States & South America, such as:

My name is Mariana

(but call me Mari)

Graduated in Digital Design, and specialization in Interactive Media in 2008 in São Paulo, Brazil, she was transplanted to the Bay Area in 2013.

I worked as a Web Designer & Art Director, and was proudly involved in projects for a wide variety of environments including startups, tech companies & digital agencies with clients in United States & South America, such as:

I'm Passionate about emerging technologies & social good, advocating UX design across all fields of work, empowering teammates in collaborative settings, as a leader with a big heart.​

Graduated in Digital Design, and specialization in Interactive Media in 2008 in São Paulo, Brazil, she was transplanted to the Bay Area in 2013.

I worked as a Web Designer & Art Director, and proudly involved in projects for a wide variety of environments including startups, tech companies & digital agencies with clients in United States & South America, such as:

Affordable Housing program

Human Services Agency

Committee of information & Tech

Unified school district

I enjoy partnering with brands that reflect my enthusiasm for innovation, culture, and experimentations, connecting the audience to meaningful solutions, using good design as a tool to empower companies’ growth and community development.

Some of my work was recognized and awarded in the field, such as San Francisco Affordable Housing Project (housing.sf.gov),  Shorty’s Social Good best website, and Stanford Earth (earth.stanford.edu), as a Webby honoree for best homepage 

On my spare time I...

Explore iOT possibilities

Sew my outfits

Build stuff

Meet Pixel!

I'm also a full time dog mom -

AWARDS

& Recognition

2017

Mariana

Senior Product Designer with 15+ years of experience, working with Research, Strategy, Branding, User Experience & Visual Interfaces.

My first contact with design in the early 90s, and improved my skills by getting a Bachelor’s degree in Interactive & Digital Media, which taught me a lot of aesthetics, art history, psychology, interaction design, to better understand businesses, its requirements and how to translate its core values to digital products.

Graduated in Digital Design, and specialization in Interactive Medias in 2008 in São Paulo, Brazil, transplanted to the Bay Area in 2013.

I still have the curiosity of a kid, finding inspiration everywhere, to solve problems through compelling ideas, positively impacting users, using innovation to create interactive experiences that can lead positively to shape our future.

Awards & Recognition

2019
2018
2019
2018
2017
Webby
Acquia Engage
Shorty
Spur
Digital Bridge Builder
Brazilian         Designer         Dog Mom         IoT Enthusiast         Seamstress         VR Athlete         DIYer         Redditor         Foodie        

Mariana
Toledo

Maybe just drop a line to grab a coffee & talk business! 🤷🏻‍♀️