Merge pull request #2 from martincham/origin

all updates

package.json

@@ -1,13 +1,15 @@
 {
-  "name": "portfolio",
+  "name": "martincham.github.io",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.1",
@@ -22,7 +24,6 @@
     "@radix-ui/react-switch": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.446.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
@@ -39,9 +40,11 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
+    "depcheck": "^1.4.7",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "gh-pages": "^6.2.0",
     "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",

src/App.tsx

@@ -19,6 +19,11 @@ import Nba from "@/pages/dev/NBA.tsx";
 import HubrisDev from "@/pages/dev/HubrisDev.tsx";
 import Websites from "@/pages/dev/Websites.tsx";
 
+import ArtistStatment from "@/pages/about/ArtistStatement.tsx";
+import AboutMe from "@/pages/about/AboutMe.tsx";
+import Resume from "@/pages/about/Resume.tsx";
+import Teaching from "@/pages/about/Teaching.tsx";
+
 const App: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -80,7 +85,7 @@ const App: React.FC = () => {
           <div className="flex z-30">
             {/* Sidebar Menu */}
             <div
-              className={`fixed md:relative md:translate-x-0 top-0 right-0 h-full w-64 transition-all duration-200 z-40 ${
+              className={`fixed md:relative md:translate-x-0 top-0 right-0 h-full w-64 dark:w-72 transition-all duration-200 z-40 ${
                 isOpen
                   ? "translate-x-0 bg-gray-50 dark:bg-zinc-950 md:bg-transparent"
                   : "translate-x-full duration-0 opacity-0 md:opacity-100"
@@ -97,12 +102,18 @@ const App: React.FC = () => {
                 <Route path="/penance" element={<Penance />} />
                 <Route path="/ballforbouncing" element={<BallForBouncing />} />
                 <Route path="/tofu" element={<Tofu />} />
-                <Route path="/nba" element={<Nba />} />
-                <Route path="/hubrisdev" element={<HubrisDev />} />
-                <Route path="/websites" element={<Websites />} />
                 <Route path="/exitsign" element={<ExitSign />} />
                 <Route path="/ceilingtile" element={<CeilingTile />} />
                 <Route path="/ironingboard" element={<IroningBoard />} />
+
+                <Route path="/nba" element={<Nba />} />
+                <Route path="/websites" element={<Websites />} />
+                <Route path="/hubrisdev" element={<HubrisDev />} />
+
+                <Route path="/artist" element={<ArtistStatment />} />
+                <Route path="/about" element={<AboutMe />} />
+                <Route path="/resume" element={<Resume />} />
+                <Route path="/teaching" element={<Teaching />} />
               </Routes>
             </div>
           </div>

src/Home.tsx

@@ -3,8 +3,12 @@ import React from "react";
 const Home: React.FC = () => {
   return (
     <div className="container mx-auto p-6">
-      <section className="container mx-auto py-12">
-        <a>I'm a software developer and an artist.</a>
+      <section className="container mx-auto py-2">
+        <img
+          src="/HQPictures/Hubris/hubrisBlur.webp"
+          alt="Hubris"
+          className="w-full h-auto max-w-screen max-h-[800px] object-contain"
+        />
       </section>
     </div>
   );

src/charts/NbaChart.tsx

@@ -9,13 +9,6 @@ import {
   ChartLegend,
   ChartLegendContent,
 } from "@/components/ui/chart";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardFooter,
-} from "@/components/ui/card";
 
 const chartData = [
   {
@@ -105,109 +98,93 @@ export const description = "A stacked bar chart with NBA player stats";
 
 export function NbaChart() {
   return (
-    <Card className="max-w-md p-2 transition duration-300 hover:shadow-lg">
-      <CardHeader>
-        <CardTitle>NBA Player Stats</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-          <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="name"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-            />
-            <ChartTooltip
-              content={
-                <ChartTooltipContent
-                  indicator="line"
-                  formatter={(value, name, item, index) => (
-                    <>
-                      <div
-                        className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
-                        style={
-                          {
-                            "--color-bg": `var(--color-${name})`,
-                          } as React.CSSProperties
-                        }
-                      />
-                      {chartConfig[name as keyof typeof chartConfig]?.label ||
-                        name}
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="name"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+        />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              indicator="line"
+              formatter={(value, name, item, index) => (
+                <>
+                  <div
+                    className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                    style={
+                      {
+                        "--color-bg": `var(--color-${name})`,
+                      } as React.CSSProperties
+                    }
+                  />
+                  {chartConfig[name as keyof typeof chartConfig]?.label || name}
+                  <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                    {value}
+                  </div>
+                  {/* Add this after the last item */}
+                  {index === 5 && (
+                    <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
+                      Total
                       <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                        {value}
+                        {Math.floor(
+                          (item.payload.points +
+                            item.payload.rebounds +
+                            item.payload.assists +
+                            item.payload.steals +
+                            item.payload.blocks +
+                            item.payload.threes) /
+                            6,
+                        )}
                       </div>
-                      {/* Add this after the last item */}
-                      {index === 5 && (
-                        <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
-                          Total
-                          <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                            {Math.floor(
-                              (item.payload.points +
-                                item.payload.rebounds +
-                                item.payload.assists +
-                                item.payload.steals +
-                                item.payload.blocks +
-                                item.payload.threes) /
-                                6,
-                            )}
-                          </div>
-                        </div>
-                      )}
-                    </>
+                    </div>
                   )}
-                />
-              }
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-            <Bar
-              dataKey="points"
-              fill="var(--color-points)"
-              stackId="a"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="rebounds"
-              fill="var(--color-rebounds)"
-              stackId="a"
-              radius={[0, 0, 0, 0]}
-            />
-            <Bar
-              dataKey="assists"
-              fill="var(--color-assists)"
-              stackId="a"
-              radius={[0, 0, 0, 0]}
-            />
-            <Bar
-              dataKey="steals"
-              fill="var(--color-steals)"
-              stackId="a"
-              radius={[0, 0, 0, 0]}
-            />
-            <Bar
-              dataKey="blocks"
-              fill="var(--color-blocks)"
-              stackId="a"
-              radius={[0, 0, 0, 0]}
-            />
-            <Bar
-              dataKey="threes"
-              fill="var(--color-threes)"
-              stackId="a"
-              radius={[4, 4, 0, 0]}
+                </>
+              )}
             />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="flex gap-2 font-medium leading-none">
-          2024-25 Season Stats
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
+          }
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar
+          dataKey="points"
+          fill="var(--color-points)"
+          stackId="a"
+          radius={[0, 0, 4, 4]}
+        />
+        <Bar
+          dataKey="rebounds"
+          fill="var(--color-rebounds)"
+          stackId="a"
+          radius={[0, 0, 0, 0]}
+        />
+        <Bar
+          dataKey="assists"
+          fill="var(--color-assists)"
+          stackId="a"
+          radius={[0, 0, 0, 0]}
+        />
+        <Bar
+          dataKey="steals"
+          fill="var(--color-steals)"
+          stackId="a"
+          radius={[0, 0, 0, 0]}
+        />
+        <Bar
+          dataKey="blocks"
+          fill="var(--color-blocks)"
+          stackId="a"
+          radius={[0, 0, 0, 0]}
+        />
+        <Bar
+          dataKey="threes"
+          fill="var(--color-threes)"
+          stackId="a"
+          radius={[4, 4, 0, 0]}
+        />
+      </BarChart>
+    </ChartContainer>
   );
 }