Update the project and compétences

This commit is contained in:
2024-01-26 08:49:07 +01:00
parent a985cd0977
commit bb5407fd05
24 changed files with 10056 additions and 103 deletions

View File

@@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

3
package-lock.json generated
View File

@@ -15,6 +15,9 @@
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"tailwindcss": "^3.3.3"
}
},
"node_modules/@aashutoshrathi/word-wrap": {

View File

@@ -6,9 +6,14 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"aos": "^2.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-github-btn": "^1.4.0",
"react-icons": "^4.11.0",
"react-scripts": "5.0.1",
"sass": "^1.69.4",
"typescript": "^5.2.2",
"web-vitals": "^2.1.4"
},
"scripts": {
@@ -34,5 +39,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.3.3"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -7,37 +7,14 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="Portfolio de Félix MARQUET"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Portfolio Félix MARQUET</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 66 KiB

View File

@@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Portfolio",
"name": "Portfolio de Félix MARQUET",
"icons": [
{
"src": "favicon.ico",

View File

@@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

View File

@@ -1,24 +1,36 @@
import logo from './logo.svg';
import './App.css';
import React, { useState } from 'react';
import { FaSun, FaMoon} from "react-icons/fa";
import "./index.css";
import Card from "./components/Card.tsx";
import About from "./components/About.tsx";
import Skills from "./components/Skills.tsx";
import Project from "./components/Project.tsx";
import Footer from "./components/Footer.tsx";
import data from "./assets/DATA.ts";
function App() {
const [theme, setTheme] = useState("light");
const toggleTheme = () => {
setTheme(theme === "light" ? "dark" : "light")
document.documentElement.classList.toggle("dark");
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<div className="min-h-screen py-10 px-3 sm:px-5 bg-gray-100 dark:bg-gray-900">
<div data-aos="face-down" data-aos-duration="800">
<Card name={data.name} title={data.title} social={data.social} />
</div>
<div data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
<About title={data.about.title} description={data.about.description} />
<Skills skills={data.skills} />
<Project projects={data.projects} />
<Footer />
</div>
<button onClick={toggleTheme} className="fixed bottom-5 right-5 p-2 rounded-full bg-gray-100 dark:bg-gray-900 shadow-md">
{theme === "light" ? <FaMoon size={20} className="text-gray-800" /> : <FaSun size={20} className="text-gray-200" />}
</button>
</div>
);
}

64
src/assets/DATA.ts Normal file
View File

@@ -0,0 +1,64 @@
const Felix = {
name: "Félix MARQUET",
title: "Etudiant en 2e année a l'ISEN Nantes",
social: {
github: "https://github.com/BreizhHardware",
twitter: "https://twitter.com/BreizhHardware",
linkedin: "https://www.linkedin.com/in/f%C3%A9lix-marquet-5071bb167/",
mail: "felix.marquet@isen-ouest.yncrea.fr"
},
about: {
title: "A propos de moi",
description: "Je suis étudiant en 2e année à l'ISEN Nantes. Je suis passionné par l'informatique. J'ai appris à coder en autodidacte et je suis actuellement en train d'apprendre le C++ et le PHP. Je suis également passionné par l'électronique et le hardware. Je possède un homelab composé de 2 serveur, un DELL T320 et un DELL R420 les 2 sous proxmox."
},
skills: [
{
skillName: "C",
skillLevel: 70,
},
{
skillName: "C++",
skillLevel: 50,
},
{
skillName: "Administration Système",
skillLevel: 80,
},
{
skillName: "Python",
skillLevel: 50,
},
{
skillName: "PHP",
skillLevel: 60,
}
],
projects: [
{
title: "SansDomaineFixe.xyz",
description: "Site web offrant des enregistrements DNS gratuits",
tags: ["TS", "tailwindcss", "pocketbase"],
link: "https://github.com/BreizhHardware/sansdomainefixe.xyz"
},
{
title: "Front end starter",
description: "Mon starter personnel pour projet front end",
tags: ["HTML", "CSS", "JS"],
link: "https://github.com/BreizhHardware/front-end-starter"
},
{
title: "Project C - ISEN CIR 1",
description: "Projet de fin de 1ere année à l'ISEN Nantes",
tags: ["C", "HTML", "CSS", "JS"],
link: "https://github.com/BreizhHardware/projetCGroupe8"
},
{
title: "Projet robot",
description: "Projet de robot avec le club Modelec ISEN pour la coupe de france de robotique (Developpement et déploiment sur Raspberry Pi)",
tags: ["C++", "QT", "Raspberry Pi"],
link: "https://github.com/modelec"
}
]
};
export default Felix;

BIN
src/assets/profile.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

13
src/components/About.tsx Normal file
View File

@@ -0,0 +1,13 @@
// @ts-ignore
import React from 'react';
function About({title, description}) {
return(
<div className="max-w-4xl mx-auto mt-16">
<p className="text-2xl md:text-4xl font-bold text-center text-gray-800 dark:text-gray-200">{title}</p>
<p className="text-base text-left md:text-center text-gray-600 leading-relaxed mt-4 dark:text-gray-400">{description}</p>
</div>
);
}
export default About;

56
src/components/Card.tsx Normal file
View File

@@ -0,0 +1,56 @@
// @ts-ignore
import React from 'react';
import profile from "../assets/profile.jpeg";
import { FaGithub, FaTwitter, FaLinkedin, FaRegEnvelope } from 'react-icons/fa';
function Card({name, title, social: {github, twitter, linkedin, mail}}){
return (
<div className="w-full">
<div className="flex flex-col items-center justify-center max-w-xs mx-auto bg-white shadow-xl rounded-xl p-5 dark:bg-gray-800">
<div className="">
<img
className="w-32 mx-auto shadow-xl rounded-full"
src={profile}
alt={name}
/>
</div>
<div className="text-center mt-5">
<p className="text-xl sm:text-2xl text-gray-900 dark:text-white">{name}</p>
<p className="text-xs sm:text-base text-gray-600 pt-2 pb-4 px-5 w-auto inline-block border-b-2 dark:text-gray-200"> {title} </p>
<div className="flex align-center justify-center mt-4">
<a
className="text-xl m-1 p-1 sm:m-2 sm:p-2 text-gray-800 hover:bg-gray-800 rounded-full hover:text-white transition-colors duration-300 dark:text-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-800 dark:hover:bg-opacity-20"
href={github}
>
<FaGithub />
<span className="sr-only">Github</span>
</a>
<a
className="text-xl m-1 p-1 sm:m-2 sm:p-2 text-gray-800 hover:bg-gray-800 rounded-full hover:text-white transition-colors duration-300 dark:text-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-800 dark:hover:bg-opacity-20"
href={twitter}
>
<FaTwitter />
<span className="sr-only">Twitter</span>
</a>
<a
className="text-xl m-1 p-1 sm:m-2 sm:p-2 text-gray-800 hover:bg-gray-800 rounded-full hover:text-white transition-colors duration-300 dark:text-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-800 dark:hover:bg-opacity-20"
href={linkedin}
>
<FaLinkedin />
<span className="sr-only">Linkedin</span>
</a>
<a
className="text-xl m-1 p-1 sm:m-2 sm:p-2 text-gray-800 hover:bg-gray-800 rounded-full hover:text-white transition-colors duration-300 dark:text-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-800 dark:hover:bg-opacity-20"
href={"mailto:" + mail}
>
<FaRegEnvelope />
<span className="sr-only">Mail</span>
</a>
</div>
</div>
</div>
</div>
);
}
export default Card;

12
src/components/Footer.tsx Normal file
View File

@@ -0,0 +1,12 @@
// @ts-ignore
import React from 'react';
function Footer() {
return (
<footer className="w-full text-center border-t border-grey p-4 pin-b">
<p className="text-gray-600 dark:text-gray-400">Made with <span className="text-red-500"></span> by <a href="https://github.com/BreizhHardware/">Félix MARQUET</a></p>
</footer>
)
};
export default Footer;

View File

@@ -0,0 +1,16 @@
// @ts-ignore
import React from 'react';
import ProjectCard from "./ProjectCard.tsx";
function Projects({projects}) {
return(
<div>
<h1 className="mt-8 text-2xl md:text-4xl text-center font-extrabold dark:text-gray-200">Mes projets</h1>
{projects.map((project) => (
<ProjectCard project={project} />
))}
</div>
)
};
export default Projects;

View File

@@ -0,0 +1,30 @@
import React from 'react';
import { FaExternalLinkAlt} from "react-icons/fa";
import GitHubButton from 'react-github-btn';
const projectCard = ({ project: { title, description, tags, link} }) => {
return (
<div className="group w-full sm:w-1/2 m-4 mx-auto p-6 rounded-xl border-2 border-gray-300 dark:border-gray-700">
<a href={link}>
<h1 className="text-xl text-center font-bold dark:text-gray-200">
{title}{" "}
<FaExternalLinkAlt className="inline align-baseline" />
</h1>
</a>
<hr className="my-4" />
<p className="dark:text-gray-300">{description}</p>
<div className="mt-4 mb-8 flex flex-warp justify-center items-center gap-2">
{tags.map((tag) => (
<div className="px-4 py-1 border-2 rounded-full dark:text-gray-300">{tag}</div>
))}
</div>
<div className="w-full text-center">
<GitHubButton href={link} data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</GitHubButton>
{" "}
<GitHubButton href={link + "/fork"} data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork ntkme/github-buttons on GitHub">Fork</GitHubButton>
</div>
</div>
);
};
export default projectCard;

View File

@@ -0,0 +1,30 @@
// @ts-ignore
import React from 'react';
import { FaCuttlefish, FaPhp, FaPython, FaServer} from 'react-icons/fa';
const iconClassName = "mx-auto text-4xl text-gray-800 dark:text-gray-200";
const iconMapping = {
"C": <FaCuttlefish className={iconClassName} />,
"C++": <FaCuttlefish className={iconClassName} />,
"Administration Système": <FaServer className={iconClassName} />,
"Python": <FaPython className={iconClassName} />,
"PHP": <FaPhp className={iconClassName} />,
};
interface SkillCardProps {
skillName: string;
}
const SkillCard: React.FC<SkillCardProps> = ({skillName, skillLevel}) => {
const skillIcon = iconMapping[skillName];
return(
<div className="m-4 w-40 flex-none mx-auto text-center p-5 rounded-xl border-2 border-gray-300 ">
{skillIcon}
<p className="text-xl font-semibold mt-4 dark:text-gray-400">{skillName}</p>
<progress className="w-full mt-4 rounded-lg" value={skillLevel} max="100"></progress>
</div>
);
}
export default SkillCard;

17
src/components/Skills.tsx Normal file
View File

@@ -0,0 +1,17 @@
// @ts-ignore
import React from 'react';
import SkillCard from './SkillCard.tsx';
function Skills({skills}) {
return(
<div className="flex flex-col sm:flex-row align-center justify-center max-w-2xl mx-auto mt-8 gap-5">
{skills.map((skill) => {
return (
<SkillCard skillName={skill.skillName} skillLevel={skill.skillLevel}/>
);
})}
</div>
);
}
export default Skills;

View File

@@ -1,13 +1,3 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

10
tailwind.config.js Normal file
View File

@@ -0,0 +1,10 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}

9753
yarn.lock Normal file

File diff suppressed because it is too large Load Diff