wip

.env

@@ -0,0 +1 @@
+CONTENTFUL_API_TOKEN=xA3jmihRSi5T00l_GhrEfL0yAt2pIFUU0zRSBVkr9jY

.gitignore

@@ -24,3 +24,6 @@ yarn-error.log*
 
 *.pdf
 .idea
+.next
+out
+.env

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    CONTENTFUL_API_KEY: process.env.CONTENTFUL_API_TOKEN,
+  },
+}

package.json

@@ -4,13 +4,15 @@
   "private": true,
   "homepage": "https://www.danielramos.me",
   "dependencies": {
+    "@contentful/rich-text-html-renderer": "^13.4.0",
     "@types/classnames": "^2.2.10",
     "@types/node": "^13.11.1",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "classnames": "^2.2.6",
     "express": "^4.17.1",
     "gh-pages": "^2.2.0",
+    "next": "^9.3.5",
     "puppeteer": "^2.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -19,12 +21,11 @@
     "typescript": "^3.8.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "export": "next export",
     "pdf": "node scripts/pdf.js",
-    "postbuild": "react-snap",
     "deploy": "gh-pages -d build -b master"
   },
   "eslintConfig": {
@@ -41,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.0.4"
   }
 }

src/components/Formatted/Formatted.module.css

@@ -0,0 +1,34 @@
+.container {
+  --margin: 10px;
+  font-size: 1rem;
+  line-height: 1.55rem;
+  font-family: Raleway, Arial, Helvetica, sans-serif;
+}
+
+.container p {
+  margin-bottom: var(--margin);
+  margin-top: var(--margin);
+}
+
+.container ul li:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+
+.container li {
+  margin-left: 40px;
+  position: relative;
+}
+
+.container li::before {
+  content: '●';
+  color: var(--gray-800);
+  font-size: 10px;
+  position: absolute;
+  left: -20px;
+  line-height: 1.55rem;
+}
+
+.container a {
+  color: var(--black);
+}

src/components/Formatted/Formatted.tsx

@@ -0,0 +1,13 @@
+import classNames from 'classnames'
+import React, { FC } from 'react'
+
+import classes from './Formatted.module.css'
+
+type FormattedProps = {
+  className?: string
+  html: string
+}
+
+export const Formatted: FC<FormattedProps> = ({ html, className }) => (
+  <div dangerouslySetInnerHTML={{ __html: html }} className={classes.container} />
+)

src/components/Header/Header.tsx

@@ -3,8 +3,6 @@ import React, { FC } from 'react'
 
 import classes from './Header.module.css'
 
