Skip to content

Commit

Permalink
Added working sketch/wireframe/prod transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbag
bbag committed Feb 9, 2024
1 parent 5540aad commit bb7b7e9
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 57 deletions.
13 changes: 12 additions & 1 deletion src/components/home/HomeHero.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import DotsBackground from '@/assets/img/dots-background.svg'
<h1>Hey, I'm Billy!</h1>
<h2>Frontend developer, UX/UI + Product Designer</h2>
</div>
<p>From <KeyboardButton size="sm">sketch</KeyboardButton> to <KeyboardButton size="sm">wireframe</KeyboardButton> to <KeyboardButton size="sm">production</KeyboardButton>, I bring web apps, products, and sites to life with code.</p>
<p>From <KeyboardButton size="sm" data-phone-button="sketch">sketch</KeyboardButton> to <KeyboardButton size="sm" data-phone-button="wireframe">wireframe</KeyboardButton> to <KeyboardButton size="sm" data-phone-button="production">production</KeyboardButton>, I bring web apps, products, and sites to life with code.</p>
<Terminal />
</div>
<div class="col-right">
Expand All @@ -23,6 +23,17 @@ import DotsBackground from '@/assets/img/dots-background.svg'
</div>
</section>

<script>
const phoneSvg = document.querySelector('.phone-svg') as SVGElement
const phoneButtons = document.querySelectorAll('[data-phone-button]') as NodeListOf<HTMLButtonElement>

phoneButtons.forEach(button => {
button.addEventListener('click', () => {
phoneSvg.dataset.activeView = button.dataset.phoneButton
})
})
</script>

<style lang="scss" define:vars={{ bg: `url(${DotsBackground.src})` }}>
@import '@/styles/_Variables.scss';

Expand Down
192 changes: 184 additions & 8 deletions src/components/home/phone-ui/PhoneUi.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import PhoneScreen from "./PhoneScreen.vue"
---

