laurabeatris / laurabeatris.com

My portfolio built with Next.js, Chakra UI and GraphCMS

laurabeatris.com

---

Go check it out 🎉

---

📌 Table of Contents

• Running Locally
• FAQ
• Issues
• Contributing

👷 Running Locally

Disclaimer: This project fetches data from my personal GraphCMS workspace, thus it's necessary to define the CMS endpoint as a environment variable, otherwise it's not possible to fully execute the scripts bellow

Clone repository

git clone https://github.com/LauraBeatris/laurabeatris.com.git

Define environment variables

cp .env.local.example .env.local

Install dependencies & execute web application in development mode

yarn
yarn dev

Define the environment variables by creating a .env.local file similar to .env.local.example

📮 Faq

Question: What are the technologies used in this project?

Answer: Next.js, Chakra UI and GraphCMS

Question Why Next.js instead of other frameworks of React out there?

Answer I chose Next.js in order to opt out for different rendering strategies

🐛 Issues

Feel free to file a new issue with a respective title and description. If you already found a solution to your problem, I would love to review your pull request!

🎉 Contributing

Check out the contributing page to see the best places to file issues, start discussions and begin contributing

laurabeatris.com's Issues

Implement learning journal page

Description

Implement a learning journal page to document my learning journey

Tasks

• Implement LearningJournal model at GraphCMS
• Implement content of LearningJournal at GraphCMS
• List LearningJournal results

Notes

LearningJourneyEntry model:

{
  
  date: Date,
  work: Array<string>;
  curiosity: Array<string>;
  programming: Array<string>;
}

Self host Inter variable font

Description

Self-host Inter variable font in order to not download from an external CDN and cache the resource

Tasks

• Self-host the fonts using @font-face
• Preload fonts
• Add Inter font to Chakra UI theme

Implement projects

Description

Implement projects list

Tasks

• Show tooltip saying to click on the project in order to see more details about it
• Implement project list without fetching data from CMS
• Modify Project component to use Image component from Next to avoid flickering of content
• Implement project modal
• Fetch projects from CMS on build time

Notes

Define a max-height and truncate the description. When clicking on the project, should open a modal with an images carousel and the entire description being show

Apply lint rule for imports order and console.log

Description

Code style enhancements to avoid shipping code with console.logs or wrong import orders

Tasks

• Add no-console rule as 1 to lint as an error
• Add eslint-plugin-import to order import statements

Implement base UI components

Description

Implement base UI components, such as paragraph, title, etc

Tasks

• Implement Heading
  

• Implement Paragraph
  

• Implement HighlightLink
  

• Implement Project
  

• Implement PlaceImage
  

• Implement ContentBox
  

Fix huge margins for wide resolutions

If this is the desired design, sorry for creating this issue and just ignore it.

I realized that for wide resolutions the margins are way too big:

I guess that a potential fix for this would be changing the maxW value of the container for the 80em breakpoint.

Should not open modal when clicking at project links

When clicking on a project link, the project modal is being opened. The click event should not bubble to the parent.

Update about me English grammar

Description
Update the translation for some of the paragraphs in the about me section.

Task

• Correct English grammar mistakes

Implement about page

Description

Implement about page

Tasks

• Show About my life section
• Show Hobbies section
• Show Programming Journey section

Anchor tags don't fill whole navigation item on mobile

Description

It's not possible to navigate to a different page by clicking directly on the menu navigation item since the anchor tag is not filling the whole container

Talks

• Update anchor tag to fill container

Fix color mode flash due to hydration

Know the color preference of a user upfront to avoid rendering the initial color mode and then changing it during hydration

TypeError: Cannot read property 'categories' of undefined components/ProjectFilters/index.tsx

Hi there,

Thanks for sharing your lovely portfolio site. It's really well made.
I've tried to run this project but I have an error on line 46.

  const filters = [
    {
      title: 'Categories',
  
      items: transformedStack.categories

    }
  ]

TypeError: Cannot read property 'categories' of undefined

Do you know how to fix this error?
Thank you!

Implement Header and Footer

Description

Implement Header and Footer components for the layout

Tasks

• Implement Header
• Implement Footer
• Apply layout to all pages
• Show menu on small devices

Notes

The Header should be sticky and translucent

Implement talks page

Description

Implement a page to show the talks that I gave at conferences and meetups, as well as podcast participations.

Tasks

• Add Content model at GraphCMS with 3 different types: Talk, PodcastFeat, UseCast
• Add content to GraphCMS
• Implement page

Use CMS to manage content from "About me" page

Motivation

In order to make the process of changing the About Me page content faster than having to directly update the source code

Possible steps

1. Create a separate model on GraphCMS, with the following fields (at least from what I can think about now)

sections

• title
• description
• images

2. Static generate "About Me" page by fetching aboutMePage query and proving sections data as a property for the screen component

3. Render sections just with title and images

4. Render rich text from description field

Use CSS color variables

This issue is part of the task of fixing the color mode hydration flash

Description

Set theme colors as CSS variables for different color modes

Tasks

• Use https://github.com/trevorblades/chakra-ui-flashless to set initial color variables based on the theme object
• Toggle color mode

Use system color mode preference instead of saving via cookies

Chakra-UI doesn't support color mode with SSG since there's a hydration bug. I've rolled back to use SSR but this is not a good solution since every page needs to use the Chakra container and receive cookies via props to know the color mode saved on the server.

SSG with Color Mode - Hydration Issue

1. The color mode is saved on local storage and the page is previously built in the server and deployed to a CDN.
2. The user requests for the webpage and the browser starts to parse the HTML
3. After passing the HTML and displaying the content, it starts to load the JS code and then access the color mode value saved at local storage.
4. The page theme changes according to the color mode saved at local storage and may result in a difference between what was generated at build time and what is mounted. For instance, let's say the user color preference is dark mode but it saved light mode at local storage, and then, the page is loaded with the user preferences until the local storage value is loaded, resulting in a flash.

Solution Proposal

Instead of refactoring everything to use CSS variables, it's possible to always use the user's color preference and then let the user toggle according to his/her needs while navigating the website. Chakra has an option called useSystemColorMode which is going to block the HTML parsing process until the user's color mode preference is loaded.

Implement Podcast page

Description

Implement Podcast page

Tasks

• Show podcast description
• List podcast episodes

Implement project filters

Description

Implement project filters to improve the user experience when searching for projects with specific names or categories.

Tasks

• Implement ProjectFilters component that shows a search input & a menu with categories options
• Fetch data from the main page using SSR
• Use useQuery hook from react-query to query for projects
• Initialize projects data from server-side data
• Debounce input change to not execute a lot of requests
• Show loading indicator when projects are being fetched
• Show message when no projects are found for a given filter

Configure SEO

Description

Configure SEO by using the next-seo library

Tasks

• Add title
• Add manifest
• Add favicons, touch icons and tile icons
• Generate sitemap
• Add robots.tsx
• Configure next-seo

./src/components/templates/TemplateOne error --isolatedModules

./src/components/templates/TemplateOne.ts:1:1
Type error: 'TemplateOne.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

Implement dark mode

Description

Implement dark mode to the website by using the color mode feature from Chakra UI

Tasks

• Add ColorModeScript to _document.tsx page before body
• Change component styles according to color mode using useColorModeValue hook

Implement timeline

Description

Implement a timeline to show career and life achievements.

Tasks

• Create Timeline model at GraphCMS
• Create content for Timeline model
• Implement Timeline component (Doesn't need to connect elements for now)
• Connect timeline elements for each year

Notes

Timeline Model:

{ 
  year: 2002,
  achievements: [{ title: 'A title', description: 'A description' }]
}