chore: create initial project snapshot

Capture the portfolio source, design references, and production assets with repository-specific ignore rules.

resources/design-system/01-primitives.json

@@ -0,0 +1,28 @@
+{
+  "blue": {
+    "950": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
+    "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.027451, 0.07451, 0.184314], "alpha": 1, "hex": "#07132F" } },
+    "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.035294, 0.109804, 0.247059], "alpha": 1, "hex": "#091C3F" } },
+    "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.184314, 0.372549], "alpha": 1, "hex": "#0B2F5F" } },
+    "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } },
+    "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.082353, 0.341176, 0.65098], "alpha": 1, "hex": "#1557A6" } },
+    "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } },
+    "300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } },
+    "200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.901961, 0.941176, 0.996078], "alpha": 1, "hex": "#E6F0FE" } },
+    "100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
+    "white": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
+  },
+  "slate": {
+    "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.219608, 0.321569, 0.431373], "alpha": 1, "hex": "#38526E" } },
+    "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.4, 0.439216, 0.521569], "alpha": 1, "hex": "#667085" } },
+    "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.639216, 0.694118, 0.776471], "alpha": 1, "hex": "#A3B1C6" } },
+    "300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.811765, 0.878431], "alpha": 1, "hex": "#C3CFE0" } }
+  },
+  "border": {
+    "light": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.85098, 0.886275, 0.937255], "alpha": 1, "hex": "#D9E2EF" } },
+    "dark": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.117647, 0.203922, 0.345098], "alpha": 1, "hex": "#1E3458" } },
+    "strong-light": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.662745, 0.745098, 0.854902], "alpha": 1, "hex": "#A9BEDA" } },
+    "strong-dark": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.258824, 0.419608, 0.615686], "alpha": 1, "hex": "#426B9D" } }
+  },
+  "black": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 1, "hex": "#000000" } }
+}

resources/design-system/02-semantic-dark.json

@@ -0,0 +1,32 @@
+{
+  "bg": {
+    "page": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
+    "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.027451, 0.07451, 0.184314], "alpha": 1, "hex": "#07132F" } },
+    "raised": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.047059, 0.101961, 0.227451], "alpha": 1, "hex": "#0C1A3A" } },
+    "subtle": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.035294, 0.109804, 0.247059], "alpha": 1, "hex": "#091C3F" } }
+  },
+  "text": {
+    "primary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
+    "secondary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.811765, 0.878431], "alpha": 1, "hex": "#C3CFE0" } },
+    "muted": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.639216, 0.694118, 0.776471], "alpha": 1, "hex": "#A3B1C6" } },
+    "on-band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
+  },
+  "border": {
+    "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.117647, 0.203922, 0.345098], "alpha": 1, "hex": "#1E3458" } },
+    "strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.258824, 0.419608, 0.615686], "alpha": 1, "hex": "#426B9D" } }
+  },
+  "accent": { "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } } },
+  "action": {
+    "link": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } },
+    "primary": {
+      "bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
+      "fg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
+      "hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.862745, 0.909804, 0.968627], "alpha": 1, "hex": "#DCE8F7" } },
+      "pressed": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.835294, 0.92549], "alpha": 1, "hex": "#C3D5EC" } }
+    }
+  },
+  "brand": { "band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
+  "focus": { "ring": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } } },
+  "overlay": { "contact": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 0.721569, "hex": "#010D27" } } },
+  "shadow": { "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.239216, "hex": "#000000" } } }
+}

resources/design-system/02-semantic-light.json

