This is portfolio site build by Javier Lo

Below are the tech stack used for this site. Note that TypeScript is not used as I've decided that it is not needed for this project.

• Vite
• React
• JavaScript
• TailwindCss

Goals

My primary goals:

• To learn modern way of web development (It's been a decade since I last touched<code>).
• With the advancement of AI in software development, I figured it'll be great to know what's going on under the hood.
• To document my learnings
• Ultimately, once I'm comfortable enough I'd like to build something useful.

Checklist

• Initiate React project via Vite
• Learn Basic React
  • Basic principles
  • Folder structures
  • Components and Props 👈 I am currently here! 😩This s@!t is hard!
  • Best practices - improve file structures
• Tech Stack (Highlevel):
  • Tailwind
  • Install Tailwind Prettier
  • React Router Dom - handles page routing for react
  • React-Markdown plugins

Todo List:

General

• Add LinkedIn and Email
• Change repo name

Blog

• Setup blog index page routes - Hard coded content for now

• Setup blogpost page routing

• Create post.js schema

• Explore options like Markdown vite-plugin-mdx I've decided to use react-markdown for now.

• Blog page with full Markdown rendering via react-markdown

• Style blogpost page

• Create BlogPreview component

• Display BlogPreview component and add it to Home page

• Extract blog post sort logic into a utility function

• Install gray-matter to parse front-matter from *.md files

• Install nodePolyfills due to Buffer not being supported in Vite + React Read Here

• Syntax Highlighting - MDX

• Long term CMS options?

Project Showcase

• Project Page
• ProjectPreview component

Newsletter

• Investigate Newsletter Feature