Compare commits
16 Commits
1a917475c6
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 543198994b | |||
|
b9ce2ffdc2 | ||
|
|
069be079eb | ||
| aac41fd363 | |||
| dff4093315 | |||
| 1be90da3c3 | |||
| 1588363d97 | |||
| 0c64ba030c | |||
| d630bb4812 | |||
| c067f0b437 | |||
|
|
21355ac913 | ||
|
|
1f650249a3 | ||
|
|
9c9860c80e | ||
|
|
2efe845306 | ||
|
|
7e14b570eb | ||
|
|
b48bd9f372 |
48
.gitea/workflows/build.yml
Normal file
48
.gitea/workflows/build.yml
Normal file
@@ -0,0 +1,48 @@
|
||||
name: Linux arm64
|
||||
run-name: Build and Deploy Portfolio
|
||||
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
Build-and-Deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out repository code
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Install dependencies and build
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
|
||||
- name: Set up SSH agent
|
||||
uses: webfactory/ssh-agent@v0.9.0
|
||||
with:
|
||||
ssh-private-key: ${{ secrets.SSH_KEY_PORTFOLIO }}
|
||||
|
||||
- name: Add remote host to known_hosts
|
||||
run: |
|
||||
mkdir -p ~/.ssh
|
||||
ssh-keyscan -H git.ale-pri.com >> ~/.ssh/known_hosts
|
||||
|
||||
- name: Upload build folder to temporary directory on remote server
|
||||
run: |
|
||||
scp -r build ubuntu@git.ale-pri.com:Poubelle/portfolio
|
||||
|
||||
- name: Deploy to final directory on remote server
|
||||
run: |
|
||||
ssh ubuntu@git.ale-pri.com << 'EOF'
|
||||
BUILD_TMP=Poubelle/portfolio
|
||||
DEPLOY_DIR=/var/www/portfolio
|
||||
|
||||
sudo mkdir -p $DEPLOY_DIR
|
||||
|
||||
sudo rsync -a --delete $BUILD_TMP/ $DEPLOY_DIR/
|
||||
|
||||
sudo chown -R www-data:www-data $DEPLOY_DIR
|
||||
sudo chmod -R 755 $DEPLOY_DIR
|
||||
|
||||
sudo rm -rf $BUILD_TMP
|
||||
|
||||
sudo nginx -t && sudo systemctl reload nginx
|
||||
EOF
|
||||
@@ -1,4 +1,4 @@
|
||||
# Getting Started with Create React App
|
||||
# Getting Started with Create React App on my Portfolio 😎
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
|
||||
9213
package-lock.json
generated
9213
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
21
package.json
21
package.json
@@ -1,18 +1,25 @@
|
||||
{
|
||||
"name": "portfolio",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=12.x"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.22.0",
|
||||
"react-scripts": "^3.0.1",
|
||||
"react-scroll": "^1.8.9",
|
||||
"web-vitals": "^2.1.4"
|
||||
"i18next": "^22.5.1",
|
||||
"i18next-browser-languagedetector": "^8.1.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-i18next": "^10.0.0",
|
||||
"react-router-dom": "^7.6.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-scroll": "^1.9.3",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-transform-private-property-in-object": "^7.27.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts --openssl-legacy-provider start",
|
||||
|
||||
BIN
public/img/cinetour.png
Normal file
BIN
public/img/cinetour.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
BIN
public/img/docker.png
Normal file
BIN
public/img/docker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
public/img/favicon_logo.png
Normal file
BIN
public/img/favicon_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/img/gauss.jpg
Normal file
BIN
public/img/gauss.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
public/img/git.png
Normal file
BIN
public/img/git.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
public/img/java.png
Normal file
BIN
public/img/java.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/img/jira.png
Normal file
BIN
public/img/jira.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
public/img/kubernetes.png
Normal file
BIN
public/img/kubernetes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
public/img/logo_blanc.png
Normal file
BIN
public/img/logo_blanc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
@@ -1,46 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="https://thibaut.ale-pri.com/img/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Portfolio de Thibaut ALESSI"
|
||||
/>
|
||||
<meta property="og:image" content="https://thibaut.ale-pri.com/img/moiherosection.jpg" data-rh="true" />
|
||||
<meta property="og:description" content="Portfolio de Thibaut ALESSI" data-rh="true">
|
||||
<meta property="og:title" content="Portfolio" data-rh="true">
|
||||
<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>Portfolio</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.
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/img/favicon_logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Portfolio de Thibaut ALESSI" />
|
||||
<meta property="og:image" content="%PUBLIC_URL%/img/moiherosection.jpg" data-rh="true" />
|
||||
<meta property="og:description" content="Portfolio de Thibaut ALESSI" data-rh="true">
|
||||
<meta property="og:title" content="Portfolio" data-rh="true">
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<title>Portfolio</title>
|
||||
<!-- Plausible -->
|
||||
<script defer data-domain="thibaut.ale-pri.com"
|
||||
src="https://plausible.ale-pri.com/js/script.file-downloads.hash.outbound-links.js"></script>
|
||||
<script>window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
|
||||
</head>
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,6 +3,7 @@ import React from "react";
|
||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||
import Home from "./Pages/Home/Homescreen";
|
||||
import Navbar from "./Pages/Home/Navbar";
|
||||
import "./i18n";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function AboutMe() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section id="AboutMe" className="about--section">
|
||||
<div className="about--section--img">
|
||||
@@ -6,18 +10,13 @@ export default function AboutMe() {
|
||||
</div>
|
||||
<div className="hero--section--content-box about--section--box">
|
||||
<div className="hero--section--content">
|
||||
<p className="section--title">À propos</p>
|
||||
<h1 className="skills-section--heading">À propos de moi</h1>
|
||||
<p className="section--title">{t('about.title')}</p>
|
||||
<h1 className="skills-section--heading">{t('about.heading')}</h1>
|
||||
<p className="hero--section-description">
|
||||
Étudiant en deuxième année de classe préparatoire PeiP (Parcours des
|
||||
écoles d'ingénieurs Polytech) Lyon, option Informatique.
|
||||
{t('about.description1')}
|
||||
</p>
|
||||
<p className="hero--section-description">
|
||||
Passionné d’informatique, je suis à la recherche d’une opportunité
|
||||
en alternance dès mon entrée en école d’ingénieur pour développer
|
||||
mes compétences et contribuer à un projet d'entreprise qu’il soit
|
||||
orienté Infrastructure, Développement, OPS, Bases de Données ...
|
||||
Qualifié en mathématiques et junior en code.
|
||||
{t('about.description2')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function ContactMe() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section id="Contact" className="contact--section">
|
||||
<div>
|
||||
<p className="sub--title">Rentrer en Contact</p>
|
||||
<h2>Contactez Moi</h2>
|
||||
<p className="sub--title">{t('contact.title')}</p>
|
||||
<h2>{t('contact.heading')}</h2>
|
||||
<p className="text-lg-with-margin">
|
||||
Si vous voulez me contacter, vous pouvez m'envoyer un mail à l'adresse
|
||||
email suivante :
|
||||
{t('contact.description1')}
|
||||
</p>
|
||||
<a href="mailto:thibaut.alessi@free.fr">thibaut.alessi@free.fr</a>
|
||||
<p className="text-lg">
|
||||
Ou bien directement par LinkedIn en bas de page.
|
||||
{t('contact.description2')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,13 +1,25 @@
|
||||
import { Link } from "react-scroll";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function Footer() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<footer className="footer--container">
|
||||
<div className="footer--link--container">
|
||||
<div>
|
||||
<Link
|
||||
activeClass="navbar--active-content"
|
||||
spy={true}
|
||||
smooth={true}
|
||||
offset={-70}
|
||||
duration={500}
|
||||
to="heroSection"
|
||||
className="footer--logo"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<img src="./img/logo.png" alt="Logo" />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="footer--items">
|
||||
<ul>
|
||||
<li>
|
||||
@@ -19,8 +31,10 @@ function Footer() {
|
||||
duration={500}
|
||||
to="heroSection"
|
||||
className="text-md"
|
||||
style={{ cursor: 'pointer' }}
|
||||
|
||||
>
|
||||
Accueil
|
||||
{t('footer.home')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@@ -32,8 +46,9 @@ function Footer() {
|
||||
duration={500}
|
||||
to="MyPortfolio"
|
||||
className="text-md"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
Portfolio
|
||||
{t('footer.portfolio')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@@ -45,8 +60,9 @@ function Footer() {
|
||||
duration={500}
|
||||
to="AboutMe"
|
||||
className="text-md"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
À propos de moi
|
||||
{t('footer.about')}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -68,8 +84,8 @@ function Footer() {
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M7.33341 4.65479H26.0001C27.4729 4.65479 28.6667 5.84869 28.6667 7.32145V25.9881C28.6667 27.4609 27.4729 28.6548 26.0001 28.6548H7.33341C5.86065 28.6548 4.66675 27.4609 4.66675 25.9881V7.32145C4.66675 5.84869 5.86065 4.65479 7.33341 4.65479ZM11.3334 24.6548C11.7016 24.6548 12.0001 24.3563 12.0001 23.9881V14.6548C12.0001 14.2867 11.7016 13.9881 11.3334 13.9881H9.33342C8.96523 13.9881 8.66675 14.2867 8.66675 14.6548V23.9881C8.66675 24.3563 8.96523 24.6548 9.33342 24.6548H11.3334ZM10.3334 12.6548C9.22884 12.6548 8.33341 11.7594 8.33341 10.6548C8.33341 9.55021 9.22884 8.65479 10.3334 8.65479C11.438 8.65479 12.3334 9.55021 12.3334 10.6548C12.3334 11.7594 11.438 12.6548 10.3334 12.6548ZM24.0001 24.6548C24.3682 24.6548 24.6667 24.3563 24.6667 23.9881V17.8548C24.7101 15.7359 23.1435 13.9275 21.0401 13.6681C19.5694 13.5338 18.1445 14.2207 17.3334 15.4548V14.6548C17.3334 14.2867 17.0349 13.9881 16.6667 13.9881H14.6667C14.2986 13.9881 14.0001 14.2867 14.0001 14.6548V23.9881C14.0001 24.3563 14.2986 24.6548 14.6667 24.6548H16.6667C17.0349 24.6548 17.3334 24.3563 17.3334 23.9881V18.9881C17.3334 17.8836 18.2289 16.9881 19.3334 16.9881C20.4379 16.9881 21.3334 17.8836 21.3334 18.9881V23.9881C21.3334 24.3563 21.6319 24.6548 22.0001 24.6548H24.0001Z"
|
||||
fill="black"
|
||||
/>
|
||||
|
||||
@@ -1,26 +1,24 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function HeroSection() {
|
||||
const openGitHub = (link) => {
|
||||
window.open(link, "_blank");
|
||||
};
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section id="heroSection" className="hero--section">
|
||||
<div className="hero--section--content-box">
|
||||
<div className="hero--section--content">
|
||||
<p className="section--title">Hello, je suis ALESSI Thibaut</p>
|
||||
<p className="section--title">{t('hero.hello')}</p>
|
||||
<h1 className="hero--section--title">
|
||||
<span className="hero--section--title--color">
|
||||
Etudiant à Polytech Lyon
|
||||
{t('hero.student')}
|
||||
</span>{" "}
|
||||
<br />
|
||||
Passionné d'informatique
|
||||
{t('hero.passion')}
|
||||
</h1>
|
||||
<p className="hero--section--description">
|
||||
J'aime le C++, le SQL, la guitare, le sport et voyager.
|
||||
{t('hero.description')}
|
||||
<br />
|
||||
Mon objectif, m'améliorer chaque jour.
|
||||
{t('hero.goal')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import data from "../../data/index.json";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function MyPortfolio() {
|
||||
const openGitHub = (link) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const currentLang = (i18n.language || 'fr').split('-')[0];
|
||||
|
||||
const openLinkInNewTab = (link) => {
|
||||
window.open(link, "_blank");
|
||||
};
|
||||
|
||||
@@ -10,11 +13,11 @@ export default function MyPortfolio() {
|
||||
<section className="portfolio--section" id="MyPortfolio">
|
||||
<div className="portfolio--container-box">
|
||||
<div className="portfolio--container">
|
||||
<p className="sub--title">Projets récents</p>
|
||||
<h2 className="section--heading">Mon Portfolio</h2>
|
||||
<p className="sub--title">{t('portfolio.title')}</p>
|
||||
<h2 className="section--heading">{t('portfolio.heading')}</h2>
|
||||
</div>
|
||||
<div>
|
||||
<button className="btn btn-github" onClick={() => openGitHub("https://github.com/Morph01")}>
|
||||
<button className="btn btn-github" onClick={() => openLinkInNewTab("https://github.com/Morph01")}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
@@ -23,29 +26,33 @@ export default function MyPortfolio() {
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16.3333 0.166748C7.50028 0.166748 0.333252 7.33378 0.333252 16.1667C0.333252 24.9997 7.50028 32.1667 16.3333 32.1667C25.1489 32.1667 32.3333 24.9997 32.3333 16.1667C32.3333 7.33378 25.1489 0.166748 16.3333 0.166748ZM26.9016 7.54202C28.8105 9.8674 29.9559 12.8348 29.9906 16.0452C29.5394 15.9585 25.0274 15.0387 20.4808 15.6114C20.3767 15.3858 20.2899 15.1428 20.1858 14.8999C19.9081 14.2405 19.5958 13.5637 19.2834 12.9216C24.3159 10.8739 26.6066 7.9238 26.9016 7.54202ZM16.3333 2.52684C19.804 2.52684 22.9797 3.82836 25.3919 5.96285C25.1489 6.30992 23.0838 9.06914 18.2248 10.8912C15.9862 6.77846 13.5047 3.41187 13.1229 2.89126C14.1467 2.64831 15.2227 2.52684 16.3333 2.52684ZM10.5199 3.811C10.8843 4.2969 13.3138 7.68085 15.5871 11.7068C9.20093 13.4075 3.56102 13.3728 2.95364 13.3728C3.83867 9.13855 6.70201 5.61577 10.5199 3.811ZM2.65863 16.1841C2.65863 16.0452 2.65863 15.9064 2.65863 15.7676C3.24865 15.7849 9.87772 15.8717 16.6977 13.824C17.0969 14.5875 17.4613 15.3684 17.8084 16.1493C17.6348 16.2014 17.4439 16.2535 17.2704 16.3055C10.2248 18.5788 6.47642 24.7914 6.16405 25.312C3.99485 22.8999 2.65863 19.6895 2.65863 16.1841ZM16.3333 29.8413C13.1749 29.8413 10.2595 28.7654 7.95147 26.9606C8.19442 26.4574 10.971 21.1125 18.676 18.4227C18.7107 18.4053 18.7281 18.4053 18.7628 18.388C20.689 23.3684 21.47 27.5506 21.6782 28.748C20.0296 29.4595 18.2248 29.8413 16.3333 29.8413ZM23.9515 27.4986C23.8127 26.6656 23.0838 22.6743 21.2964 17.7632C25.5828 17.0864 29.3311 18.1971 29.7997 18.3533C29.2097 22.1537 27.0231 25.4335 23.9515 27.4986Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
Visiter mon GitHub
|
||||
{t('portfolio.github')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="portfolio--section--container">
|
||||
{data?.portfolio?.map((item, index) => (
|
||||
<div key={index} className="portfolio--section--card">
|
||||
<div key={index} className="portfolio--section--card"
|
||||
onClick={() => openLinkInNewTab(item.link)}
|
||||
style={{ cursor: 'pointer' }}>
|
||||
<div className="portfolio--section--img">
|
||||
<img src={item.src} alt="Placeholder" />
|
||||
<img src={item.src} alt={item.title[currentLang]} />
|
||||
</div>
|
||||
<div className="portfolio--section--card--content">
|
||||
<div>
|
||||
<h3 className="portfolio--section--title">{item.title}</h3>
|
||||
<p className="text-md">{item.description}</p>
|
||||
<h3 className="portfolio--section--title">
|
||||
{item.title[currentLang]}
|
||||
</h3>
|
||||
<p className="text-md">{item.description[currentLang]}</p>
|
||||
</div>
|
||||
<p className="text-sm portfolio--link" onClick={() => openGitHub(item.link)}>
|
||||
{item.voir}
|
||||
<p className="text-sm portfolio--link">
|
||||
{item.voir[currentLang]}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
@@ -56,9 +63,9 @@ export default function MyPortfolio() {
|
||||
<path
|
||||
d="M4.66667 1.66675H18V15.0001M18 1.66675L2 17.6667L18 1.66675Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="2.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
|
||||
@@ -1,21 +1,25 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import data from "../../data/index.json";
|
||||
|
||||
export default function MySkills() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const currentLang = (i18n.language || 'fr').split('-')[0];
|
||||
|
||||
return (
|
||||
<section className="skills--section" id="mySkills">
|
||||
<div className="portfolio--container">
|
||||
<p className="section--title">Mes Compétences</p>
|
||||
<h2 className="skills--section--heading">Mes Skills</h2>
|
||||
<p className="section--title">{t('skills.title')}</p>
|
||||
<h2 className="skills--section--heading">{t('skills.heading')}</h2>
|
||||
</div>
|
||||
<div className="skills--section--container">
|
||||
{data?.skills?.map((item, index) => (
|
||||
<div key={index} className="skills--section--card">
|
||||
<div className="skills--section--img">
|
||||
<img src={item.src} alt="Tools" />
|
||||
<img src={item.src} alt="Product Chain" />
|
||||
</div>
|
||||
<div className="skills--section--card--content">
|
||||
<h3 className="skills--section--title">{item.title}</h3>
|
||||
<p className="skills--section--description">{item.description}</p>
|
||||
<h3 className="skills--section--title">{item.title[currentLang]}</h3>
|
||||
<p className="skills--section--description">{item.description[currentLang]}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Link } from "react-scroll";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function Navbar() {
|
||||
const [navActive, setNavActive] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const toggleNav = () => {
|
||||
setNavActive(!navActive);
|
||||
@@ -34,9 +36,19 @@ function Navbar() {
|
||||
|
||||
return (
|
||||
<nav className={`navbar ${navActive ? "active" : ""}`}>
|
||||
<div>
|
||||
<Link
|
||||
onClick={closeMenu}
|
||||
activeClass="navbar--active-content"
|
||||
spy={false}
|
||||
smooth={true}
|
||||
offset={-70}
|
||||
duration={500}
|
||||
to="heroSection"
|
||||
className="navbar--logo"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<img src="./img/logo.png" alt="Logo" />
|
||||
</div>
|
||||
</Link>
|
||||
<a
|
||||
className={`nav__hamburger ${navActive ? "active" : ""}`}
|
||||
onClick={toggleNav}
|
||||
@@ -58,7 +70,7 @@ function Navbar() {
|
||||
to="heroSection"
|
||||
className="navbar--content"
|
||||
>
|
||||
Accueil
|
||||
{t('navbar.home')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@@ -72,7 +84,7 @@ function Navbar() {
|
||||
to="MyPortfolio"
|
||||
className="navbar--content"
|
||||
>
|
||||
Portfolio
|
||||
{t('navbar.portfolio')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@@ -86,7 +98,7 @@ function Navbar() {
|
||||
to="AboutMe"
|
||||
className="navbar--content"
|
||||
>
|
||||
À propos de moi
|
||||
{t('navbar.about')}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -101,7 +113,7 @@ function Navbar() {
|
||||
to="Contact"
|
||||
className="btn btn-outline-primary"
|
||||
>
|
||||
Contactez Moi
|
||||
{t('navbar.contact')}
|
||||
</Link>
|
||||
</nav>
|
||||
);
|
||||
|
||||
@@ -3,46 +3,151 @@
|
||||
{
|
||||
"id": "1",
|
||||
"src": "./img/cpp.png",
|
||||
"title": "POO (Programmation Orientée Objet)",
|
||||
"description": "Developpement en C++ du jeu Blitz."
|
||||
"title": {
|
||||
"fr": "POO (Programmation Orientée Objet)",
|
||||
"en": "OOP (Object-Oriented Programming)"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Développement en C++ du jeu Blitz.",
|
||||
"en": "Development of the Blitz game in C++."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"src": "./img/sql.png",
|
||||
"title": "Base de Données et SGBD MySQL",
|
||||
"description": "Utilisation du SGBD MySQL pour le projet de mise en place d'une base de données pour le jeu Blitz."
|
||||
"id": "2",
|
||||
"src": "./img/sql.png",
|
||||
"title": {
|
||||
"fr": "Base de Données et SGBD MySQL",
|
||||
"en": "Databases and MySQL DBMS"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Utilisation du SGBD MySQL pour le projet de mise en place d'une base de données pour le jeu Blitz.",
|
||||
"en": "Using MySQL DBMS for implementing a database for the Blitz game."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"src": "./img/html-css.png",
|
||||
"title": "Front-End",
|
||||
"description": "Développement de l'interface Front-End du site de notre participation à la Nuit de l'Info 2024 en HTML, SCSS, ReactJS + Vite."
|
||||
"title": {
|
||||
"fr": "Front-End",
|
||||
"en": "Front-End"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Développement de l'interface Front-End du site de notre participation à la Nuit de l'Info 2024 en HTML, SCSS, ReactJS + Vite.",
|
||||
"en": "Development of the Front-End interface for our 'Nuit de l'Info 2024' participation website using HTML, SCSS, ReactJS + Vite."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"src": "./img/java.png",
|
||||
"title": {
|
||||
"fr": "POO (Programmation Orientée Objet)",
|
||||
"en": "OOP (Object-Oriented Programming)"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Développement et compréhension de code JAVA, accordé avec Maven et Hibernate par exemple.",
|
||||
"en": "Development and understanding of JAVA code, combined with tools like Maven and Hibernate."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"src": "./img/jira.png",
|
||||
"title": {
|
||||
"fr": "Gestion de Projet / Méthodes agiles / ITIL",
|
||||
"en": "Project Management / Agile Methods / ITIL"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Compréhension et application au quotidien de méthodes agiles, processus ITIL.",
|
||||
"en": "Understanding and daily application of agile methods and ITIL processes."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
"src": "./img/git.png",
|
||||
"title": {
|
||||
"fr": "Git",
|
||||
"en": "Git"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Utilisation de Git pour la gestion de version de tout mes projets.",
|
||||
"en": "Using Git for version control of all my projects."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
"src": "./img/docker.png",
|
||||
"title": {
|
||||
"fr": "Docker",
|
||||
"en": "Docker"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Utilisation de Docker pour mettre en place des conteneurs pour mes projets et expérience de la conteneurisation de diverses applications chez Worldline.",
|
||||
"en": "Use of Docker to set up containers for my projects and experienced containerization of various applications at Worldline."
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
"src": "./img/kubernetes.png",
|
||||
"title": {
|
||||
"fr": "Kubernetes",
|
||||
"en": "Kubernetes"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Utilisation de Kubernetes pour la gestion de conteneurs d'une plateforme de plusieurs applications sur GCP (Google Cloud Platform).",
|
||||
"en": "Using Kubernetes to manage containers for a multi-application platform on GCP (Google Cloud Platform)."
|
||||
}
|
||||
}
|
||||
],
|
||||
"portfolio": [
|
||||
{
|
||||
"id": "1",
|
||||
"src": "./img/cinetour.png",
|
||||
"title": {
|
||||
"fr": "Cinetour",
|
||||
"en": "Cinetour"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Une application web pour les cinéphiles et les amateurs de voyage pour explorer les lieux réels où leurs films préférés ont été tournés. Développée avec Java (Spring Boot), React Frontend, MySQL, Dockerisée et hébergée sur un serveur cloud personnel.",
|
||||
"en": "A web application for cinephiles and travel enthusiasts to explore the real-life locations where their favorite films were shot. Developed with Java (Spring Boot), React Frontend, MySQL, Dockerized and hosted on a personal cloud server."
|
||||
},
|
||||
"voir": {
|
||||
"fr": "Découvrir",
|
||||
"en": "Discover"
|
||||
},
|
||||
"link": "https://cinetour.ale-pri.com"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"src": "./img/blitz.jpg",
|
||||
"title": "Blitz",
|
||||
"description": "Jeu 3D multijoueurs cross-platforme (Windows, Linux, MacOS, Android) développé en C++, interface 3D avec OpenGL, interface utilisateur avec ImGui.",
|
||||
"voir": "Voir Sur Gitea",
|
||||
"title": {
|
||||
"fr": "Blitz",
|
||||
"en": "Blitz"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Jeu 3D multijoueurs cross-platforme (Windows, Linux, MacOS, Android) développé en C++, interface 3D avec OpenGL, interface utilisateur avec ImGui.",
|
||||
"en": "Cross-platform multiplayer 3D game (Windows, Linux, MacOS, Android) developed in C++, 3D interface with OpenGL, user interface with ImGui."
|
||||
},
|
||||
"voir": {
|
||||
"fr": "Voir Sur Gitea",
|
||||
"en": "View On Gitea"
|
||||
},
|
||||
"link": "https://git.ale-pri.com/Blitz/Blitz"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"src": "./img/gauss.png",
|
||||
"title": "Elimination de Gauss-Jordan",
|
||||
"description": "Utilisation C++ pour effectuer plusieurs opérations sur des matrices afin de trouver le noyau et l'image d'applications linéaires par la méthode du pivot de Gauss",
|
||||
"voir": "Voir Sur Gitea",
|
||||
"link": "https://git.ale-pri.com/ProjetMAM/Pivot"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"src": "./img/nuitinfo.png",
|
||||
"title": "Front-End",
|
||||
"description": "Participation à la nuit de l'info 2024, coté au front-end.",
|
||||
"voir": "Voir Sur GitHub",
|
||||
"link": "https://github.com/PolyCrusader/PolyCrusader"
|
||||
"src": "./img/gauss.jpg",
|
||||
"title": {
|
||||
"fr": "Elimination de Gauss-Jordan",
|
||||
"en": "Gauss-Jordan Elimination"
|
||||
},
|
||||
"description": {
|
||||
"fr": "Utilisation C++ pour effectuer plusieurs opérations sur des matrices afin de trouver le noyau et l'image d'applications linéaires par la méthode du pivot de Gauss",
|
||||
"en": "Using C++ to perform various operations on matrices to find the kernel and image of linear applications using the Gaussian pivot method"
|
||||
},
|
||||
"voir": {
|
||||
"fr": "Voir Sur Gitea",
|
||||
"en": "View On Gitea"
|
||||
},
|
||||
"link": "https://git.ale-pri.com/ProjetMAM/Pivot"
|
||||
}
|
||||
]
|
||||
}
|
||||
32
src/i18n/index.js
Normal file
32
src/i18n/index.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
|
||||
import translationEN from './locales/en.json';
|
||||
import translationFR from './locales/fr.json';
|
||||
|
||||
const resources = {
|
||||
en: {
|
||||
translation: translationEN
|
||||
},
|
||||
fr: {
|
||||
translation: translationFR
|
||||
}
|
||||
};
|
||||
|
||||
i18n
|
||||
.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: 'fr',
|
||||
detection: {
|
||||
order: ['navigator', 'htmlTag', 'path', 'subdomain'],
|
||||
caches: ['localStorage']
|
||||
},
|
||||
interpolation: {
|
||||
escapeValue: false
|
||||
}
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
41
src/i18n/locales/en.json
Normal file
41
src/i18n/locales/en.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"navbar": {
|
||||
"home": "Home",
|
||||
"portfolio": "Portfolio",
|
||||
"about": "About Me",
|
||||
"contact": "Contact Me"
|
||||
},
|
||||
"hero": {
|
||||
"hello": "Hello, I'm ALESSI Thibaut",
|
||||
"student": "Student at Polytech Lyon",
|
||||
"passion": "SRE/OPS apprentice at WORLDLINE",
|
||||
"description": "I love Java, Docker, guitar, chess, sports, and traveling.",
|
||||
"goal": "My goal is to improve every day."
|
||||
},
|
||||
"skills": {
|
||||
"title": "My Competencies",
|
||||
"heading": "My Skills"
|
||||
},
|
||||
"about": {
|
||||
"title": "About",
|
||||
"heading": "About Me",
|
||||
"description1": "Third-year engineering student at Polytech Lyon in Computer Science, working as an SRE/OPS engineer at WORLDLINE through an apprenticeship program.",
|
||||
"description2": "Passionate about IT, I'm looking for an opportunity for a summer internship abroad to develop my skills and contribute to a company project, whether Cloud, Infrastructure, Development, OPS..."
|
||||
},
|
||||
"portfolio": {
|
||||
"title": "Recent Projects",
|
||||
"heading": "My Portfolio",
|
||||
"github": "Visit my GitHub"
|
||||
},
|
||||
"contact": {
|
||||
"title": "Get in Touch",
|
||||
"heading": "Contact Me",
|
||||
"description1": "If you want to contact me, you can send me an email at:",
|
||||
"description2": "Or directly through LinkedIn at the bottom of the page."
|
||||
},
|
||||
"footer": {
|
||||
"home": "Home",
|
||||
"portfolio": "Portfolio",
|
||||
"about": "About Me"
|
||||
}
|
||||
}
|
||||
41
src/i18n/locales/fr.json
Normal file
41
src/i18n/locales/fr.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"navbar": {
|
||||
"home": "Accueil",
|
||||
"portfolio": "Portfolio",
|
||||
"about": "À propos de moi",
|
||||
"contact": "Contactez Moi"
|
||||
},
|
||||
"hero": {
|
||||
"hello": "Hello, je suis ALESSI Thibaut",
|
||||
"student": "Etudiant à Polytech Lyon",
|
||||
"passion": "Alternant SRE/OPS chez WORLDLINE",
|
||||
"description": "J'aime Java, Docker, la guitare, les échecs, le sport et voyager.",
|
||||
"goal": "Mon objectif, m'améliorer chaque jour."
|
||||
},
|
||||
"skills": {
|
||||
"title": "Mes Compétences",
|
||||
"heading": "Mes Skills"
|
||||
},
|
||||
"about": {
|
||||
"title": "À propos",
|
||||
"heading": "À propos de moi",
|
||||
"description1": "Alternant en troisième année d'école d'ingénieur à Polytech Lyon en Informatique en alternance à WORLDLINE, occupant le poste d'ingénieur SRE/OPS.",
|
||||
"description2": "Passionné d'informatique, je suis à la recherche d'une opportunité pour un stage d'été à l'étranger pour développer mes compétences et contribuer à un projet d'entreprise qu'il soit orienté Cloud, Infrastructure, Développement, OPS..."
|
||||
},
|
||||
"portfolio": {
|
||||
"title": "Projets récents",
|
||||
"heading": "Mon Portfolio",
|
||||
"github": "Visiter mon GitHub"
|
||||
},
|
||||
"contact": {
|
||||
"title": "Rentrer en Contact",
|
||||
"heading": "Contactez Moi",
|
||||
"description1": "Si vous voulez me contacter, vous pouvez m'envoyer un mail à l'adresse email suivante :",
|
||||
"description2": "Ou bien directement par LinkedIn en bas de page."
|
||||
},
|
||||
"footer": {
|
||||
"home": "Accueil",
|
||||
"portfolio": "Portfolio",
|
||||
"about": "À propos de moi"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user