@@ -0,0 +1,32 @@
+{
+  "bg": {
+    "page": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
+    "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.980392, 0.980392, 0.980392], "alpha": 1, "hex": "#FAFAFA" } },
+    "raised": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
+    "subtle": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.901961, 0.941176, 0.996078], "alpha": 1, "hex": "#E6F0FE" } }
+  },
+  "text": {
+    "primary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.184314, 0.372549], "alpha": 1, "hex": "#0B2F5F" } },
+    "secondary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.219608, 0.321569, 0.431373], "alpha": 1, "hex": "#38526E" } },
+    "muted": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.4, 0.439216, 0.521569], "alpha": 1, "hex": "#667085" } },
+    "on-band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
+  },
+  "border": {
+    "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.85098, 0.886275, 0.937255], "alpha": 1, "hex": "#D9E2EF" } },
+    "strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.662745, 0.745098, 0.854902], "alpha": 1, "hex": "#A9BEDA" } }
+  },
+  "accent": { "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
+  "action": {
+    "link": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.082353, 0.341176, 0.65098], "alpha": 1, "hex": "#1557A6" } },
+    "primary": {
+      "bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } },
+      "fg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
+      "hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.196078, 0.407843], "alpha": 1, "hex": "#0B3268" } },
+      "pressed": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.031373, 0.156863, 0.309804], "alpha": 1, "hex": "#08284F" } }
+    }
+  },
+  "brand": { "band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } } },
+  "focus": { "ring": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
+  "overlay": { "contact": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 0.721569, "hex": "#FFFFFF" } } },
+  "shadow": { "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 0.078431, "hex": "#103F7F" } } }
+}

resources/design-system/03-dimensions.json

@@ -0,0 +1,51 @@
+{
+  "space": {
+    "0": { "$type": "dimension", "$value": { "value": 0, "unit": "px" } },
+    "1": { "$type": "dimension", "$value": { "value": 4, "unit": "px" } },
+    "2": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } },
+    "3": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
+    "4": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+    "5": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+    "6": { "$type": "dimension", "$value": { "value": 32, "unit": "px" } },
+    "7": { "$type": "dimension", "$value": { "value": 40, "unit": "px" } },
+    "8": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
+    "9": { "$type": "dimension", "$value": { "value": 64, "unit": "px" } },
+    "10": { "$type": "dimension", "$value": { "value": 80, "unit": "px" } },
+    "11": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
+    "12": { "$type": "dimension", "$value": { "value": 120, "unit": "px" } }
+  },
+  "radius": {
+    "sm": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } },
+    "md": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
+    "lg": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+    "xl": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+    "pill": { "$type": "dimension", "$value": { "value": 999, "unit": "px" } }
+  },
+  "stroke": {
+    "default": { "$type": "dimension", "$value": { "value": 1, "unit": "px" } },
+    "strong": { "$type": "dimension", "$value": { "value": 2, "unit": "px" } }
+  },
+  "layout": {
+    "frame": { "$type": "dimension", "$value": { "value": 1440, "unit": "px" } },
+    "container": { "$type": "dimension", "$value": { "value": 1320, "unit": "px" } },
+    "page-gutter": { "$type": "dimension", "$value": { "value": 60, "unit": "px" } },
+    "grid-gutter": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+    "grid-column": { "$type": "dimension", "$value": { "value": 88, "unit": "px" } },
+    "section-gap": { "$type": "dimension", "$value": { "value": 120, "unit": "px" } },
+    "section-padding": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
+    "text-measure": { "$type": "dimension", "$value": { "value": 720, "unit": "px" } }
+  },
+  "size": {
+    "icon-sm": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+    "icon-md": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } },
+    "icon-lg": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
+    "icon-button": { "$type": "dimension", "$value": { "value": 44, "unit": "px" } },
+    "button-height": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
+    "social-button": { "$type": "dimension", "$value": { "value": 56, "unit": "px" } },
+    "avatar": { "$type": "dimension", "$value": { "value": 200, "unit": "px" } },
+    "journey-image": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
+    "project-width": { "$type": "dimension", "$value": { "value": 360, "unit": "px" } },
+    "project-media-height": { "$type": "dimension", "$value": { "value": 225, "unit": "px" } },
+    "tool-tile": { "$type": "dimension", "$value": { "value": 72, "unit": "px" } }
+  }
+}

