{title}

\n\t\t\t\t\t\n\t\t\t\t\t\t{education.website ? (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{education.course}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\teducation.course\n\t\t\t\t\t\t)}\n\t\t\t\t\t{' '}\n\t\t\t\t\t- {education.institute}\n\t\t\t\t

\n\t\t\t\t

{format(new Date(education.endDate), 'MM/yyyy')}

\n\t\t\t\n\t\t\t{/* \n\t\t\t\t\n\t\t\t\t\tCourse contents: {education.technologies.join(', ')}\n\t\t\t\t\n\t\t\t */}\n\t\t\n\t);\n};\n\nexport { Education };\n","import styled from 'styled-components';\n\nconst StyledPosition = styled.div``;\n\nconst Flex = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tmargin-bottom: 0.5rem;\n\n\t@media screen and (min-width: 768px) {\n\t\tflex-direction: row;\n\t}\n`;\n\nconst Text = styled.div`\n\tmargin: 0.5rem 0 3rem;\n\n\tul {\n\t\tmargin: 0;\n\t\tlist-style: square;\n\t\tpadding-left: 1rem;\n\n\t\tli {\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\t}\n`;\n\nexport { Flex, StyledPosition, Text };\n","import { FC } from 'react';\nimport { format } from 'date-fns';\nimport { IJob } from '@Types';\nimport Markdown from 'markdown-to-jsx';\nimport { Flex, StyledPosition, Text } from './styles';\n\nexport interface PositionProps {\n\tjob: IJob;\n}\n\nconst Position: FC = ({ job }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t

\n\t\t\t\t\t{job.jobTitle} -{' '}\n\t\t\t\t\t{job.website ? (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{job.company}\n\t\t\t\t\t\t\n\t\t\t\t\t) : (\n\t\t\t\t\t\tjob.company\n\t\t\t\t\t)}\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t{format(new Date(job.startDate), 'MM/yyyy')} -{' '}\n\t\t\t\t\t{job.endDate ? format(new Date(job.endDate), 'MM/yyyy') : 'present'}\n\t\t\t\t

\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tTechnologies: {job.technologies.join(', ')}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{job.description}\n\t\t\t\n\t\t\n\t);\n};\n\nexport { Position };\n","import absoluteUrl from 'next-absolute-url';\nimport { differenceInCalendarYears } from 'date-fns';\nimport { fetcher } from 'Utils/fetcher';\nimport { GetServerSideProps } from 'next';\nimport styled from 'styled-components';\nimport { useState } from 'react';\n\nimport { IEducation, IJob } from '@Types';\n\nimport { Container } from 'Atoms/Container';\nimport { Education } from 'Atoms/Education';\nimport { Position } from 'Atoms/Position';\nimport { SeoHead } from 'Atoms/SeoHead';\n\ninterface IProps {\n\tjobs: IJob[];\n\teducation: IEducation[];\n}\n\nfunction About({ jobs, education }: IProps) {\n\tconst [loadedJobs, setLoadedJobs] = useState(2);\n\n\tconst loadMore = () => {\n\t\tsetLoadedJobs((prev) => prev + 3);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t\n\n\t\t\t\n\t\t\t\tHey, I'm Junaid Umer\n\t\t\t\t

A Senior iOS Developer from Pakistan

\n\t\t\t\t

\n\t\t\t\t\tAs a passionate iOS developer, I create amazing applications to make\n\t\t\t\t\tthe internet a better place. I am an advocate for app performance and\n\t\t\t\t\taccessibility.\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tI am 27 years old and have been an iOS developer for as long as I can\n\t\t\t\t\tthink. The technologies I work with are Swift and XCode IDE with a\n\t\t\t\t\tfocus on the frameworks UIKit, UIFoundation and Autolayout. I use code\n\t\t\t\t\tnot only to do my day-to-day job, but also to solve everyday problems\n\t\t\t\t\tI come across.\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tWhen I am not writing code, I love to spend time with my family and\n\t\t\t\t\tfriends at home in Pakistan or travelling around the Country. I myself\n\t\t\t\t\tspeak three languages (some better than others). Furthermore, I enjoy\n\t\t\t\t\tcooking fresh food when I come home after a long day at the office.\n\t\t\t\t

\n\n\t\t\t\t

Experience

\n\t\t\t\t{jobs.slice(0, loadedJobs).map((job, i) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\t\n\t\t\t\t\t{loadedJobs < jobs.length && (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\n\n\t\t\t\t

Education

\n\t\t\t\t{education.map((edu) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tDownload a copy of my CV\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n\nconst Headline = styled.h2`\n\tfont-size: 2rem;\n\tmargin-bottom: 0;\n\n\t@media screen and (min-width: 768px) {\n\t\tfont-size: 3rem;\n\n\t\tspan {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t@keyframes wave {\n\t\t\t0% {\n\t\t\t\ttransform: rotate(0);\n\t\t\t}\n\t\t\t50% {\n\t\t\t\ttransform: rotate(-10deg);\n\t\t\t}\n\t\t\t100% {\n\t\t\t\ttransform: rotate(10deg);\n\t\t\t}\n\t\t}\n\n\t\t&:hover span {\n\t\t\tanimation: wave 0.5s ease infinite;\n\t\t}\n\t}\n`;\n\nconst Center = styled.div`\n\ttext-align: center;\n\tfont-weight: bold;\n\tmargin-top: 2rem;\n\n\tbutton {\n\t\tdisplay: block;\n\t\tmargin: 2rem auto;\n\t\tborder: 2px solid ${({ theme }) => theme.text};\n\t\tcolor: ${({ theme }) => theme.text};\n\t\tpadding: 0.5rem 3rem;\n\t\tborder-radius: 5px;\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const getServerSideProps: GetServerSideProps = async ({ req }) => {\n\tconst { origin } = absoluteUrl(req);\n\tconst { positions } = await fetcher(`${origin}/api/jobs`);\n\tconst { education } = await fetcher(`${origin}/api/education`);\n\tconst skills = await fetcher(`${origin}/api/skills`);\n\n\treturn {\n\t\tprops: {\n\t\t\tjobs: positions,\n\t\t\teducation,\n\t\t\tskills,\n\t\t},\n\t};\n};\n\nexport default About;\n","\n (window.__NEXT_P = window.__NEXT_P || []).push([\n \"/about\",\n function () {\n return require(\"private-next-pages/about.tsx\");\n }\n ]);\n if(module.hot) {\n module.hot.dispose(function () {\n window.__NEXT_P.push([\"/about\"])\n });\n }\n "],"names":["SeoHead","title","description","author","keywords","image","meta","name","content","length","map","type","dangerouslySetInnerHTML","__html","StyledEducation","styled","Flex","Education","education","website","href","target","rel","course","institute","format","Date","endDate","StyledPosition","Text","Position","job","jobTitle","company","startDate","technologies","join","Headline","Center","theme","text","jobs","useState","loadedJobs","setLoadedJobs","Container","slice","i","onClick","prev","edu","window","__NEXT_P","push"],"sourceRoot":""}