Giovanni-Josserand/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'dev' (#20) from dev into main

Browse Source 
Reviewed-on: #20
This commit is contained in:
Giovanni-Josserand 2025-08-31 16:29:50 +00:00
commit 3728385ebc
5 changed files with 107 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Experiences.jsx
View File

@ -1,39 +1,45 @@
import '../styles/Experiences.css';
import SingleExperience from './SingleExperience';
import React, {useEffect, useState} from "react";
function Experiences() {
const experiencesData = [
{
role: "Web Development Intern",
company: "Pandora",
duration: "April 2024",
location: "Rennes (Ille-et-Vilaine), France",
tasks: [
"Development of a dynamic website with database integration (HTML, CSS, PHP, SQL)",
"Created a reusable interface used as an internal learning resource",
"Introduction to GitHub Actions"
]
},
{
role: "IT Support Intern",
company: "INRAE",
duration: "April 2023",
location: "Rennes (Ille-et-Vilaine), France",
tasks: [
"Introduction to ProxMox Backup and UpdateEngine tools",
"Preparation of two workstations",
"Setup of a Wi-Fi hotspot using a Raspberry Pi",
"Installation of a RAID 1 system"
]
}
];
const [experiences, setExperiences] = useState([]);
const [experienceTasks, setExperienceTasks] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
const fetchExperiencesAndTasks = async () => {
try {
let response = await fetch('/api/experiences');
if (!response.ok) {
throw new Error(`Erreur HTTP: ${response.status}`);
}
let data = await response.json();
setExperiences(data.data);
response = await fetch('/api/experienceTasks');
if (!response.ok) {
throw new Error(`Erreur HTTP: ${response.status}`);
}
data = await response.json();
setExperienceTasks(data.data);
} catch (err) {
setError(err.message);
}
};
fetchExperiencesAndTasks();
}, []);
if (error) {
return <div>Erreur lors de la récupération des données : {error}</div>;
}
return (
<section id="experiences-section">
<h1 className="section-title">Experiences</h1>
<div className="experiences-container">
{experiencesData.map((exp) => (
<SingleExperience experience={exp}/>
{experiences.map((exp) => (
<SingleExperience experience={exp} tasks={experienceTasks.filter(task => task.experience_id === exp.id)}/>
))}
</div>
</section>

51
src/components/Projects.jsx
View File

@ -1,29 +1,28 @@
import SingleProject from "./SingleProject.jsx";
import "../styles/Projects.css"
import React, {useEffect, useState} from "react";
function Projects() {
const codevProject = {
title: "Codev",
image: "codev",
color: "orange",
nbImage: 5,
skills: ['HTML', 'CSS', 'PHP', 'JavaScript', 'SQL'],
description: "A collaborative platform where developers can create, share, and grow coding projects. Built for solo makers or teams, it features real-time messaging and a centralized workspace."
}
const SAECProject = {
title: "SAE C++",
image: "SAE_C++",
color: "purple",
nbImage: 3,
skills: ['C++', 'Git'],
description: "A C++ program developed for creating and managing treasure hunt records, with a web interface that allows browsing and consulting the entries."
}
const proxmoxProject = {
title: "Proxmox",
image: "proxmox",
color: "green",
nbImage: 5,
skills: [],
description: "A Proxmox-based infrastructure that consolidates my personal cloud, home automation, code hosting, media services and web hosting into a single, self-hosted environment."
const [projects, setProjects] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
const fetchProjects = async () => {
try {
const response = await fetch('/api/projects');
if (!response.ok) {
throw new Error(`Erreur HTTP: ${response.status}`);
}
const data = await response.json();
setProjects(data.data);
} catch (err) {
setError(err.message);
}
};
fetchProjects();
}, []);
if (error) {
return <div>Erreur lors de la récupération des données : {error}</div>;
}
@ -31,9 +30,9 @@ function Projects() {
<section id="projects-section">
<h1 className="section-title">Projects</h1>
<div className="projects-section-list">
<SingleProject image={codevProject.image} title={codevProject.title} description={codevProject.description} skills={codevProject.skills} color={codevProject.color} nbImage={codevProject.nbImage}/>
<SingleProject image={SAECProject.image} title={SAECProject.title} description={SAECProject.description} skills={SAECProject.skills} color={SAECProject.color} nbImage={SAECProject.nbImage}/>
<SingleProject image={proxmoxProject.image} title={proxmoxProject.title} description={proxmoxProject.description} skills={proxmoxProject.skills} color={proxmoxProject.color} nbImage={proxmoxProject.nbImage}/>
{projects.map(project => (
<SingleProject image={project.image_name} title={project.title} description={project.description} skills={project.skills} color={project.color} nbImage={project.nb_image}/>
))}
</div>
<div className="show-more-container">
<p className="show-more-link">

6
src/components/SingleExperience.jsx
View File

@ -1,6 +1,6 @@
import '../styles/SingleExperience.css';
function SingleExperience({ experience }) {
function SingleExperience({ experience, tasks }) {
return (
<div className="experience-card">
<div className="experience-card-left">
@ -11,8 +11,8 @@ function SingleExperience({ experience }) {
<div className="experience-card-right">
<h3 className="experience-role">{experience.role}</h3>
<ul className="experience-tasks">
{experience.tasks.map((task, index) => (
<li key={index}>{task}</li>
{tasks.map((task) => (
<li>{task.description}</li>
))}
</ul>
</div>

62
src/components/Skills.jsx
View File

@ -1,35 +1,49 @@
import React, { useState, useEffect } from 'react';
import SkillCard from "./SkillCard.jsx";
import "../styles/Skills.css";
function Skills() {
const [skills, setSkills] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
const fetchSkills = async () => {
try {
const response = await fetch('/api/skills');
if (!response.ok) {
throw new Error(`Erreur HTTP: ${response.status}`);
}
const data = await response.json();
setSkills(data.data);
} catch (err) {
setError(err.message);
}
};
fetchSkills();
}, []);
if (error) {
return <div>Erreur lors de la récupération des données : {error}</div>;
}
const uniqueSkillTypes = [...new Set(skills.map(skill => skill.type))];
return (
<section id="skills-section">
<h1 className="section-title">Skills</h1>
<div id="languages" className="skill-category">
<h2>Languages</h2>
<div className="skills">
<SkillCard text="Python"/>
<SkillCard text="Java"/>
<SkillCard text="C++"/>
<SkillCard text="HTML"/>
<SkillCard text="CSS"/>
<SkillCard text="JavaScript"/>
<SkillCard text="PHP"/>
<SkillCard text="SQL"/>
{uniqueSkillTypes.map(type => (
<div id="languages" className="skill-category">
<h2>{type}</h2>
<div className="skills">
{skills
.filter(skill => skill.type === type)
.map(skill => (
<SkillCard text={skill.name}/>
))}
</div>
</div>
</div>
<div id="librairies" className="skill-category">
<h2>Librairies</h2>
<div className="skills">
<SkillCard text="React"/>
</div>
</div>
<div id="tools" className="skill-category">
<h2>Tools</h2>
<div className="skills">
<SkillCard text="Git"/>
</div>
</div>
))}
</section>
)
}

8
vite.config.js
View File

@ -4,4 +4,12 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
}
}
})