<div class="phone-wrapper">
<svg class="phone-svg" x="0" y="0" viewBox="0 0 422 860">
<svg class="phone-svg" x="0" y="0" viewBox="0 0 422 860" data-active-view="production">
<mask id="screen-mask">
<path fill="white" d="M358,848H64c-26.5,0-48-21.5-48-48V60c0-26.5,21.5-48,48-48h294c26.5,0,48,21.5,48,48v740C406,826.5,384.5,848,358,848z"/>
<path fill="white" d="M358,848H64c-26.5,0-48-21.5-48-48V60c0-26.5,21.5-48,48-48h294c26.5,0,48,21.5,48,48v740C406,826.5,384.5,848,358,848z" />
</mask>
<g id="phone-production">
<g class="side-buttons">
Expand All @@ -14,14 +14,14 @@ import PhoneScreen from "./PhoneScreen.vue"
<path d="M6,332H4c-2.2,0-4-1.8-4-4v-56c0-2.2,1.8-4,4-4h2V332z"/>
<path d="M416,215.9h2c2.2,0,4,1.8,4,4v82c0,2.2-1.8,4-4,4h-2V215.9z"/>
</g>
<path class="frame" d="M358,860H64c-33.1,0-60-26.9-60-60V60C4,26.9,30.9,0,64,0h294c33.1,0,60,26.9,60,60v740C418,833.1,391.1,860,358,860z"/>
<path class="screen-glow" d="M358,848H64c-26.5,0-48-21.5-48-48V60c0-26.5,21.5-48,48-48h294c26.5,0,48,21.5,48,48v740C406,826.5,384.5,848,358,848z"/>
<path class="frame" d="M358,860H64c-33.1,0-60-26.9-60-60V60C4,26.9,30.9,0,64,0h294c33.1,0,60,26.9,60,60v740C418,833.1,391.1,860,358,860z" />
<path class="screen-glow" d="M358,848H64c-26.5,0-48-21.5-48-48V60c0-26.5,21.5-48,48-48h294c26.5,0,48,21.5,48,48v740C406,826.5,384.5,848,358,848z" />
<foreignObject x="16" y="12" width="390" height="836" mask="url(#screen-mask)">
<PhoneScreen client:load />
</foreignObject>
<path class="island" d="M261,50H161c-7.7,0-14-6.3-14-14v0c0-7.7,6.3-14,14-14h100c7.7,0,14,6.3,14,14v0C275,43.7,268.7,50,261,50z"/>
<path class="island" d="M261,50H161c-7.7,0-14-6.3-14-14v0c0-7.7,6.3-14,14-14h100c7.7,0,14,6.3,14,14v0C275,43.7,268.7,50,261,50z" />
</g>
<g id="phone-wireframe" style="display: none;">
<g id="phone-wireframe">
<rect x="6" y="2" width="410" height="856" rx="56" />
<rect x="18" y="14" width="386" height="832" rx="46" />
<g class="side-buttons">
Expand All @@ -36,10 +36,48 @@ import PhoneScreen from "./PhoneScreen.vue"
<rect x="56" y="112" width="48" height="48" rx="8" />
<rect x="318" y="112" width="48" height="48" rx="8" />
<!-- Heatmap container -->
<rect x="56" y="184" width="310" height="530" rx="8" />
<rect x="56" y="184" width="310" height="556" rx="8" />
{
[...Array(9)].map((_, i) => {
const gap = 56
const top = 184
const yOffset = top + (gap * i) + gap
return (
<line x1="56" x2="72" y1={yOffset} y2={yOffset} />
<line x1="366" x2="350" y1={yOffset} y2={yOffset} />
)
})
}
<g class="outline">
<path d="m159.2-162.4.8 12.8c.2 3.5 2.3 6.7 5.4 8.3l53.5 27.7c3 1.5 5.4 4 6.8 7.1l6.3 13.7c1.5 3.2 1.8 6.8.8 10.2l-2.5 9.4c-.2.9-.4 1.8-.3 2.8l.6 37.9c0 1 .2 2 .5 3l1.5 4.4c3.8 11.4 6.1 23.2 6.8 35.1l3.2 52.7c1 3.5 1.1 7 0 10.5l1.9 27.8c0 .6 0 1.1-.2 1.7l-3.6 13.3c-.2.8-.6 1.5-1.2 2.1l-5.6 6c-.6.6-1.3 1.1-2.1 1.3l-11.7 3.8c-1.4.5-2.9-.6-2.9-2.1h0c0-.8.4-1.5 1.1-1.9l9-5.4c.6-.4 1.1-.9 1.6-1.5l3.1-4.5c.5-.8.8-1.7.9-2.7l.4-16.1c0-1.1-.6-2.1-1.6-2.6h0c-1.3-.7-3-.2-3.7 1.1l-11 15.1a3 3 0 0 1-4 .9h0a3 3 0 0 1-1.3-3.6l8.8-25.1c.4-1.1.9-2.1 1.6-2.9l4.6-5.8c.9-1.1 1.1-2.7.6-4l-22.7-56.7c-2.9-7.2-3.6-15-2.2-22.6l1.4-7c.3-1.7.2-3.5-.4-5.2L198.3-38c-.8-2.2-1.1-4.5-1.1-6.8l.3-25.3" />
<path d="m206.8-80.6-12.3 13.7c-3.6 4-9.1 5.8-14.4 4.6l-30.6-6.8M164.7 374.4c.2.5.3 1.1.3 1.7 0 .8-.1 1.5-.2 2.1.4 1.1 1.4 1.9 3.7 1.9 3.6 0 4-1.8 4-4 0-1.2-.4-2.3-1.2-3.1" />
<path d="M179.1 373.4c.6.7.9 1.6.9 2.7 0 2.1-.4 3.8-3.8 3.8s-3.8-1.7-3.8-3.8" />
<path d="m198.3-38.1-8.2 39.5c-.3 1.5-.3 3 .1 4.4l1.7 7c.4 1.6.4 3.3 0 4.9l-1.7 6.5c-.5 2-.4 4.1.3 6l4.3 11.9c3.1 8.6 4.6 17.7 4.2 26.8l-3.1 78c-.3 8.5-2 16.9-5 24.9l-5.1 13.6c-.6 1.6-.9 3.2-1 4.9l-.6 21.6c0 1.3-.2 2.6-.6 3.9l-1.8 5.9c-.7 2.2-.8 4.6-.4 6.9l3.4 19.7c.9 4.9.8 9.8-.2 14.7l-13.9 69.9c-.2 1.1-.3 2.2-.3 3.3l.3 13c.1 3.1 1.1 6.2 3.1 8.7l12.8 16.3-.1-.1c.6.6.9 1.5.9 2.4 0 1.9-.4 3.4-3.6 3.4s-3.8-1.6-3.8-3.4M156.7 374c.2.5.2 1.1.2 1.7 0 .9-.1 1.8-.3 2.5.4 1.2 1.5 2.1 4 2.1 3.9 0 4.3-1.9 4.3-4.3 0-1.3-.4-2.5-1.3-3.3M153.4 219.8c3.5 6.1 12.8 6.3 17.5 1.4M140-151.1c-14.2 0-21-11.8-24.6-23.5-1.7 2-4.7 1.2-8.4-11.2-3.5-11.5 1.1-15.8 4-12.3h0c-2.1-21.7 6.6-39 28.9-39 22.3 0 31 17.3 28.9 39h0c2.9-3.5 7.5.8 4.1 12.2-3.7 12.4-6.7 13.2-8.4 11.2-3.5 11.8-10.4 23.6-24.5 23.6z" />
<path d="m120.7-162.4-.7 12.8c-.2 3.5-2.3 6.7-5.4 8.3l-53.5 27.7c-3 1.5-5.4 4-6.8 7.1L48-92.9c-1.5 3.2-1.8 6.8-.8 10.2l2.5 9.4c.2.9.4 1.8.3 2.8l-.5 37.9c0 1-.2 2-.5 3l-1.5 4.4C43.7-13.8 41.4-2 40.7 9.9l-3.2 52.7c-1 3.5-1.1 7 0 10.5l-1.9 27.8c0 .6 0 1.1.2 1.7l3.6 13.3c.2.8.6 1.5 1.2 2.1l5.6 6c.6.6 1.3 1.1 2.1 1.3l11.7 3.8c1.4.5 2.9-.6 2.9-2.1h0c0-.8-.4-1.5-1.1-1.9l-9-5.4c-.6-.4-1.1-.9-1.6-1.5l-3.1-4.5c-.5-.8-.8-1.7-.9-2.7l-.4-16.1c0-1.1.6-2.1 1.6-2.6h0c1.3-.7 3-.2 3.7 1.1l10.7 15.3a3 3 0 0 0 4 .9h0a3 3 0 0 0 1.3-3.6l-8.8-25.1c-.4-1.1-.9-2.1-1.6-2.9l-4.6-5.8c-.9-1.1-1.1-2.7-.6-4l22.9-56.8c2.9-7.2 3.6-15 2.2-22.6l-1.4-7c-.3-1.7-.2-3.5.4-5.2L81.7-38c.8-2.2 1.1-4.5 1.1-6.8l-.3-25.3" />
<path d="m73.1-80.6 12.3 13.7c3.6 4 9.1 5.8 14.4 4.6l30.6-6.8M115.2 374.4c-.2.5-.3 1.1-.3 1.7 0 .8.1 1.5.2 2.1-.4 1.1-1.4 1.9-3.7 1.9-3.6 0-4-1.8-4-4 0-1.2.4-2.3 1.2-3.1" />
<path d="M100.8 373.4a4 4 0 0 0-.9 2.7c0 2.1.4 3.8 3.8 3.8s3.8-1.7 3.8-3.8" />
<path d="m81.6-38.1 8.2 39.5c.3 1.5.3 3-.1 4.4l-1.7 7c-.4 1.6-.4 3.3 0 4.9l1.7 6.5c.5 2 .4 4.1-.3 6l-4.3 11.9c-3.1 8.6-4.6 17.7-4.2 26.8l3.1 78c.3 8.5 2 16.9 5 24.9l5.1 13.6c.6 1.6.9 3.2 1 4.9l.6 21.6c0 1.3.2 2.6.6 3.9l1.8 5.9c.7 2.2.8 4.6.4 6.9l-3.4 19.7c-.9 4.9-.8 9.8.2 14.7l13.9 69.9c.2 1.1.3 2.2.3 3.3l-.3 13c-.1 3.1-1.1 6.2-3.1 8.7l-12.8 16.3.1-.1c-.6.6-.9 1.5-.9 2.4 0 1.9.4 3.4 3.6 3.4 3.3 0 3.8-1.6 3.8-3.4M123.2 374c-.2.5-.2 1.1-.2 1.7 0 .9.1 1.8.3 2.5-.4 1.2-1.5 2.1-4 2.1-3.9 0-4.3-1.9-4.3-4.3 0-1.3.4-2.5 1.3-3.3" />
<path d="M124.2 372.2c-.9.9-1.3 2.1-1.3 3.5 0 2.6 1.5 4.8 5.7 4.8h3c1.8 0 3.5-1.1 4.3-2.7l.8-1.6c.7-1.3 1-2.8.9-4.3l-.8-12.4c0-1.9-.3-3.7-.8-5.5l-2.9-10.6a8.1 8.1 0 0 1-.3-3.8c.2-1.8-.1-3.5-.8-5.3-.5-1.2-.8-2.5-.8-3.9l.6-32.3c0-1.9.3-3.8.9-5.6l2.9-9.3c.9-2.9 1.1-6 .7-9l-5.2-33.4c-.6-3.9 0-7.9 1.6-11.5l2.4-5.1c1.2-2.6 1.9-5.5 1.9-8.4v-31.6l-1.4-19.7 4.4-87.2 4.4 87.2-1.4 19.7v31.6c0 2.9.6 5.8 1.9 8.4l2.4 5.1c1.7 3.6 2.2 7.6 1.6 11.5l-5.2 33.4c-.5 3-.2 6.1.7 9l2.9 9.3c.6 1.8.9 3.7.9 5.6l.6 32.3c0 1.3-.3 2.6-.8 3.9-.8 1.8-1.1 3.5-.8 5.3.2 1.3 0 2.6-.3 3.8l-3.1 10.6c-.5 1.8-.8 3.7-.8 5.5l-.8 12.4c-.1 1.5.2 2.9.9 4.3l.8 1.6a5.1 5.1 0 0 0 4.3 2.7h3c4.3 0 5.8-2.1 5.7-4.8 0-1.4-.4-2.6-1.3-3.5M126.5 219.8c-3.5 6.1-12.8 6.3-17.5 1.4" />
<path d="m111 66.3 23.2 9.7c3.7 1.6 7.9 1.6 11.6 0l23.2-9.7" />
</g>
<!-- Bottom button -->
<rect x="101" y="764" width="220" height="48" rx="8" />
</g>
<g id="phone-sketch">
<rect x="6" y="2" width="410" height="856" rx="56" />
<rect x="18" y="14" width="386" height="832" rx="46" />
<g class="side-buttons">
<path d="M6,172H4c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h2V172z"/>
<path d="M6,252H4c-2.2,0-4-1.8-4-4v-56c0-2.2,1.8-4,4-4h2V252z"/>
<path d="M6,332H4c-2.2,0-4-1.8-4-4v-56c0-2.2,1.8-4,4-4h2V332z"/>
<path d="M416,215.9h2c2.2,0,4,1.8,4,4v82c0,2.2-1.8,4-4,4h-2V215.9z"/>
</g>
<!-- Island -->
<rect x="149" y="24" width="124" height="24" rx="12" />
<!-- Top section -->
<!-- <rect x="56" y="112" width="48" height="48" rx="8" />
<rect x="318" y="112" width="48" height="48" rx="8" /> -->
</g>
</svg>
</div>

