Add more resume space & resume dev mode

Author: teimurjan

workspaces/gql-types/src/index.ts

@@ -11005,6 +11005,48 @@ export type IndexBannerQuery = {
       fullName: string
       headline: string
       about: string
+      location: string
+      phoneNumber: string
+      email: string
+    }>
+    educations: Array<{
+      __typename?: 'GraphCMS_Education'
+      id: string
+      school: string
+      degree?: string | null | undefined
+      areaOfStudy: string
+      startDate: any
+      endDate?: any | null | undefined
+    }>
+    skills: Array<{
+      __typename?: 'GraphCMS_Skill'
+      id: string
+      title: string
+      yearsOfExperience: number
+    }>
+    experiences: Array<{
+      __typename?: 'GraphCMS_Experience'
+      id: string
+      company: string
+      position: string
+      startDate: any
+      endDate?: any | null | undefined
+      description: { __typename?: 'GraphCMS_RichText'; html: string }
+    }>
+    publications: Array<{
+      __typename?: 'GraphCMS_Publication'
+      id: string
+      title: string
+      link: string
+      date: any
+    }>
+    conferences: Array<{
+      __typename?: 'GraphCMS_Conference'
+      id: string
+      title: string
+      topic: string
+      link: string
+      date: any
     }>
   }
 }

workspaces/landing/src/components/atoms/button/Button.tsx

