{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc1NjQ2NjkyLCJpYXQiOjE2NzU2NDMwOTIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.ReGuN-5LgNRW2FwLKfp_mvnayp1pT1I36E5kh16_GbxVYt0bSvHyPg9MmVBfoOx_yKAYFCoubXEI4siPk9ECr006vRvh9bc-Q7d1NRQPFatL9f5WnmLcRJUJVJ_oM2R_Ed710Gex9CEXkfaUDzwIYoWaiVWx8weYPiHiNM05cStqBB2lY1NbYYsph2jFb03D3zdacVjAAZ3F2-L5W7-2smiKONN1IrpRYHyaZcEl1EBYktPB7a0vj6m-bG_QBExoSKVTueR7rl9vQtE_Q7DSnfaB94gaJo13Bh_djJ1lzL32y93nim0gkkkB7IKTnXjVXPmoGrS4-Wnn8X1CaukQew"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":53564225,\"user_id\":2535351,\"html\":\"<head>\\n <meta name=\\\"description\\\" content=\\\"My name is Allison Perlis and I develop creative, intuitive, research-based designs that meet (and exceed) the needs of users and clients alike.\\\" \\/>\\n <meta name=\\\"keywords\\\" content=\\\"design, portfolio, allison perlis\\\" \\/>\\n \\n <meta name=\\\"author\\\" content=\\\"Allison Perlis\\\" \\/>\\n <meta property=\\\"og:title\\\" content=\\\"Usability is my passion hire me plz -- Allison Perlis\\\" \\/>\\n \\n <meta property=\\\"og:url\\\" content=\\\"http:\\/\\/allisonperlis.com\\\" \\/>\\n <meta property=\\\"og:type\\\" content=\\\"website\\\" \\/>\\n <meta property=\\\"og:image\\\" content=\\\"https:\\/\\/halfnhalf.superhi.com\\/201201-aptoyface16x9.jpeg\\\" \\/>\\n \\n <meta property=\\\"og:description\\\" content=\\\"Usability is my passion hire me plz\\\" \\/>\\n <meta property=\\\"og:site_name\\\" content=\\\"Allison Perlis portfolio\\\" \\/>\\n<\\/head>\\n\\n<section>\\n <div class=\\\"left\\\">\\n <h1>Usability is my passion hire me plz<\\/h1>\\n\\n <p>My name is Allison Perlis and I develop creative, intuitive, research-based designs that meet <span>(and exceed)<\\/span> the needs of users and clients alike.<\\/p>\\n \\n <p>You can <a href=\\\"https:\\/\\/aperlis.notion.site\\/Resume-8a3556504dd342dc8002b0a64c42557b\\\" target=\\\"_blank\\\">read my resume here,<\\/a> or contact me at allisonperlis @ gmail.com<\\/p>\\n <\\/div>\\n\\n <div class=\\\"right\\\">\\n \\n <a class=\\\"project\\\" href=\\\"https:\\/\\/www.youtube.com\\/watch?v=wTFLNMBDOvQ\\\" target=\\\"_blank\\\"><!--BEGIN CARD-->\\n <article class=\\\"project-card\\\">\\n <figure class=\\\"project-thumbnail\\\">\\n <img src=\\\"https:\\/\\/halfnhalf.superhi.com\\/210218-uds-heroimage03.jpeg\\\" alt=\\\"Unity Design System hero image\\\">\\n <\\/figure>\\n <div class=\\\"project-content\\\">\\n <h4>Unity Design System<\\/h4>\\n <p>Lead designer of Arizona State University's core design system.<\\/p>\\n <\\/div><!-- .card-content -->\\n <\\/article>\\n <\\/a><!--END CARD -->\\n \\n \\n <a class=\\\"project\\\" href=\\\"https:\\/\\/docs.google.com\\/presentation\\/d\\/1WI_3s_yCQvvjpGzQd8_1UuVhpr3M3MnU7KrXG2pXig8\\/edit?usp=sharing\\\" target=\\\"_blank\\\"><!--BEGIN CARD-->\\n <article class=\\\"project-card\\\">\\n <figure class=\\\"project-thumbnail\\\">\\n <img src=\\\"https:\\/\\/halfnhalf.superhi.com\\/allisonperlis-underdogthumb.jpeg\\\" alt=\\\"Underdog Rescue of Arizona site design screenshots\\\">\\n <\\/figure>\\n <div class=\\\"project-content\\\">\\n <h4>Underdog Rescue of Arizona<\\/h4>\\n <p>Usability analysis and site redesign, completed during MA.<\\/p>\\n <\\/div><!-- .card-content -->\\n <\\/article>\\n <\\/a><!--END CARD -->\\n \\n \\n <a class=\\\"project\\\" href=\\\"https:\\/\\/www.notion.so\\/aperlis\\/Brand-guide-and-summer-camps-9544b65856cd45c0b4e26ca3728a5b81\\\" target=\\\"_blank\\\"><!--BEGIN CARD-->\\n <article class=\\\"project-card\\\">\\n <figure class=\\\"project-thumbnail\\\">\\n <img src=\\\"https:\\/\\/halfnhalf-draft.superhi.com\\/brandguidesummercamp.jpeg\\\" alt=\\\"Playful creative from ASU summer camp\\\">\\n <\\/figure>\\n <div class=\\\"project-content\\\">\\n <h4>Brand guide and summer camps<\\/h4>\\n <p>In Summer 2021, ASU's brand guide underwent a reorganization and redesign to align with the new Unity design system and web standards. I was the creative lead for the new visual designs.<\\/p>\\n <\\/div><!-- .card-content -->\\n <\\/article>\\n <\\/a><!--END CARD -->\\n \\n \\n <a class=\\\"project\\\" href=\\\"https:\\/\\/www.dropbox.com\\/s\\/5g1kc2pnabdqn3i\\/210213%20TWC514%20Final%20V5.pdf?dl=0\\\" target=\\\"_blank\\\"><!--BEGIN CARD-->\\n <article class=\\\"project-card\\\">\\n <figure class=\\\"project-thumbnail\\\">\\n <img src=\\\"https:\\/\\/halfnhalf.superhi.com\\/allisonperlis-cawildfirethumb02.jpeg\\\" alt=\\\"California wildfire infographic\\\">\\n <\\/figure>\\n <div class=\\\"project-content\\\">\\n <h4>California Wildfires<\\/h4>\\n <p>Information design. Analysis and report of California wildfire damage and causes from the last five years.<\\/p>\\n <\\/div><!-- .card-content -->\\n <\\/article>\\n <\\/a><!--END CARD -->\\n \\n \\n <a class=\\\"project\\\" href=\\\"https:\\/\\/docs.google.com\\/presentation\\/d\\/1qSW7-n0C1_7-fBwgRxBaHuwtjl_-VgDkQYIGsDZc6Rc\\/edit?usp=sharing\\\" target=\\\"_blank\\\"><!--BEGIN CARD-->\\n <article class=\\\"project-card\\\">\\n <figure class=\\\"project-thumbnail\\\">\\n <img src=\\\"https:\\/\\/halfnhalf.superhi.com\\/201201-aptoyface16x9.jpeg\\\" alt=\\\"Placeholder image of Allison Perlis\\\">\\n <\\/figure>\\n <div class=\\\"project-content\\\">\\n <h4>Hyundai Infotainment: Navigation<\\/h4>\\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet ultrices porta.<\\/p>\\n <\\/div><!-- .card-content -->\\n <\\/article>\\n <\\/a><!--END CARD -->\\n \\n \\n <a class=\\\"project\\\" href=\\\"https:\\/\\/aperlis.notion.site\\/ASU-brand-social-56686f3435f64debb341c42c8b05e71f\\\" target=\\\"_blank\\\"><!--BEGIN CARD-->\\n <article class=\\\"project-card\\\">\\n <figure class=\\\"project-thumbnail\\\">\\n <img src=\\\"https:\\/\\/halfnhalf.superhi.com\\/2020-general-giphy.jpeg\\\" alt=\\\"Photo of 2 ASU students on 'A' Mountain by Photographer, overlaid with GIPHY stickers.\\\">\\n <\\/figure>\\n <div class=\\\"project-content\\\">\\n <h4>General ASU social media<\\/h4>\\n <p>In my time at ASU I worked on a number of general social media projects to boost the University's presence on platforms like Instagram.<\\/p>\\n <\\/div><!-- .card-content -->\\n <\\/article>\\n <\\/a><!--END CARD -->\\n \\n \\n <article> <\\/article>\\n \\n <\\/div>\\n\\n<\\/section>\",\"css\":\"\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/ BOILERPLATE CSS\\n\\nhtml, body, div, span, applet, object, iframe,\\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\\na, abbr, acronym, address, big, cite, code,\\ndel, dfn, em, img, ins, kbd, q, s, samp,\\nsmall, strike, strong, sub, sup, tt, var,\\nb, u, i, center,\\ndl, dt, dd, ol, ul, li,\\nfieldset, form, label, legend,\\ntable, caption, tbody, tfoot, thead, tr, th, td,\\narticle, aside, canvas, details, embed,\\nfigure, figcaption, footer, header, hgroup,\\nmenu, nav, output, ruby, section, summary,\\ntime, mark, audio, video {\\n margin: 0;\\n padding: 0;\\n border: 0;\\n font-size: 100%;\\n font: inherit;\\n vertical-align: baseline;\\n}\\n\\narticle, aside, details, figcaption, figure,\\nfooter, header, hgroup, menu, nav, section {\\n display: block;\\n}\\nbody {\\n line-height: 1;\\n}\\nol, ul {\\n list-style: none;\\n}\\nblockquote, q {\\n quotes: none;\\n}\\nblockquote:before, blockquote:after,\\nq:before, q:after {\\n content: '';\\n content: none;\\n}\\ntable {\\n border-collapse: collapse;\\n border-spacing: 0;\\n}\\n\\nimg, iframe {\\n vertical-align: bottom;\\n max-width: 100%;\\n}\\n\\ninput, textarea, select {\\n font: inherit;\\n}\\n\\n* {\\n -webkit-box-sizing: border-box;\\n -moz-box-sizing: border-box;\\n box-sizing: border-box;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n text-rendering: optimizeLegibility;\\n}\\n\\n\\n\\n\\n\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/ SITE VARIABLES\\n\\n$black: #191919;\\n$white00: #ffffff;\\n$white01: #fafafa;\\n$white02: #f4f4f4;\\n\\n$transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);\\n\\n\\n\\n\\n\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/ FONTS\\n\\n@font-face {\\n font-family: NanJaune;\\n src: url(https:\\/\\/halfnhalf.superhi.com\\/nanjaunetrial-midiregular.ttf);\\n}\\n\\n@font-face {\\n font-family: Inter;\\n src: url(https:\\/\\/halfnhalf.superhi.com\\/inter.var.woff2);\\n}\\n\\nbody {\\n\\tfont-family: \\\"Inter\\\", Arial, Helvetica, sans-serif;\\n\\tfont-size: 16px;\\n\\tline-height: 1.75;\\n}\\n\\nh1 {\\n\\tfont-size: 5vw;\\n\\tline-height:1;\\n\\tfont-family:\\\"NanJaune\\\", sans-serif;\\n padding: 0 0 .75em 0;\\n}\\n\\nh4{\\n\\tfont-size:1.5em;\\n\\tline-height: 1.4;\\n\\tfont-family: \\\"Inter\\\", Arial, Helvetica, sans-serif;\\n\\tfont-variation-settings: \\\"wght\\\" 700;\\n\\tcolor: $black;\\n}\\n\\np {\\n font-family: 'Inter', Arial, Helvetica, sans-serif;\\n font-size: 18px;\\n font-variation-settings: 'wght' 400;\\n line-height: 1.6;\\n max-width: 60ch;\\n}\\n\\n\\n\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/ GLOBAL\\n\\nsection{\\n display:flex;\\n\\tflex-direction: row;\\n \\n div{\\n width: 50%;\\n padding:4vw;\\n }\\n \\n .left{\\n background: $black;\\n\\t color: $white01;\\n height: 100vh;\\n position: sticky;\\n position: -webkit-sticky;\\n top:0;\\n overflow: scroll;\\n z-index: 10;\\n \\n p{\\n padding: 0 0 1.25em 0;\\n color: $white01;\\n span{font-variation-settings: \\\"slnt\\\" -10, \\\"wght\\\" 450;}\\n }\\n \\n a, a:visited{color:$white02; font-variation-settings: \\\"wght\\\" 700;}\\n a:hover{font-variation-settings: \\\"slnt\\\" -10, \\\"wght\\\" 700;}\\n }\\n \\n a.project{\\n text-decoration:none;\\n background:$white00;\\n }\\n \\n p {\\n color: $black; \\n padding:0;\\n }\\n \\n article:hover{\\n background: $white02;\\n \\n h4{text-decoration:underline;}\\n img {transform: scale(1.15);}\\n border-radius: 32px;\\n } \\n}\\n\\n.project-card{\\n flex-direction: column;\\n margin-bottom: clamp(1rem, 2vw, 2rem);\\n padding: 1.5em;\\n border-radius: 24px;\\n max-width:auto;\\n height:auto;\\n \\n .project-thumbnail{\\n overflow:hidden;\\n border-radius: 16px;\\n aspect-ratio: 16\\/9;\\n img{\\n max-width:100%;\\n object-fit:cover;\\n transition:$transition;\\n }\\n }\\n \\n .project-content{\\n flex-direction: column;\\n display:inline;\\n h4 {padding: 1em 0 .5em 0;}\\n p {padding: 0 0 1em 0;}\\n padding:0;\\n margin:0;\\n }\\n}\\n\\n\\n\\n\\n\\n\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/ MOBILE MEDIUM\\n\\n@media (max-width:900px){\\n\\th1{\\n\\t\\tfont-size: 8vw;\\n\\t}\\n\\n h4{\\n font-size:1.5em;\\n }\\n\\n\\tsection{\\n\\t\\tdisplay: block;\\n \\n div{width:100%}\\n div.left{height: auto;}\\n \\n .workobject{padding: 1em;}\\n\\t}\\n}\\n\\n\\n\\n\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/ MOBILE SMALL\\n\\n@media only screen and (max-width: 500px) {\\n\\tsection{\\n\\t\\tdisplay: block;\\n \\n div{width:100%}\\n div.left{\\n height: auto;\\n p{font-size:.8em;line-height:1.35em;}\\n }\\n\\t}\\n}\\n\\n\\n\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/ DARKMODE\\n\\n@media (prefers-color-scheme: dark) {\\n \\n body{\\n background: $black;\\n color: #d0d0d0;\\n }\\n \\n section{\\n .left{\\n background-color:#373737;\\n background-image: url(\\\"https:\\/\\/halfnhalf.superhi.com\\/darkgradient01.jpeg\\\");\\n background-size: cover;}\\n }\\n\\n .right{\\n p{color:#bfbfbf !important;}\\n \\n h4{color: #fafafa;}\\n }\\n\\n.project-card:hover{\\n background: #373737;\\n}\\n \\n}\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2021-07-05T21:03:59.000Z\",\"updated_at\":\"2021-09-20T18:04:25.000Z\",\"title\":\"210803-HalfnHalfV03\",\"description\":\"\",\"slug_hash\":\"bGWEYMq\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"b1921548e626570dd7edf34690525065\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null,\"hashid\":\"bGWEYMq\"}"}