Expand Down Expand Up @@ -102,15 +140,153 @@ import PhoneScreen from "./PhoneScreen.vue"
$wireframe-color: #9BC3FF;
$wireframe-fill: #F0F6FF;

pointer-events: none;

& rect,
& .island {
fill: $wireframe-fill;
}

& line,
& rect,
& .island {
stroke: $wireframe-color;
stroke-width: 4;
stroke-linecap: round;
stroke-width: 3;
}

& .side-buttons {
fill: $wireframe-color;
}

& .outline {
fill: none;
stroke: $wireframe-color;
stroke-linecap: round;
stroke-width: 4;
transform: translate(97px, 408px) scale(0.81);
}
}

#phone-sketch {
$sketch-color: #5A5C64;
$sketch-fill: #D0D5E0;

pointer-events: none;

& rect,
& .island {
fill: $sketch-fill;
}

& line,
& rect,
& .island {
stroke: $sketch-color;
stroke-linecap: round;
stroke-width: 4;
}

& .side-buttons {
fill: $sketch-color;
}

& .outline {
fill: none;
stroke: $sketch-color;
stroke-linecap: round;
stroke-width: 5;
transform: translate(97px, 408px) scale(0.81);
}
}

// Phone transitions

#phone-sketch,
#phone-wireframe,
#phone-production {
clip-path: inset(0 0 0 0);
transition: clip-path 450ms cubic-bezier(0.75, 0, 0.25, 1);
}