@@ -5,11 +5,12 @@ import { buttonCss } from './styles'
 
 export interface Props extends EmotionProps, HTMLAttributes<HTMLButtonElement> {
   inverted?: boolean
+  disabled?: boolean
 }
 
 const Button = forwardRef<HTMLButtonElement, Props>(
-  ({ children, inverted = false, ...rest }, ref) => (
-    <button ref={ref} css={buttonCss({ inverted })} {...rest}>
+  ({ children, inverted = false, disabled = false, ...rest }, ref) => (
+    <button ref={ref} css={buttonCss({ inverted, disabled })} {...rest}>
       {children}
     </button>
   )

workspaces/landing/src/components/atoms/button/ButtonLink.tsx

@@ -4,14 +4,15 @@ import { buttonCss } from './styles'
 
 export interface Props extends LinkProps {
   inverted?: boolean
+  disabled?: boolean
   to: LinkProps['to']
 }
 
 const ButtonLink = forwardRef<HTMLAnchorElement, Props>(
-  ({ children, inverted = false, ...rest }, ref) => (
+  ({ children, inverted = false, disabled = false, ...rest }, ref) => (
     <Link
       ref={ref}
-      css={buttonCss({ inverted })}
+      css={buttonCss({ inverted, disabled })}
       {...rest}
       color={inverted ? 'blue' : 'beige'}
       inheritFontSize

workspaces/landing/src/components/atoms/button/styles.ts

@@ -3,9 +3,11 @@ import { theme } from '@teimurjan/utils'
 
 interface Args {
   inverted?: boolean
+  disabled?: boolean
 }
 
-export const buttonCss = ({ inverted }: Args) => css`
+export const buttonCss = ({ inverted, disabled }: Args) => css`
+  pointer-events: ${disabled ? 'none' : 'auto'};
   border: none;
   background: ${inverted
     ? `linear-gradient(to right, ${theme.colors.button.beigeDarken} 50%, ${theme.colors.button.beige} 50%)`

workspaces/landing/src/components/organisms/index-banner/IndexBanner.tsx

@@ -3,9 +3,11 @@ import { css, keyframes } from '@emotion/react'
 import { Fragment } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import { IndexBannerQuery } from '@teimurjan/gql-types'
+import Resume, { PDFDownloadLink } from '@teimurjan/resume'
 import { theme } from '@teimurjan/utils'
 import { Banner } from '../../molecules'
 import { Button, Square } from '../../atoms'
+import { useLazyInitialization } from '../../../hooks'
 
 const roll = (rotation: number) => keyframes`
   0% {
@@ -24,17 +26,62 @@ const query = graphql`
         fullName
         headline
         about
+        location
+        phoneNumber
+        email
+      }
+      educations(orderBy: startDate_DESC) {
+        id
+        school
+        degree
+        areaOfStudy
+        startDate
+        endDate
+      }
+      skills(orderBy: yearsOfExperience_DESC) {
+        id
+        title
+        yearsOfExperience
+      }
+      experiences(orderBy: startDate_DESC) {
+        id
+        company
+        position
+        startDate
+        endDate
+        description {
+          html
+        }
+      }
+      publications {
+        id
+        title
+        link
+        date
+      }
+      conferences {
+        id
+        title
+        topic
+        link
+        date
       }
     }
   }
 `
 
 const IndexBanner = () => {
+  const data = useStaticQuery<IndexBannerQuery>(query)
   const {
     gcms: {
       bios: [{ fullName, headline, about }],
     },
-  } = useStaticQuery<IndexBannerQuery>(query)
+  } = data
+  const { value: shouldGeneratePDFInBrowser, isInitialized } =
+    useLazyInitialization(
+      process.env.NODE_ENV === 'development' && typeof window !== 'undefined',
+      false
+    )
 
   return (
     <Banner
@@ -45,9 +92,33 @@ const IndexBanner = () => {
       subtitle={headline}
       description={about}
       button={
-        <Button.Link type="external" to="/resume.pdf">
-          Get resume
-        </Button.Link>
+        shouldGeneratePDFInBrowser && isInitialized ? (
+          <PDFDownloadLink
+            document={<Resume {...data} />}
+            fileName="resume.pdf"
+          >
+            {({ url, loading }) => (
+              <Button
+                onClick={(e) => {
+                  // Prevent download action to be triggered
+                  e.stopPropagation()
+                  e.preventDefault()
+
+                  if (url) {
+                    window.open(url, '_blank')
+                  }
+                }}
+                disabled={loading}
+              >
+                Get resume
+              </Button>
+            )}
+          </PDFDownloadLink>
+        ) : (
+          <Button.Link type="external" to="/resume.pdf">
+            Get resume
+          </Button.Link>
+        )
       }
       image={
         <Fragment>

workspaces/landing/src/hooks/index.ts

@@ -2,3 +2,4 @@ export { default as useMedia } from './use-media'
 export { default as useElementVisibility } from './use-element-visibility'
 export { default as useWindowScroll } from './use-window-scroll'
 export { default as useOnClickOutside } from './use-on-click-outside'
+export { default as useLazyInitialization } from './use-lazy-initialization'

workspaces/landing/src/hooks/use-lazy-initialization.ts

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react'
+
+const useLazyInitialization = <T>(actualValue: T, defaultValue: T) => {
+  const [trigger, setTrigger] = useState(false)
+
+  useEffect(() => {
+    const timeoutID = setTimeout(() => setTrigger(true), 0)
+    return () => clearTimeout(timeoutID)
+  }, [])
+
+  const value = trigger ? actualValue : defaultValue
+
+  return { value, isInitialized: trigger }
+}
+
+export default useLazyInitialization

workspaces/resume/src/Resume.tsx

@@ -41,11 +41,11 @@ const styles = StyleSheet.create({
   },
   wrapper: {
     width: '100%',
-    padding: '0 40px',
+    padding: '0 20px',
   },
   container: {
     backgroundColor: theme.colors.resume.white,
-    padding: '20px 20px',
+    padding: '16px 20px',
     width: '100%',
     height: '100%',
   },

workspaces/resume/src/components/contacts/Contacts.tsx

@@ -2,7 +2,7 @@ import { Text, View, StyleSheet } from '@react-pdf/renderer'
 import { theme } from '@teimurjan/utils'
 import MapPinIcon from '../map-pin-icon'
 import MailIcon from '../mail-icon'
-import PhoneIcon from '../mail-icon'
+import PhoneIcon from '../phone-icon'
 
 const styles = StyleSheet.create({
   contactsSection: {

workspaces/resume/src/components/header/Header.tsx

@@ -5,14 +5,14 @@ const styles = StyleSheet.create({
   header: {
     backgroundColor: theme.colors.resume.green,
     width: '100%',
-    padding: '20px 40px 0 40px',
+    padding: '20px 20px 0 20px',
     textAlign: 'center',
     textTransform: 'uppercase',
     fontFamily: 'ShareTechMono',
   },
   headerContainer: {
     width: '100%',
-    padding: '20px 50px',
+    padding: '10px 40px',
     backgroundColor: theme.colors.resume.white,
   },
   headerTitle: {