Intro 2

scripts/copyUsedEmojis.ts

@@ -106,7 +106,9 @@ const allUsedEmojis = [
     '🧠',
     '📓',
     '😴',
-    '🚦'
+    '🚦',
+    '👨🏻‍💻',
+    '👋'
   ])
 ]
 

src/components/H.tsx

@@ -35,7 +35,7 @@ import EmojiNumber from 'src/components/EmojiNumber'
 import TwitterEmbed from 'src/components/TwitterEmbed'
 import { shareId, shareVisible } from 'src/lib/twitter'
 import { dateString, dateSchemaString } from 'src/lib/date'
-import { githubRepo, jpBaseUrl, enBaseUrl } from 'src/lib/meta'
+import { githubRepo, jpBaseUrl } from 'src/lib/meta'
 import CustomEmoji from 'src/components/CustomEmoji'
 import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
 import { VariableNames } from 'src/types/VariableNames'
@@ -166,6 +166,7 @@ interface HProps {
     | { name: 'whatTheNumberIsCaption' }
     | { name: 'runAndShowAllSteps' }
     | { name: 'ignoreForNow' }
+    | { name: 'aboutMe' }
 }
 
 const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
@@ -1136,9 +1137,9 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
             <br />
             <Bold>ソースコード:</Bold>{' '}
             <ExternalLink href={githubRepo}>GitHubで公開中</ExternalLink>
-            <br />
+            {/*<br />
             <Bold>英語版:</Bold>{' '}
-            <ExternalLink href={enBaseUrl}>英語版はこちら</ExternalLink>
+            <ExternalLink href={enBaseUrl}>英語版はこちら</ExternalLink>*/}
             {args.includeTwitter && (
               <>
                 <br />
@@ -1710,6 +1711,17 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       )
     }
   }
+  if (args.name === 'aboutMe') {
+    if (locale === 'en') {
+      return (
+        <>
+          <P>?</P>
+        </>
+      )
+    } else {
+      return <></>
+    }
+  }
   throw new Error()
 }
 

src/components/Twemoji/1f44b.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+const Svg1F44B = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 36 36" {...props}>
+    <path
+      fill="#EF9645"
+      d="M4.861 9.147c.94-.657 2.357-.531 3.201.166l-.968-1.407c-.779-1.111-.5-2.313.612-3.093 1.112-.777 4.263 1.312 4.263 1.312-.786-1.122-.639-2.544.483-3.331 1.122-.784 2.67-.513 3.456.611l10.42 14.72L25 31l-11.083-4.042L4.25 12.625c-.793-1.129-.519-2.686.611-3.478z"
+    />
+    <path
+      fill="#FFDC5D"
+      d="M2.695 17.336s-1.132-1.65.519-2.781c1.649-1.131 2.78.518 2.78.518l5.251 7.658c.181-.302.379-.6.6-.894L4.557 11.21s-1.131-1.649.519-2.78c1.649-1.131 2.78.518 2.78.518l6.855 9.997c.255-.208.516-.417.785-.622L7.549 6.732s-1.131-1.649.519-2.78c1.649-1.131 2.78.518 2.78.518l7.947 11.589c.292-.179.581-.334.871-.498L12.238 4.729s-1.131-1.649.518-2.78c1.649-1.131 2.78.518 2.78.518l7.854 11.454 1.194 1.742c-4.948 3.394-5.419 9.779-2.592 13.902.565.825 1.39.26 1.39.26-3.393-4.949-2.357-10.51 2.592-13.903L24.515 8.62s-.545-1.924 1.378-2.47c1.924-.545 2.47 1.379 2.47 1.379l1.685 5.004c.668 1.984 1.379 3.961 2.32 5.831 2.657 5.28 1.07 11.842-3.94 15.279-5.465 3.747-12.936 2.354-16.684-3.11L2.695 17.336z"
+    />
+    <g fill="#5DADEC">
+      <path d="M12 32.042C8 32.042 3.958 28 3.958 24c0-.553-.405-1-.958-1s-1.042.447-1.042 1C1.958 30 6 34.042 12 34.042c.553 0 1-.489 1-1.042s-.447-.958-1-.958z" />
+      <path d="M7 34c-3 0-5-2-5-5 0-.553-.447-1-1-1s-1 .447-1 1c0 4 3 7 7 7 .553 0 1-.447 1-1s-.447-1-1-1zM24 2c-.552 0-1 .448-1 1s.448 1 1 1c4 0 8 3.589 8 8 0 .552.448 1 1 1s1-.448 1-1c0-5.514-4-10-10-10z" />
+      <path d="M29 .042c-.552 0-1 .406-1 .958s.448 1.042 1 1.042c3 0 4.958 2.225 4.958 4.958 0 .552.489 1 1.042 1s.958-.448.958-1C35.958 3.163 33 .042 29 .042z" />
+    </g>
+  </svg>
+)
+
+export default Svg1F44B