[data-active-view='sketch'] {
& #phone-wireframe,
& #phone-production {
clip-path: inset(0 0 0 100%);
}
}

[data-active-view='wireframe'] {
& #phone-sketch {
clip-path: inset(0 100% 0 0)
}

& #phone-production {
clip-path: inset(0 0 0 100%);
}
}

[data-active-view='production'] {
& #phone-sketch,
& #phone-wireframe {
clip-path: inset(0 100% 0 0);
}
}

// [data-active-view='production'] {
// & #phone-wireframe {
// clip-path: inset(0 100% 0 0);
// }
// }






// #phone-wireframe,
// #phone-production {
// opacity: 0;
// transition: opacity 400ms ease-in-out;
// }

// [data-active-view='sketch'] #phone-sketch,
// [data-active-view='wireframe'] #phone-wireframe,
// [data-active-view='production'] #phone-production {
// opacity: 1;
// }



// Mask transitions

// #sketch-mask rect,
// #wireframe-mask rect,
// #production-mask rect {
// transition: transform 400ms ease-out;
// }

// [data-active-view='sketch'] {
// & #wireframe-mask rect,
// & #production-mask rect {
// transform: translateX(100%);
// }
// }

// [data-active-view='wireframe'] {
// & #sketch-mask rect {
// transform: translateX(-100%);
// }

// & #production-mask rect {
// transform: translateX(100%);
// }
// }

// [data-active-view='production'] {
// & #sketch-mask rect,
// & #wireframe-mask rect {
// transform: translateX(-100%);
// }
// }
</style>
Loading

0 comments on commit bb7b7e9

Please sign in to comment.