Skip to content

Commit

Permalink
Updates files
Browse files Browse the repository at this point in the history
  • Loading branch information
@mpcgt
mpcgt committed Jun 16, 2024
1 parent 2caabd8 commit 8b05d93
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 44 deletions.
1 change: 1 addition & 0 deletions src/assets/components/NewNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default function Navbar() {
<CustomLink to="/products"><i className="fa-solid fa-book"></i>&nbsp;Produits</CustomLink>
<CustomLink to="/articles"><i className="fa-solid fa-newspaper"></i>&nbsp;Articles</CustomLink>
<CustomLink to="/about"><i className="fa-solid fa-circle-info"></i>&nbsp;À propos</CustomLink>
<CustomLink to="https://github.com/mpcgt/levetica" target="_blank"><i className="fa-brands fa-github"></i>&nbsp;GitHub</CustomLink>
</ul>
</nav>
)
Expand Down
183 changes: 139 additions & 44 deletions src/assets/routes/pages/tools.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,147 @@
import '../pages/pages.css'
import { useNavigate } from 'react-router-dom';
import "../pages/pages.css";
import { useNavigate } from "react-router-dom";

import opensource_png from '../others/languages/images/opensource.png'
import react_png from '../others/languages/images/react.png'
import angular_png from '../others/languages/images/angular.png'
import vue_png from '../others/languages/images/vue.png'
import html_png from '../others/languages/images/html.png'
import css_png from '../others/languages/images/css.png'
import js_png from '../others/languages/images/js.png'
import ts_png from '../others/languages/images/ts.png'
import tuto_png from '../others/languages/images/tuto.png'
import opensource_png from "../others/languages/images/opensource.png";
import react_png from "../others/languages/images/react.png";
import angular_png from "../others/languages/images/angular.png";
import vue_png from "../others/languages/images/vue.png";
import html_png from "../others/languages/images/html.png";
import css_png from "../others/languages/images/css.png";
import js_png from "../others/languages/images/js.png";
import ts_png from "../others/languages/images/ts.png";
import tuto_png from "../others/languages/images/tuto.png";

