ctrl-create-labs-portfolio/index.html at main · codebyellalesperance/ctrl-create-labs-portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en" class="bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white antialiased">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ctrl Create Labs | Creative Engineer & AI Builder | Ella L'Esperance</title>
  <meta name="description"
    content="Ctrl Create Labs — Creative Engineer building AI tools, web apps, and weird experiments. Follow along as Ella L'Esperance ships projects and overshares the lessons.">
  <meta name="keywords"
    content="Ctrl Create Labs, Ctrl Create, Creative Engineer, Ella L'Esperance, AI Engineer, Software Engineer, React, Python, Boston Developer">
  <meta name="author" content="Ella L'Esperance">

  <!-- Canonical URL -->
  <link rel="canonical" href="https://ctrlcreatelabs.com/" />

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.png" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://ctrlcreatelabs.com/">
  <meta property="og:title" content="Ctrl Create Labs | Creative Engineer & AI Builder">
  <meta property="og:description"
    content="Ctrl Create Labs — Creative Engineer building AI tools and shipping weird experiments.">
  <meta property="og:image" content="https://ctrlcreatelabs.com/og-image.png">
  <meta property="og:site_name" content="Ctrl Create Labs">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://ctrlcreatelabs.com/">
  <meta property="twitter:title" content="Ctrl Create Labs | Creative Engineer & AI Builder">
  <meta property="twitter:description"
    content="Ctrl Create Labs — Creative Engineer building AI tools and shipping weird experiments.">
  <meta property="twitter:image" content="https://ctrlcreatelabs.com/og-image.png">

  <!-- Structured Data for Google -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Ella L'Esperance",
    "alternateName": "Ctrl Create Labs",
    "url": "https://ctrlcreatelabs.com",
    "jobTitle": "Creative Engineer",
    "description": "AI engineer and creative technologist building tools and sharing lessons.",
    "sameAs": [
      "https://linkedin.com/in/ella-lesperance",
      "https://ctrlcreatelabs.substack.com",
      "https://github.com/codebyellalesperance"
    ]
  }
  </script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
            serif: ['Playfair Display', 'serif'],
          }
        }
      }
    }
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Caveat:wght@400;500;600;700&display=swap"
    rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }

    h1,
    h2,
    h3,
    .font-serif {
      font-family: 'Playfair Display', serif;
    }

    /* Smooth scrolling */
    html {
      scroll-behavior: smooth;
    }

    /* Hide scrollbar for cleaner look */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: #e5e5e5;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #d4d4d4;
    }

    .dark ::-webkit-scrollbar-thumb {
      background: #333;
    }
  </style>
  <script type="importmap">
{
  "imports": {
    "react/": "https://aistudiocdn.com/react@^19.2.0/",
    "react": "https://aistudiocdn.com/react@^19.2.0",
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0",
    "gsap/": "https://aistudiocdn.com/gsap@^3.13.0/",
    "gsap": "https://aistudiocdn.com/gsap@^3.13.0"
  }
}
</script>
  <link rel="stylesheet" href="/index.css">
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/index.tsx"></script>
</body>

</html>