resources/design-system/04-typography.json

@@ -0,0 +1,43 @@
+{
+  "font": {
+    "family": {
+      "primary": { "$type": "fontFamily", "$value": "IRANYekanX(Pro)" },
+      "display": { "$type": "fontFamily", "$value": "Pacifico" }
+    },
+    "weight": {
+      "regular": { "$type": "number", "$value": 400 },
+      "medium": { "$type": "number", "$value": 500 },
+      "demi-bold": { "$type": "number", "$value": 600 },
+      "bold": { "$type": "number", "$value": 700 }
+    }
+  },
+  "type": {
+    "size": {
+      "display-hero": { "$type": "dimension", "$value": { "value": 64, "unit": "px" } },
+      "display-footer": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
+      "h1": { "$type": "dimension", "$value": { "value": 40, "unit": "px" } },
+      "h2": { "$type": "dimension", "$value": { "value": 32, "unit": "px" } },
+      "h3": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } },
+      "body-large": { "$type": "dimension", "$value": { "value": 18, "unit": "px" } },
+      "body-default": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
+      "body-small": { "$type": "dimension", "$value": { "value": 14, "unit": "px" } },
+      "label-small": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
+      "button": { "$type": "dimension", "$value": { "value": 15, "unit": "px" } }
+    },
+    "line-height": {
+      "display-hero": { "$type": "dimension", "$value": { "value": 72, "unit": "px" } },
+      "display-footer": { "$type": "dimension", "$value": { "value": 56, "unit": "px" } },
+      "h1": { "$type": "dimension", "$value": { "value": 52, "unit": "px" } },
+      "h2": { "$type": "dimension", "$value": { "value": 42, "unit": "px" } },
+      "h3": { "$type": "dimension", "$value": { "value": 28, "unit": "px" } },
+      "body-large": { "$type": "dimension", "$value": { "value": 30, "unit": "px" } },
+      "body-default": { "$type": "dimension", "$value": { "value": 26, "unit": "px" } },
+      "body-small": { "$type": "dimension", "$value": { "value": 22, "unit": "px" } },
+      "label-small": { "$type": "dimension", "$value": { "value": 18, "unit": "px" } },
+      "button": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } }
+    },
+    "letter-spacing": {
+      "eyebrow": { "$type": "number", "$value": 0.16 }
+    }
+  }
+}

resources/design-system/README-FIGMA-IMPORT.md

@@ -0,0 +1,22 @@
+# Portfolio design tokens for Figma
+
+These files use Figma's Design Tokens Community Group (DTCG) JSON import format.
+
+## Recommended import order
+
+1. In Figma, open the Variables view.
+2. Create a collection named `01 Primitives`, then import `01-primitives.json`.
+3. Create a collection named `02 Semantic`, then import both `02-semantic-light.json` and `02-semantic-dark.json` together. Figma creates one mode per imported file; rename the modes to `Light` and `Dark`.
+4. Create a collection named `03 Dimensions`, then import `03-dimensions.json`.
+5. Create a collection named `04 Typography`, then import `04-typography.json`.
+6. Create text styles manually using the imported typography variables. Figma imports the typography values, but it does not automatically create complete text styles.
+
+## Important
+
+The semantic color files contain resolved values so they import reliably. After importing, you may replace those values with aliases to matching variables in `01 Primitives` (for example, `text/primary` → `blue/700`). Do this only after confirming the variable names in your Figma file.
+
+Do not import the Light and Dark semantic files into two separate collections. Import them together into the same collection so they become two modes.
+
+## Starter-plan workaround
+
+Starter does not include variable modes. Import `02-semantic-light.json` into a collection named `02 Semantic — Light`, and import `02-semantic-dark.json` into a separate collection named `02 Semantic — Dark`. Apply the Light collection to the light desktop frame and the Dark collection to the dark desktop frame. The variables still work, but you will not have a single Light/Dark mode switch.