src/components/Twemoji/1f468-1f3fb-200d-1f4bb.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+
+const Svg1F4681F3Fb200D1F4Bb = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 36 36" {...props}>
+    <path
+      fill="#77B255"
+      d="M35 36v-5c0-3.314-2.686-6-6-6H13c-3.313 0-6 2.686-6 6v5h28z"
+    />
+    <path
+      fill="#F7DECE"
+      d="M16.64 25.106c0 .894 2.36 1.993 4.36 1.993s4.359-1.099 4.359-1.992V21.29h-8.72v3.816z"
+    />
+    <path
+      fill="#EEC2AD"
+      d="M16.632 22.973c1.216 1.374 2.724 1.746 4.364 1.746 1.639 0 3.146-.373 4.363-1.746v-3.491h-8.728v3.491z"
+    />
+    <path
+      fill="#F7DECE"
+      d="M14.444 12.936c0 1.448-.734 2.622-1.639 2.622s-1.639-1.174-1.639-2.622.734-2.623 1.639-2.623c.905-.001 1.639 1.174 1.639 2.623m16.389 0c0 1.448-.733 2.622-1.639 2.622-.905 0-1.639-1.174-1.639-2.622s.733-2.623 1.639-2.623c.906-.001 1.639 1.174 1.639 2.623"
+    />
+    <path
+      fill="#F7DECE"
+      d="M12.477 13.96c0-5.589 3.816-10.121 8.523-10.121s8.522 4.532 8.522 10.121S25.707 24.081 21 24.081c-4.706-.001-8.523-4.532-8.523-10.121"
+    />
+    <path
+      fill="#C1694F"
+      d="M21 20.802c-2.754 0-3.6-.705-3.741-.848-.256-.256-.256-.671 0-.927.248-.248.646-.255.902-.023.052.037.721.487 2.839.487 2.2 0 2.836-.485 2.842-.49.256-.255.657-.243.913.015.256.256.242.683-.014.938-.141.143-.987.848-3.741.848"
+    />
+    <path
+      fill="#292F33"
+      d="M21 0c5.648 0 9.178 4.648 9.178 8.121 0 3.473-.706 4.863-1.412 3.473l-1.412-2.778s-4.235 0-5.647-1.39c0 0 2.118 4.168-2.118 0 0 0 .706 2.779-3.53-.694 0 0-2.118 1.389-2.824 4.862-.196.964-1.412 0-1.412-3.473C11.822 4.648 14.646 0 21 0"
+    />
+    <path
+      fill="#662113"
+      d="M17 14c-.55 0-1-.45-1-1v-1c0-.55.45-1 1-1s1 .45 1 1v1c0 .55-.45 1-1 1m8 0c-.55 0-1-.45-1-1v-1c0-.55.45-1 1-1s1 .45 1 1v1c0 .55-.45 1-1 1"
+    />
+    <path
+      fill="#C1694F"
+      d="M21.75 16.75h-1.5c-.413 0-.75-.337-.75-.75s.337-.75.75-.75h1.5c.413 0 .75.337.75.75s-.337.75-.75.75"
+    />
+    <path
+      fill="#E1E8ED"
+      d="M33 35c0 .553-.447 1-1 1H22c-.553 0-1-.447-1-1 0-.553.447-1 1-1h10c.553 0 1 .447 1 1z"
+    />
+    <path
+      fill="#E1E8ED"
+      d="M20.24 22H3.759c-1.524 0-3.478.771-2.478 3.531l3.072 8.475C4.354 34.006 4.75 36 7 36h20l-4-11.24c-.438-1.322-1.235-2.76-2.76-2.76z"
+    />
+    <path
+      fill="#99AAB5"
+      d="M19.24 22H2.759c-1.524 0-3.478.771-2.478 3.531l3.072 8.475C3.354 34.006 3.75 36 6 36h20l-4-11.24c-.438-1.322-1.235-2.76-2.76-2.76z"
+    />
+    <path
+      fill="#E1E8ED"
+      d="M14.019 29.283c.524 1.572.099 3.13-.949 3.479-1.048.35-2.322-.641-2.846-2.213s-.099-3.13.949-3.479c1.048-.349 2.323.641 2.846 2.213zM19 24.75H3c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h16c.414 0 .75.336.75.75s-.336.75-.75.75z"
+    />
+  </svg>
+)
+
+export default Svg1F4681F3Fb200D1F4Bb

src/contents/0.en.tsx

