installed new deps and created Experience card

app/.gitignore

@@ -4,3 +4,6 @@
 # React Router
 /.react-router/
 /build/
+.idea/
+../.idea
+package-lock.json

app/app/app.css

@@ -7,14 +7,14 @@
 }
 
 @font-face {
-  font-family: "handotrial";
-  src: url("./assets/fonts/hando-trial.ttf");
+  font-family: "sora";
+  src: url("./assets/fonts/Sora-SemiBold.ttf");
 }
 
 :root {
-  font-family: handotrial, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: sora, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
-  font-weight: 400;
+  font-weight: 600;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

app/app/experience-card/Experience.ts

@@ -0,0 +1,17 @@
+export default class Experience {
+  name: string;
+  longName?: string;
+  from: string;
+  to?: string;
+  description: string;
+  location: string;
+
+  constructor(name: string, from: string, description: string, location: string, to?: string, longName?: string) {
+    this.name = name;
+    this.from = from;
+    this.to = to;
+    this.description = description;
+    this.location = location;
+    this.longName = longName;
+  }
+}

app/app/experience-card/experience-card.tsx

@@ -0,0 +1,25 @@
+import "./experience-card.css"
+import  Experience from "./Experience";
+
+export default function ExperienceCard({props}: {props: Experience}) {
+  //TODO onClick animate
+  //TODO CSS
+  //TODO after animation display details
+
+  return (
+    <div className="experience-card">
+      <div className="experience-title">
+        <h2>{props.name}</h2>
+        <div className={"experience-date"}>
+          <h3>{props.from}</h3>
+          {props.to && <h3>{props.to}</h3>}
+        </div>
+      </div>
+      <div className="experience-info">
+        {props.longName && <div className={"experience-logname"}>{props.longName}</div>}
+        <div className={"experience-location"}>{props.location}</div>
+      </div>
+      <div className={"experience-description"}>{props.description}</div>
+    </div>
+  )
+}

app/app/root.tsx

@@ -7,10 +7,10 @@ import {
   ScrollRestoration,
 } from "react-router";
 
-import type { Route } from "./+types/root";
 import "./app.css";
-import Navbar from "~/navbar/Navbar";
-import Warncard from "~/warn-card/Warncard";
+import Navbar from "./navbar/Navbar";
+import Warncard from "./warn-card/Warncard";
+import type { Route } from "../app/+types/root";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },

app/app/routes/home.tsx

@@ -1,6 +1,6 @@
-import type { Route } from "./+types/home";
+import type { Route } from ".react-router/types/app/+types/root";
 import {Link} from "react-router";
-import { Welcome } from "~/welcome/welcome";
+import { Welcome } from "../welcome/welcome";
 
 export function meta({}: Route.MetaArgs) {
   return [

app/app/routes/projects.tsx

@@ -0,0 +1,22 @@
+import type {Route} from "../../.react-router/types/app/routes/+types/home";
+import Experience from "../experience-card/Experience";
+import ExperienceCard from "../experience-card/experience-card";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Projects" },
+    { name: "description", content: "Quentin Leblanc's projects" },
+  ];
+}
+
+export default function Project() {
+  const projects = [
+    new Experience("Mastermind React", "2025", "Simple mastermind game realized with React framework.", "Geneva"),
+  ];
+
+  return (
+    projects.map((project, id) =>
+      <li key={id}><ExperienceCard props={project}/></li>
+    )
+  );
+}

app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "app",
+  "name": "QL-resume",
   "private": true,
   "type": "module",
   "scripts": {
@@ -14,7 +14,8 @@
     "isbot": "^5.1.27",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.5.3"
+    "react-router": "^7.5.3",
+    "react-router-dom": "^7.8.1"
   },
   "devDependencies": {
     "@react-router/dev": "^7.5.3",

app/src/routes/projects.tsx

@@ -1,12 +0,0 @@
-import type {Route} from "../../.react-router/types/app/routes/+types/home";
-
-export function meta({}: Route.MetaArgs) {
-  return [
-    { title: "Projects" },
-    { name: "description", content: "Quentin Leblanc's projects" },
-  ];
-}
-
-export default function Project() {
-  return <p>Projects page</p>;
-}

app/tsconfig.json

@@ -15,7 +15,7 @@
     "rootDirs": [".", "./.react-router/types"],
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./app/*"]
+      "~/*": ["./src/*"]
     },
     "esModuleInterop": true,
     "verbatimModuleSyntax": true,