diff --git a/asset-manifest.json b/asset-manifest.json index de8b70b..42f3269 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,8 +1,8 @@ { "files": { "main.css": "/static/css/main.bacb9886.chunk.css", - "main.js": "/static/js/main.f6e9f663.chunk.js", - "main.js.map": "/static/js/main.f6e9f663.chunk.js.map", + "main.js": "/static/js/main.1c1be52a.chunk.js", + "main.js.map": "/static/js/main.1c1be52a.chunk.js.map", "runtime-main.js": "/static/js/runtime-main.b7d341ba.js", "runtime-main.js.map": "/static/js/runtime-main.b7d341ba.js.map", "static/js/2.3c0de558.chunk.js": "/static/js/2.3c0de558.chunk.js", @@ -28,6 +28,6 @@ "static/js/runtime-main.b7d341ba.js", "static/js/2.3c0de558.chunk.js", "static/css/main.bacb9886.chunk.css", - "static/js/main.f6e9f663.chunk.js" + "static/js/main.1c1be52a.chunk.js" ] } \ No newline at end of file diff --git a/index.html b/index.html index ff63b21..2cc03b6 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Janne Koivisto
\ No newline at end of file +Janne Koivisto
\ No newline at end of file diff --git a/static/js/main.1c1be52a.chunk.js b/static/js/main.1c1be52a.chunk.js new file mode 100644 index 0000000..58eff9d --- /dev/null +++ b/static/js/main.1c1be52a.chunk.js @@ -0,0 +1,2 @@ +(this.webpackJsonpjanneilkka=this.webpackJsonpjanneilkka||[]).push([[0],{17:function(e,t,n){},37:function(e,t,n){},47:function(e,t,n){"use strict";n.r(t);var i=n(0),s=n.n(i),a=n(15),o=n.n(a),r=(n(37),n(49)),c=n(48),l=(n(17),n(3)),d=l.e.div({alignItems:"flex-start",display:"flex",justifyContent:"center",flexDirection:"column",padding:8}),h=n(1),j=function(e){var t=e.children;e.description,e.title;return Object(h.jsx)(h.Fragment,{children:Object(h.jsx)(d,{as:"main",children:t})})},b=n(8),u=n(51),m=n(53),p=n(9),g=n(50),O=n.p+"static/media/janne_pixelated.cd217e0b.png",x=[{name:"LinkedIn",url:"https://www.linkedin.com/in/janneilkka/"},{name:"Github",url:"https://www.github.com/janneilkka/"},{name:"Instagram",url:"https://instagram.com/janne.ilkka"},{name:"Spotify",url:"https://open.spotify.com/user/rogergregor"}],f=Object(l.e)(d)({alignItems:"center",justifyContent:"center",marginBottom:20}),w=l.e.p({marginTop:6,alignItems:"flex-start",display:"flex",justifyContent:"center",width:100,textAlign:"center",breakAfter:"auto",wordBreak:"break-all",color:"black"}),y=n(6);var v,k,I,S,C,A,M,P=function(e){var t=e.openPortfolio,n=e.openCV,i=e.openTunes;return Object(h.jsx)("div",{children:Object(h.jsxs)(r.a,{children:[Object(h.jsx)(c.a,{}),Object(h.jsxs)(f,{className:"pointer",onClick:function(){return t()},children:[Object(h.jsx)(y.d,{className:"pointer",variant:"32x32_4"}),Object(h.jsx)(w,{className:"pointer",children:"Portfolio.txt"})]}),Object(h.jsxs)(f,{className:"pointer",onClick:function(){return n()},children:[Object(h.jsx)(y.a,{className:"pointer",variant:"32x32_4"}),Object(h.jsx)(w,{className:"pointer",children:"CV.txt"})]}),Object(h.jsxs)(f,{className:"pointer",onClick:function(){return i()},children:[Object(h.jsx)(y.c,{className:"pointer",variant:"32x32_4"}),Object(h.jsx)(w,{className:"pointer",children:"Tunes"})]})]})})},T=n(10),R=n(23),D=n(52),B=(l.e.section(v||(v=Object(T.a)([""]))),Object(l.e)(D.a)(k||(k=Object(T.a)(["\n display: flex;\n margin: 0 10rem 10rem 10rem;\n width: 80vh;\n ","\n ","\n"])),R.a.lessThan("medium")(I||(I=Object(T.a)(["\n flex-direction: column;\n margin: 1rem 1rem 0 0.5rem;\n top: 0;\n width: fill-available;\n "]))),(function(e){return e.isMobile&&Object(l.d)(S||(S=Object(T.a)(["\n top: 0;\n "])))}))),H=Object(l.e)(p.a)(C||(C=Object(T.a)(["\n overflow-y: auto;\n max-height: 70vh;\n margin: auto;\n ","\n"])),R.a.lessThan("large")(A||(A=Object(T.a)(["\n max-height: 70vh;\n "])))),_=Object(l.e)(p.a)(M||(M=Object(T.a)(["\n background: #fff;\n boxshadow: in;\n height: 100%;\n padding: 20px;\n overflow-y: auto;\n"])));var F=function(e){var t=e.closePortfolio,n=e.isMobile;return Object(h.jsx)(B,{isMobile:n,title:"Portfolio.txt",closeModal:t,height:"100%",icon:Object(h.jsx)(y.d,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:t,children:"Close"})})}],children:Object(h.jsx)(H,{bg:"white",boxShadow:"in",children:Object(h.jsxs)(_,{children:[Object(h.jsx)("h1",{children:"Short Portfolio"}),Object(h.jsx)("p",{children:"This is a shortened, non-visual version of my portfolio without detailed information on the projects I have been working on. If you are interested in seeing any of the work I have done in more detail, please contact me for a call and I'll present the learnings in more detail."}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"B2C booking platform"}),Object(h.jsx)("h3",{children:"Anyhau Oy"}),Object(h.jsx)("span",{children:'Role: Design lead, product owner, "scrum master", product manager'}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Anyhau was a startup building a new marketplace that unites pet owners and pet businesses. At the moment there is no well-functioning booking platform that caters specifically to pet businesses\u2019 unique needs in comparison to, for example, beauty salons. All the while all pet businesses handle bookings in their own methods ranging from Google Calendar to whiteboards.",Object(h.jsx)("h4",{children:"Solution"}),"I ran daily routines (dailies, weeklies, demos, refinements, feedbacks etc.), seeing over the development work of the product, and kept all stakeholders up to date on the progress. Meanwhile, I designed the platform's MVP, multiple visual assets as well as coded some of the frontend (such as a Material theme for the component library). During the process I kept in close contact with both business and consumer users to listen to their needs. During the time, we also tried Shape Up-method as an agile method with great learnings."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"The Election Machines"}),Object(h.jsx)("h3",{children:"Sanoma Media Finland"}),Object(h.jsx)("span",{children:"Role: Lead Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"My main responsibility during my time at HS was to lead the design of the renewal of the election machines (vaalikone in Finnish), that is used by Helsingin Sanomat, Ilta-Sanomat and Aamulehti as well as regional brands. The new election machines needed to serve time well: use a consistent, well guided UX that is mainly used by younger audiences on mobile devices on the app or browser. Use cases would vary: from the urgent need for a candidate on the way to a voting site to browsing heavily months prior to elections.",Object(h.jsx)("h4",{children:"Solution"}),"From early on, the focus was on creating a platform that could last time well so we developed an in-house solution that had hints of gamification; tiny rewards for users to make filling the form as easy as possible. The election machine consisted of three user interfaces: the candidate machine, election machine to the voters and results service for election night. Design-wise the style was taken to monochromatic direction using as high contrasts as possible, giving homage to Nintendo-style gaming experience where user has a set of controls and where progress feels more like a game, rather than a set of questions. The main focus was on customization: making the use of election machine as fast as possible when time is of the essence to being able to dig in as deep as possible and answering as many questions as user wants."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Sokos ecommerce platform"}),Object(h.jsx)("h3",{children:"SOK Design"}),Object(h.jsx)("span",{children:"Role: UX Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"During my post as a designer for Sokos, I was in charge of designing the whole UI for a new ecommerce platform. This meant building a component library and whole UI design from the ground up; defining and creating the color models, typography rules, baseline grid, layout guidelines, variants and statuses as well as UX models. The old platform had met the end of its life cycle and thus, a new platform was custom-made.",Object(h.jsx)("h4",{children:"Solution"}),"After building a visual identity for the new platform, countless Figma prototypes later, the goal was to create a beta store. In the development of the beta store I positioned myself in several roles. In close cooperation with the front and back-end devs we started to add more layers onto the foundation built before. Using a design system, for which I had built a theme using Typescript, we aimed to scale the development and design to a more aligned model. From user tests we concluded UX improvements that were done as part of development. Alongside the ecommerce platform, one project that is worth mentioning is the development of SOK Design System. A rewarding experience in it was kickstarting work regarding a consistent iconography with designers from several parts of the organisation."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Website redesign & development"}),Object(h.jsx)("h3",{children:"Solidabis"}),Object(h.jsx)("span",{children:"Role: Designer/Developer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Wordpress-based website of Solidabis Solutions Oy had been deprecated style-wise and technically, using a theme that did not serve the users (editors) and viewers (potential customers, existing customers) well. Bulky and heavy font selections, unreadable texts, alignment issues and heavy load times were dragging the user experience. Moreover, a few vulnerabilities in the the theme had caused an issue for potential blacklisting of IP:s for frequent visitors.",Object(h.jsx)("h4",{children:"Solution"}),"As a solution, I redesigned the website entirely, using a Wordpress framework (Genesis) for which I developed a child theme, to align with the new styles and to give a brighter, more current look for the website. I redeveloped the website using PHP with basic HTML5 and CSS/SASS to stylize the website. After that, I designed and created new content for the website, including some iconography, plenty of copywriting and photography."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Accessibility audit"}),Object(h.jsx)("h3",{children:"Ruskeat tyt\xf6t"}),Object(h.jsx)("span",{children:"Role: Accessibility expert (pro bono)"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Ruskeat Tyt\xf6t Media was updating their website and I offered to help them out pro bono to respond to accessibility issues and identify possible solutions to existing problems. Ruskeat Tyt\xf6t Media is an independent online publication committed to centering and normalizing the perspectives of Brown women and people with underrepresented genders in Finnish and Nordic media. Ruskeat Tyt\xf6t Media is Finland\u2019s first culture media [and writing academy] for Brown Girls by Brown Girls.",Object(h.jsx)("h4",{children:"Solution"}),"Using the WCAG 2.1 guidelines, I audited the website during and after development, during which I drafted guidelines for how to solve problems with accessibility. As a deliverable, I also provided an accessibility report, found on their website."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Maintenance website"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: UI Designer & Developer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Finnish Patent and Registration Office (PRH) needed a website that would go online in the case of a service outage, maintenance break or any other unexpected event. The website would need to have three pages in Finnish, English and Swedish: front page, a list of unaffected services and contact information page, editable in Dreamweaver. The goal is to portray a message, that the service outage is temporary and will be fixed as soon as possible.",Object(h.jsx)("h4",{children:"Solution"}),"Using custom Bootstrap styling from the other project I had developed for PRH, I designed the page entity that responded to the aforementioned challenges. The page entity was a Bootstrap 4-powered website that would be customizable by the PRH communications department. I designed the elements and outlined the page which then complemented the style guide as an example page as well."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Edunsaaja-apuri accessibility fixes"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: UI Designer & Developer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Edunsaaja-apuri can be used to determine if an entity is entitled to benefits or required for providing extra information. After an accessibility audit, some fixes needed to be done to make the website accessible and WCAG 2.1 compliant.",Object(h.jsx)("h4",{children:"Solution"}),"Using WCAG guidelines and the audit, I fixed the accessibility errors and problems with the website which was done with JavaScript and HTML5&CSS. Most of the work was only code."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Auditor search service"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: UX&UI Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Auditor Oversight business unit of PRH had tendered out the redevelopment of their digital services to Gofore, a Finnish digital consultancy. However, the bid didn\u2019t include any designers but only process and software developers. As the only designer present in the redevelopment processes, I took it upon myself to ensure that the solutions were usable, accessible and responded to business demands.",Object(h.jsx)("h4",{children:"Solution"}),"The Auditor search service was done in React with Bootstrap and custom styling I had started to redevelop on another project. It reflected on a developing style guide and provided ideas for improvement for the design system as well."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Official PDF-document templates"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Finnish Patent and Registration Office (PRH) didn\u2019t have an official document model that was used on digitally-generated documents. The documents followed a simple automatically generated format, meaning that they were unaccessible, unrecognizable and subject to fraud. The documents would have to reflect PRH and their documents\u2019 official nature throughout their services from receipts to registrations and patents.",Object(h.jsx)("h4",{children:"Solution"}),"Together with another designer we designed a variety of document templates that we tested in workshops internally in each business unit that would be using the model. After, we modified the documents to respond to workshop feedback, made the documents accessible to screen readers and clarified the font usage and header levels, which were then delivered to the technical team as templates and instructions."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Design System - Bootstrap 4 -styles, StorybookJS, Sketch-library"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: UI Designer & Developer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Finnish Patent and Registration Office (PRH) partnered with us to maintain, redevelop and redesign their custom Bootstrap-styling. PRH didn\u2019t own a systematic way of presenting the styles nor instructing contractors and in-house developers how to use the styles, especially with accessibility in mind. The custom Bootstrap-styles had previously been developed by several contractors, based on Bootstrap 3 and used widely on a variety of digital services.",Object(h.jsx)("h4",{children:"Solution"}),"I suggested building a component library for developers and other stakeholders to use in their daily work on an open-source platform (Storybook). As part of the development, I redesiged the styling, fixed accessibility issues, created code snippets and documented each component individually and maintained the whole component library into an npm package. I developed the styleguide on JavaScript and matched it with a Sketch-library from scratch to support designers; a starting point of a design system for PRH."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Brand & Communications Guidelines"}),Object(h.jsx)("h3",{children:"Solidabis Oy"}),Object(h.jsx)("span",{children:"Role: Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Solidabis is a growing software development company that has had a variety of structural and cultural changes in its history since the founding in 2016. The changes have led to the company not having clear and concise image to potential clients, future employees or the media. Logos and colors are not properly defined and mixed versions of the logos are circulating around in workspaces.",Object(h.jsx)("h4",{children:"Solution"}),"I developed brand and visual styleguide to help everyone in their daily client work. It includes the correct color codes, tone of voice, samples of text and imagery as well as proper logo usage. I designed document templates for Word and PowerPoint as well as other brand assets, such as an icon and font bank, Adobe CC color package, social media hashtags and automated marketing campaigns."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Designer on various projects"}),Object(h.jsx)("h3",{children:"IBM"}),Object(h.jsx)("span",{children:"Role: UX Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Due to strict confidentiality and the intellectual property laws implemented in the contract signed with IBM, I am not allowed to present my work to outside parties nor discuss the clients I have worked with. A few of the Finnish clients which have publicly promoted IBM\u2019s cooperation, such as Finnair and Nokia, are just some of the clients for which I worked for as a designer.",Object(h.jsx)("h4",{children:"Focus"}),"All of the work I did at IBM was enterprise-centered, focusing on enterprise-level users and employee experience rather than customer and commercial. Most design work had to do with Watson AI-powered chatbots for IBM\u2019s clients. My tasks varied from leading workshops, to user interviews and tests, to collaboratively working with data scientists, developers and product owners on a daily basis."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"University of Helsinki Metro Station Visual Outlook"}),Object(h.jsx)("h3",{children:"HKL - Helsinki City Transportation"}),Object(h.jsx)("span",{children:"Role: Visual Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Helsinki City Transport HKL organized an open call for artworks for all the metro stations in the Helsinki branch. Participation was anonymous and the submissions would be judged based on the artistic value and historical implications as well as timelessness. Together with a good friend of mine,"," ",Object(h.jsx)("a",{href:"http://misaelrojas.com/",children:"Misael Rojas"}),", we submitted an artwork for the University of Helsinki metro station, which is one of the three busiest metro stations in Helsinki due to its location near the governmental, private enterprise hubs.",Object(h.jsx)("h4",{children:"Outcome"}),"The design takes into account the historical nature of the station, being the last one to be completed in Helsinki in the late 90s. Neon lights and tile patterns complement the station\u2019s spirit. We took nearly 300 images from which we vectorized shapes from iconic buildings around the station. It gives the daily user of the metro station something new to look for and spot in their surroundings during their daily routines."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"#Olotila Street Art Collaborative Installation"}),Object(h.jsx)("h3",{children:"City of Helsinki Urban Environment Division"}),Object(h.jsx)("span",{children:"Role: Producer / Curator"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"In 2018 I worked as a Communications Intern at the City of Helsinki Urban Environment Division. During the summer I noticed the largest construction site of Central Library Oodi being surrounded by light green wooden walls. In front of the Finnish Parliament, it is the most central site in Helsinki. I gathered funding and organized to get artists from womens\u2019 collective Mimmit Peinttaa to cover these walls with art and stories.",Object(h.jsx)("h4",{children:"Outcome"}),"The walls were painted in early September. I made and designed the promotional texts and logos in stencil form for the city and companies. The works have appeared in many publications such as Helsingin Sanomat and several Instagram accounts."]})]})})})};var U=function(e){var t=e.closeCV,n=e.isMobile;return Object(h.jsx)(B,{isMobile:n,title:"CV.txt",closeModal:t,height:"100%",icon:Object(h.jsx)(y.a,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:t,children:"Close"})})}],children:Object(h.jsx)(H,{bg:"white",boxShadow:"in",children:Object(h.jsxs)(_,{children:[Object(h.jsx)("h1",{children:"Curriculum Vitae"}),Object(h.jsx)("p",{children:"Product design, user-centered design methods and agile software development. These are some of the keywords that describe my interests and know-how. I have a long work history in communication and user-centered design. With my futuristic and social mind, I shine in duties where I get to use my social skills and design talents in practice, such as in project management, product design and product ownership."}),Object(h.jsx)("h2",{children:"Latest Work History"}),Object(h.jsx)("h3",{children:"Head of Design, Product Owner - Anyhau "}),Object(h.jsxs)("p",{children:["A leadership role in taking charge of the new platform's design for all of"," ",Object(h.jsx)("a",{href:"https://anyhau.fi",target:"_blank",rel:"noopener noreferrer",children:"Anyhau"})," ","products for two user groups: pet owners and pet businesses. Alongside leading the design and organizing daily design work, having ownership in project management and organizing daily ceremonies, as well as pruning the backlog and keeping focus for the whole team."]}),Object(h.jsx)("h3",{children:"Designer - Sanoma Media Finland Oy (HS Datadesk) "}),Object(h.jsxs)("p",{children:["Maintaining and developing new storytelling solutions, journalistic tools and data visualization at"," ",Object(h.jsx)("a",{href:"https://hs.fi",target:"_blank",rel:"noopener noreferrer",children:"Helsingin Sanomat"})," ","Datadesk. Biggest project from the time at Sanoma was being the design lead and principal designer for the"," ",Object(h.jsx)("a",{href:"https://vaalikone.fi",target:"_blank",rel:"noopener noreferrer",children:"election machines"})," ","for all Sanoma brands (Aamulehti, HS, Ilta-Sanomat, regional brands). The election machine consists of three user interfaces: the candidate machine, election machine to the voters and results service for election night. Read more about the election machine"," ",Object(h.jsx)("a",{href:"https://www.vaalikone.fi/eduskunta2023/hs/faq",target:"_blank",rel:"noopener noreferrer",children:"here"}),"."]}),Object(h.jsx)("h3",{children:"UX Designer - S-group / Sokos "}),Object(h.jsxs)("p",{children:["Developing a new"," ",Object(h.jsx)("a",{href:"https://sokos.fi",target:"_blank",rel:"noopener noreferrer",children:"Sokos.fi"})," ","webstore and driving user-centric design within the community. Alongside Sokos development, participating in internal design system development and developing company-wide design processes."]}),Object(h.jsx)("h3",{children:"UX/UI Designer - Solidabis Oy "}),Object(h.jsxs)("p",{children:["Design and UX consultant work focusing on the public sector clients and design systems. One of the biggest achievements was a Storybook-based styleguide which I coded, designed and made from scratch as a one person team with minimal budget. Part-time managing Solidabis marketing strategy, during which I single handedly redesigned and redeveloped"," ",Object(h.jsx)("a",{href:"https://solidabis.com",target:"_blank",rel:"noopener noreferrer",children:"Solidabis' Wordpress-based website"})," ","using the Genesis framework and coding a custom theme on PHP, CSS and HTML."]}),Object(h.jsx)("h3",{children:"Junior UX/UI Designer - IBM "}),Object(h.jsxs)("p",{children:["UI development, front-end collaboration, visual and graphic design. Client cooperation and usability assessments of implemented products daily. One of the greatest accomplishments was to get my team to use the"," ",Object(h.jsx)("a",{href:"https://carbondesignsystem.com",target:"_blank",rel:"noopener noreferrer",children:"Carbon design system"}),", therefore increasing consistency and scaling with demos."]}),Object(h.jsx)("h2",{children:"Education"}),Object(h.jsx)("h3",{children:"Master of Arts in New Media - Aalto University"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("a",{href:"https://aaltodoc.aalto.fi/handle/123456789/40753",target:"_blank",rel:"noopener noreferrer",children:"My Master\u2019s Thesis"})," ","in New Media Design & Production handled the issues faced by a UI/UX designer on a daily basis with design systems with a designed concept to improve the use of systems in daily tasks. Usability School as minor, major New Media studies."]}),Object(h.jsx)("h3",{children:"Bachelor of Arts in Audiovisual Media - University of Lapland"}),Object(h.jsx)("p",{children:"Bachelor studies in Audiovisual Media with a focus in user inter-action and multimedia studies. Thesis work on proactive UX design for a mobile interface. Exchange studies at Institut d'\xc9tudes Politiques de Paris in Latin American Studies."}),Object(h.jsx)("h3",{children:"International Baccalaureate - UWC Costa Rica"}),Object(h.jsx)("p",{children:"International Baccalaureate degree at the United World College Costa Rica as the Finnish Cultural Fund fellow and Finnish repre-sentative."}),Object(h.jsx)("h2",{children:"Languages in order of strength"}),Object(h.jsxs)("ul",{children:[Object(h.jsx)("li",{children:"Finnish"}),Object(h.jsx)("li",{children:"English"}),Object(h.jsx)("li",{children:"Spanish"})]}),Object(h.jsx)("p",{children:"Elementary knowledge in following"}),Object(h.jsxs)("ul",{children:[Object(h.jsx)("li",{children:"French"}),Object(h.jsx)("li",{children:"Swedish"}),Object(h.jsx)("li",{children:"Portuguese"})]})]})})})};var W=function(e){var t=e.closeTunes,n=e.isMobile;return Object(h.jsx)(B,{isMobile:n,title:"Tunes",closeModal:t,height:"100%",icon:Object(h.jsx)(y.c,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:t,children:"Close"})})}],children:Object(h.jsx)(p.a,{boxShadow:"none",style:{height:"352px"},children:Object(h.jsx)("iframe",{src:"https://open.spotify.com/embed/playlist/42lX7a4yx3rJJcDSimyS9S?utm_source=generator&theme=0",width:"100%",height:"352px",frameborder:"0",allow:"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",loading:"lazy",title:"The Ultimate Lo-Fi House Playlist on Spotify"})})})};var J=function(){var e=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),t=Object(i.useState)([]),n=Object(b.a)(t,1)[0],a=Object(i.useState)(!0),o=Object(b.a)(a,2),l=o[0],d=o[1],j=Object(i.useCallback)((function(){d(!0)}),[]),f=Object(i.useCallback)((function(){d(!1)}),[]),w=Object(i.useState)(!1),v=Object(b.a)(w,2),k=v[0],I=v[1],S=Object(i.useCallback)((function(){I(!0)}),[]),C=Object(i.useCallback)((function(){I(!1)}),[]),A=Object(i.useState)(!1),M=Object(b.a)(A,2),T=M[0],R=M[1],D=Object(i.useCallback)((function(){R(!0)}),[]),J=Object(i.useCallback)((function(){R(!1)}),[]),L=Object(i.useState)(!1),V=Object(b.a)(L,2),E=V[0],N=V[1],z=Object(i.useCallback)((function(){N(!0)}),[]),G=Object(i.useCallback)((function(){N(!1)}),[]),X=Object(i.useState)(!1),q=Object(b.a)(X,2),K=q[0],Q=q[1],Z=Object(i.useState)(!1),Y=Object(b.a)(Z,2),$=Y[0],ee=Y[1],te=Object(i.useState)(!1),ne=Object(b.a)(te,2),ie=ne[0],se=ne[1];return Object(h.jsxs)(r.a,{theme:"millenium",children:[Object(h.jsx)(c.a,{}),l&&Object(h.jsx)(B,{isMobile:e,icon:Object(h.jsx)(y.i,{variant:"32x32_4"}),title:"About.txt",closeModal:f,menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:f,children:"Close"})})}],children:Object(h.jsx)(H,{bg:"white",boxShadow:"out",children:Object(h.jsxs)(_,{children:[Object(h.jsx)("h1",{children:"Moikka!"}),Object(h.jsx)("p",{children:"I'm Janne, a designer of many talents from Helsinki. I've been working lately with product development in many roles and domains: from ecommerce, to public sector, to startups. I'm into structured and systems oriented software development, where design is agile and rapid."}),Object(h.jsxs)("p",{children:["This app, sort of a playground of ideas, has been built with Create React App and"," ",Object(h.jsx)("a",{href:"https://github.com/React95/React95",target:"_blank",rel:"noopener noreferrer",children:"React95"}),", an open-source Windows95 component library for React. If you're interested in this project even further check out the"," ",Object(h.jsx)("a",{href:"https://www.figma.com/community/file/1217110360892669474",target:"_blank",rel:"noopener noreferrer",children:"React95 component library on Figma"})," ","that I made as a past-time project."]}),Object(h.jsxs)("span",{children:[Object(h.jsx)("a",{href:"https://windowswallpaper.miraheze.org/wiki/File:Clouds_(Windows_95).png",target:"_blank",rel:"noopener noreferrer",children:"Background"})," ","by WindowsAesthetics /"," ",Object(h.jsx)("a",{href:"https://creativecommons.org/licenses/by-sa/4.0/",target:"_blank",rel:"noopener noreferrer",children:"CC BY-SA 4.0"})]})]})})}),k&&Object(h.jsx)(B,{isMobile:e,title:"Skills.txt",closeModal:C,icon:Object(h.jsx)(y.g,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:C,children:"Close"})})}],children:Object(h.jsx)(H,{bg:"white",boxShadow:"in",children:Object(h.jsx)(_,{children:Object(h.jsxs)("p",{children:[" ",Object(h.jsx)("h1",{children:"Some of my skills"}),"I disagree with quantifying skills with numbers, percentages etc. - are skills really something people can measure? However, here is a rough estimate of my latest skills.",Object(h.jsx)("br",{}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Design tools"}),Object(h.jsx)("h3",{children:"Figma, Sketch"}),Object(h.jsx)(m.a,{width:250,percent:90}),Object(h.jsx)("h3",{children:"Adobe CC"}),Object(h.jsx)(m.a,{width:250,percent:85}),Object(h.jsx)("h3",{children:"Prototyping, wireframing, user flows"}),Object(h.jsx)(m.a,{width:250,percent:80}),Object(h.jsx)("h3",{children:"User testing, interviewing"}),Object(h.jsx)(m.a,{width:250,percent:80}),Object(h.jsx)("h3",{children:"WCAG 2.1"}),Object(h.jsx)(m.a,{width:250,percent:75}),Object(h.jsx)("br",{}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Dev tools"}),Object(h.jsx)("h3",{children:"Storybook(JS)"}),Object(h.jsx)(m.a,{width:250,percent:75}),Object(h.jsx)("h3",{children:"HTML, CSS, SASS"}),Object(h.jsx)(m.a,{width:250,percent:75}),Object(h.jsx)("h3",{children:"Wordpress (PHP/Themes)"}),Object(h.jsx)(m.a,{width:250,percent:70}),Object(h.jsx)("h3",{children:"Git"}),Object(h.jsx)(m.a,{width:250,percent:60}),Object(h.jsx)("h3",{children:"Raspberry Pi & Arduino"}),Object(h.jsx)(m.a,{width:250,percent:30}),Object(h.jsx)("h3",{children:"React"}),Object(h.jsx)(m.a,{width:250,percent:30}),Object(h.jsx)("h3",{children:"Vue"}),Object(h.jsx)(m.a,{width:250,percent:15}),Object(h.jsx)("br",{}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Other Skills"}),Object(h.jsxs)("ul",{children:[Object(h.jsx)("li",{children:"Agile methods"}),Object(h.jsx)("li",{children:"Product development"}),Object(h.jsx)("li",{children:"Project management"}),Object(h.jsx)("li",{children:"Design systems"}),Object(h.jsx)("li",{children:"User interviews"}),Object(h.jsx)("li",{children:"User testing"}),Object(h.jsx)("li",{children:"Wireframing and prototyping"}),Object(h.jsx)("li",{children:"Visual design"}),Object(h.jsx)("li",{children:"Research"}),Object(h.jsx)("li",{children:"Copywriting and social media"}),Object(h.jsx)("li",{children:"Content creation"}),Object(h.jsx)("li",{children:"Workshops"}),Object(h.jsx)("li",{children:"Facilitation"}),Object(h.jsx)("li",{children:"Concept creation"})]})]})})})}),T&&Object(h.jsxs)(B,{isMobile:e,title:"janne_compressed_for_web.jpeg",closeModal:J,icon:Object(h.jsx)(y.j,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:J,children:"Close"})})}],children:[Object(h.jsx)(p.a,{boxShadow:"none",style:{margin:"auto"},children:Object(h.jsx)("img",{src:O,"aria-hidden":!0,alt:"Janne as a pixelated image",class:"full-width-image"})}),Object(h.jsx)("div",{class:"image-text",children:Object(h.jsx)("p",{children:"janne_compressed_for_web.jpeg"})})]}),E&&Object(h.jsx)(B,{isMobile:e,closeModal:G,height:"100%",icon:Object(h.jsx)(y.c,{variant:"32x32_4"}),width:340,menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:G,children:"Close"})})}],title:"My_Alter_Ego.doc",children:Object(h.jsxs)(_,{children:[Object(h.jsx)("h1",{children:"A Vaporwave Album"}),Object(h.jsx)("p",{children:"In 2018 I took part in a workshop in Lithuania at the Vilnius Art Academy in producing a Vaporwave Album with participants coming in from around Europe."}),Object(h.jsx)("p",{children:"Over the course of the weekend we produced music videos, songs and more. I produced two songs for the album and a music video. The album can be found on streaming services."}),Object(h.jsx)("a",{href:"https://open.spotify.com/album/0pCqTDsI4zOZXZJnxx2yPT?si=JW5qpLJJQsO3eK2m65FQBQ",children:"The album on Spotify"}),Object(h.jsx)("p",{}),Object(h.jsx)("br",{}),Object(h.jsx)("div",{children:Object(h.jsx)("iframe",{src:"https://www.youtube.com/embed/7SyxEF-QG_M",frameborder:"0",width:"100%",title:"A Song from a Vaporwave Album",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0})})]})}),Object(h.jsx)(g.a,{list:Object(h.jsxs)(u.a,{children:[Object(h.jsx)(u.a.Item,{as:"a",href:"mailto:janne.ilkka@gmail.com",icon:Object(h.jsx)(y.f,{variant:"32x32_4"}),target:"_blank",children:"Email me"}),Object(h.jsx)(u.a.Divider,{}),Object(h.jsxs)(u.a.Item,{icon:Object(h.jsx)(y.h,{variant:"32x32_4"}),children:["Socials",Object(h.jsx)(u.a,{children:x.map((function(e){var t=e.icon,n=e.name,i=e.url;return Object(h.jsx)(u.a.Item,{as:"a",href:i,icon:t,rel:"noopener noreferrer",target:"_blank",children:n},n)}))})]}),Object(h.jsxs)(u.a.Item,{icon:Object(h.jsx)(y.c,{variant:"32x32_4"}),children:["Tunes",Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:z,icon:Object(h.jsx)(y.c,{variant:"32x32_4"}),children:"Janne's Vaporwave Story from 2018"})})]}),Object(h.jsx)(u.a.Item,{icon:Object(h.jsx)(y.j,{variant:"32x32_4"}),onClick:D,children:"Janne"}),Object(h.jsx)(u.a.Item,{icon:Object(h.jsx)(y.g,{variant:"32x32_4"}),onClick:S,children:"Skills"}),Object(h.jsx)(u.a.Divider,{}),Object(h.jsx)(u.a.Item,{icon:Object(h.jsx)(y.i,{variant:"32x32_4"}),onClick:j,children:"About"})]})}),Object(h.jsxs)(s.a.Fragment,{children:[Object(h.jsx)(P,{openPortfolio:function(){Q(!0)},openCV:function(){ee(!0)},openTunes:function(){se(!0)}}),K&&Object(h.jsx)(F,{items:n,closePortfolio:function(){Q(!1)},isMobile:e}),$&&Object(h.jsx)(U,{items:n,closeCV:function(){ee(!1)},isMobile:e}),ie&&Object(h.jsx)(W,{items:n,closeTunes:function(){se(!1)},isMobile:e})]})]})},L=function(){return Object(h.jsx)("body",{class:"background",children:Object(h.jsxs)(r.a,{children:[Object(h.jsx)(c.a,{}),Object(h.jsxs)(j,{children:[Object(h.jsx)(J,{}),P]})]})})};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));o.a.render(Object(h.jsx)(L,{}),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}},[[47,1,2]]]); +//# sourceMappingURL=main.1c1be52a.chunk.js.map \ No newline at end of file diff --git a/static/js/main.1c1be52a.chunk.js.map b/static/js/main.1c1be52a.chunk.js.map new file mode 100644 index 0000000..43ff61f --- /dev/null +++ b/static/js/main.1c1be52a.chunk.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["components/desktopBox.jsx","components/mainPage.jsx","janne_pixelated.png","components/socialMedia.jsx","components/iconBox.jsx","components/iconText.jsx","components/desktopIcons.jsx","components/layoutStyling.js","components/portfolio.jsx","components/cv.jsx","components/tunes.jsx","components/desktop.jsx","App.js","serviceWorker.js","index.js"],"names":["Box","styled","div","alignItems","display","justifyContent","flexDirection","padding","Page","_ref","children","description","title","_jsx","_Fragment","as","socialMedia","name","url","IconBox","marginBottom","IconText","p","marginTop","width","textAlign","breakAfter","wordBreak","color","Shortcuts","openPortfolio","openCV","openTunes","_jsxs","ThemeProvider","GlobalStyle","className","onClick","Explorer103","variant","Awfxcg321303","CdMusic","layoutMain","section","_templateObject","_taggedTemplateLiteral","Modal","_templateObject2","media","lessThan","_templateObject3","props","isMobile","css","_templateObject4","layoutMainContent","Frame","_templateObject5","_templateObject6","textModal","_templateObject7","Portfolio","closePortfolio","S","closeModal","height","icon","menu","list","List","Item","bg","boxShadow","href","CV","closeCV","target","rel","Tunes","closeTunes","style","src","frameborder","allow","loading","Desktop","test","navigator","userAgent","_useState","useState","items","_slicedToArray","_useState3","_useState4","showAboutModal","setShowAboutModal","handleOpenAboutModal","useCallback","handleCloseAboutModal","_useState5","_useState6","showSkillsModal","setShowSkillsModal","handleOpenSkillsModal","handleCloseSkillsModal","_useState7","_useState8","showPhotoModal","setShowPhotoModal","handleOpenPhotoModal","handleClosePhotoModal","_useState9","_useState10","showVaporwaveModal1","setShowVaporwaveModal1","handleOpenVaporwaveModal1","handleCloseVaporwaveModal1","_useState11","_useState12","explorerOpened","togglePortfolio","_useState13","_useState14","cvOpened","toggleCV","_useState15","_useState16","tunesOpened","toggleTunes","theme","Progman37","Mspaint","ProgressBar","percent","User","margin","Janne_pixelated","alt","class","allowfullscreen","TaskBar","Mail","Divider","Progman34","map","React","Fragment","Home","DesktopIcons","Boolean","window","location","hostname","match","ReactDOM","render","App","document","getElementById","serviceWorker","ready","then","registration","unregister"],"mappings":"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","file":"static/js/main.1c1be52a.chunk.js","sourcesContent":["import styled from \"styled-components\";\n\nconst Box = styled.div({\n alignItems: \"flex-start\",\n display: \"flex\",\n justifyContent: \"center\",\n flexDirection: \"column\",\n padding: 8,\n});\n\nexport default Box;\n","import React from \"react\";\nimport \"./styles.scss\";\nimport PropTypes from \"prop-types\";\nimport Box from \"./desktopBox\";\n\nconst PageProps = {\n children: PropTypes.node.isRequired,\n description: PropTypes.string,\n title: PropTypes.string,\n};\n\nconst Page = ({ children, description = null, title = \"Janne Koivisto\" }) => (\n <>\n {children}\n \n);\n\nPage.propTypes = PageProps;\n\nexport default Page;\n","export default __webpack_public_path__ + \"static/media/janne_pixelated.cd217e0b.png\";","const socialMedia = [\n {\n name: \"LinkedIn\",\n url: \"https://www.linkedin.com/in/janneilkka/\",\n },\n {\n name: \"Github\",\n url: \"https://www.github.com/janneilkka/\",\n },\n {\n name: \"Instagram\",\n url: \"https://instagram.com/janne.ilkka\",\n },\n {\n name: \"Spotify\",\n url: \"https://open.spotify.com/user/rogergregor\",\n },\n];\n\nexport default socialMedia;\n","import styled from \"styled-components\";\n\nimport Box from \"./desktopBox\";\n\nconst IconBox = styled(Box)({\n alignItems: \"center\",\n justifyContent: \"center\",\n marginBottom: 20,\n});\n\nexport default IconBox;\n","import styled from \"styled-components\";\n\nconst IconText = styled.p({\n marginTop: 6,\n alignItems: \"flex-start\",\n display: \"flex\",\n justifyContent: \"center\",\n width: 100,\n textAlign: \"center\",\n breakAfter: \"auto\",\n wordBreak: \"break-all\",\n color: \"black\",\n});\n\nexport default IconText;\n","import React from \"react\";\nimport { GlobalStyle, ThemeProvider } from \"@react95/core\";\nimport IconBox from \"./iconBox\";\nimport IconText from \"./iconText\";\nimport \"./styles.scss\";\nimport { Awfxcg321303, Explorer103, CdMusic } from \"@react95/icons\";\n\nfunction Shortcuts({ openPortfolio, openCV, openTunes }) {\n return (\n
\n \n \n openPortfolio()}>\n \n Portfolio.txt\n \n openCV()}>\n \n CV.txt\n \n openTunes()}>\n \n Tunes\n \n \n
\n );\n}\n\nexport default Shortcuts;\n","import styled, { css } from \"styled-components\";\nimport media from \"styled-media-query\";\nimport { Modal, Frame } from \"@react95/core\";\n\nexport const layoutWrapper = styled.section``;\n\nexport const layoutMain = styled(Modal)`\n display: flex;\n margin: 0 10rem 10rem 10rem;\n width: 80vh;\n ${media.lessThan(\"medium\")`\n flex-direction: column;\n margin: 1rem 1rem 0 0.5rem;\n top: 0;\n width: fill-available;\n `}\n ${(props) =>\n props.isMobile &&\n css`\n top: 0;\n `}\n`;\n\nexport const layoutMainContent = styled(Frame)`\n overflow-y: auto;\n max-height: 70vh;\n margin: auto;\n ${media.lessThan(\"large\")`\n max-height: 70vh;\n `}\n`;\n\nexport const textModal = styled(Frame)`\n background: #fff;\n boxshadow: in;\n height: 100%;\n padding: 20px;\n overflow-y: auto;\n`;\n","import React from \"react\";\nimport { List } from \"@react95/core\";\nimport { Explorer103 } from \"@react95/icons\";\nimport * as S from \"./layoutStyling\";\n\nfunction Portfolio({ closePortfolio, isMobile }) {\n return (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n

Short Portfolio

\n

\n This is a shortened, non-visual version of my portfolio without\n detailed information on the projects I have been working on. If you\n are interested in seeing any of the work I have done in more detail,\n please contact me for a call and I'll present the learnings in more\n detail.\n

\n
\n

B2C booking platform

\n

Anyhau Oy

\n \n Role: Design lead, product owner, \"scrum master\", product manager\n \n

\n

Background

\n Anyhau was a startup building a new marketplace that unites pet\n owners and pet businesses. At the moment there is no\n well-functioning booking platform that caters specifically to pet\n businesses’ unique needs in comparison to, for example, beauty\n salons. All the while all pet businesses handle bookings in their\n own methods ranging from Google Calendar to whiteboards.\n

Solution

I ran daily routines (dailies, weeklies, demos,\n refinements, feedbacks etc.), seeing over the development work of\n the product, and kept all stakeholders up to date on the progress.\n Meanwhile, I designed the platform's MVP, multiple visual assets as\n well as coded some of the frontend (such as a Material theme for the\n component library). During the process I kept in close contact with\n both business and consumer users to listen to their needs. During\n the time, we also tried Shape Up-method as an agile method with\n great learnings.\n

\n
\n

The Election Machines

\n

Sanoma Media Finland

\n Role: Lead Designer\n

\n

Background

\n My main responsibility during my time at HS was to lead the design\n of the renewal of the election machines (vaalikone in Finnish), that\n is used by Helsingin Sanomat, Ilta-Sanomat and Aamulehti as well as\n regional brands. The new election machines needed to serve time\n well: use a consistent, well guided UX that is mainly used by\n younger audiences on mobile devices on the app or browser. Use cases\n would vary: from the urgent need for a candidate on the way to a\n voting site to browsing heavily months prior to elections.\n

Solution

\n From early on, the focus was on creating a platform that could last\n time well so we developed an in-house solution that had hints of\n gamification; tiny rewards for users to make filling the form as\n easy as possible. The election machine consisted of three user\n interfaces: the candidate machine, election machine to the voters\n and results service for election night. Design-wise the style was\n taken to monochromatic direction using as high contrasts as\n possible, giving homage to Nintendo-style gaming experience where\n user has a set of controls and where progress feels more like a\n game, rather than a set of questions. The main focus was on\n customization: making the use of election machine as fast as\n possible when time is of the essence to being able to dig in as deep\n as possible and answering as many questions as user wants.\n

\n
\n

Sokos ecommerce platform

\n

SOK Design

\n Role: UX Designer\n

\n

Background

\n During my post as a designer for Sokos, I was in charge of designing\n the whole UI for a new ecommerce platform. This meant building a\n component library and whole UI design from the ground up; defining\n and creating the color models, typography rules, baseline grid,\n layout guidelines, variants and statuses as well as UX models. The\n old platform had met the end of its life cycle and thus, a new\n platform was custom-made.\n

Solution

\n After building a visual identity for the new platform, countless\n Figma prototypes later, the goal was to create a beta store. In the\n development of the beta store I positioned myself in several roles.\n In close cooperation with the front and back-end devs we started to\n add more layers onto the foundation built before. Using a design\n system, for which I had built a theme using Typescript, we aimed to\n scale the development and design to a more aligned model. From user\n tests we concluded UX improvements that were done as part of\n development. Alongside the ecommerce platform, one project that is\n worth mentioning is the development of SOK Design System. A\n rewarding experience in it was kickstarting work regarding a\n consistent iconography with designers from several parts of the\n organisation.\n

\n
\n

Website redesign & development

\n

Solidabis

\n Role: Designer/Developer\n

\n

Background

\n The Wordpress-based website of Solidabis Solutions Oy had been\n deprecated style-wise and technically, using a theme that did not\n serve the users (editors) and viewers (potential customers, existing\n customers) well. Bulky and heavy font selections, unreadable texts,\n alignment issues and heavy load times were dragging the user\n experience. Moreover, a few vulnerabilities in the the theme had\n caused an issue for potential blacklisting of IP:s for frequent\n visitors.\n

Solution

\n As a solution, I redesigned the website entirely, using a Wordpress\n framework (Genesis) for which I developed a child theme, to align\n with the new styles and to give a brighter, more current look for\n the website. I redeveloped the website using PHP with basic HTML5\n and CSS/SASS to stylize the website. After that, I designed and\n created new content for the website, including some iconography,\n plenty of copywriting and photography.\n

\n
\n

Accessibility audit

\n

Ruskeat tytöt

\n Role: Accessibility expert (pro bono)\n

\n

Background

\n Ruskeat Tytöt Media was updating their website and I offered to help\n them out pro bono to respond to accessibility issues and identify\n possible solutions to existing problems. Ruskeat Tytöt Media is an\n independent online publication committed to centering and\n normalizing the perspectives of Brown women and people with\n underrepresented genders in Finnish and Nordic media. Ruskeat Tytöt\n Media is Finland’s first culture media [and writing academy] for\n Brown Girls by Brown Girls.\n

Solution

\n Using the WCAG 2.1 guidelines, I audited the website during and\n after development, during which I drafted guidelines for how to\n solve problems with accessibility. As a deliverable, I also provided\n an accessibility report, found on their website.\n

\n
\n

Maintenance website

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: UI Designer & Developer\n

\n

Background

\n The Finnish Patent and Registration Office (PRH) needed a website\n that would go online in the case of a service outage, maintenance\n break or any other unexpected event. The website would need to have\n three pages in Finnish, English and Swedish: front page, a list of\n unaffected services and contact information page, editable in\n Dreamweaver. The goal is to portray a message, that the service\n outage is temporary and will be fixed as soon as possible.\n

Solution

\n Using custom Bootstrap styling from the other project I had\n developed for PRH, I designed the page entity that responded to the\n aforementioned challenges. The page entity was a Bootstrap 4-powered\n website that would be customizable by the PRH communications\n department. I designed the elements and outlined the page which then\n complemented the style guide as an example page as well.\n

\n
\n

Edunsaaja-apuri accessibility fixes

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: UI Designer & Developer\n

\n

Background

\n Edunsaaja-apuri can be used to determine if an entity is entitled to\n benefits or required for providing extra information. After an\n accessibility audit, some fixes needed to be done to make the\n website accessible and WCAG 2.1 compliant.\n

Solution

\n Using WCAG guidelines and the audit, I fixed the accessibility\n errors and problems with the website which was done with JavaScript\n and HTML5&CSS. Most of the work was only code.\n

\n
\n

Auditor search service

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: UX&UI Designer\n

\n

Background

\n The Auditor Oversight business unit of PRH had tendered out the\n redevelopment of their digital services to Gofore, a Finnish digital\n consultancy. However, the bid didn’t include any designers but only\n process and software developers. As the only designer present in the\n redevelopment processes, I took it upon myself to ensure that the\n solutions were usable, accessible and responded to business demands.\n

Solution

\n The Auditor search service was done in React with Bootstrap and\n custom styling I had started to redevelop on another project. It\n reflected on a developing style guide and provided ideas for\n improvement for the design system as well.\n

\n
\n

Official PDF-document templates

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: Designer\n

\n

Background

\n The Finnish Patent and Registration Office (PRH) didn’t have an\n official document model that was used on digitally-generated\n documents. The documents followed a simple automatically generated\n format, meaning that they were unaccessible, unrecognizable and\n subject to fraud. The documents would have to reflect PRH and their\n documents’ official nature throughout their services from receipts\n to registrations and patents.\n

Solution

\n Together with another designer we designed a variety of document\n templates that we tested in workshops internally in each business\n unit that would be using the model. After, we modified the documents\n to respond to workshop feedback, made the documents accessible to\n screen readers and clarified the font usage and header levels, which\n were then delivered to the technical team as templates and\n instructions.\n

\n
\n

\n Design System - Bootstrap 4 -styles, StorybookJS, Sketch-library\n

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: UI Designer & Developer\n

\n

Background

\n The Finnish Patent and Registration Office (PRH) partnered with us\n to maintain, redevelop and redesign their custom Bootstrap-styling.\n PRH didn’t own a systematic way of presenting the styles nor\n instructing contractors and in-house developers how to use the\n styles, especially with accessibility in mind. The custom\n Bootstrap-styles had previously been developed by several\n contractors, based on Bootstrap 3 and used widely on a variety of\n digital services.\n

Solution

I suggested building a component library for\n developers and other stakeholders to use in their daily work on an\n open-source platform (Storybook). As part of the development, I\n redesiged the styling, fixed accessibility issues, created code\n snippets and documented each component individually and maintained\n the whole component library into an npm package. I developed the\n styleguide on JavaScript and matched it with a Sketch-library from\n scratch to support designers; a starting point of a design system\n for PRH.\n

\n
\n

Brand & Communications Guidelines

\n

Solidabis Oy

\n Role: Designer\n

\n

Background

\n Solidabis is a growing software development company that has had a\n variety of structural and cultural changes in its history since the\n founding in 2016. The changes have led to the company not having\n clear and concise image to potential clients, future employees or\n the media. Logos and colors are not properly defined and mixed\n versions of the logos are circulating around in workspaces.\n

Solution

I developed brand and visual styleguide to help\n everyone in their daily client work. It includes the correct color\n codes, tone of voice, samples of text and imagery as well as proper\n logo usage. I designed document templates for Word and PowerPoint as\n well as other brand assets, such as an icon and font bank, Adobe CC\n color package, social media hashtags and automated marketing\n campaigns.\n

\n
\n

Designer on various projects

\n

IBM

\n Role: UX Designer\n

\n

Background

\n Due to strict confidentiality and the intellectual property laws\n implemented in the contract signed with IBM, I am not allowed to\n present my work to outside parties nor discuss the clients I have\n worked with. A few of the Finnish clients which have publicly\n promoted IBM’s cooperation, such as Finnair and Nokia, are just some\n of the clients for which I worked for as a designer.\n

Focus

All of the work I did at IBM was enterprise-centered,\n focusing on enterprise-level users and employee experience rather\n than customer and commercial. Most design work had to do with Watson\n AI-powered chatbots for IBM’s clients. My tasks varied from leading\n workshops, to user interviews and tests, to collaboratively working\n with data scientists, developers and product owners on a daily\n basis.\n

\n
\n

University of Helsinki Metro Station Visual Outlook

\n

HKL - Helsinki City Transportation

\n Role: Visual Designer\n

\n

Background

\n Helsinki City Transport HKL organized an open call for artworks for\n all the metro stations in the Helsinki branch. Participation was\n anonymous and the submissions would be judged based on the artistic\n value and historical implications as well as timelessness. Together\n with a good friend of mine,{\" \"}\n Misael Rojas, we submitted an\n artwork for the University of Helsinki metro station, which is one\n of the three busiest metro stations in Helsinki due to its location\n near the governmental, private enterprise hubs.\n

Outcome

The design takes into account the historical nature\n of the station, being the last one to be completed in Helsinki in\n the late 90s. Neon lights and tile patterns complement the station’s\n spirit. We took nearly 300 images from which we vectorized shapes\n from iconic buildings around the station. It gives the daily user of\n the metro station something new to look for and spot in their\n surroundings during their daily routines.\n

\n
\n

#Olotila Street Art Collaborative Installation

\n

City of Helsinki Urban Environment Division

\n Role: Producer / Curator\n

\n

Background

\n In 2018 I worked as a Communications Intern at the City of Helsinki\n Urban Environment Division. During the summer I noticed the largest\n construction site of Central Library Oodi being surrounded by light\n green wooden walls. In front of the Finnish Parliament, it is the\n most central site in Helsinki. I gathered funding and organized to\n get artists from womens’ collective Mimmit Peinttaa to cover these\n walls with art and stories.\n

Outcome

The walls were painted in early September. I made\n and designed the promotional texts and logos in stencil form for the\n city and companies. The works have appeared in many publications\n such as Helsingin Sanomat and several Instagram accounts.\n

\n \n \n \n );\n}\n\nexport default Portfolio;\n","import React from \"react\";\nimport { List } from \"@react95/core\";\nimport { Awfxcg321303 } from \"@react95/icons\";\nimport * as S from \"./layoutStyling\";\n\nfunction CV({ closeCV, isMobile }) {\n return (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n

Curriculum Vitae

\n

\n Product design, user-centered design methods and agile software\n development. These are some of the keywords that describe my\n interests and know-how. I have a long work history in communication\n and user-centered design. With my futuristic and social mind, I\n shine in duties where I get to use my social skills and design\n talents in practice, such as in project management, product design\n and product ownership.\n

\n

Latest Work History

\n

Head of Design, Product Owner - Anyhau

\n

\n A leadership role in taking charge of the new platform's design for\n all of{\" \"}\n \n Anyhau\n {\" \"}\n products for two user groups: pet owners and pet businesses.\n Alongside leading the design and organizing daily design work,\n having ownership in project management and organizing daily\n ceremonies, as well as pruning the backlog and keeping focus for the\n whole team.\n

\n

Designer - Sanoma Media Finland Oy (HS Datadesk)

\n

\n Maintaining and developing new storytelling solutions, journalistic\n tools and data visualization at{\" \"}\n \n Helsingin Sanomat\n {\" \"}\n Datadesk. Biggest project from the time at Sanoma was being the\n design lead and principal designer for the{\" \"}\n \n election machines\n {\" \"}\n for all Sanoma brands (Aamulehti, HS, Ilta-Sanomat, regional\n brands). The election machine consists of three user interfaces: the\n candidate machine, election machine to the voters and results\n service for election night. Read more about the election machine{\" \"}\n \n here\n \n .\n

\n

UX Designer - S-group / Sokos

\n

\n Developing a new{\" \"}\n \n Sokos.fi\n {\" \"}\n webstore and driving user-centric design within the community.\n Alongside Sokos development, participating in internal design system\n development and developing company-wide design processes.\n

\n

UX/UI Designer - Solidabis Oy

\n

\n Design and UX consultant work focusing on the public sector clients\n and design systems. One of the biggest achievements was a\n Storybook-based styleguide which I coded, designed and made from\n scratch as a one person team with minimal budget. Part-time managing\n Solidabis marketing strategy, during which I single handedly\n redesigned and redeveloped{\" \"}\n \n Solidabis' Wordpress-based website\n {\" \"}\n using the Genesis framework and coding a custom theme on PHP, CSS\n and HTML.\n

\n

Junior UX/UI Designer - IBM

\n

\n UI development, front-end collaboration, visual and graphic design.\n Client cooperation and usability assessments of implemented products\n daily. One of the greatest accomplishments was to get my team to use\n the{\" \"}\n \n Carbon design system\n \n , therefore increasing consistency and scaling with demos.\n

\n

Education

\n

Master of Arts in New Media - Aalto University

\n

\n \n My Master’s Thesis\n {\" \"}\n in New Media Design & Production handled the issues faced by a UI/UX\n designer on a daily basis with design systems with a designed\n concept to improve the use of systems in daily tasks. Usability\n School as minor, major New Media studies.\n

\n

Bachelor of Arts in Audiovisual Media - University of Lapland

\n

\n Bachelor studies in Audiovisual Media with a focus in user\n inter-action and multimedia studies. Thesis work on proactive UX\n design for a mobile interface. Exchange studies at Institut d'Études\n Politiques de Paris in Latin American Studies.\n

\n

International Baccalaureate - UWC Costa Rica

\n

\n International Baccalaureate degree at the United World College Costa\n Rica as the Finnish Cultural Fund fellow and Finnish\n repre-sentative.\n

\n

Languages in order of strength

\n
    \n
  • Finnish
    • \n
  • English
    • \n
  • Spanish
    • \n
\n

Elementary knowledge in following

\n
    \n
  • French
    • \n
  • Swedish
    • \n
  • Portuguese
    • \n
\n \n \n \n );\n}\n\nexport default CV;\n","import React from \"react\";\nimport { Frame, List } from \"@react95/core\";\nimport { CdMusic } from \"@react95/icons\";\nimport * as S from \"./layoutStyling\";\n\nfunction Tunes({ closeTunes, isMobile }) {\n return (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n \n \n );\n}\n\nexport default Tunes;\n","import React, { useState, useCallback } from \"react\";\nimport {\n GlobalStyle,\n ThemeProvider,\n List,\n Frame,\n ProgressBar,\n TaskBar,\n} from \"@react95/core\";\nimport Janne_pixelated from \"../janne_pixelated.png\";\nimport socialMedia from \"./socialMedia\";\nimport Shortcuts from \"./desktopIcons\";\nimport * as S from \"./layoutStyling\";\nimport \"./styles.scss\";\nimport {\n Progman37,\n Mspaint,\n User,\n CdMusic,\n Progman34,\n Mail,\n} from \"@react95/icons\";\nimport Portfolio from \"./portfolio\";\nimport CV from \"./cv\";\nimport Tunes from \"./tunes\";\n\nfunction Desktop() {\n /* Mobile detection */\n const isMobile =\n /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(\n navigator.userAgent\n );\n\n const [items] = useState([]);\n\n /* About Modal */\n const [showAboutModal, setShowAboutModal] = useState(true);\n const handleOpenAboutModal = useCallback(() => {\n setShowAboutModal(true);\n }, []);\n const handleCloseAboutModal = useCallback(() => {\n setShowAboutModal(false);\n }, []);\n\n /* Skills Modal */\n const [showSkillsModal, setShowSkillsModal] = useState(false);\n const handleOpenSkillsModal = useCallback(() => {\n setShowSkillsModal(true);\n }, []);\n const handleCloseSkillsModal = useCallback(() => {\n setShowSkillsModal(false);\n }, []);\n\n /* Photo Modal */\n const [showPhotoModal, setShowPhotoModal] = useState(false);\n const handleOpenPhotoModal = useCallback(() => {\n setShowPhotoModal(true);\n }, []);\n const handleClosePhotoModal = useCallback(() => {\n setShowPhotoModal(false);\n }, []);\n\n /* Vaporwave Modal 1 */\n const [showVaporwaveModal1, setShowVaporwaveModal1] = useState(false);\n const handleOpenVaporwaveModal1 = useCallback(() => {\n setShowVaporwaveModal1(true);\n }, []);\n const handleCloseVaporwaveModal1 = useCallback(() => {\n setShowVaporwaveModal1(false);\n }, []);\n\n /* Portfolio Shortcut */\n const closePortfolio = () => {\n togglePortfolio(false);\n };\n\n const openPortfolio = () => {\n togglePortfolio(true);\n };\n const [explorerOpened, togglePortfolio] = useState(false);\n\n /* CV Shortcut */\n\n const closeCV = () => {\n toggleCV(false);\n };\n\n const openCV = () => {\n toggleCV(true);\n };\n\n const [cvOpened, toggleCV] = useState(false);\n\n /* Tunes Shortcut */\n\n const closeTunes = () => {\n toggleTunes(false);\n };\n\n const openTunes = () => {\n toggleTunes(true);\n };\n\n const [tunesOpened, toggleTunes] = useState(false);\n\n return (\n \n \n {showAboutModal && (\n }\n title={\"About.txt\"}\n closeModal={handleCloseAboutModal}\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n

Moikka!

\n

\n I'm Janne, a designer of many talents from Helsinki. I've been\n working lately with product development in many roles and\n domains: from ecommerce, to public sector, to startups. I'm into\n structured and systems oriented software development, where\n design is agile and rapid.\n

\n

\n This app, sort of a playground of ideas, has been built with\n Create React App and{\" \"}\n \n React95\n \n , an open-source Windows95 component library for React. If\n you're interested in this project even further check out the{\" \"}\n \n React95 component library on Figma\n {\" \"}\n that I made as a past-time project.\n

\n \n \n Background\n {\" \"}\n by WindowsAesthetics /{\" \"}\n \n CC BY-SA 4.0\n \n \n \n \n \n )}\n {showSkillsModal && (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n

\n {\" \"}\n

Some of my skills

I disagree with quantifying skills\n with numbers, percentages etc. - are skills really something\n people can measure? However, here is a rough estimate of my\n latest skills.\n
\n
\n

Design tools

\n

Figma, Sketch

\n \n

Adobe CC

\n \n

Prototyping, wireframing, user flows

\n \n

User testing, interviewing

\n \n

WCAG 2.1

\n \n
\n
\n

Dev tools

\n

Storybook(JS)

\n \n

HTML, CSS, SASS

\n \n

Wordpress (PHP/Themes)

\n \n

Git

\n \n

Raspberry Pi & Arduino

\n \n

React

\n \n

Vue

\n \n
\n
\n

Other Skills

\n
    \n
  • Agile methods
    • \n
  • Product development
    • \n
  • Project management
    • \n
  • Design systems
    • \n
  • User interviews
    • \n
  • User testing
    • \n
  • Wireframing and prototyping
    • \n
  • Visual design
    • \n
  • Research
    • \n
  • Copywriting and social media
    • \n
  • Content creation
    • \n
  • Workshops
    • \n
  • Facilitation
    • \n
  • Concept creation
    • \n
\n

\n \n \n \n )}\n {showPhotoModal && (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n \n
\n

janne_compressed_for_web.jpeg

\n
\n \n )}\n {showVaporwaveModal1 && (\n }\n width={340}\n menu={[\n {\n name: \"Options\",\n list: (\n \n \n Close\n \n \n ),\n },\n ]}\n title=\"My_Alter_Ego.doc\"\n >\n \n

A Vaporwave Album

\n

\n In 2018 I took part in a workshop in Lithuania at the Vilnius Art\n Academy in producing a Vaporwave Album with participants coming in\n from around Europe.\n

\n

\n Over the course of the weekend we produced music videos, songs and\n more. I produced two songs for the album and a music video. The\n album can be found on streaming services.\n

\n \n The album on Spotify\n \n

\n

\n
\n \n
\n \n \n )}\n \n }\n target=\"_blank\"\n >\n Email me\n \n \n }>\n Socials\n \n {socialMedia.map(({ icon, name, url }) => (\n \n {name}\n \n ))}\n \n \n }>\n Tunes\n \n }\n >\n Janne's Vaporwave Story from 2018\n \n \n \n }\n onClick={handleOpenPhotoModal}\n >\n Janne\n \n }\n onClick={handleOpenSkillsModal}\n >\n Skills\n \n \n }\n onClick={handleOpenAboutModal}\n >\n About\n \n \n }\n />\n \n \n {explorerOpened && (\n \n )}\n {cvOpened && }\n {tunesOpened && (\n \n )}\n \n \n );\n}\n\nexport default Desktop;\n","import React from \"react\";\nimport { GlobalStyle, ThemeProvider } from \"@react95/core\";\nimport Page from \"./components/mainPage\";\nimport Desktop from \"./components/desktop\";\nimport DesktopIcons from \"./components/desktopIcons\";\n\nconst Home = () => {\n return (\n \n \n \n \n \n {DesktopIcons}\n \n \n \n );\n};\nexport default Home;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === \"localhost\" ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === \"[::1]\" ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === \"production\" && \"serviceWorker\" in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener(\"load\", () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n \"This web app is being served cache-first by a service \" +\n \"worker. To learn more, visit https://bit.ly/CRA-PWA\"\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === \"installed\") {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n \"New content is available and will be used when all \" +\n \"tabs for this page are closed. See https://bit.ly/CRA-PWA.\"\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log(\"Content is cached for offline use.\");\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n console.error(\"Error during service worker registration:\", error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then((response) => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get(\"content-type\");\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf(\"javascript\") === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n \"No internet connection found. App is running in offline mode.\"\n );\n });\n}\n\nexport function unregister() {\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister();\n });\n }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport \"./index.css\";\nimport App from \"./App\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nReactDOM.render(, document.getElementById(\"root\"));\n\nserviceWorker.unregister();\n"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/main.f6e9f663.chunk.js b/static/js/main.f6e9f663.chunk.js deleted file mode 100644 index ca06aed..0000000 --- a/static/js/main.f6e9f663.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this.webpackJsonpjanneilkka=this.webpackJsonpjanneilkka||[]).push([[0],{17:function(e,t,n){},37:function(e,t,n){},47:function(e,t,n){"use strict";n.r(t);var i=n(0),s=n.n(i),a=n(15),o=n.n(a),r=(n(37),n(49)),c=n(48),l=(n(17),n(3)),d=l.e.div({alignItems:"flex-start",display:"flex",justifyContent:"center",flexDirection:"column",padding:8}),h=n(1),j=function(e){var t=e.children;e.description,e.title;return Object(h.jsx)(h.Fragment,{children:Object(h.jsx)(d,{as:"main",children:t})})},b=n(8),u=n(51),m=n(53),p=n(9),g=n(50),O=n.p+"static/media/janne_pixelated.cd217e0b.png",x=[{name:"LinkedIn",url:"https://www.linkedin.com/in/janneilkka/"},{name:"Github",url:"https://www.github.com/janneilkka/"},{name:"Flickr",url:"https://flickr.com/janneilkka"},{name:"Twitter",url:"https://twitter.com/janneilkka"},{name:"Instagram",url:"https://instagram.com/janne.ilkka"},{name:"Spotify",url:"https://open.spotify.com/user/rogergregor"}],f=Object(l.e)(d)({alignItems:"center",justifyContent:"center",marginBottom:20}),w=l.e.p({marginTop:6,alignItems:"flex-start",display:"flex",justifyContent:"center",width:100,textAlign:"center",breakAfter:"auto",wordBreak:"break-all",color:"black"}),y=n(6);var v,k,I,S,C,M,A,P=function(e){var t=e.openPortfolio,n=e.openCV,i=e.openTunes;return Object(h.jsx)("div",{children:Object(h.jsxs)(r.a,{children:[Object(h.jsx)(c.a,{}),Object(h.jsxs)(f,{className:"pointer",onClick:function(){return t()},children:[Object(h.jsx)(y.d,{className:"pointer",variant:"32x32_4"}),Object(h.jsx)(w,{className:"pointer",children:"Portfolio.txt"})]}),Object(h.jsxs)(f,{className:"pointer",onClick:function(){return n()},children:[Object(h.jsx)(y.a,{className:"pointer",variant:"32x32_4"}),Object(h.jsx)(w,{className:"pointer",children:"CV.txt"})]}),Object(h.jsxs)(f,{className:"pointer",onClick:function(){return i()},children:[Object(h.jsx)(y.c,{className:"pointer",variant:"32x32_4"}),Object(h.jsx)(w,{className:"pointer",children:"Tunes"})]})]})})},T=n(10),R=n(23),B=n(52),D=(l.e.section(v||(v=Object(T.a)([""]))),Object(l.e)(B.a)(k||(k=Object(T.a)(["\n display: flex;\n margin: 0 10rem 10rem 10rem;\n width: 80vh;\n ","\n ","\n"])),R.a.lessThan("medium")(I||(I=Object(T.a)(["\n flex-direction: column;\n margin: 1rem 1rem 0 0.5rem;\n top: 0;\n width: fill-available;\n "]))),(function(e){return e.isMobile&&Object(l.d)(S||(S=Object(T.a)(["\n top: 0;\n "])))}))),H=Object(l.e)(p.a)(C||(C=Object(T.a)(["\n overflow-y: auto;\n max-height: 70vh;\n margin: auto;\n ","\n"])),R.a.lessThan("large")(M||(M=Object(T.a)(["\n max-height: 70vh;\n "])))),_=Object(l.e)(p.a)(A||(A=Object(T.a)(["\n background: #fff;\n boxshadow: in;\n height: 100%;\n padding: 20px;\n overflow-y: auto;\n"])));var F=function(e){var t=e.closePortfolio,n=e.isMobile;return Object(h.jsx)(D,{isMobile:n,title:"Portfolio.txt",closeModal:t,height:"100%",icon:Object(h.jsx)(y.d,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:t,children:"Close"})})}],children:Object(h.jsx)(H,{bg:"white",boxShadow:"in",children:Object(h.jsxs)(_,{children:[Object(h.jsx)("h1",{children:"Short Portfolio"}),Object(h.jsx)("p",{children:"This is a shortened, non-visual version of my portfolio without detailed information on the projects I have been working on. If you are interested in seeing any of the work I have done in more detail, please contact me for a visual portfolio."}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"The Election Machines"}),Object(h.jsx)("h3",{children:"Sanoma Media Finland"}),Object(h.jsx)("span",{children:"Role: Lead Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"My main responsibility during my time at HS was to lead the design of the renewal of the election machines (vaalikone in Finnish), that is used by Helsingin Sanomat, Ilta-Sanomat and Aamulehti as well as regional brands. The new election machines needed to serve time well: use a consistent, well guided UX that is mainly used by younger audiences on mobile devices on the app or browser. Use cases would vary: from the urgent need for a candidate on the way to a voting site to browsing heavily months prior to elections.",Object(h.jsx)("h4",{children:"Solution"}),"From early on, the focus was on creating a platform that could last time well so we developed an in-house solution that had hints of gamification; tiny rewards for users to make filling the form as easy as possible. The election machine consisted of three user interfaces: the candidate machine, election machine to the voters and results service for election night. Design-wise the style was taken to monochromatic direction using as high contrasts as possible, giving homage to Nintendo-style gaming experience where user has a set of controls and where progress feels more like a game, rather than a set of questions. The main focus was on customization: making the use of election machine as fast as possible when time is of the essence to being able to dig in as deep as possible and answering as many questions as user wants."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Sokos ecommerce platform"}),Object(h.jsx)("h3",{children:"SOK Design"}),Object(h.jsx)("span",{children:"Role: UX Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"During my post as a designer for Sokos, I was in charge of designing the whole UI for a new ecommerce platform. This meant building a component library and whole UI design from the ground up; defining and creating the color models, typography rules, baseline grid, layout guidelines, variants and statuses as well as UX models. The old platform had met the end of its life cycle and thus, a new platform was custom-made.",Object(h.jsx)("h4",{children:"Solution"}),"After building a visual identity for the new platform, countless Figma prototypes later, the goal was to create a beta store. In the development of the beta store I positioned myself in several roles. In close cooperation with the front and back-end devs we started to add more layers onto the foundation built before. Using a design system, for which I had built a theme using Typescript, we aimed to scale the development and design to a more aligned model. From user tests we concluded UX improvements that were done as part of development. Alongside the ecommerce platform, one project that is worth mentioning is the development of SOK Design System. A rewarding experience in it was kickstarting work regarding a consistent iconography with designers from several parts of the organisation."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Website redesign & development"}),Object(h.jsx)("h3",{children:"Solidabis"}),Object(h.jsx)("span",{children:"Role: Designer/Developer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Wordpress-based website of Solidabis Solutions Oy had been deprecated style-wise and technically, using a theme that did not serve the users (editors) and viewers (potential customers, existing customers) well. Bulky and heavy font selections, unreadable texts, alignment issues and heavy load times were dragging the user experience. Moreover, a few vulnerabilities in the the theme had caused an issue for potential blacklisting of IP:s for frequent visitors.",Object(h.jsx)("h4",{children:"Solution"}),"As a solution, I redesigned the website entirely, using a Wordpress framework (Genesis) for which I developed a child theme, to align with the new styles and to give a brighter, more current look for the website. I redeveloped the website using PHP with basic HTML5 and CSS/SASS to stylize the website. After that, I designed and created new content for the website, including some iconography, plenty of copywriting and photography."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Accessibility audit"}),Object(h.jsx)("h3",{children:"Ruskeat tyt\xf6t"}),Object(h.jsx)("span",{children:"Role: Accessibility expert (pro bono)"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Ruskeat Tyt\xf6t Media was updating their website and I offered to help them out pro bono to respond to accessibility issues and identify possible solutions to existing problems. Ruskeat Tyt\xf6t Media is an independent online publication committed to centering and normalizing the perspectives of Brown women and people with underrepresented genders in Finnish and Nordic media. Ruskeat Tyt\xf6t Media is Finland\u2019s first culture media [and writing academy] for Brown Girls by Brown Girls.",Object(h.jsx)("h4",{children:"Solution"}),"Using the WCAG 2.1 guidelines, I audited the website during and after development, during which I drafted guidelines for how to solve problems with accessibility. As a deliverable, I also provided an accessibility report, found on their website."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Maintenance website"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: UI Designer & Developer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Finnish Patent and Registration Office (PRH) needed a website that would go online in the case of a service outage, maintenance break or any other unexpected event. The website would need to have three pages in Finnish, English and Swedish: front page, a list of unaffected services and contact information page, editable in Dreamweaver. The goal is to portray a message, that the service outage is temporary and will be fixed as soon as possible.",Object(h.jsx)("h4",{children:"Solution"}),"Using custom Bootstrap styling from the other project I had developed for PRH, I designed the page entity that responded to the aforementioned challenges. The page entity was a Bootstrap 4-powered website that would be customizable by the PRH communications department. I designed the elements and outlined the page which then complemented the style guide as an example page as well."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Edunsaaja-apuri accessibility fixes"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: UI Designer & Developer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Edunsaaja-apuri can be used to determine if an entity is entitled to benefits or required for providing extra information. After an accessibility audit, some fixes needed to be done to make the website accessible and WCAG 2.1 compliant.",Object(h.jsx)("h4",{children:"Solution"}),"Using WCAG guidelines and the audit, I fixed the accessibility errors and problems with the website which was done with JavaScript and HTML5&CSS. Most of the work was only code."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Auditor search service"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: UX&UI Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Auditor Oversight business unit of PRH had tendered out the redevelopment of their digital services to Gofore, a Finnish digital consultancy. However, the bid didn\u2019t include any designers but only process and software developers. As the only designer present in the redevelopment processes, I took it upon myself to ensure that the solutions were usable, accessible and responded to business demands.",Object(h.jsx)("h4",{children:"Solution"}),"The Auditor search service was done in React with Bootstrap and custom styling I had started to redevelop on another project. It reflected on a developing style guide and provided ideas for improvement for the design system as well."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Official PDF-document templates"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Finnish Patent and Registration Office (PRH) didn\u2019t have an official document model that was used on digitally-generated documents. The documents followed a simple automatically generated format, meaning that they were unaccessible, unrecognizable and subject to fraud. The documents would have to reflect PRH and their documents\u2019 official nature throughout their services from receipts to registrations and patents.",Object(h.jsx)("h4",{children:"Solution"}),"Together with another designer we designed a variety of document templates that we tested in workshops internally in each business unit that would be using the model. After, we modified the documents to respond to workshop feedback, made the documents accessible to screen readers and clarified the font usage and header levels, which were then delivered to the technical team as templates and instructions."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Design System - Bootstrap 4 -styles, StorybookJS, Sketch-library"}),Object(h.jsx)("h3",{children:"Patentti- ja rekisterihallitus / Finnish Patent and Registration Office Helsinki, Finland"}),Object(h.jsx)("span",{children:"Role: UI Designer & Developer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"The Finnish Patent and Registration Office (PRH) partnered with us to maintain, redevelop and redesign their custom Bootstrap-styling. PRH didn\u2019t own a systematic way of presenting the styles nor instructing contractors and in-house developers how to use the styles, especially with accessibility in mind. The custom Bootstrap-styles had previously been developed by several contractors, based on Bootstrap 3 and used widely on a variety of digital services.",Object(h.jsx)("h4",{children:"Solution"}),"I suggested building a component library for developers and other stakeholders to use in their daily work on an open-source platform (Storybook). As part of the development, I redesiged the styling, fixed accessibility issues, created code snippets and documented each component individually and maintained the whole component library into an npm package. I developed the styleguide on JavaScript and matched it with a Sketch-library from scratch to support designers; a starting point of a design system for PRH."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Brand & Communications Guidelines"}),Object(h.jsx)("h3",{children:"Solidabis Oy"}),Object(h.jsx)("span",{children:"Role: Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Solidabis is a growing software development company that has had a variety of structural and cultural changes in its history since the founding in 2016. The changes have led to the company not having clear and concise image to potential clients, future employees or the media. Logos and colors are not properly defined and mixed versions of the logos are circulating around in workspaces.",Object(h.jsx)("h4",{children:"Solution"}),"I developed brand and visual styleguide to help everyone in their daily client work. It includes the correct color codes, tone of voice, samples of text and imagery as well as proper logo usage. I designed document templates for Word and PowerPoint as well as other brand assets, such as an icon and font bank, Adobe CC color package, social media hashtags and automated marketing campaigns."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"Designer on various projects"}),Object(h.jsx)("h3",{children:"IBM"}),Object(h.jsx)("span",{children:"Role: UX Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Due to strict confidentiality and the intellectual property laws implemented in the contract signed with IBM, I am not allowed to present my work to outside parties nor discuss the clients I have worked with. A few of the Finnish clients which have publicly promoted IBM\u2019s cooperation, such as Finnair and Nokia, are just some of the clients for which I worked for as a designer.",Object(h.jsx)("h4",{children:"Focus"}),"All of the work I did at IBM was enterprise-centered, focusing on enterprise-level users and employee experience rather than customer and commercial. Most design work had to do with Watson AI-powered chatbots for IBM\u2019s clients. My tasks varied from leading workshops, to user interviews and tests, to collaboratively working with data scientists, developers and product owners on a daily basis."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"University of Helsinki Metro Station Visual Outlook"}),Object(h.jsx)("h3",{children:"HKL - Helsinki City Transportation"}),Object(h.jsx)("span",{children:"Role: Visual Designer"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"Helsinki City Transport HKL organized an open call for artworks for all the metro stations in the Helsinki branch. Participation was anonymous and the submissions would be judged based on the artistic value and historical implications as well as timelessness. Together with a good friend of mine,"," ",Object(h.jsx)("a",{href:"http://misaelrojas.com/",children:"Misael Rojas"}),", we submitted an artwork for the University of Helsinki metro station, which is one of the three busiest metro stations in Helsinki due to its location near the governmental, private enterprise hubs.",Object(h.jsx)("h4",{children:"Outcome"}),"The design takes into account the historical nature of the station, being the last one to be completed in Helsinki in the late 90s. Neon lights and tile patterns complement the station\u2019s spirit. We took nearly 300 images from which we vectorized shapes from iconic buildings around the station. It gives the daily user of the metro station something new to look for and spot in their surroundings during their daily routines."]}),Object(h.jsx)("hr",{}),Object(h.jsx)("h2",{children:"#Olotila Street Art Collaborative Installation"}),Object(h.jsx)("h3",{children:"City of Helsinki Urban Environment Division"}),Object(h.jsx)("span",{children:"Role: Producer / Curator"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("h4",{children:"Background"}),"In 2018 I worked as a Communications Intern at the City of Helsinki Urban Environment Division. During the summer I noticed the largest construction site of Central Library Oodi being surrounded by light green wooden walls. In front of the Finnish Parliament, it is the most central site in Helsinki. I gathered funding and organized to get artists from womens\u2019 collective Mimmit Peinttaa to cover these walls with art and stories.",Object(h.jsx)("h4",{children:"Outcome"}),"The walls were painted in early September. I made and designed the promotional texts and logos in stencil form for the city and companies. The works have appeared in many publications such as Helsingin Sanomat and several Instagram accounts."]})]})})})};var U=function(e){var t=e.closeCV,n=e.isMobile;return Object(h.jsx)(D,{isMobile:n,title:"CV.txt",closeModal:t,height:"100%",icon:Object(h.jsx)(y.a,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:t,children:"Close"})})}],children:Object(h.jsx)(H,{bg:"white",boxShadow:"in",children:Object(h.jsxs)(_,{children:[Object(h.jsx)("h1",{children:"Curriculum Vitae"}),Object(h.jsx)("p",{children:"Product design, user-centered design methods and agile software development. These are some of the keywords that describe my interests and know-how. I have a long work history in communication and user-centered design. With my futuristic and social mind, I shine in duties where I get to use my social skills and design talents in practice, such as in project management, product design and product ownership."}),Object(h.jsx)("h2",{children:"Latest Work History"}),Object(h.jsx)("h3",{children:"Head of Design - Anyhau "}),Object(h.jsxs)("p",{children:["A leadership role in taking charge of the new platform's design for all of"," ",Object(h.jsx)("a",{href:"https://anyhau.fi",target:"_blank",rel:"noopener noreferrer",children:"Anyhau"})," ","products for two user groups: pet owners and pet businesses. Alongside leading the design and organizing daily design work, having ownership in project management and organizing daily ceremonies, as well as pruning the backlog and keeping focus for the whole team."]}),Object(h.jsx)("h3",{children:"Designer - Sanoma Media Finland Oy (HS Datadesk) "}),Object(h.jsxs)("p",{children:["Maintaining and developing new storytelling solutions, journalistic tools and data visualization at"," ",Object(h.jsx)("a",{href:"https://hs.fi",target:"_blank",rel:"noopener noreferrer",children:"Helsingin Sanomat"})," ","Datadesk. Biggest project from the time at Sanoma was being the design lead and principal designer for the"," ",Object(h.jsx)("a",{href:"https://vaalikone.fi",target:"_blank",rel:"noopener noreferrer",children:"election machines"})," ","for all Sanoma brands (Aamulehti, HS, Ilta-Sanomat, regional brands). The election machine consists of three user interfaces: the candidate machine, election machine to the voters and results service for election night. Read more about the election machine"," ",Object(h.jsx)("a",{href:"https://www.vaalikone.fi/eduskunta2023/hs/faq",target:"_blank",rel:"noopener noreferrer",children:"here"}),"."]}),Object(h.jsx)("h3",{children:"UX Designer - S-group / Sokos "}),Object(h.jsxs)("p",{children:["Developing a new"," ",Object(h.jsx)("a",{href:"https://sokos.fi",target:"_blank",rel:"noopener noreferrer",children:"Sokos.fi"})," ","webstore and driving user-centric design within the community. Alongside Sokos development, participating in internal design system development and developing company-wide design processes."]}),Object(h.jsx)("h3",{children:"UX/UI Designer - Solidabis Oy "}),Object(h.jsxs)("p",{children:["Design and UX consultant work focusing on the public sector clients and design systems. One of the biggest achievements was a Storybook-based styleguide which I coded, designed and made from scratch as a one person team with minimal budget. Part-time managing Solidabis marketing strategy, during which I single handedly redesigned and redeveloped"," ",Object(h.jsx)("a",{href:"https://solidabis.com",target:"_blank",rel:"noopener noreferrer",children:"Solidabis' Wordpress-based website"})," ","using the Genesis framework and coding a custom theme on PHP, CSS and HTML."]}),Object(h.jsx)("h3",{children:"Junior UX/UI Designer - IBM "}),Object(h.jsxs)("p",{children:["UI development, front-end collaboration, visual and graphic design. Client cooperation and usability assessments of implemented products daily. One of the greatest accomplishments was to get my team to use the"," ",Object(h.jsx)("a",{href:"https://carbondesignsystem.com",target:"_blank",rel:"noopener noreferrer",children:"Carbon design system"}),", therefore increasing consistency and scaling with demos."]}),Object(h.jsx)("h2",{children:"Education"}),Object(h.jsx)("h3",{children:"Master of Arts in New Media - Aalto University"}),Object(h.jsxs)("p",{children:[Object(h.jsx)("a",{href:"https://aaltodoc.aalto.fi/handle/123456789/40753",target:"_blank",rel:"noopener noreferrer",children:"My Master\u2019s Thesis"})," ","in New Media Design & Production handled the issues faced by a UI/UX designer on a daily basis with design systems with a designed concept to improve the use of systems in daily tasks. Usability School as minor, major New Media studies."]}),Object(h.jsx)("h3",{children:"Bachelor of Arts in Audiovisual Media - University of Lapland"}),Object(h.jsx)("p",{children:"Bachelor studies in Audiovisual Media with a focus in user inter-action and multimedia studies. Thesis work on proactive UX design for a mobile interface. Exchange studies at Institut d'\xc9tudes Politiques de Paris in Latin American Studies."}),Object(h.jsx)("h3",{children:"International Baccalaureate - UWC Costa Rica"}),Object(h.jsx)("p",{children:"International Baccalaureate degree at the United World College Costa Rica as the Finnish Cultural Fund fellow and Finnish repre-sentative."}),Object(h.jsx)("h2",{children:"Languages in order of strength"}),Object(h.jsxs)("ul",{children:[Object(h.jsx)("li",{children:"Finnish"}),Object(h.jsx)("li",{children:"English"}),Object(h.jsx)("li",{children:"Spanish"})]}),Object(h.jsx)("p",{children:"Elementary knowledge in following"}),Object(h.jsxs)("ul",{children:[Object(h.jsx)("li",{children:"French"}),Object(h.jsx)("li",{children:"Swedish"}),Object(h.jsx)("li",{children:"Portuguese"})]})]})})})};var W=function(e){var t=e.closeTunes,n=e.isMobile;return Object(h.jsx)(D,{isMobile:n,title:"Tunes",closeModal:t,height:"100%",icon:Object(h.jsx)(y.c,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:t,children:"Close"})})}],children:Object(h.jsx)(p.a,{boxShadow:"none",style:{height:"352px"},children:Object(h.jsx)("iframe",{src:"https://open.spotify.com/embed/playlist/42lX7a4yx3rJJcDSimyS9S?utm_source=generator&theme=0",width:"100%",height:"352px",frameborder:"0",allow:"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",loading:"lazy",title:"The Ultimate Lo-Fi House Playlist on Spotify"})})})};var J=function(){var e=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),t=Object(i.useState)([]),n=Object(b.a)(t,1)[0],a=Object(i.useState)(!0),o=Object(b.a)(a,2),l=o[0],d=o[1],j=Object(i.useCallback)((function(){d(!0)}),[]),f=Object(i.useCallback)((function(){d(!1)}),[]),w=Object(i.useState)(!1),v=Object(b.a)(w,2),k=v[0],I=v[1],S=Object(i.useCallback)((function(){I(!0)}),[]),C=Object(i.useCallback)((function(){I(!1)}),[]),M=Object(i.useState)(!1),A=Object(b.a)(M,2),T=A[0],R=A[1],B=Object(i.useCallback)((function(){R(!0)}),[]),J=Object(i.useCallback)((function(){R(!1)}),[]),L=Object(i.useState)(!1),V=Object(b.a)(L,2),E=V[0],N=V[1],z=Object(i.useCallback)((function(){N(!0)}),[]),X=Object(i.useCallback)((function(){N(!1)}),[]),G=Object(i.useState)(!1),q=Object(b.a)(G,2),K=q[0],Q=q[1],Z=Object(i.useState)(!1),Y=Object(b.a)(Z,2),$=Y[0],ee=Y[1],te=Object(i.useState)(!1),ne=Object(b.a)(te,2),ie=ne[0],se=ne[1];return Object(h.jsxs)(r.a,{theme:"millenium",children:[Object(h.jsx)(c.a,{}),l&&Object(h.jsx)(D,{isMobile:e,icon:Object(h.jsx)(y.i,{variant:"32x32_4"}),title:"About.txt",closeModal:f,menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:f,children:"Close"})})}],children:Object(h.jsx)(H,{bg:"white",boxShadow:"out",children:Object(h.jsxs)(_,{children:[Object(h.jsx)("h1",{children:"Moikka!"}),Object(h.jsx)("p",{children:"I'm Janne, a designer from Helsinki. I've been working lately with product development in many roles and domains: from ecommerce, to public sector, to startups. I'm into structured and systems oriented software development, where design is agile and rapid."}),Object(h.jsxs)("p",{children:["This app, sort of a playground of ideas, has been built with Create React App and"," ",Object(h.jsx)("a",{href:"https://github.com/React95/React95",target:"_blank",rel:"noopener noreferrer",children:"React95"}),", an open-source Windows95 component library for React. If you're interested in this project even further check out the"," ",Object(h.jsx)("a",{href:"https://www.figma.com/community/file/1217110360892669474",target:"_blank",rel:"noopener noreferrer",children:"React95 component library on Figma"})," ","that I made as a past-time project."]}),Object(h.jsxs)("span",{children:[Object(h.jsx)("a",{href:"https://windowswallpaper.miraheze.org/wiki/File:Clouds_(Windows_95).png",target:"_blank",rel:"noopener noreferrer",children:"Background"})," ","by WindowsAesthetics /"," ",Object(h.jsx)("a",{href:"https://creativecommons.org/licenses/by-sa/4.0/",target:"_blank",rel:"noopener noreferrer",children:"CC BY-SA 4.0"})]})]})})}),k&&Object(h.jsx)(D,{isMobile:e,title:"Skills.txt",closeModal:C,icon:Object(h.jsx)(y.g,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:C,children:"Close"})})}],children:Object(h.jsx)(H,{bg:"white",boxShadow:"in",children:Object(h.jsx)(_,{children:Object(h.jsxs)("p",{children:[" ",Object(h.jsx)("h1",{children:"Some of my skills"}),"I disagree with quantifying skills with numbers, percentages etc. - are skills really something people can measure? However, here is a rough estimate of my latest skills.",Object(h.jsx)("h2",{children:"Design tools"}),Object(h.jsx)("h3",{children:"Figma"}),Object(h.jsx)(m.a,{width:250,percent:90}),Object(h.jsx)("h3",{children:"Adobe CC"}),Object(h.jsx)(m.a,{width:250,percent:85}),Object(h.jsx)("h3",{children:"Sketch, InVision"}),Object(h.jsx)(m.a,{width:250,percent:85}),Object(h.jsx)("h3",{children:"WCAG 2.1"}),Object(h.jsx)(m.a,{width:250,percent:75}),Object(h.jsx)("br",{}),Object(h.jsx)("h2",{children:"Dev tools"}),Object(h.jsx)("h3",{children:"Storybook(JS)"}),Object(h.jsx)(m.a,{width:250,percent:75}),Object(h.jsx)("h3",{children:"HTML, CSS, SASS"}),Object(h.jsx)(m.a,{width:250,percent:75}),Object(h.jsx)("h3",{children:"Wordpress (PHP/Themes)"}),Object(h.jsx)(m.a,{width:250,percent:70}),Object(h.jsx)("h3",{children:"Git"}),Object(h.jsx)(m.a,{width:250,percent:60}),Object(h.jsx)("h3",{children:"Raspberry Pi & Arduino"}),Object(h.jsx)(m.a,{width:250,percent:30}),Object(h.jsx)("h3",{children:"React"}),Object(h.jsx)(m.a,{width:250,percent:30}),Object(h.jsx)("h3",{children:"Vue"}),Object(h.jsx)(m.a,{width:250,percent:15}),Object(h.jsx)("br",{}),Object(h.jsx)("h2",{children:"Other Skills"}),Object(h.jsxs)("ul",{children:[Object(h.jsx)("li",{children:"Agile methods"}),Object(h.jsx)("li",{children:"Product development"}),Object(h.jsx)("li",{children:"Project management"}),Object(h.jsx)("li",{children:"Design systems"}),Object(h.jsx)("li",{children:"User interviews"}),Object(h.jsx)("li",{children:"User testing"}),Object(h.jsx)("li",{children:"Wireframing and prototyping"}),Object(h.jsx)("li",{children:"Visual design"}),Object(h.jsx)("li",{children:"Research"}),Object(h.jsx)("li",{children:"Copywriting and social media"}),Object(h.jsx)("li",{children:"Content creation"}),Object(h.jsx)("li",{children:"Workshops"}),Object(h.jsx)("li",{children:"Facilitation"}),Object(h.jsx)("li",{children:"Concept creation"})]})]})})})}),T&&Object(h.jsxs)(D,{isMobile:e,title:"janne_compressed_for_web.jpeg",closeModal:J,icon:Object(h.jsx)(y.j,{variant:"32x32_4"}),menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:J,children:"Close"})})}],children:[Object(h.jsx)(p.a,{boxShadow:"none",style:{margin:"auto"},children:Object(h.jsx)("img",{src:O,"aria-hidden":!0,alt:"Janne as a pixelated image",class:"full-width-image"})}),Object(h.jsx)("div",{class:"image-text",children:Object(h.jsx)("p",{children:"janne_compressed_for_web.jpeg"})})]}),E&&Object(h.jsx)(D,{isMobile:e,closeModal:X,height:"100%",icon:Object(h.jsx)(y.c,{variant:"32x32_4"}),width:340,menu:[{name:"Options",list:Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:X,children:"Close"})})}],title:"My_Alter_Ego.doc",children:Object(h.jsxs)(_,{children:[Object(h.jsx)("h1",{children:"A Vaporwave Album"}),Object(h.jsx)("p",{children:"In 2018 I took part in a workshop in Lithuania at the Vilnius Art Academy in producing a Vaporwave Album with participants coming in from around Europe."}),Object(h.jsx)("p",{children:"Over the course of the weekend we produced music videos, songs and more. I produced two songs for the album and a music video. The album can be found on streaming services."}),Object(h.jsx)("a",{href:"https://open.spotify.com/album/0pCqTDsI4zOZXZJnxx2yPT?si=JW5qpLJJQsO3eK2m65FQBQ",children:"The album on Spotify"}),Object(h.jsx)("p",{}),Object(h.jsx)("br",{}),Object(h.jsx)("div",{children:Object(h.jsx)("iframe",{src:"https://www.youtube.com/embed/7SyxEF-QG_M",frameborder:"0",width:"100%",title:"A Song from a Vaporwave Album",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0})})]})}),Object(h.jsx)(g.a,{list:Object(h.jsxs)(u.a,{children:[Object(h.jsx)(u.a.Item,{as:"a",href:"mailto:janne.ilkka@gmail.com",icon:Object(h.jsx)(y.f,{variant:"32x32_4"}),target:"_blank",children:"Email me"}),Object(h.jsx)(u.a.Divider,{}),Object(h.jsxs)(u.a.Item,{icon:Object(h.jsx)(y.h,{variant:"32x32_4"}),children:["Socials",Object(h.jsx)(u.a,{children:x.map((function(e){var t=e.icon,n=e.name,i=e.url;return Object(h.jsx)(u.a.Item,{as:"a",href:i,icon:t,rel:"noopener noreferrer",target:"_blank",children:n},n)}))})]}),Object(h.jsxs)(u.a.Item,{icon:Object(h.jsx)(y.c,{variant:"32x32_4"}),children:["Tunes",Object(h.jsx)(u.a,{children:Object(h.jsx)(u.a.Item,{onClick:z,icon:Object(h.jsx)(y.c,{variant:"32x32_4"}),children:"Janne's Vaporwave Story from 2018"})})]}),Object(h.jsx)(u.a.Item,{icon:Object(h.jsx)(y.j,{variant:"32x32_4"}),onClick:B,children:"Janne"}),Object(h.jsx)(u.a.Item,{icon:Object(h.jsx)(y.g,{variant:"32x32_4"}),onClick:S,children:"Skills"}),Object(h.jsx)(u.a.Divider,{}),Object(h.jsx)(u.a.Item,{icon:Object(h.jsx)(y.i,{variant:"32x32_4"}),onClick:j,children:"About"})]})}),Object(h.jsxs)(s.a.Fragment,{children:[Object(h.jsx)(P,{openPortfolio:function(){Q(!0)},openCV:function(){ee(!0)},openTunes:function(){se(!0)}}),K&&Object(h.jsx)(F,{items:n,closePortfolio:function(){Q(!1)},isMobile:e}),$&&Object(h.jsx)(U,{items:n,closeCV:function(){ee(!1)},isMobile:e}),ie&&Object(h.jsx)(W,{items:n,closeTunes:function(){se(!1)},isMobile:e})]})]})},L=function(){return Object(h.jsx)("body",{class:"background",children:Object(h.jsxs)(r.a,{children:[Object(h.jsx)(c.a,{}),Object(h.jsxs)(j,{children:[Object(h.jsx)(J,{}),P]})]})})};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));o.a.render(Object(h.jsx)(L,{}),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}},[[47,1,2]]]); -//# sourceMappingURL=main.f6e9f663.chunk.js.map \ No newline at end of file diff --git a/static/js/main.f6e9f663.chunk.js.map b/static/js/main.f6e9f663.chunk.js.map deleted file mode 100644 index db2a8fc..0000000 --- a/static/js/main.f6e9f663.chunk.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["components/desktopBox.jsx","components/mainPage.jsx","janne_pixelated.png","components/socialMedia.jsx","components/iconBox.jsx","components/iconText.jsx","components/desktopIcons.jsx","components/layoutStyling.js","components/portfolio.jsx","components/cv.jsx","components/tunes.jsx","components/desktop.jsx","App.js","serviceWorker.js","index.js"],"names":["Box","styled","div","alignItems","display","justifyContent","flexDirection","padding","Page","_ref","children","description","title","_jsx","_Fragment","as","socialMedia","name","url","IconBox","marginBottom","IconText","p","marginTop","width","textAlign","breakAfter","wordBreak","color","Shortcuts","openPortfolio","openCV","openTunes","_jsxs","ThemeProvider","GlobalStyle","className","onClick","Explorer103","variant","Awfxcg321303","CdMusic","layoutMain","section","_templateObject","_taggedTemplateLiteral","Modal","_templateObject2","media","lessThan","_templateObject3","props","isMobile","css","_templateObject4","layoutMainContent","Frame","_templateObject5","_templateObject6","textModal","_templateObject7","Portfolio","closePortfolio","S","closeModal","height","icon","menu","list","List","Item","bg","boxShadow","href","CV","closeCV","target","rel","Tunes","closeTunes","style","src","frameborder","allow","loading","Desktop","test","navigator","userAgent","_useState","useState","items","_slicedToArray","_useState3","_useState4","showAboutModal","setShowAboutModal","handleOpenAboutModal","useCallback","handleCloseAboutModal","_useState5","_useState6","showSkillsModal","setShowSkillsModal","handleOpenSkillsModal","handleCloseSkillsModal","_useState7","_useState8","showPhotoModal","setShowPhotoModal","handleOpenPhotoModal","handleClosePhotoModal","_useState9","_useState10","showVaporwaveModal1","setShowVaporwaveModal1","handleOpenVaporwaveModal1","handleCloseVaporwaveModal1","_useState11","_useState12","explorerOpened","togglePortfolio","_useState13","_useState14","cvOpened","toggleCV","_useState15","_useState16","tunesOpened","toggleTunes","theme","Progman37","Mspaint","ProgressBar","percent","User","margin","Janne_pixelated","alt","class","allowfullscreen","TaskBar","Mail","Divider","Progman34","map","React","Fragment","Home","DesktopIcons","Boolean","window","location","hostname","match","ReactDOM","render","App","document","getElementById","serviceWorker","ready","then","registration","unregister"],"mappings":"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","file":"static/js/main.f6e9f663.chunk.js","sourcesContent":["import styled from \"styled-components\";\n\nconst Box = styled.div({\n alignItems: \"flex-start\",\n display: \"flex\",\n justifyContent: \"center\",\n flexDirection: \"column\",\n padding: 8,\n});\n\nexport default Box;\n","import React from \"react\";\nimport \"./styles.scss\";\nimport PropTypes from \"prop-types\";\nimport Box from \"./desktopBox\";\n\nconst PageProps = {\n children: PropTypes.node.isRequired,\n description: PropTypes.string,\n title: PropTypes.string,\n};\n\nconst Page = ({ children, description = null, title = \"Janne Koivisto\" }) => (\n <>\n {children}\n \n);\n\nPage.propTypes = PageProps;\n\nexport default Page;\n","export default __webpack_public_path__ + \"static/media/janne_pixelated.cd217e0b.png\";","const socialMedia = [\n {\n name: \"LinkedIn\",\n url: \"https://www.linkedin.com/in/janneilkka/\",\n },\n {\n name: \"Github\",\n url: \"https://www.github.com/janneilkka/\",\n },\n {\n name: \"Flickr\",\n url: \"https://flickr.com/janneilkka\",\n },\n {\n name: \"Twitter\",\n url: \"https://twitter.com/janneilkka\",\n },\n {\n name: \"Instagram\",\n url: \"https://instagram.com/janne.ilkka\",\n },\n {\n name: \"Spotify\",\n url: \"https://open.spotify.com/user/rogergregor\",\n },\n];\n\nexport default socialMedia;\n","import styled from \"styled-components\";\n\nimport Box from \"./desktopBox\";\n\nconst IconBox = styled(Box)({\n alignItems: \"center\",\n justifyContent: \"center\",\n marginBottom: 20,\n});\n\nexport default IconBox;\n","import styled from \"styled-components\";\n\nconst IconText = styled.p({\n marginTop: 6,\n alignItems: \"flex-start\",\n display: \"flex\",\n justifyContent: \"center\",\n width: 100,\n textAlign: \"center\",\n breakAfter: \"auto\",\n wordBreak: \"break-all\",\n color: \"black\",\n});\n\nexport default IconText;\n","import React from \"react\";\nimport { GlobalStyle, ThemeProvider } from \"@react95/core\";\nimport IconBox from \"./iconBox\";\nimport IconText from \"./iconText\";\nimport \"./styles.scss\";\nimport { Awfxcg321303, Explorer103, CdMusic } from \"@react95/icons\";\n\nfunction Shortcuts({ openPortfolio, openCV, openTunes }) {\n return (\n
\n \n \n openPortfolio()}>\n \n Portfolio.txt\n \n openCV()}>\n \n CV.txt\n \n openTunes()}>\n \n Tunes\n \n \n
\n );\n}\n\nexport default Shortcuts;\n","import styled, { css } from \"styled-components\";\nimport media from \"styled-media-query\";\nimport { Modal, Frame } from \"@react95/core\";\n\nexport const layoutWrapper = styled.section``;\n\nexport const layoutMain = styled(Modal)`\n display: flex;\n margin: 0 10rem 10rem 10rem;\n width: 80vh;\n ${media.lessThan(\"medium\")`\n flex-direction: column;\n margin: 1rem 1rem 0 0.5rem;\n top: 0;\n width: fill-available;\n `}\n ${(props) =>\n props.isMobile &&\n css`\n top: 0;\n `}\n`;\n\nexport const layoutMainContent = styled(Frame)`\n overflow-y: auto;\n max-height: 70vh;\n margin: auto;\n ${media.lessThan(\"large\")`\n max-height: 70vh;\n `}\n`;\n\nexport const textModal = styled(Frame)`\n background: #fff;\n boxshadow: in;\n height: 100%;\n padding: 20px;\n overflow-y: auto;\n`;\n","import React from \"react\";\nimport { List } from \"@react95/core\";\nimport { Explorer103 } from \"@react95/icons\";\nimport * as S from \"./layoutStyling\";\n\nfunction Portfolio({ closePortfolio, isMobile }) {\n return (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n

Short Portfolio

\n

\n This is a shortened, non-visual version of my portfolio without\n detailed information on the projects I have been working on. If you\n are interested in seeing any of the work I have done in more detail,\n please contact me for a visual portfolio.\n

\n
\n

The Election Machines

\n

Sanoma Media Finland

\n Role: Lead Designer\n

\n

Background

\n My main responsibility during my time at HS was to lead the design\n of the renewal of the election machines (vaalikone in Finnish), that\n is used by Helsingin Sanomat, Ilta-Sanomat and Aamulehti as well as\n regional brands. The new election machines needed to serve time\n well: use a consistent, well guided UX that is mainly used by\n younger audiences on mobile devices on the app or browser. Use cases\n would vary: from the urgent need for a candidate on the way to a\n voting site to browsing heavily months prior to elections.\n

Solution

\n From early on, the focus was on creating a platform that could last\n time well so we developed an in-house solution that had hints of\n gamification; tiny rewards for users to make filling the form as\n easy as possible. The election machine consisted of three user\n interfaces: the candidate machine, election machine to the voters\n and results service for election night. Design-wise the style was\n taken to monochromatic direction using as high contrasts as\n possible, giving homage to Nintendo-style gaming experience where\n user has a set of controls and where progress feels more like a\n game, rather than a set of questions. The main focus was on\n customization: making the use of election machine as fast as\n possible when time is of the essence to being able to dig in as deep\n as possible and answering as many questions as user wants.\n

\n
\n

Sokos ecommerce platform

\n

SOK Design

\n Role: UX Designer\n

\n

Background

\n During my post as a designer for Sokos, I was in charge of designing\n the whole UI for a new ecommerce platform. This meant building a\n component library and whole UI design from the ground up; defining\n and creating the color models, typography rules, baseline grid,\n layout guidelines, variants and statuses as well as UX models. The\n old platform had met the end of its life cycle and thus, a new\n platform was custom-made.\n

Solution

\n After building a visual identity for the new platform, countless\n Figma prototypes later, the goal was to create a beta store. In the\n development of the beta store I positioned myself in several roles.\n In close cooperation with the front and back-end devs we started to\n add more layers onto the foundation built before. Using a design\n system, for which I had built a theme using Typescript, we aimed to\n scale the development and design to a more aligned model. From user\n tests we concluded UX improvements that were done as part of\n development. Alongside the ecommerce platform, one project that is\n worth mentioning is the development of SOK Design System. A\n rewarding experience in it was kickstarting work regarding a\n consistent iconography with designers from several parts of the\n organisation.\n

\n
\n

Website redesign & development

\n

Solidabis

\n Role: Designer/Developer\n

\n

Background

\n The Wordpress-based website of Solidabis Solutions Oy had been\n deprecated style-wise and technically, using a theme that did not\n serve the users (editors) and viewers (potential customers, existing\n customers) well. Bulky and heavy font selections, unreadable texts,\n alignment issues and heavy load times were dragging the user\n experience. Moreover, a few vulnerabilities in the the theme had\n caused an issue for potential blacklisting of IP:s for frequent\n visitors.\n

Solution

\n As a solution, I redesigned the website entirely, using a Wordpress\n framework (Genesis) for which I developed a child theme, to align\n with the new styles and to give a brighter, more current look for\n the website. I redeveloped the website using PHP with basic HTML5\n and CSS/SASS to stylize the website. After that, I designed and\n created new content for the website, including some iconography,\n plenty of copywriting and photography.\n

\n
\n

Accessibility audit

\n

Ruskeat tytöt

\n Role: Accessibility expert (pro bono)\n

\n

Background

\n Ruskeat Tytöt Media was updating their website and I offered to help\n them out pro bono to respond to accessibility issues and identify\n possible solutions to existing problems. Ruskeat Tytöt Media is an\n independent online publication committed to centering and\n normalizing the perspectives of Brown women and people with\n underrepresented genders in Finnish and Nordic media. Ruskeat Tytöt\n Media is Finland’s first culture media [and writing academy] for\n Brown Girls by Brown Girls.\n

Solution

\n Using the WCAG 2.1 guidelines, I audited the website during and\n after development, during which I drafted guidelines for how to\n solve problems with accessibility. As a deliverable, I also provided\n an accessibility report, found on their website.\n

\n
\n

Maintenance website

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: UI Designer & Developer\n

\n

Background

\n The Finnish Patent and Registration Office (PRH) needed a website\n that would go online in the case of a service outage, maintenance\n break or any other unexpected event. The website would need to have\n three pages in Finnish, English and Swedish: front page, a list of\n unaffected services and contact information page, editable in\n Dreamweaver. The goal is to portray a message, that the service\n outage is temporary and will be fixed as soon as possible.\n

Solution

\n Using custom Bootstrap styling from the other project I had\n developed for PRH, I designed the page entity that responded to the\n aforementioned challenges. The page entity was a Bootstrap 4-powered\n website that would be customizable by the PRH communications\n department. I designed the elements and outlined the page which then\n complemented the style guide as an example page as well.\n

\n
\n

Edunsaaja-apuri accessibility fixes

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: UI Designer & Developer\n

\n

Background

\n Edunsaaja-apuri can be used to determine if an entity is entitled to\n benefits or required for providing extra information. After an\n accessibility audit, some fixes needed to be done to make the\n website accessible and WCAG 2.1 compliant.\n

Solution

\n Using WCAG guidelines and the audit, I fixed the accessibility\n errors and problems with the website which was done with JavaScript\n and HTML5&CSS. Most of the work was only code.\n

\n
\n

Auditor search service

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: UX&UI Designer\n

\n

Background

\n The Auditor Oversight business unit of PRH had tendered out the\n redevelopment of their digital services to Gofore, a Finnish digital\n consultancy. However, the bid didn’t include any designers but only\n process and software developers. As the only designer present in the\n redevelopment processes, I took it upon myself to ensure that the\n solutions were usable, accessible and responded to business demands.\n

Solution

\n The Auditor search service was done in React with Bootstrap and\n custom styling I had started to redevelop on another project. It\n reflected on a developing style guide and provided ideas for\n improvement for the design system as well.\n

\n
\n

Official PDF-document templates

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: Designer\n

\n

Background

\n The Finnish Patent and Registration Office (PRH) didn’t have an\n official document model that was used on digitally-generated\n documents. The documents followed a simple automatically generated\n format, meaning that they were unaccessible, unrecognizable and\n subject to fraud. The documents would have to reflect PRH and their\n documents’ official nature throughout their services from receipts\n to registrations and patents.\n

Solution

\n Together with another designer we designed a variety of document\n templates that we tested in workshops internally in each business\n unit that would be using the model. After, we modified the documents\n to respond to workshop feedback, made the documents accessible to\n screen readers and clarified the font usage and header levels, which\n were then delivered to the technical team as templates and\n instructions.\n

\n
\n

\n Design System - Bootstrap 4 -styles, StorybookJS, Sketch-library\n

\n

\n Patentti- ja rekisterihallitus / Finnish Patent and Registration\n Office Helsinki, Finland\n

\n Role: UI Designer & Developer\n

\n

Background

\n The Finnish Patent and Registration Office (PRH) partnered with us\n to maintain, redevelop and redesign their custom Bootstrap-styling.\n PRH didn’t own a systematic way of presenting the styles nor\n instructing contractors and in-house developers how to use the\n styles, especially with accessibility in mind. The custom\n Bootstrap-styles had previously been developed by several\n contractors, based on Bootstrap 3 and used widely on a variety of\n digital services.\n

Solution

I suggested building a component library for\n developers and other stakeholders to use in their daily work on an\n open-source platform (Storybook). As part of the development, I\n redesiged the styling, fixed accessibility issues, created code\n snippets and documented each component individually and maintained\n the whole component library into an npm package. I developed the\n styleguide on JavaScript and matched it with a Sketch-library from\n scratch to support designers; a starting point of a design system\n for PRH.\n

\n
\n

Brand & Communications Guidelines

\n

Solidabis Oy

\n Role: Designer\n

\n

Background

\n Solidabis is a growing software development company that has had a\n variety of structural and cultural changes in its history since the\n founding in 2016. The changes have led to the company not having\n clear and concise image to potential clients, future employees or\n the media. Logos and colors are not properly defined and mixed\n versions of the logos are circulating around in workspaces.\n

Solution

I developed brand and visual styleguide to help\n everyone in their daily client work. It includes the correct color\n codes, tone of voice, samples of text and imagery as well as proper\n logo usage. I designed document templates for Word and PowerPoint as\n well as other brand assets, such as an icon and font bank, Adobe CC\n color package, social media hashtags and automated marketing\n campaigns.\n

\n
\n

Designer on various projects

\n

IBM

\n Role: UX Designer\n

\n

Background

\n Due to strict confidentiality and the intellectual property laws\n implemented in the contract signed with IBM, I am not allowed to\n present my work to outside parties nor discuss the clients I have\n worked with. A few of the Finnish clients which have publicly\n promoted IBM’s cooperation, such as Finnair and Nokia, are just some\n of the clients for which I worked for as a designer.\n

Focus

All of the work I did at IBM was enterprise-centered,\n focusing on enterprise-level users and employee experience rather\n than customer and commercial. Most design work had to do with Watson\n AI-powered chatbots for IBM’s clients. My tasks varied from leading\n workshops, to user interviews and tests, to collaboratively working\n with data scientists, developers and product owners on a daily\n basis.\n

\n
\n

University of Helsinki Metro Station Visual Outlook

\n

HKL - Helsinki City Transportation

\n Role: Visual Designer\n

\n

Background

\n Helsinki City Transport HKL organized an open call for artworks for\n all the metro stations in the Helsinki branch. Participation was\n anonymous and the submissions would be judged based on the artistic\n value and historical implications as well as timelessness. Together\n with a good friend of mine,{\" \"}\n Misael Rojas, we submitted an\n artwork for the University of Helsinki metro station, which is one\n of the three busiest metro stations in Helsinki due to its location\n near the governmental, private enterprise hubs.\n

Outcome

The design takes into account the historical nature\n of the station, being the last one to be completed in Helsinki in\n the late 90s. Neon lights and tile patterns complement the station’s\n spirit. We took nearly 300 images from which we vectorized shapes\n from iconic buildings around the station. It gives the daily user of\n the metro station something new to look for and spot in their\n surroundings during their daily routines.\n

\n
\n

#Olotila Street Art Collaborative Installation

\n

City of Helsinki Urban Environment Division

\n Role: Producer / Curator\n

\n

Background

\n In 2018 I worked as a Communications Intern at the City of Helsinki\n Urban Environment Division. During the summer I noticed the largest\n construction site of Central Library Oodi being surrounded by light\n green wooden walls. In front of the Finnish Parliament, it is the\n most central site in Helsinki. I gathered funding and organized to\n get artists from womens’ collective Mimmit Peinttaa to cover these\n walls with art and stories.\n

Outcome

The walls were painted in early September. I made\n and designed the promotional texts and logos in stencil form for the\n city and companies. The works have appeared in many publications\n such as Helsingin Sanomat and several Instagram accounts.\n

\n \n \n \n );\n}\n\nexport default Portfolio;\n","import React from \"react\";\nimport { List } from \"@react95/core\";\nimport { Awfxcg321303 } from \"@react95/icons\";\nimport * as S from \"./layoutStyling\";\n\nfunction CV({ closeCV, isMobile }) {\n return (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n

Curriculum Vitae

\n

\n Product design, user-centered design methods and agile software\n development. These are some of the keywords that describe my\n interests and know-how. I have a long work history in communication\n and user-centered design. With my futuristic and social mind, I\n shine in duties where I get to use my social skills and design\n talents in practice, such as in project management, product design\n and product ownership.\n

\n

Latest Work History

\n

Head of Design - Anyhau

\n

\n A leadership role in taking charge of the new platform's design for\n all of{\" \"}\n \n Anyhau\n {\" \"}\n products for two user groups: pet owners and pet businesses.\n Alongside leading the design and organizing daily design work,\n having ownership in project management and organizing daily\n ceremonies, as well as pruning the backlog and keeping focus for the\n whole team.\n

\n

Designer - Sanoma Media Finland Oy (HS Datadesk)

\n

\n Maintaining and developing new storytelling solutions, journalistic\n tools and data visualization at{\" \"}\n \n Helsingin Sanomat\n {\" \"}\n Datadesk. Biggest project from the time at Sanoma was being the\n design lead and principal designer for the{\" \"}\n \n election machines\n {\" \"}\n for all Sanoma brands (Aamulehti, HS, Ilta-Sanomat, regional\n brands). The election machine consists of three user interfaces: the\n candidate machine, election machine to the voters and results\n service for election night. Read more about the election machine{\" \"}\n \n here\n \n .\n

\n

UX Designer - S-group / Sokos

\n

\n Developing a new{\" \"}\n \n Sokos.fi\n {\" \"}\n webstore and driving user-centric design within the community.\n Alongside Sokos development, participating in internal design system\n development and developing company-wide design processes.\n

\n

UX/UI Designer - Solidabis Oy

\n

\n Design and UX consultant work focusing on the public sector clients\n and design systems. One of the biggest achievements was a\n Storybook-based styleguide which I coded, designed and made from\n scratch as a one person team with minimal budget. Part-time managing\n Solidabis marketing strategy, during which I single handedly\n redesigned and redeveloped{\" \"}\n \n Solidabis' Wordpress-based website\n {\" \"}\n using the Genesis framework and coding a custom theme on PHP, CSS\n and HTML.\n

\n

Junior UX/UI Designer - IBM

\n

\n UI development, front-end collaboration, visual and graphic design.\n Client cooperation and usability assessments of implemented products\n daily. One of the greatest accomplishments was to get my team to use\n the{\" \"}\n \n Carbon design system\n \n , therefore increasing consistency and scaling with demos.\n

\n

Education

\n

Master of Arts in New Media - Aalto University

\n

\n \n My Master’s Thesis\n {\" \"}\n in New Media Design & Production handled the issues faced by a UI/UX\n designer on a daily basis with design systems with a designed\n concept to improve the use of systems in daily tasks. Usability\n School as minor, major New Media studies.\n

\n

Bachelor of Arts in Audiovisual Media - University of Lapland

\n

\n Bachelor studies in Audiovisual Media with a focus in user\n inter-action and multimedia studies. Thesis work on proactive UX\n design for a mobile interface. Exchange studies at Institut d'Études\n Politiques de Paris in Latin American Studies.\n

\n

International Baccalaureate - UWC Costa Rica

\n

\n International Baccalaureate degree at the United World College Costa\n Rica as the Finnish Cultural Fund fellow and Finnish\n repre-sentative.\n

\n

Languages in order of strength

\n
    \n
  • Finnish
    • \n
  • English
    • \n
  • Spanish
    • \n
\n

Elementary knowledge in following

\n
    \n
  • French
    • \n
  • Swedish
    • \n
  • Portuguese
    • \n
\n \n \n \n );\n}\n\nexport default CV;\n","import React from \"react\";\nimport { Frame, List } from \"@react95/core\";\nimport { CdMusic } from \"@react95/icons\";\nimport * as S from \"./layoutStyling\";\n\nfunction Tunes({ closeTunes, isMobile }) {\n return (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n \n \n );\n}\n\nexport default Tunes;\n","import React, { useState, useCallback } from \"react\";\nimport {\n GlobalStyle,\n ThemeProvider,\n List,\n Frame,\n ProgressBar,\n TaskBar,\n} from \"@react95/core\";\nimport Janne_pixelated from \"../janne_pixelated.png\";\nimport socialMedia from \"./socialMedia\";\nimport Shortcuts from \"./desktopIcons\";\nimport * as S from \"./layoutStyling\";\nimport \"./styles.scss\";\nimport {\n Progman37,\n Mspaint,\n User,\n CdMusic,\n Progman34,\n Mail,\n} from \"@react95/icons\";\nimport Portfolio from \"./portfolio\";\nimport CV from \"./cv\";\nimport Tunes from \"./tunes\";\n\nfunction Desktop() {\n /* Mobile detection */\n const isMobile =\n /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(\n navigator.userAgent\n );\n\n const [items] = useState([]);\n\n /* About Modal */\n const [showAboutModal, setShowAboutModal] = useState(true);\n const handleOpenAboutModal = useCallback(() => {\n setShowAboutModal(true);\n }, []);\n const handleCloseAboutModal = useCallback(() => {\n setShowAboutModal(false);\n }, []);\n\n /* Skills Modal */\n const [showSkillsModal, setShowSkillsModal] = useState(false);\n const handleOpenSkillsModal = useCallback(() => {\n setShowSkillsModal(true);\n }, []);\n const handleCloseSkillsModal = useCallback(() => {\n setShowSkillsModal(false);\n }, []);\n\n /* Photo Modal */\n const [showPhotoModal, setShowPhotoModal] = useState(false);\n const handleOpenPhotoModal = useCallback(() => {\n setShowPhotoModal(true);\n }, []);\n const handleClosePhotoModal = useCallback(() => {\n setShowPhotoModal(false);\n }, []);\n\n /* Vaporwave Modal 1 */\n const [showVaporwaveModal1, setShowVaporwaveModal1] = useState(false);\n const handleOpenVaporwaveModal1 = useCallback(() => {\n setShowVaporwaveModal1(true);\n }, []);\n const handleCloseVaporwaveModal1 = useCallback(() => {\n setShowVaporwaveModal1(false);\n }, []);\n\n /* Portfolio Shortcut */\n const closePortfolio = () => {\n togglePortfolio(false);\n };\n\n const openPortfolio = () => {\n togglePortfolio(true);\n };\n const [explorerOpened, togglePortfolio] = useState(false);\n\n /* CV Shortcut */\n\n const closeCV = () => {\n toggleCV(false);\n };\n\n const openCV = () => {\n toggleCV(true);\n };\n\n const [cvOpened, toggleCV] = useState(false);\n\n /* Tunes Shortcut */\n\n const closeTunes = () => {\n toggleTunes(false);\n };\n\n const openTunes = () => {\n toggleTunes(true);\n };\n\n const [tunesOpened, toggleTunes] = useState(false);\n\n return (\n \n \n {showAboutModal && (\n }\n title={\"About.txt\"}\n closeModal={handleCloseAboutModal}\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n

Moikka!

\n

\n I'm Janne, a designer from Helsinki. I've been working lately\n with product development in many roles and domains: from\n ecommerce, to public sector, to startups. I'm into structured\n and systems oriented software development, where design is agile\n and rapid.\n

\n

\n This app, sort of a playground of ideas, has been built with\n Create React App and{\" \"}\n \n React95\n \n , an open-source Windows95 component library for React. If\n you're interested in this project even further check out the{\" \"}\n \n React95 component library on Figma\n {\" \"}\n that I made as a past-time project.\n

\n \n \n Background\n {\" \"}\n by WindowsAesthetics /{\" \"}\n \n CC BY-SA 4.0\n \n \n \n \n \n )}\n {showSkillsModal && (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n

\n {\" \"}\n

Some of my skills

I disagree with quantifying skills\n with numbers, percentages etc. - are skills really something\n people can measure? However, here is a rough estimate of my\n latest skills.\n

Design tools

\n

Figma

\n \n

Adobe CC

\n \n

Sketch, InVision

\n \n

WCAG 2.1

\n \n
\n

Dev tools

\n

Storybook(JS)

\n \n

HTML, CSS, SASS

\n \n

Wordpress (PHP/Themes)

\n \n

Git

\n \n

Raspberry Pi & Arduino

\n \n

React

\n \n

Vue

\n \n
\n

Other Skills

\n
    \n
  • Agile methods
    • \n
  • Product development
    • \n
  • Project management
    • \n
  • Design systems
    • \n
  • User interviews
    • \n
  • User testing
    • \n
  • Wireframing and prototyping
    • \n
  • Visual design
    • \n
  • Research
    • \n
  • Copywriting and social media
    • \n
  • Content creation
    • \n
  • Workshops
    • \n
  • Facilitation
    • \n
  • Concept creation
    • \n
\n

\n \n \n \n )}\n {showPhotoModal && (\n }\n menu={[\n {\n name: \"Options\",\n list: (\n \n Close\n \n ),\n },\n ]}\n >\n \n \n \n
\n

janne_compressed_for_web.jpeg

\n
\n \n )}\n {showVaporwaveModal1 && (\n }\n width={340}\n menu={[\n {\n name: \"Options\",\n list: (\n \n \n Close\n \n \n ),\n },\n ]}\n title=\"My_Alter_Ego.doc\"\n >\n \n

A Vaporwave Album

\n

\n In 2018 I took part in a workshop in Lithuania at the Vilnius Art\n Academy in producing a Vaporwave Album with participants coming in\n from around Europe.\n

\n

\n Over the course of the weekend we produced music videos, songs and\n more. I produced two songs for the album and a music video. The\n album can be found on streaming services.\n

\n \n The album on Spotify\n \n

\n

\n
\n \n
\n \n \n )}\n \n }\n target=\"_blank\"\n >\n Email me\n \n \n }>\n Socials\n \n {socialMedia.map(({ icon, name, url }) => (\n \n {name}\n \n ))}\n \n \n }>\n Tunes\n \n }\n >\n Janne's Vaporwave Story from 2018\n \n \n \n }\n onClick={handleOpenPhotoModal}\n >\n Janne\n \n }\n onClick={handleOpenSkillsModal}\n >\n Skills\n \n \n }\n onClick={handleOpenAboutModal}\n >\n About\n \n \n }\n />\n \n \n {explorerOpened && (\n \n )}\n {cvOpened && }\n {tunesOpened && (\n \n )}\n \n \n );\n}\n\nexport default Desktop;\n","import React from \"react\";\nimport { GlobalStyle, ThemeProvider } from \"@react95/core\";\nimport Page from \"./components/mainPage\";\nimport Desktop from \"./components/desktop\";\nimport DesktopIcons from \"./components/desktopIcons\";\n\nconst Home = () => {\n return (\n \n \n \n \n \n {DesktopIcons}\n \n \n \n );\n};\nexport default Home;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === \"localhost\" ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === \"[::1]\" ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === \"production\" && \"serviceWorker\" in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener(\"load\", () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n \"This web app is being served cache-first by a service \" +\n \"worker. To learn more, visit https://bit.ly/CRA-PWA\"\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === \"installed\") {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n \"New content is available and will be used when all \" +\n \"tabs for this page are closed. See https://bit.ly/CRA-PWA.\"\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log(\"Content is cached for offline use.\");\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n console.error(\"Error during service worker registration:\", error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then((response) => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get(\"content-type\");\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf(\"javascript\") === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n \"No internet connection found. App is running in offline mode.\"\n );\n });\n}\n\nexport function unregister() {\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister();\n });\n }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport \"./index.css\";\nimport App from \"./App\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nReactDOM.render(, document.getElementById(\"root\"));\n\nserviceWorker.unregister();\n"],"sourceRoot":""} \ No newline at end of file