@@ -11,10 +11,10 @@ import {
   P,
   HighlightBold,
   Bold,
-  Italic
+  Italic,
   // Ol,
   // OlLi,
-  // Hr
+  Hr
 } from 'src/components/ContentTags'
 import Emoji from 'src/components/Emoji'
 import CustomEmoji from 'src/components/CustomEmoji'
@@ -151,7 +151,7 @@ export default () => (
         }
       },
       {
-        title: <>Start now, or read the introduction</>,
+        title: <>Start now or read the introduction</>,
         content: (
           <>
             <P>
@@ -165,7 +165,8 @@ export default () => (
             <P>
               <Emoji>🤔</Emoji>{' '}
               <Bold>If you want to read the introduction</Bold> before you get
-              started, <Highlight>scroll down and keep reading!</Highlight>
+              started, <Highlight>scroll down and keep reading!</Highlight> The
+              introduction only takes a few minutes to read.
             </P>
             <EmojiSeparator
               nodes={[
@@ -215,7 +216,7 @@ export default () => (
               NOT talk about this startup investing firm.{' '}
               <Highlight>
                 Y Combinator is actually the name of{' '}
-                <Bold>an important concept in computer science</Bold>, and
+                <Bold>an interesting concept in computer science</Bold>, and
                 that’s what we’re going to talk about.
               </Highlight>
             </P>
@@ -225,14 +226,15 @@ export default () => (
                 <>
                   Y Combinator is actually the name of
                   <br />
-                  <Italic>an important concept in computer science</Italic>
+                  <Italic>an interesting concept in computer science</Italic>
                 </>
               }
             />
             <P>
               <Bold>In fact:</Bold> The startup investing firm Y Combinator was{' '}
-              <Italic>named after</Italic> this computer science concept. Paul
-              Graham, a co-founder of the firm, said this in{' '}
+              <Italic>named after</Italic> this computer science concept.{' '}
+              <Emoji>👨🏻‍🦳</Emoji> Paul Graham, a co-founder of the firm, said this
+              in{' '}
               <ExternalLink href="https://mixergy.com/interviews/y-combinator-paul-graham/">
                 his 2010 interview
               </ExternalLink>
@@ -245,19 +247,19 @@ export default () => (
                   children: (
                     <>
                       <P>
-                        [Y Combinator is] a programming trick. … I wanted to
-                        call it Y Combinator just because I thought the Y
-                        Combinator was a really cool thing. So it would be the
-                        perfect name for picking out the kind of people that we
-                        wanted.
+                        [<Bold>Y Combinator is</Bold>] a programming trick. … I
+                        wanted to call it Y Combinator just because I thought
+                        the Y Combinator was a really cool thing. So it would be
+                        the perfect name for picking out the kind of people that
+                        we wanted.
                       </P>
                       <P>
-                        Hackers would look at this and think,{' '}
+                        <Bold>Hackers</Bold> would look at this and think,{' '}
                         <Italic>
                           “That’s so cool. They’re named after the Y Combinator.
                           There must be something going on here.”
                         </Italic>{' '}
-                        And suits would look at it and think,{' '}
+                        And <Bold>suits</Bold> would look at it and think,{' '}
                         <Italic>“Y Combinator, what’s that?”</Italic>
                       </P>
                       <P>
@@ -270,11 +272,11 @@ export default () => (
               ]}
             />
             <P>
-              <Bold>Explanation of the above quote:</Bold> Paul Graham, a
-              computer scientist,{' '}
+              <Emoji>👨🏻‍🦳</Emoji> <Bold>Explanation of the above quote:</Bold>{' '}
+              Paul Graham, a computer scientist,{' '}
               <Highlight>
-                wanted to invest in entrepreneurs who are also programmers
-                (“hackers” <Emoji>😎</Emoji>)
+                wanted to invest in entrepreneurs who are also programmers (“
+                <Bold>hackers</Bold>” <Emoji>😎</Emoji>)
               </Highlight>
               . So he named his investing firm “Y Combinator”, which is a
               computer science (programming) term, in order to attract hackers.
@@ -283,26 +285,99 @@ export default () => (
               And because Y Combinator is a very technical computer science
               concept,{' '}
               <Highlight>
-                he assumed businesspeople (“suits” <Emoji>👔</Emoji>), who he
-                didn’t care about, won’t understand what it means.
-              </Highlight>
+                he assumed businesspeople (“<Bold>suits</Bold>”{' '}
+                <Emoji>👔</Emoji>) won’t understand what it means
+              </Highlight>{' '}
+              and therefore won’t be attracted.
             </P>
             <EmojiSeparator
               emojis={['😎', '🆚', '👔']}
               description={
                 <>
                   <Bold>Hackers vs Suits:</Bold>
                   <br />
-                  To attract programmers, Paul Graham
+                  To attract programmers
+                  <br />
+                  but not businesspeople,
                   <br />
-                  named his investing firm “Y Combinator”,
+                  Paul Graham named his investing firm
                   <br />
-                  an important computer science concept.
+                  “Y Combinator”
                 </>
               }
             />
+            <P>
+              <Emoji>😉</Emoji> <Bold>But don’t worry:</Bold>{' '}
+              <Highlight>
+                Even if you have no programming background, by the time you
+                finish this course, you’ll understand what Y Combinator is.
+              </Highlight>
+            </P>
+            <P>Let’s now talk about this course!</P>
           </>
         )
+      },
+      {
+        title: <>Why teach Y Combinator for non-programmers?</>,
+        content: <></>,
+        footer: {
+          content: (
+            <>
+              <P>For programmers</P>
+              <P>Please ★ star it on GitHub!</P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>How to teach Y Combinator for non-programmers</>,
+        content: <></>,
+        footer: {
+          content: (
+            <>
+              <P>Travel</P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>Let’s begin!</>,
+        content: <></>,
+        footer: {
+          content: (
+            <>
+              <CardContent
+                preview={{
+                  text: <>Continue reading</>,
+                  content: (
+                    <>
+                      <P>
+                        <Emoji>👨🏻‍💻</Emoji> <Bold>About me:</Bold> Sorry for not
+                        introducing myself earlier!{' '}
+                        <Highlight>
+                          I’m <Bold>Shu Uesugi</Bold>, a full-stack developer
+                          based in San Francisco Bay Area, USA.
+                        </Highlight>
+                      </P>
+                      <P>
+                        <Emoji>👋</Emoji> <Bold>Available for hire:</Bold>{' '}
+                        <Highlight>
+                          I’m looking for a{' '}
+                          <Bold>full-time senior engineering position</Bold>.
+                        </Highlight>{' '}
+                        Press “Continue reading” below to learn more about me!{' '}
+                        <Emoji>😉</Emoji>
+                      </P>
+                    </>
+                  )
+                }}
+              >
+                <Hr />
+                <P>?</P>
+              </CardContent>
+            </>
+          )
+        }
       }
     ]}
   />

src/lib/emojisBundle.tsx

@@ -32,11 +32,13 @@ import Emoji1f3c1 from 'src/components/Twemoji/1f3c1'
 import Emoji1f3ef from 'src/components/Twemoji/1f3ef'
 import Emoji1f40d from 'src/components/Twemoji/1f40d'
 import Emoji1f436 from 'src/components/Twemoji/1f436'
+import Emoji1f44b from 'src/components/Twemoji/1f44b'
 import Emoji1f44d from 'src/components/Twemoji/1f44d'
 import Emoji1f44e from 'src/components/Twemoji/1f44e'
 import Emoji1f454 from 'src/components/Twemoji/1f454'
 import Emoji1f467ZZ1f3fb from 'src/components/Twemoji/1f467-1f3fb'
 import Emoji1f468ZZ1f3fbZZ200dZZ1f393 from 'src/components/Twemoji/1f468-1f3fb-200d-1f393'
+import Emoji1f468ZZ1f3fbZZ200dZZ1f4bb from 'src/components/Twemoji/1f468-1f3fb-200d-1f4bb'
 import Emoji1f468ZZ1f3fbZZ200dZZ1f9b3 from 'src/components/Twemoji/1f468-1f3fb-200d-1f9b3'
 import Emoji1f468ZZ1f3fdZZ200dZZ1f4bb from 'src/components/Twemoji/1f468-1f3fd-200d-1f4bb'
 import Emoji1f468ZZ200dZZ1f3a4 from 'src/components/Twemoji/1f468-200d-1f3a4'
@@ -169,11 +171,13 @@ export default {
   '1f3ef': Emoji1f3ef,
   '1f40d': Emoji1f40d,
   '1f436': Emoji1f436,
+  '1f44b': Emoji1f44b,
   '1f44d': Emoji1f44d,
   '1f44e': Emoji1f44e,
   '1f454': Emoji1f454,
   '1f467-1f3fb': Emoji1f467ZZ1f3fb,
   '1f468-1f3fb-200d-1f393': Emoji1f468ZZ1f3fbZZ200dZZ1f393,
+  '1f468-1f3fb-200d-1f4bb': Emoji1f468ZZ1f3fbZZ200dZZ1f4bb,
   '1f468-1f3fb-200d-1f9b3': Emoji1f468ZZ1f3fbZZ200dZZ1f9b3,
   '1f468-1f3fd-200d-1f4bb': Emoji1f468ZZ1f3fdZZ200dZZ1f4bb,
   '1f468-200d-1f3a4': Emoji1f468ZZ200dZZ1f3a4,