Enhance Philosophy section: generate contextual body from GitHub data and update title to 'Core principles'

Author: amide-init

scripts/generate-github-data.js

@@ -122,6 +122,70 @@ async function fetchGraphQL(query, variables, token) {
   return json.data
 }
 
+/**
+ * Generate a contextual philosophy body paragraph from the user's actual GitHub data.
+ * Picks the most relevant angle based on their top topics, language, and activity.
+ */
+function generatePhilosophyBody(profile, topLanguage, allTopics, totalStars) {
+  const name = profile.name || profile.login
+  const topics = allTopics.map((t) => t.toLowerCase())
+
+  const has = (...keywords) => keywords.some((kw) => topics.includes(kw))
+
+  const hasAutomation  = has('automation', 'ci-cd', 'devops', 'infrastructure', 'github-action', 'github-actions', 'pipeline')
+  const hasAI          = has('ai', 'machine-learning', 'ml', 'deep-learning', 'nlp', 'llm', 'openai')
+  const hasOpenSource  = has('open-source', 'oss', 'hacktoberfest')
+  const hasWeb         = has('web', 'frontend', 'react', 'nextjs', 'vue', 'svelte', 'tailwind')
+  const hasCLI         = has('cli', 'terminal', 'command-line', 'shell', 'bash')
+  const hasAPI         = has('api', 'rest', 'graphql', 'backend', 'nodejs', 'fastapi')
+  const hasMobile      = has('android', 'ios', 'flutter', 'react-native', 'mobile')
+  const hasData        = has('data', 'analytics', 'pandas', 'jupyter', 'visualization', 'notebook')
+
+  const langNote = topLanguage
+    ? ` Working primarily in ${topLanguage}, the focus stays on code that is easy to read, easy to run, and hard to break silently.`
+    : ''
+
+  if (hasAI && hasAutomation) {
+    return `${name} combines AI and automation to build workflows that stay predictable — the goal is explainability over magic, with every step traceable and inspectable.${langNote}`
+  }
+
+  if (hasAI) {
+    return `${name} approaches AI as infrastructure: models are most useful when they're composable, observable, and easy to swap out — intelligence should enhance workflow, not obscure it.${langNote}`
+  }
+
+  if (hasAutomation) {
+    return `${name} believes great developer tooling should make the right path the easy path — automated, reproducible, and opinionated enough that teams spend time building instead of configuring.${langNote}`
+  }
+
+  if (hasOpenSource && totalStars > 20) {
+    return `${name} builds in the open because the best tools are shaped by the people who use them — every star and issue is signal worth acting on.${langNote}`
+  }
+
+  if (hasCLI || hasAPI) {
+    return `${name} gravitates toward tools that compose well: small, focused interfaces that do one thing reliably and can be wired together without surprises.${langNote}`
+  }
+
+  if (hasData) {
+    return `${name} treats data as a first-class citizen — clean inputs, reproducible pipelines, and visualisations that make the answer obvious rather than requiring interpretation.${langNote}`
+  }
+
+  if (hasWeb) {
+    return `${name} believes the best interfaces get out of the way — fast to load, easy to navigate, and built so the next developer can understand the code without a tour.${langNote}`
+  }
+
+  if (hasMobile) {
+    return `${name} builds mobile experiences with a platform-first mindset — respecting OS conventions, optimising for battery and connectivity, and shipping updates that feel native.${langNote}`
+  }
+
+  // Generic fallback derived from the profile data
+  const repoNote =
+    profile.public_repos > 20
+      ? `Across ${profile.public_repos} public repositories, the pattern is consistent`
+      : `Every project starts from the same principle`
+
+  return `${repoNote}: code should be clear enough to hand off, stable enough to deploy with confidence, and scoped tightly enough to stay maintainable over time.${langNote}`
+}
+
 async function main() {
   // Load .env file if it exists
   const envPath = path.join(rootDir, '.env')
@@ -820,8 +884,7 @@ async function main() {
     },
     philosophy: {
       title: 'Philosophy',
-      body:
-        'Guardrails over guesswork. The goal is to keep infrastructure and developer tooling deterministic, explainable, and easy to inspect — even when AI is part of the workflow.',
+      body: generatePhilosophyBody(profile, topLanguage, allTopics, totalStars),
       cards: philosophyCards,
     },
     projects: {

src/templates/threejs/PhilosophyScene.tsx

@@ -91,61 +91,42 @@ function buildFaceTexture(card: PhilosophyCardData): THREE.CanvasTexture {
   const ctx = canvas.getContext('2d')
   if (!ctx) return new THREE.CanvasTexture(canvas)
 
+  // Background
   const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
   gradient.addColorStop(0, '#07142d')
-  gradient.addColorStop(1, '#081021')
+  gradient.addColorStop(1, '#060e1e')
   ctx.fillStyle = gradient
   ctx.fillRect(0, 0, canvas.width, canvas.height)
 
-  ctx.strokeStyle = 'rgba(56, 189, 248, 0.5)'
-  ctx.lineWidth = 6
-  ctx.strokeRect(24, 24, canvas.width - 48, canvas.height - 48)
+  // Border
+  ctx.strokeStyle = 'rgba(56, 189, 248, 0.45)'
+  ctx.lineWidth = 5
+  ctx.strokeRect(28, 28, canvas.width - 56, canvas.height - 56)
 
-  ctx.strokeStyle = 'rgba(56, 189, 248, 0.28)'
+  const PAD = 80
+
+  // Label
+  ctx.fillStyle = 'rgba(125, 211, 252, 0.8)'
+  ctx.font = '600 52px Inter, ui-sans-serif, system-ui'
+  ctx.fillText('PRINCIPLE', PAD, 120)
+
+  // Accent line under label
+  ctx.strokeStyle = 'rgba(56, 189, 248, 0.35)'
   ctx.lineWidth = 3
   ctx.beginPath()
-  ctx.moveTo(74, 148)
-  ctx.lineTo(300, 148)
+  ctx.moveTo(PAD, 148)
+  ctx.lineTo(PAD + 180, 148)
   ctx.stroke()
 
-  ctx.fillStyle = 'rgba(125, 211, 252, 0.9)'
-  ctx.font = '600 36px Inter, ui-sans-serif, system-ui'
-  ctx.fillText('PHILOSOPHY', 74, 110)
-
-  ctx.fillStyle = '#e2e8f0'
-  ctx.font = '700 62px Inter, ui-sans-serif, system-ui'
-  wrapText(ctx, card.title, 74, 215, canvas.width - 148, 76, 3)
+  // Title — large, prominent
+  ctx.fillStyle = '#f1f5f9'
+  ctx.font = '700 98px Inter, ui-sans-serif, system-ui'
+  wrapText(ctx, card.title, PAD, 280, canvas.width - PAD * 2, 114, 2)
 
-  ctx.fillStyle = 'rgba(203, 213, 225, 0.95)'
-  ctx.font = '500 40px Inter, ui-sans-serif, system-ui'
-  wrapText(ctx, card.body, 74, 420, canvas.width - 148, 56, 8)
-
-  const iconX = 824
-  const iconY = 188
-  const iconSize = 98
-  const half = iconSize / 2
-  ctx.strokeStyle = 'rgba(56, 189, 248, 0.78)'
-  ctx.lineWidth = 4
-  ctx.beginPath()
-  ctx.moveTo(iconX, iconY - half)
-  ctx.lineTo(iconX + half, iconY - half / 2)
-  ctx.lineTo(iconX + half, iconY + half / 2)
-  ctx.lineTo(iconX, iconY + half)
-  ctx.lineTo(iconX - half, iconY + half / 2)
-  ctx.lineTo(iconX - half, iconY - half / 2)
-  ctx.closePath()
-  ctx.stroke()
-  ctx.beginPath()
-  ctx.moveTo(iconX, iconY - half)
-  ctx.lineTo(iconX, iconY)
-  ctx.lineTo(iconX + half, iconY + half / 2)
-  ctx.moveTo(iconX, iconY)
-  ctx.lineTo(iconX - half, iconY + half / 2)
-  ctx.stroke()
-  ctx.fillStyle = 'rgba(56, 189, 248, 0.85)'
-  ctx.beginPath()
-  ctx.arc(iconX, iconY, 6, 0, Math.PI * 2)
-  ctx.fill()
+  // Body — readable weight
+  ctx.fillStyle = 'rgba(203, 213, 225, 0.88)'
+  ctx.font = '400 64px Inter, ui-sans-serif, system-ui'
+  wrapText(ctx, card.body, PAD, 470, canvas.width - PAD * 2, 82, 6)
 
   const texture = new THREE.CanvasTexture(canvas)
   texture.colorSpace = THREE.SRGBColorSpace
@@ -216,10 +197,10 @@ export default function PhilosophyScene({ cards, activeIndex, onActiveIndexChang
     )
 
     const faceConfigs = [
-      { position: new THREE.Vector3(0, 0, size / 2 + 0.02), rotationY: 0 },
+      { position: new THREE.Vector3(0, 0, size / 2 + 0.02),  rotationY: 0 },
       { position: new THREE.Vector3(0, 0, -size / 2 - 0.02), rotationY: Math.PI },
-      { position: new THREE.Vector3(-size / 2 - 0.02, 0, 0), rotationY: Math.PI / 2 },
-      { position: new THREE.Vector3(size / 2 + 0.02, 0, 0), rotationY: -Math.PI / 2 },
+      { position: new THREE.Vector3(-size / 2 - 0.02, 0, 0), rotationY: -Math.PI / 2 },
+      { position: new THREE.Vector3(size / 2 + 0.02, 0, 0),  rotationY: Math.PI / 2 },
     ]
 
     const faceMaterials = cards.map((card) => (

src/templates/threejs/PhilosophySection.tsx

@@ -34,15 +34,15 @@ export default function PhilosophySection({ philosophy }: { philosophy: Philosop
         <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
           <header className="max-w-xl">
             <p className="mb-3 text-[11px] font-semibold uppercase tracking-[0.28em] text-blue-400/90">
-              {philosophy.title}
+              Core principles
             </p>
             <h2 id="philosophy-title" className="text-3xl font-semibold leading-tight text-slate-100 sm:text-4xl">
               {philosophy.title}
             </h2>
             <p className="mt-4 text-lg leading-relaxed text-slate-300">{philosophy.body}</p>
           </header>
 
-          <div className="h-[430px] w-full overflow-hidden rounded-2xl border border-blue-900/35 bg-[#070d1d]/45 backdrop-blur-sm">
+          <div className="h-[430px] w-full">
             <Suspense fallback={null}>
               <PhilosophyScene cards={cubeCards} activeIndex={activeFace} onActiveIndexChange={setActiveFace} />
             </Suspense>