Vinterior | Self-Directed Project

  • Nastia Allen

Coding in Javascript for the first time in about 6 months. I used this self-directed project to create a header design for Vinterior which creates a random composition every time the page reloads. Watch the finished mockup here: https://lnkd.in/eNRs3aFz Or access the Javascript code yourself here: https://lnkd.in/edQTJdTw

To see the research and concept development that went into this project please head over to my portfolio: https://indd.adobe.com/view/43c17998-fbb2-464b-8cce-16d1143bc116
\",\"cache_age\":86400,\"options\":{\"_showcaption\":{\"label\":\"Show author's text caption\",\"value\":false}}},\"meta\":{\"extractor\":\"iframely\"},\"links\":{\"self\":\"v1/x-media/https://www.instagram.com/reel/C42yuwGMqJj/?igsh=MTBhcTk3NTlrZXFjbA==\"},\"properties\":\"~project~project~attributes~blocks~1~attributes~xMedia~attributes\",\"title\":\"{ Nastia Allen } on Instagram: \\\"Thought I’d put #javascript and #p5js to use again with this self-directed project. To spice up the @vinterior website, I designed a composition which is randomly generated every time the page reloads, you can also use it to navigate to the products displayed.\\\"\"}},\"links\":{\"self\":\"v1/embed-blocks/220070\"},\"relationships\":{\"x-media\":{\"links\":{\"self\":\"v1/embed-blocks/220070/relationships/x-media\",\"related\":\"v1/embed-blocks/220070/x-media\"},\"data\":{\"type\":\"x-media\",\"id\":\"https://www.instagram.com/reel/C42yuwGMqJj/?igsh=MTBhcTk3NTlrZXFjbA==\"}},\"xMedia\":\"~project~project~attributes~blocks~1~attributes~xMedia\"},\"properties\":\"~project~project~attributes~blocks~1~attributes\",\"title\":\"undefined undefined\"},{\"type\":\"text-blocks\",\"id\":\"4287226\",\"attributes\":{\"text\":\"To see the research and concept development that went into this project please head over to my portfolio: https://indd.adobe.com/view/43c17998-fbb2-464b-8cce-16d1143bc116\",\"reactDraftJson\":\"{\\\"blocks\\\":[{\\\"key\\\":\\\"1cpee\\\",\\\"text\\\":\\\"To see the research and concept development that went into this project please head over to my portfolio: https://indd.adobe.com/view/43c17998-fbb2-464b-8cce-16d1143bc116\\\",\\\"type\\\":\\\"unstyled\\\",\\\"depth\\\":0,\\\"inlineStyleRanges\\\":[],\\\"entityRanges\\\":[{\\\"offset\\\":106,\\\"length\\\":64,\\\"key\\\":0}],\\\"data\\\":{}}],\\\"entityMap\\\":{\\\"0\\\":{\\\"type\\\":\\\"LINK\\\",\\\"mutability\\\":\\\"MUTABLE\\\",\\\"data\\\":{\\\"href\\\":\\\"https://indd.adobe.com/view/43c17998-fbb2-464b-8cce-16d1143bc116\\\",\\\"rel\\\":\\\"nofollow noopener noreferrer\\\",\\\"target\\\":\\\"_blank\\\",\\\"url\\\":\\\"https://indd.adobe.com/view/43c17998-fbb2-464b-8cce-16d1143bc116\\\"}}}}\",\"multiColumn\":false,\"createdAt\":1711284784,\"updatedAt\":1711284784,\"deletedAt\":null,\"html\":null},\"links\":{\"self\":\"v1/text-blocks/4287226\"},\"properties\":\"~project~project~attributes~blocks~2~attributes\",\"title\":\"undefined undefined\"}]},\"links\":{\"self\":\"v1/projects/1056397\"},\"relationships\":{\"author\":\"~project~project~attributes~author\",\"features\":\"~project~project~attributes~features\",\"image\":\"~project~project~attributes~image\",\"industries\":\"~project~project~attributes~industries\",\"invites\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/invites\",\"related\":\"v1/projects/1056397/invites\"},\"data\":null},\"owner-page\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/owner-page\",\"related\":\"v1/projects/1056397/owner-page\"},\"data\":null},\"owner-user\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/owner-user\",\"related\":\"v1/projects/1056397/owner-user\"},\"data\":{\"type\":\"users\",\"id\":\"1600220\"}},\"owner-roles\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/owner-roles\",\"related\":\"v1/projects/1056397/owner-roles\"},\"data\":[]},\"page-collaborators\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/page-collaborators\",\"related\":\"v1/projects/1056397/page-collaborators\"},\"data\":[]},\"skills\":\"~project~project~attributes~skills\",\"tags\":\"~project~project~attributes~tags\",\"user-collaborators-summary\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/user-collaborators-summary\",\"related\":\"v1/projects/1056397/user-collaborators-summary\"},\"data\":[]},\"side-hustle-skill\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/side-hustle-skill\",\"related\":\"v1/projects/1056397/side-hustle-skill\"},\"data\":null},\"desired-collaborator-professions\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/desired-collaborator-professions\",\"related\":\"v1/projects/1056397/desired-collaborator-professions\"},\"data\":[]},\"x-likes\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/x-likes\",\"related\":\"v1/projects/1056397/x-likes\"},\"data\":null},\"x-in-lists\":{\"links\":{\"self\":\"v1/projects/1056397/relationships/x-in-lists\",\"related\":\"v1/projects/1056397/x-in-lists\"},\"data\":null},\"ownerUser\":\"~project~project~attributes~author\",\"ownerRoles\":\"~project~project~attributes~ownerRoles\",\"pageCollaborators\":\"~project~project~attributes~pageCollaborators\",\"userCollaboratorsSummary\":\"~project~project~attributes~userCollaboratorsSummary\",\"desiredCollaboratorProfessions\":\"~project~project~attributes~desiredCollaboratorProfessions\"},\"properties\":\"~project~project~attributes\",\"title\":\"Vinterior | Self-Directed Project\"},\"projectsFromPage\":[],\"usersForSkills\":[]},\"projectEditor\":{\"collaborators\":{\"data\":[],\"loading\":false,\"meta\":{\"count\":0,\"current\":0,\"total\":1}},\"project\":null},\"questions\":{\"connectionsQuestions\":{\"data\":[],\"meta\":{\"count\":0,\"current\":0,\"total\":0}},\"curatedQuestions\":{\"data\":[],\"meta\":{\"count\":0,\"current\":0,\"total\":0}},\"error\":false,\"errorCode\":null,\"isLoading\":false,\"isModalVisible\":false,\"isSaving\":false,\"latestQuestions\":{\"data\":[],\"meta\":{\"count\":0,\"current\":0,\"total\":0}},\"modalQuestion\":null,\"myQuestions\":{\"data\":[],\"meta\":{\"count\":0,\"current\":0,\"total\":0}},\"myReplies\":{\"data\":[],\"meta\":{\"count\":0,\"current\":0,\"total\":0}},\"popularQuestions\":{\"data\":[],\"meta\":{\"count\":0,\"current\":0,\"total\":0}},\"question\":null,\"questionsByProfessions\":[],\"recommendedQuestions\":[],\"suggestedUsers\":[],\"suggestedUsersCount\":0},\"ribbons\":{\"entities\":{},\"results\":{}},\"search\":{\"enableJobsForYouFallback\":null,\"jobsTiles\":[],\"loading\":false,\"pagination\":{\"count\":0,\"current\":0,\"total\":0},\"questions\":{\"connections\":[],\"latest\":[],\"popular\":[],\"professions\":[]},\"results\":[]},\"sitemaps\":{\"eventPartners\":{\"data\":null,\"navigation\":null,\"pagination\":{\"count\":0,\"current\":0,\"total\":0}},\"jobs\":{\"data\":null,\"navigation\":null,\"pagination\":\"~sitemaps~eventPartners~pagination\"},\"pages\":{\"data\":null,\"navigation\":null,\"pagination\":\"~sitemaps~eventPartners~pagination\"},\"projects\":{\"data\":null,\"navigation\":null,\"pagination\":\"~sitemaps~eventPartners~pagination\"},\"questions\":{\"data\":null,\"navigation\":null,\"pagination\":\"~sitemaps~eventPartners~pagination\"},\"users\":{\"data\":null,\"navigation\":null,\"pagination\":\"~sitemaps~eventPartners~pagination\"}},\"statusBar\":{\"message\":null,\"negative\":false,\"overtop\":false},\"subscriptions\":{\"action\":null,\"cart\":[],\"credits\":[],\"creditsCount\":0,\"fiveJobsPack\":null,\"proPlan\":null,\"singleJobPack\":null,\"threeJobsPack\":null},\"user\":{\"connections\":{\"connections\":{\"data\":[],\"meta\":{\"count\":0,\"current\":0,\"total\":0}}}}}"; window.__APOLLO_STATE__ = "{\"ROOT_QUERY\":{\"__typename\":\"Query\",\"userHasExperiencedGraphTimeout\":false}}";