reskills

Author: mlavanga

.next.pid

@@ -1 +1 @@
-9132
+11383

GEMINI.md

@@ -0,0 +1,62 @@
+# Project Context: Mario Lavanga's Personal Website (v2)
+
+## Overview
+This project contains the source code for the personal academic and professional website of **Mario Lavanga**.
+
+**Current Status (Nov 2025):**
+The website has been migrated from **Jekyll** to **Next.js**.
+*   **Root**: The new Next.js application (v2).
+*   **`v_old/`**: The legacy Jekyll application (v1), preserved for reference.
+
+## Architecture & Technologies (New Site)
+*   **Framework**: [Next.js 16](https://nextjs.org/) (App Router).
+*   **Language**: TypeScript.
+*   **Styling**: Tailwind CSS 4.
+*   **Deployment**: GitHub Pages (Static Export).
+*   **CI/CD**: GitHub Actions (`.github/workflows/nextjs.yml`).
+
+## Directory Structure
+*   **`app/`**: Main Next.js application code (components, pages, data).
+    *   `components/`: Reusable UI components (Hero, Navbar, ProjectCard, etc.).
+    *   `data/`: Content files (e.g., `content.ts`) replacing the old `_config.yml`.
+*   **`public/`**: Static assets (images, SVGs).
+*   **`v_old/`**: The complete legacy Jekyll codebase.
+*   **`old_content/`**: Backup of raw markdown content/config from the legacy site.
+
+## Development Workflow
+
+### 1. Managing the New Site (Next.js)
+The site runs on **Port 3000**. Use the helper script `serve.sh` to manage the background process.
+
+*   **Start**: `./serve.sh start`
+*   **Stop**: `./serve.sh stop`
+*   **Status**: `./serve.sh status`
+*   **Logs**: `./serve.sh logs` (or `tail -f next.log`)
+
+*Standard Method*: `npm run dev`
+
+### 2. Managing the Legacy Site (Jekyll)
+The legacy site runs on **Port 4000**. Use the helper script `serve_old.sh` (which wraps the old `serve.sh` inside `v_old`).
+
+*   **Start**: `./serve_old.sh start`
+*   **Stop**: `./serve_old.sh stop`
+*   **Status**: `./serve_old.sh status`
+*   **Logs**: `./serve_old.sh logs` (or `tail -f v_old/jekyll.log`)
+
+**Note:** Ensure Port 4000 is free before starting the legacy site.
+
+### 3. Deployment
+The site is deployed automatically to GitHub Pages via GitHub Actions.
+*   **Trigger**: Push to `master` or `main`.
+*   **Config**: `.github/workflows/nextjs.yml`.
+*   **Build Mode**: Static Export (`output: 'export'` in `next.config.ts`).
+
+## Key Configuration Files
+*   **`next.config.ts`**: Configures static export and image optimization settings for GitHub Pages.
+*   **`tailwind.config.ts`** (or internal theme): Configures the design system.
+*   **`app/data/content.ts`**: Central file for editing website content (Bio, Experience, Projects, Publications). This replaces Jekyll's `_config.yml`.
+
+## Migration Notes
+*   The legacy content has been ported to `app/data/content.ts`.
+*   New features should be developed in the Next.js app (`app/`).
+*   The `v_old` directory is frozen and should typically not be modified unless necessary for historical reference.

app/components/Footer.tsx

@@ -6,11 +6,12 @@ export default function Footer({ info }: { info: PersonalInfo }) {
       <div className="container mx-auto px-6 text-center">
         <h2 className="text-2xl font-bold text-white mb-6">{info.name}</h2>
 
-        <div className="flex justify-center gap-8 mb-8">
+        <div className="flex justify-center gap-8 mb-8 flex-wrap">
            <a href={`mailto:${info.email[0]}`} className="hover:text-blue-400 transition-colors">Email</a>
            <a href={`https://github.com/${info.socials.github}`} className="hover:text-blue-400 transition-colors">GitHub</a>
            <a href={`https://linkedin.com/in/${info.socials.linkedin}`} className="hover:text-blue-400 transition-colors">LinkedIn</a>
-           <a href={`https://twitter.com/${info.socials.twitter}`} className="hover:text-blue-400 transition-colors">Twitter</a>
+           <a href={`https://scholar.google.com/citations?user=${info.socials.scholar}`} className="hover:text-blue-400 transition-colors">Google Scholar</a>
+           <a href={`https://youtube.com/channel/${info.socials.youtube}`} className="hover:text-blue-400 transition-colors">YouTube</a>
         </div>
 
         <p className="text-slate-500 text-sm">

app/components/Hero.tsx

@@ -36,16 +36,16 @@ export default function Hero({ info }: { info: PersonalInfo }) {
           <div className="flex gap-4 pt-4">
             <SocialLink href={`https://github.com/${info.socials.github}`} icon="github" />
             <SocialLink href={`https://linkedin.com/in/${info.socials.linkedin}`} icon="linkedin" />
-            <SocialLink href={`https://twitter.com/${info.socials.twitter}`} icon="twitter" />
+            <SocialLink href={`https://scholar.google.com/citations?user=${info.socials.scholar}`} icon="scholar" />
+            <SocialLink href={`https://youtube.com/channel/${info.socials.youtube}`} icon="youtube" />
           </div>
         </div>
 
         <div className="relative flex justify-center">
             {/* Placeholder for 3D Brain or Neural Network Visual */}
             <div className="w-80 h-80 md:w-96 md:h-96 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-full opacity-20 blur-2xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
             <div className="relative w-64 h-64 md:w-80 md:h-80 rounded-2xl overflow-hidden shadow-2xl border-4 border-white dark:border-slate-800 rotate-3 hover:rotate-0 transition-all duration-500">
-                 {/* Use a placeholder image if local image is tricky to reference correctly without moving it */}
-                <img src="https://mlavanga.github.io/images/profile.jpg" alt={info.name} className="w-full h-full object-cover" />
+                <img src="/images/profile.jpg" alt={info.name} className="w-full h-full object-cover" />
             </div>
         </div>
       </div>
@@ -54,19 +54,20 @@ export default function Hero({ info }: { info: PersonalInfo }) {
 }
 
 function SocialLink({ href, icon }: { href: string; icon: string }) {
-  // Simple text fallback or icon placeholder
   return (
     <a href={href} target="_blank" rel="noreferrer" className="p-2 text-slate-400 hover:text-blue-500 transition-colors">
       <span className="sr-only">{icon}</span>
-      {/* Simple SVG Icons */}
       {icon === 'github' && (
         <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
       )}
       {icon === 'linkedin' && (
         <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
       )}
-       {icon === 'twitter' && (
-        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
+      {icon === 'scholar' && (
+        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 24a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-24L0 9.5l4.838 3.94A8 8 0 0 1 12 9a8 8 0 0 1 7.162 4.44L24 9.5z"/></svg>
+      )}
+      {icon === 'youtube' && (
+        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
       )}
     </a>
   );

app/components/Media.tsx

@@ -0,0 +1,49 @@
+import { MediaItem } from '../data/content';
+
+export default function Media({ items }: { items: MediaItem[] }) {
+  return (
+    <div className="grid md:grid-cols-2 gap-8">
+      {items.map((item, index) => (
+        <div key={index} className="bg-white dark:bg-slate-800 rounded-xl overflow-hidden border border-slate-200 dark:border-slate-700">
+           <div className="p-6">
+             <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{item.title}</h3>
+             <p className="text-slate-600 dark:text-slate-300 mb-4">{item.description}</p>
+             
+             {item.video_id && item.video_id !== "PLACEHOLDER_VIDEO_ID" ? (
+               <div className="aspect-video rounded-lg overflow-hidden bg-slate-900">
+                 <iframe 
+                   width="100%" 
+                   height="100%" 
+                   src={`https://www.youtube.com/embed/${item.video_id}`} 
+                   title={item.title}
+                   frameBorder="0" 
+                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                   allowFullScreen
+                 ></iframe>
+               </div>
+             ) : item.channel_id ? (
+                <div className="aspect-video rounded-lg overflow-hidden bg-slate-100 dark:bg-slate-900 flex items-center justify-center flex-col p-6 text-center border-2 border-dashed border-slate-300 dark:border-slate-700">
+                    <div className="text-red-600 mb-2">
+                        <svg className="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
+                    </div>
+                    <p className="text-slate-600 dark:text-slate-400 mb-4">Watch videos on my channel</p>
+                    <a 
+                        href={`https://youtube.com/channel/${item.channel_id}`} 
+                        target="_blank" 
+                        rel="noreferrer"
+                        className="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors font-medium"
+                    >
+                        Visit Channel
+                    </a>
+                </div>
+             ) : (
+                <div className="aspect-video bg-slate-100 dark:bg-slate-900 flex items-center justify-center text-slate-400">
+                    Video content coming soon
+                </div>
+             )}
+           </div>
+        </div>
+      ))}
+    </div>
+  );
+}

app/components/Navbar.tsx

@@ -13,6 +13,8 @@ export default function Navbar() {
           <NavLink href="#experience">Experience</NavLink>
           <NavLink href="#projects">Projects</NavLink>
           <NavLink href="#publications">Publications</NavLink>
+          <NavLink href="#skills">Skills</NavLink>
+          <NavLink href="#media">Media</NavLink>
           <NavLink href="#contact">Contact</NavLink>
         </div>
 

app/components/Skills.tsx

@@ -0,0 +1,14 @@
+import { SkillItem } from '../data/content';
+
+export default function Skills({ items }: { items: SkillItem[] }) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {items.map((item, index) => (
+        <div key={index} className="bg-white dark:bg-slate-800/50 p-4 rounded-lg border border-slate-100 dark:border-slate-700 text-center hover:border-blue-500/30 transition-colors">
+          <h3 className="font-bold text-slate-900 dark:text-white">{item.name}</h3>
+          <p className="text-sm text-blue-600 dark:text-blue-400 mt-1">{item.level}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

app/data/content.ts

@@ -22,6 +22,13 @@ export interface SkillItem {
   level: string;
 }
 
+export interface MediaItem {
+  title: string;
+  video_id?: string;
+  channel_id?: string;
+  description: string;
+}
+
 export interface PersonalInfo {
   name: string;
   title: string;
@@ -32,7 +39,6 @@ export interface PersonalInfo {
   socials: {
     github: string;
     linkedin: string;
-    twitter: string;
     scholar: string;
     orcid: string;
     youtube: string;
@@ -43,14 +49,13 @@ export interface PersonalInfo {
 export const personalInfo: PersonalInfo = {
   name: "Mario Lavanga",
   title: "Computational Neuroscientist, Data Scientist, Postdoctoral researcher at the Theoretical Neuroscience Group - INS - Aix-Marseille University",
-  email: ["[email protected]", "[email protected]", "[email protected]"],
+  email: ["[email protected]", "[email protected]"],
   phone: "+33 6 52 93 31 80",
   website: "https://mlavanga.github.io",
-  cv: "https://mlavanga.github.io/documents/LAVANGA_CV.pdf",
+  cv: "/documents/LAVANGA_CV.pdf",
   socials: {
     github: "mlavanga",
     linkedin: "mario-lavanga-87a0a7a3",
-    twitter: "mario_lavanga",
     scholar: "oM1rUeIAAAAJ&hl",
     orcid: "0000-0002-3615-033X",
     youtube: "UCPGcAPYLko6G6p-1ZfM8CvQ",
@@ -203,3 +208,16 @@ export const skills: SkillItem[] = [
   { name: "Slurm", level: "Basic" },
   { name: "LabView", level: "Basic" }
 ];
+
+export const media: MediaItem[] = [
+    {
+        title: "PhD Graduation Video",
+        description: "Video recording of the PhD graduation ceremony.",
+        video_id: "PLACEHOLDER_VIDEO_ID" // Replace with actual ID if available, or use channel logic
+    },
+    {
+        title: "YouTube Channel",
+        description: "Check out my YouTube channel for more videos.",
+        channel_id: "UCPGcAPYLko6G6p-1ZfM8CvQ"
+    }
+];

app/page.tsx

@@ -3,8 +3,10 @@ import Hero from './components/Hero';
 import Section from './components/Section';
 import ExperienceCard from './components/ExperienceCard';
 import ProjectCard from './components/ProjectCard';
+import Skills from './components/Skills';
+import Media from './components/Media';
 import Footer from './components/Footer';
-import { personalInfo, experience, education, projects, publications } from './data/content';
+import { personalInfo, experience, education, projects, publications, skills, media } from './data/content';
 
 export default function Home() {
   return (
@@ -45,6 +47,16 @@ export default function Home() {
         </div>
       </Section>
 
+      <Section id="skills" title="Skills & Proficiency" className="bg-slate-50 dark:bg-slate-800/30">
+        <div className="max-w-4xl mx-auto">
+          <Skills items={skills} />
+        </div>
+      </Section>
+
+      <Section id="media" title="Media" className="bg-white dark:bg-slate-900">
+         <Media items={media} />
+      </Section>
+
       <Section id="contact" title="Get in Touch" className="bg-blue-600 text-white">
         <div className="text-center max-w-2xl mx-auto">
           <p className="text-xl mb-8 opacity-90">

next.log

@@ -7,16 +7,5 @@
    - Network:       http://192.168.1.177:3000
 
  ✓ Starting...
- ✓ Ready in 651ms
- GET / 200 in 2.2s (compile: 1918ms, render: 331ms)
- GET / 200 in 249ms (compile: 4ms, render: 245ms)
- ⚠ Found a change in next.config.ts. Restarting the server to apply the changes...
-   ▲ Next.js 16.0.4 (Turbopack)
-   - Local:         http://localhost:3000
-   - Network:       http://192.168.1.177:3000
-
- ✓ Starting...
- ✓ Ready in 679ms
- GET / 200 in 2.6s (compile: 1991ms, render: 620ms)
- GET / 200 in 287ms (compile: 10ms, render: 277ms)
- ✓ Compiled in 70ms
+ ✓ Ready in 721ms
+ GET / 200 in 2.7s (compile: 2.2s, render: 473ms)