-import logo from './acid-tango-logo.svg'
-
 type HeaderProps = {
   personName: string
   role: string
@@ -15,6 +13,6 @@ export const Header: FC<HeaderProps> = ({ className, personName, role }) => (
   <header className={classNames(classes.container, className)}>
     <h1 className={classes.personName}>{personName}</h1>
     <h2 className={classes.role}>{role}</h2>
-    <img className={classes.logo} src={logo} alt="Acid Tango" />
+    <img className={classes.logo} src="/logos/acid-tango-logo.svg" alt="Acid Tango" />
   </header>
 )

src/components/JobPhase/JobPhase.tsx

@@ -1,14 +1,14 @@
 import React, { FC } from 'react'
 
 import classes from './JobPhase.module.css'
-import { LanguageConsumer } from '../../containers/IsSpanishContext'
+import { LanguageConsumer } from '../../context/IsSpanishContext'
 import { i18n } from '../../i18n'
 
 type JobPhaseProps = {
   jobName: string
   companyName: string
   startDate: Date
-  endDate?: Date
+  endDate?: Date | null
 }
 
 const englishLang = {
@@ -26,24 +26,23 @@ export const JobPhase: FC<JobPhaseProps> = ({
   endDate,
   children,
 }) => (
-    <LanguageConsumer>
-      {language => {
-        const getLabel = i18n(language, { englishLang, spanishLang })
+  <LanguageConsumer>
+    {(language) => {
+      const getLabel = i18n(language, { englishLang, spanishLang })
 
-        return (
-          <div>
-            <p className={classes.jobName}>{jobName}</p>
-            <p className={classes.companyAndDates}>
-              <span>{companyName}</span>
-              <span className={classes.spacer}>|</span>
-              <span>
-                {startDate.getFullYear()} -{' '}
-                {endDate ? endDate.getFullYear() : getLabel('today')}
-              </span>
-            </p>
-            <div className={classes.content}>{children}</div>
-          </div>
-        )
-      }}
-    </LanguageConsumer>
-  )
+      return (
+        <div>
+          <p className={classes.jobName}>{jobName}</p>
+          <p className={classes.companyAndDates}>
+            <span>{companyName}</span>
+            <span className={classes.spacer}>|</span>
+            <span>
+              {startDate.getFullYear()} - {endDate ? endDate.getFullYear() : getLabel('today')}
+            </span>
+          </p>
+          <div className={classes.content}>{children}</div>
+        </div>
+      )
+    }}
+  </LanguageConsumer>
+)

src/config.ts

@@ -0,0 +1,3 @@
+export const config = {
+  contentfulApiToken: process.env.CONTENTFUL_API_KEY,
+}

src/containers/App/App.tsx

@@ -6,24 +6,15 @@ import { ProfessionalExperience } from '../ProfessionalExperience/ProfessionalEx
 import { Profile } from '../Profile/Profile'
 import { Skills } from '../Skills/Skills'
 
-import {
-  LanguageProvider,
-  isSpanishContextDefaultValue,
-} from '../IsSpanishContext'
+import { LanguageProvider, isSpanishContextDefaultValue } from '../../context/IsSpanishContext'
 
 import { Header } from '../../components/Header/Header'
 import { Sheet } from '../../components/Sheet/Sheet'
 
-import '../../assets/styles/reset.css'
-
-import '../../assets/fonts/OpenSans/open-sans.css'
-import '../../assets/fonts/Raleway/raleway.css'
-import '../../assets/styles/global.css'
-
 import classes from './App.module.css'
 import { ButtonHeader } from '../ButtonsHeader/ButtonsHeader'
 
-const App: FC<{}> = () => {
+const App: FC = () => {
   const [language, setLanguage] = useState(isSpanishContextDefaultValue)
 
   return (
@@ -32,9 +23,7 @@ const App: FC<{}> = () => {
         <Sheet
           className={classes.sheet}
           containerClass={classes.sheetContainer}
-          topContainerChildren={() => (
-            <ButtonHeader setLanguage={setLanguage} />
-          )}
+          topContainerChildren={() => <ButtonHeader setLanguage={setLanguage} />}
         >
           <Header
             personName="Daniel Ramos"
@@ -48,9 +37,7 @@ const App: FC<{}> = () => {
               <Profile className={classes.profile} />
               <div className={classes.middleSpacer} />
               <Education className={classes.education} />
-              <ProfessionalExperience
-                className={classes.professionalExperience}
-              />
+              <ProfessionalExperience className={classes.professionalExperience} />
               <Skills className={classes.skills} />
               <Contact className={classes.contact} />
             </div>

src/containers/ButtonsHeader/ButtonsHeader.tsx

@@ -8,7 +8,7 @@ import { ShareIcon } from '../../components/icons/Share'
 import { browserSupportsWebShareAPI } from '../../utils/web-share-api'
 
 import { i18n } from '../../i18n'
-import { LanguageConsumer, Language } from '../IsSpanishContext'
+import { LanguageConsumer, Language } from '../../context/IsSpanishContext'
 
 import classes from './ButtonsHeader.module.css'
 
@@ -17,15 +17,13 @@ const PrintButton = ButtonIconHOC(PrintIcon)
 const ShareButton = ButtonIconHOC(ShareIcon)
 
 const englishLang = {
-  switch_language_between_spanish_or_english:
-    'Switch language between spanish or english',
+  switch_language_between_spanish_or_english: 'Switch language between spanish or english',
   print_or_export_in_pdf: 'Print or export in PDF',
   share: 'Share',
 }
 
 const spanishLang: typeof englishLang = {
-  switch_language_between_spanish_or_english:
-    'Cambiar idioma entre inglés y español',
+  switch_language_between_spanish_or_english: 'Cambiar idioma entre inglés y español',
   print_or_export_in_pdf: 'Print or export in PDF',
   share: 'Compartir',
 }
@@ -44,11 +42,9 @@ function share() {
   }
 }
 
-export const ButtonHeader: FC<{ setLanguage: Function }> = ({
-  setLanguage,
-}) => (
+export const ButtonHeader: FC<{ setLanguage: Function }> = ({ setLanguage }) => (
   <LanguageConsumer>
-    {language => {
+    {(language) => {
       const getLabel = i18n(language, { englishLang, spanishLang })
 
       return (
@@ -57,11 +53,7 @@ export const ButtonHeader: FC<{ setLanguage: Function }> = ({
             label={getLabel('switch_language_between_spanish_or_english')}
             size={24}
             onClick={() =>
-              setLanguage(
-                language === Language.Spanish
-                  ? Language.English
-                  : Language.Spanish,
-              )
+              setLanguage(language === Language.Spanish ? Language.English : Language.Spanish)
             }
             className={classes.hideWhenPrinting}
           />
@@ -71,7 +63,7 @@ export const ButtonHeader: FC<{ setLanguage: Function }> = ({
             onClick={print}
             className={classes.hideWhenPrinting}
           />
-          {browserSupportsWebShareAPI(window.navigator) && (
+          {typeof window !== 'undefined' && browserSupportsWebShareAPI(window.navigator) && (
             <ShareButton
               label={getLabel('share')}
               size={24}

src/containers/Contact/Contact.tsx

@@ -8,7 +8,7 @@ import { LocationIcon } from '../../components/icons/Location'
 import { MediumIcon } from '../../components/icons/Medium'
 import { CircleIconHOC } from '../../HOCs/CircleIconHOC/CircleIconHOC'
 import { UnderlinedTitle } from '../../components/UnderlinedTitle/UnderlinedTitle'
-import { LanguageConsumer } from '../IsSpanishContext'
+import { LanguageConsumer } from '../../context/IsSpanishContext'
 import { i18n } from '../../i18n'
 import { List } from '../../components/List/List'
 
@@ -34,7 +34,7 @@ const spanishLang: typeof englishLang = {
 
 export const Contact: FC<ContactProps> = ({ className }) => (
   <LanguageConsumer>
-    {lang => {
+    {(lang) => {
       const getLabel = i18n(lang, { englishLang, spanishLang })
 
       return (

src/containers/Education/Education.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 
 import { EducationPhase } from '../../components/EducationPhase/EducationPhase'
 import { UnderlinedTitle } from '../../components/UnderlinedTitle/UnderlinedTitle'
-import { LanguageConsumer } from '../IsSpanishContext'
+import { LanguageConsumer } from '../../context/IsSpanishContext'
 import { i18n } from '../../i18n'
 
 type EducationProps = {
@@ -23,7 +23,7 @@ const spanishLang: typeof englishLang = {
 
 export const Education: FC<EducationProps> = ({ className }) => (
   <LanguageConsumer>
-    {lang => {
+    {(lang) => {
       const getLabel = i18n(lang, { englishLang, spanishLang })
 
       return (