Currently design engineering at DSI. Previously content strategy at Conde Nast. G">
Currently design engineering at DSI. Previously content strategy at Conde Nast. G">
Currently design engineering at DSI. Previously content strategy at Conde Nast. G">
Shristi is a designer building interfaces and identities rooted in purpose, participation, and play.
Her work is a blend of visual, written, && programming languages that transform brand inputs into bespoke outputs.
Shristi is a designer building interfaces and identities rooted in purpose, participation, and play.
Her work is a blend of visual, written, && programming languages that transform brand inputs into bespoke outputs.
super-embed:
<head>
<link rel="preconnect" href="<https://fonts.googleapis.com>">
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
<link href="<https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap>" rel="stylesheet">
<link href="<https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap>" rel="stylesheet">
</head>
<section class="images-hover">
<div>
<div class="intro"><h1> Shristi is a designer building interfaces and identities rooted in purpose, participation, and play. </h1> </div><br>
<div class="intro"><h1 style="margin-top: 0px"> Her work is a blend of visual, written, && programming languages that transform brand inputs into bespoke outputs. </h1></div><br>
<div class="subline"> <p> Currently design engineering at <a href="<https://designsystems.international/>" class="landing-link">DSI</a>. Previously content strategy at Conde Nast. <a href="mailto:[email protected]" class="landing-link">Get in touch</a> to collaborate.</p></div>
</div>
<div class="outro"> <strong> ↓ ↓ ↓ </strong></div>
<img class="image" data-index="self-portrait" data-status="inactive" src="<https://imgur.com/MiCUAk9.gif>"/>
<img class="image" data-index="FAFSA-game" data-status="inactive" src="<https://i.imgur.com/uXft7Cn.gif>"/>
<img class="image" data-index="ikai-asai" data-status="inactive" src="<https://i.imgur.com/gYZIrhj.jpg>" />
<img class="image" data-index="arduino-packaging" data-status="inactive" src="<https://i.imgur.com/LMvnvLx.jpg>" />
<img class="image" data-index="how-are-you" data-status="inactive" src="<https://i.imgur.com/02FyEEV.gif>" />
<img class="image" data-index="arduino-packaging" data-status="inactive" src="<https://i.imgur.com/oPrFDjQ.png>" />
<img class="image" data-index="arduino-generator" data-status="inactive" src="<https://i.imgur.com/eG1nB5Z.gif>" />
<img class="image" data-index="astronomy-website" data-status="inactive" src="<https://i.imgur.com/dL38IP2.png>" />
<img class="image" data-index="1289-pages" data-status="inactive" src="<https://i.imgur.com/T3wDRPP.gif>" />
<img class="image" data-index="i-wont-forget" data-status="inactive" src="<https://i.imgur.com/Y6NGfDW.jpeg>" />
<img class="image" data-index="exhibiting-iPad" data-status="inactive" src="<https://i.imgur.com/qqWI1CK.jpeg>" />
<img class="image" data-index="face-generator" data-status="inactive" src="<https://i.imgur.com/BvsS5Kv.gif>" />
<img class="image" data-index="comedy-music" data-status="inactive" src="<https://i.imgur.com/cPKvat3.jpg>" />
<img class="image" data-index="diff-hero" data-status="inactive" src="<https://i.imgur.com/VYSlVGo.jpg>" />
<img class="image" data-index="exhibiting-screen" data-status="inactive" src="<https://i.imgur.com/kbTD59Z.jpeg>" />
<img class="image" data-index="nasa-jpl" data-status="inactive" src="<https://i.imgur.com/WmwJ52N.jpg>" />
<img class="image" data-index="bling-bling" data-status="inactive" loop src="<https://i.imgur.com/dHIBq1Y.gif>" />
<img class="image" data-index="1289-phone" data-status="inactive" src="<https://i.imgur.com/newG2dV.jpeg>" />
<img class="image" data-index="craft-collect" data-status="inactive" src="<https://i.imgur.com/ncYAFhi.jpeg>" />
<img class="image" data-index="post-card-generator" data-status="inactive" src="<https://i.imgur.com/9ynnBhp.gif>" />
<img class="image" data-index="type-thursday" data-status="inactive" src="<https://i.imgur.com/f7v4RTu.jpg>" />
<img class="image" data-index="H-3D" data-status="inactive" src="<https://i.imgur.com/DzQpoxi.png>" />
<img class="image" data-index="ikai-asai" data-status="inactive" src="<https://i.imgur.com/eFJBkTk.jpg>" />
<img class="image" data-index="album-art" data-status="inactive" src="<https://i.imgur.com/JCWsruT.jpg>" />
<img class="image" data-index="entropy-posters" data-status="inactive" src="<https://i.imgur.com/AI7qb1P.jpg>" />
<img class="image" data-index="diff-standee" data-status="inactive" src="<https://i.imgur.com/GLTVLA2.jpg>" />
<img class="image" data-index="cc-fest" data-status="inactive" src="<https://i.imgur.com/sd6VqJZ.png>" />
</section>
<style>
a {
text-decoration: none;
color: #9571ff;
}
.landing-link:hover{
opacity: 0.8;
}
@media only screen and (min-width: 600px){
.images-hover{
background-color: none;
min-height: 95vh;
width: 100%;
top:0px;
left:0px;
}
.image {
width: 30vmin;
position: absolute;
transform: translate(-50%, -50%);
z-index: -10;
}
.image[data-status="inactive"] {
display: none;
}
.image[data-status="active"] {
display: block;
}
.intro{
width: 100%;
color: inherit;
z-index: 1000;
}
.subline{
width: 100%;
z-index: 10;
}
.outro{
position: absolute;
transform: translate(-50%, -50%);
text-align: center;
top: 85vh;
color: #9571ff;
scale: 1.5;
animation: scroll 1s ease-in alternate infinite;
}
h1{
font-family: "Libre Baskerville", serif;
font-weight: 400;
font-style: normal;
line-height: 150%;
text-align: left;
font-size: calc(1.25rem*1.875);
margin: 1rem 0rem;
}
.libre-baskerville-regular-italic {
font-family: "Libre Baskerville", serif;
font-weight: 400;
font-style: italic;
font-size: calc(1.26rem*1.875);
}
@keyframes scroll {
0% {
transform: translateY(-15px);
}
100% {
transform: translateY(15px);
}
}
}
@media only screen and (max-width: 599px) {
h1{
font-family: "Libre Baskerville", serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-align: left;
font-size: calc(1.5rem*1.5);
}
.outro{
opacity: 0;
}
.image {
width: 0vw;
height: 0vw;
padding: 0px;
margin: 0px;
opacity: 0;
border-radius: 20px;
}
}
</style>
<script>
const images = document.getElementsByClassName("image");
let globalIndex = 0,
last = { x: 0, y: 0 };
const activate = (image, x, y) => {
image.style.left = `${x-200}px`;
image.style.top = `${y}px`;
image.style.zIndex = globalIndex;
image.dataset.status = "active";
last = { x, y };
}
const distanceFromLast = (x, y) => {
return Math.hypot(x - last.x, y - last.y);
}
const handleOnMove = e => {
if(distanceFromLast(e.clientX, e.clientY) > (window.innerWidth / 8)) {
const lead = images[globalIndex % images.length],
tail = images[(globalIndex - 5) % images.length];
activate(lead, e.clientX, e.clientY);
if(tail) tail.dataset.status = "inactive";
globalIndex++;
}
}
window.onmousemove = e => handleOnMove(e);
window.ontouchmove = e => handleOnMove(e.touches[0]);
</script>
Select Work