function Tools() {
const navigate = useNavigate();
return (
<>
<div>
<br />
<br />
<br />
<br />
<div className='center'>
<div className='ahsing'><h1>Guide d'outils pour les développeurs</h1></div>
</div>
<br />
<div className='margin'>
<h5 className='text-center'>Les outils adaptés par langages de programmation sont des ressources essentielles pour les développeurs, leur permettant de travailler de manière efficace dans un environnement de développement spécifique à chaque langage en offrant des fonctionnalités telles que la syntaxe de coloration, la complétion automatique de code, la vérification de la syntaxe et le débogage. Ces outils permettent aux développeurs de gagner du temps, de réduire les erreurs et d'améliorer leur productivité en fournissant un environnement de développement spécialement adapté aux particularités et aux exigences de chaque langage de programmation.</h5>
</div>
<br />
<div className='center'>
<button type="button" className="btn btn-outline-secondary" onClick={() => navigate("/apps")}><img alt="Open-Source" height="25" width="25" src={opensource_png} />Applications</button>&nbsp;&nbsp;
<button className="btn elevated rounded" onClick={() => navigate("/react")}><img alt="React" height="25" width="30" src={react_png} />React</button>&nbsp;&nbsp;
<button className="btn elevated rounded" onClick={() => navigate("/angular")}><img alt="Angular" height="25" width="25" src={angular_png} />Angular</button>&nbsp;&nbsp;
<button className="btn elevated rounded" onClick={() => navigate("/vue")}><img alt="Vue" height="25" width="30" src={vue_png} />Vue</button>&nbsp;&nbsp;
<button className="btn elevated rounded" onClick={() => navigate("/html")}><img alt="HTML" height="25" width="30" src={html_png} />HTML</button>&nbsp;&nbsp;
<button className="btn elevated rounded" onClick={() => navigate("/css")}><img alt="CSS" height="25" width="20" src={css_png} />CSS</button>&nbsp;&nbsp;
<button className="btn elevated rounded" onClick={() => navigate("/js")}><img alt="JavaScript" height="25" width="29" src={js_png} />JavaScript</button>&nbsp;&nbsp;
<button className="btn elevated rounded" onClick={() => navigate("/ts")}><img alt="TypeScript" height="25" width="30" src={ts_png} />TypeScript</button>&nbsp;&nbsp;
<button className="btn elevated rounded" onClick={() => navigate("/reactn")}><img alt="React" height="25" width="30" src={react_png} />React Native</button>&nbsp;&nbsp;
<br />
<br />
<button className="btn elevated rounded" onClick={() => navigate("/tuto")}><img alt="Tutoriels" height="25" width="30" src={tuto_png} />Apprendre</button>&nbsp;&nbsp;

<h4><i>Les noms des applications sont des liens cliquables qui vous redirigent vers le site officiel de l'application.</i></h4>
</div>
</div>
</>
)
<div>
<br />
<br />
<br />
<br />
<div className="center">
<div className="ahsing">
<h1>Guide d'outils pour les développeurs</h1>
</div>
</div>
<br />
<div className="margin">
<h5 className="text-center">
Les outils adaptés par langages de programmation sont des ressources
essentielles pour les développeurs, leur permettant de travailler de
manière efficace dans un environnement de développement spécifique à
chaque langage en offrant des fonctionnalités telles que la syntaxe
de coloration, la complétion automatique de code, la vérification de
la syntaxe et le débogage. Ces outils permettent aux développeurs de
gagner du temps, de réduire les erreurs et d'améliorer leur
productivité en fournissant un environnement de développement
spécialement adapté aux particularités et aux exigences de chaque
langage de programmation.
</h5>
</div>
<br />
<div className="center">
<button
type="button"
className="btn btn-outline-secondary"
onClick={() => navigate("/apps")}
>
<img
alt="Open-Source"
height="25"
width="25"
src={opensource_png}
/>
&nbsp;&nbsp;Applications
</button>
&nbsp;&nbsp;
<button
className="btn elevated rounded"
onClick={() => navigate("/react")}
>
<img alt="React" height="25" width="30" src={react_png} />
&nbsp;&nbsp;React
</button>
&nbsp;&nbsp;
<button
className="btn elevated rounded"
onClick={() => navigate("/angular")}
>
<img alt="Angular" height="25" width="25" src={angular_png} />
&nbsp;&nbsp;Angular
</button>
&nbsp;&nbsp;
<button
className="btn elevated rounded"
onClick={() => navigate("/vue")}
>
<img alt="Vue" height="25" width="30" src={vue_png} />
&nbsp;&nbsp;Vue
</button>
&nbsp;&nbsp;
<button
className="btn elevated rounded"
onClick={() => navigate("/html")}
>
<img alt="HTML" height="25" width="30" src={html_png} />
&nbsp;&nbsp;HTML
</button>
&nbsp;&nbsp;
<button
className="btn elevated rounded"
onClick={() => navigate("/css")}
>
<img alt="CSS" height="25" width="20" src={css_png} />
&nbsp;&nbsp;CSS
</button>
&nbsp;&nbsp;
<button
className="btn elevated rounded"
onClick={() => navigate("/js")}
>
<img alt="JavaScript" height="25" width="29" src={js_png} />
&nbsp;&nbsp;JavaScript
</button>
&nbsp;&nbsp;
<button
className="btn elevated rounded"
onClick={() => navigate("/ts")}
>
<img alt="TypeScript" height="25" width="30" src={ts_png} />
&nbsp;&nbsp;TypeScript
</button>
&nbsp;&nbsp;
<button
className="btn elevated rounded"
onClick={() => navigate("/reactn")}
>
<img alt="React" height="25" width="30" src={react_png} />
&nbsp;&nbsp;React Native
</button>
&nbsp;&nbsp;
<br />
<br />
<button
className="btn elevated rounded"
onClick={() => navigate("/tuto")}
>
<img alt="Tutoriels" height="25" width="30" src={tuto_png} />
&nbsp;&nbsp;Apprendre
</button>
&nbsp;&nbsp;
<br />
<br />
<h4>
<i>
Les noms des applications sont des liens cliquables qui vous
redirigent vers le site officiel de l'application.
</i>
</h4>
</div>
</div>
</>
);
}

export default Tools;
export default Tools;

0 comments on commit 8b05d93

Please sign in to comment.