{"version":3,"sources":["webpack:///./src/pages/about.js","webpack:///./src/components/template.js","webpack:///./src/images/about-me.jpg","webpack:///./src/files/Zhen_Wang_resume_2019.pdf"],"names":["AboutInfo","styled","h1","AboutPage","className","href","pdf","src","require","alt","InfoPanelGroup","div","InfoGroup","InfoTitle","h6","InfoText","p","Image","img","InlineImage","Section","SectionTitle","h4","StepContainerGroup","StepTitle","StepNo","span","StepText","SmallTitle","h5","MainText","NoteText","ChapterTitle","h3","SectionForImagesFlex","props","lesspadding","SectionForImages","white","ImageText","module","exports"],"mappings":"6FAAA,6EAKMA,EAAYC,IAAOC,GAAV,mEAAGD,CAAH,0IAsDAE,UA7BG,kBAEhB,yBAAKC,UAAU,aACb,yBAAKA,UAAU,uBACb,kBAACJ,EAAD,gHACA,6BADA,oHAEA,6BAAM,uBAAGK,KAAMC,KAAT,sBAAiC,0BAAMF,UAAU,aAAhB,MAFvC,IAEgF,uBAAGC,KAAK,mGAAR,eAAsH,0BAAMD,UAAU,aAAhB,QAIxM,kBAAC,IAAD,CAAOG,IAAKC,EAAQ,QAA2BC,IAAI,gBAEnD,kBAAC,IAAD,KACE,kBAAC,IAAD,KACE,kBAAC,IAAD,eACA,kBAAC,IAAD,qNAEF,kBAAC,IAAD,KACE,kBAAC,IAAD,YACA,kBAAC,IAAD,yZAEF,kBAAC,IAAD,KACE,kBAAC,IAAD,eACA,kBAAC,IAAD,ySAA2S,6BAAM,6BAAjT,6M,oCCrDR,spBAGaC,EAAiBT,IAAOU,IAAV,6EAAGV,CAAH,4LAUrB,IAOOW,EAAYX,IAAOU,IAAV,wEAAGV,CAAH,sKAcTY,EAAYZ,IAAOa,GAAV,wEAAGb,CAAH,MAETc,EAAWd,IAAOe,EAAV,uEAAGf,CAAH,0BAKRgB,EAAQhB,IAAOiB,IAAV,oEAAGjB,CAAH,sIAYLkB,EAAclB,YAAOgB,GAAV,0EAAGhB,CAAH,kGASXmB,EAAUnB,IAAOU,IAAV,sEAAGV,CAAH,6KAePoB,EAAepB,IAAOqB,GAAV,2EAAGrB,CAAH,iGAWZsB,EAAqBtB,IAAOU,IAAV,iFAAGV,CAAH,mHAalBuB,EAAYvB,IAAOa,GAAV,wEAAGb,CAAH,4MAiBTwB,EAASxB,IAAOyB,KAAV,sEAAGzB,CAAH,0TA4BN0B,EAAW1B,IAAOe,EAAV,wEAAGf,CAAH,gPAGjB,IAsBS2B,EAAa3B,IAAO4B,GAAV,0EAAG5B,CAAH,yKAiBV6B,EAAW7B,IAAOe,EAAV,wEAAGf,CAAH,kOAwBR8B,EAAW9B,YAAO6B,GAAV,wEAAG7B,CAAH,0JAcR+B,EAAe/B,IAAOgC,GAAV,4EAAGhC,CAAH,MAEZiC,EAAuBjC,IAAOU,IAAV,oFAAGV,CAAH,kVAarB,SAAAkC,GAAK,OAAIA,EAAMC,YAAc,oBAAsB,gBAClD,SAAAD,GAAK,OAAIA,EAAMC,YAAc,cAAgB,aAI5C,SAAAD,GAAK,OAAIA,EAAMC,YAAc,mBAAqB,eACjD,SAAAD,GAAK,OAAIA,EAAMC,YAAc,aAAe,YAM9CC,EAAmBpC,IAAOU,IAAV,gFAAGV,CAAH,0JAIb,SAAAkC,GAAK,OAAIA,EAAMG,MAAQ,OAAS,UASnCC,EAAYtC,IAAOe,EAAV,yEAAGf,CAAH,4N,uBC1QtBuC,EAAOC,QAAU,IAA0B,wD,qBCA3CD,EAAOC,QAAU,IAA0B","file":"component---src-pages-about-js-71c54ed45dd446671330.js","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Image, Section,  StepContainerGroup, StepTitle, StepText } from '../components/template';\nimport pdf from \"../files/Zhen_Wang_resume_2019.pdf\"\n\nconst AboutInfo = styled.h1`\n    display: block;\n    box-sizing: border-box;\n    position: relative;\n\n    margin: 0 0 2.5em 0;\n  \n    font-weight: 500;\n    font-size: 1.5em; \n    line-height: 1.3;\n\n    color: #ddd;\n\n    // @media (max-width: 1224px) {\n    //     margin:0 6em 0.6em 0;\n    // }\n    // @media (max-width: 768px) {\n    //     width: 100%;\n    //     height: 220px;\n    //     display: block;\n    //     margin:0 0 12px 0;\n    //     padding-top: 170px;\n    // }\n`\n\nconst AboutPage = () => (\n\n  <div className=\"container\">\n    <div className=\"containerGroupShort\">\n      <AboutInfo>Hey, I am Zhen - an UX Designer from University of Michigan, specializing in human-computer interaction.\n      <br />Besides work, you may find me swimming 🏊, listening to pop/classic music 🎵, and grazing at bubble tea shops 🍶.\n      <br /><a href={pdf}>Download my resume <span className=\"linkarrow\">></span></a> <a href=\"mailto:me@alej.wang?subject=alej.wang — Website Inquiry&body=Hey Zhen! It's nice to know you...\">Let's talk! <span className=\"linkarrow\">></span></a>\n      </AboutInfo>\n    </div>\n\n    <Image src={require(\"../images/about-me.jpg\")} alt=\"My portrait\"/>\n\n    <Section>\n      <StepContainerGroup>\n        <StepTitle>before</StepTitle>\n        <StepText>I was a coder at the beginning. I was an exploring architect. I like combination beauty between technology and design. Because once they being together, the mixing magic can make life easier and joyful. </StepText>\n      </StepContainerGroup>\n      <StepContainerGroup>\n        <StepTitle>now</StepTitle>\n        <StepText>I am still exploring the world of coding and designing at the same time, especially the method of interaction design, user research, usability test, prototype coding and more at school. By some small projects, I realize my efforts can work out to help local community and organizations. I really enjoy my way of design - help people near me to solve their problems, then push it forward and broader.</StepText>\n      </StepContainerGroup>\n      <StepContainerGroup>\n        <StepTitle>future</StepTitle>\n        <StepText>Design for me is a curve line with points on it. Instead of drawing tons of points in random order or drawing one point at the time, going through the beautiful line is what I want to achieve. I'm graduating in April 2019 and looking for open and fun people to work with in summer 2018!   <br /><br />To be what’s next, is a hard thing to say. Even though I realize changing the status quo sometimes hurts, and the ideas won’t come true immediately. To design for a better future never goes wrong.</StepText>\n      </StepContainerGroup>\n    </Section>\n  </div>\n)\n\nexport default AboutPage\n","import styled from 'styled-components'\n\n\nexport const InfoPanelGroup = styled.div`\n  width: 90%;\n  max-width: 1000px;\n  height:auto;\n  margin: 100px auto;\n  box-sizing: border-box;\n  overflow:hidden;\n\n  @media (max-width: 1224px) {\n    padding-left: 0;\n    ${'' /* margin: 150px auto; */}\n  }\n  @media (max-width: 768px) {\n    margin: 80px auto;\n  }\n`\n\nexport const InfoGroup = styled.div`\n  min-width: 18%;\n  padding-right: 10px;\n  box-sizing: border-box;\n  float: left;\n\n  @media (max-width: 1224px) {\n    margin-bottom: 50px;\n    clear: left;\n  }\n  @media (max-width: 768px) {\n    width:100%;\n  }\n`\nexport const InfoTitle = styled.h6``\n\nexport const InfoText = styled.p`\n  margin: 0;\n  color: #aaa;\n`\n\nexport const Image = styled.img`\n  width: 90%;\n  max-width: 1200px;\n  margin: 0 auto;\n  box-sizing: border-box;\n  display:block;\n  overflow:auto;\n  @media (max-width: 768px) {\n    width: 100%;\n  }\n`\n\nexport const InlineImage = styled(Image)`\n  width: 106%;\n  margin: 120px -3% 100px -3%;\n  @media (max-width: 768px) {\n    width: 100%;\n    margin: 80px auto;\n  }\n`\n\nexport const Section = styled.div`\n  width: 90%;\n  height: auto;\n  max-width: 1000px;\n  margin: 100px auto;\n  box-sizing: border-box;\n  @media (max-width: 1224px) {\n    margin: 150px auto; \n  }\n  @media (max-width: 768px) {\n    margin: 80px auto;\n  }\n`\n\n\nexport const SectionTitle = styled.h4`\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  @media (max-width: 768px) {\n    font-size: 1.7em;\n    margin-bottom: 80px;\n  }\n`\n\nexport const StepContainerGroup = styled.div`\n  width: 100%;\n  overflow: auto;\n  margin: 50px 0;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n  @media (max-width: 768px) {\n    margin: 80px 0;\n  }\n`\n\nexport const StepTitle = styled.h6`\n  width: 30%;\n  padding-right: 10px;\n  box-sizing: border-box;\n  float: left;\n  display: inline-block;\n\n  @media (max-width: 1224px) {\n    width: 20%;\n  }\n  @media (max-width: 768px) {\n    float: none;\n    width: auto;\n    max-width:calc(100vw - 150px);\n  }\n`\n\nexport const StepNo = styled.span`\n  width: auto;\n  margin: 0;\n  display: inline-block;\n  position: relative;\n  \n  padding-right: 10px;\n  box-sizing: border-box;\n  float: left;\n\n  font-size: 1.05em;\n  font-weight: 400;\n  line-height: 1.6em;\n  color: #eee;\n\n  &:after {\n    content: \"\";\n    width: 25px;\n    height: 1px;\n    display: inline-block;\n    margin: 0 10px 0 12px;\n    vertical-align: middle;\n    \n    background: #FFF;\n    opacity: 0.25;\n  }\n`\n\nexport const StepText = styled.p`\n  display: block;\n  width: 50%;\n  ${'' /* float: right; */}\n  margin: 0 0 0 50%;\n\n  font-size: 1.05em;\n  line-height: 1.65em;\n  color: #ddd;\n  \n  & + & {\n    margin-top: 20px;\n  }\n\n  @media (max-width: 1224px) {\n    width: 65%;\n    margin: 0 0 0 35%;\n  }\n  @media (max-width: 768px) {\n    clear: both;\n    width: 100%;\n    margin: 20px 0 0 0;\n  }\n`\n\nexport const SmallTitle = styled.h5`\n  width: 40%;\n  box-sizing: border-box;\n  float: left;\n\n  @media (max-width: 1224px) {\n    width: 30%;\n  }\n  @media (max-width: 768px) {\n    font-size: 1.3em;\n    clear: left;\n    margin-bottom: 30px;\n    width:100%;\n  }\n\n`\n\nexport const MainText = styled.p`\n  display: block;\n  width: 50%;\n  height: auto;\n  margin: 0 0 100px 50%;\n\n  & + & {\n    margin-top: -80px;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  @media (max-width: 1224px) {\n    width: 65%;\n    margin-left: 35%;\n  }\n  @media (max-width: 768px) {\n    width: 100%;\n    margin: 0 0 120px 0;\n  }\n`\n\nexport const NoteText = styled(MainText)`\n  margin: 2em 0 0 50%;\n  color: #888;\n  font-size: 1em;\n  @media (max-width: 1224px) {\n    width: 65%;\n    margin-left: 35%;\n  }\n  @media (max-width: 768px) {\n    width: 100%;\n    margin-left: 0;\n  }\n`\n\nexport const ChapterTitle = styled.h3``\n\nexport const SectionForImagesFlex = styled.div`\n  display: -webkit-box;\n  display: -moz-box;\n  display: -ms-flexbox;\n  display: -webkit-flex;\n  display: flex;\n  \n  -webkit-flex-flow: row wrap;\n  justify-content: center;\n  align-items: stretch;\n  align-content: stretch;\n\n  width: 100%;\n  margin: ${props => props.lesspadding ? \"100px auto 0 auto\" : \"100px auto\"};\n  padding: ${props => props.lesspadding ? \"100px 0 0 0\" : \"100px 0\"};\n  background: #222;\n  background-clip: padding-box;\n  @media (max-width: 768px) {\n    margin: ${props => props.lesspadding ? \"80px auto 0 auto\" : \"80px auto\"};\n    padding: ${props => props.lesspadding ? \"80px 0 0 0\" : \"80px 0\"};\n    box-sizing: border-box;\n  }\n`\n\n\nexport const SectionForImages = styled.div`\n  display: block;\n  width: 100%;\n  padding: 100px 0;\n  background: ${props => props.white ? \"#fff\" : \"#222\"};\n  \n  background-clip: padding-box;\n  @media (max-width: 768px) {\n    padding: 80px 5%;\n    box-sizing: border-box;\n  }\n`\n\nexport const ImageText = styled.p`\n  display: block;\n  width: 50%;\n  max-width: 500px;\n  height: auto;\n  margin: 3em 0 -1em 50%;\n  color: #888;\n  font-size: 1em;\n  opacity: 1;\n  @media (max-width: 1224px) {\n    width: 65%;\n    margin-left: 35%;\n  }\n  @media (max-width: 768px) {\n    width: 100%;\n    margin-left: 0;\n  }\n`\n\n","module.exports = __webpack_public_path__ + \"static/about-me-6f88f167ed80096014e458a3e011ed99.jpg\";","module.exports = __webpack_public_path__ + \"static/Zhen_Wang_resume_2019-3d4475ad285dcd00a47696dccc033863.pdf\";"],"sourceRoot":""}