Skip to content

Learning the Structure

Jump to bottom
Kiya Rose Ren-Miyakari edited this page Oct 17, 2025 · 2 revisions

Learning the website structure.

Understanding how the website works is important to understanding how to build it into your own.

src/

About

This directory has the files that will be build using npm run build and can be previewed by running npm preview. Files from here will be built into /_dist/ and will be used in production. Files here use the .tsx and .ts formats.

src/Utils

About

These are elements that are used across the site in different places for UI/UX, functionality, and security.

Data files

About

Currently these files pull data from useRemoteData.tsx, however it is possible to do so statically. This README explains how these files work so you can be best informed on how to edit this repo to suit your needs
Currently the .tsx files that pull remote data outline the arguments they can receive from the R2 server. Similarly the original files not pulling from useRemoteData.tsx also outlined these arguments, but instead of loading them, wrote them directly to the file.

Accepted Arguments of data files

Certifications

  • name
  • issuer
  • date

Education

  • school
  • program
  • dates
  • tech

Experience

  • company
  • role
  • dates
  • description
  • tech

Projects

  • title
  • description
  • tech

Skills

This section is different in that the entire thing is a const rather than accepting multiple data ranges.

Socials

This section appears at the beggining of the site right after the statis header

  • id
  • label
  • href
  • icon

useRemoteData.tsx

The aformentioned useRemoteData.tsx controls fetching remote data from R2, I got this working by enabling a public HTTP R2 endpoint on a custom domain.

Examples of static data sections

I used to use static data sections but I stopped because I wanted a more dynmaic website, however I would like to provide these files as examples for those who many not see the need or wish to have their website dynamically fetch data.

export const certifications: Certification[] = [
  {
    name: "PSI GitHub Foundations",
    issuer: "PSI",
    date: "2024",
    link: "https://www.credly.com/go/FZfrOlFD9pvCvNOiGFvTrA",
  },
  {
    name: "AZ-900 Microsoft Azure Fundamentals",
    issuer: "Microsoft",
    date: "2024",

↑This is what a snippit of certifications looked like before the change to remote data.

export const CERTIFICATIONS_RESOURCE = "Certifications";

export const certificationsFallback: Certification[] = [];

export const certificationsPlaceholder: Certification[] = [


  {
    name: "Unable to load certifications",
    issuer: "Please try again later.",
    date: "—",

↑this is it after, notice the difference? image
↑ This is the stucture of my R2 Server. Notice how everything fits together like lego bricks in both the static and dynamic versions of fetching.

My JSON files look like the following

{\rtf1\ansi\ansicpg1252\cocoartf2822
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0

\f0\fs24 \cf0 \{\
  "__meta": \{\
    "version": 1,\
    "template": "export type Certification = \{\\n  name: string;\\n  issuer: string;\\n  date: string;\\n  link?: string;\\n\};\\n\\nexport const certifications: Certification[] = __DATA_PLACEHOLDER__certifications_148_396__;",\
    "source": "certifications.ts",\
    "entries": [\
      \{\
        "name": "certifications",\
        "placeholder": "__DATA_PLACEHOLDER__certifications_148_396__",\
        "baseIndent": ""\
      \}\
    ],\
    "generatedAt": "2025-10-02T05:38:59.638Z"\
  \},\
  "certifications": [\
    \{\
      "name": "PSI GitHub Foundations",\
      "issuer": "PSI",\
      "date": "2024",\
      "link": "https://www.credly.com/go/FZfrOlFD9pvCvNOiGFvTrA"\
    \},\
    \{\
      "name": "AZ-900 Microsoft Azure Fundamentals",\
      "issuer": "Microsoft",\
      "date": "2024"\
    \}\
  ]\
\}}

↑There is a bit of extra info here defining things like placeholders hiding some extra info here that the original static files had, etc.


With this knowledge you could make any part of your website dynamic with ease.

tests/

About

These are files that are used by our playwright workflows to take screenshots and to make sure everything looks good when testing for production

public/

These are files that are static and directly rendered to the website, this does not contain the core website as that is rendered in src/, but these are assets that do not need to be rednered.

localTools

These are tools used for debugging and helping out with development in the local version of the website, these have no impact on production.

Clone this wiki locally