parent
9f61b4b920
commit
cb6ab0ca11
@ -0,0 +1,111 @@
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: "Syncopate", sans-serif;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
margin-top: 5vh;
|
||||
padding: 10vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
header{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
#title{
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#text{
|
||||
width: 70vw;
|
||||
align-self: flex-start;
|
||||
margin-top: 5vh;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
#intro{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
#divlogo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
#technos{
|
||||
display: flex;
|
||||
flex-direction : column;
|
||||
align-items: center;
|
||||
width: 15vw;
|
||||
height:32vw;
|
||||
margin-top: 5vh;
|
||||
padding-top: 1vh;
|
||||
padding-bottom: 5vh;
|
||||
background-color: grey;
|
||||
border-radius: 60px;
|
||||
border-color: darkgrey;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
#technostitle{
|
||||
margin-right: 2vw;
|
||||
margin-left: 2vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
.imgtechnos{
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
#logo{
|
||||
margin-top: 6vh;
|
||||
align-self: flex-end;
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-left-radius: 50px;
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
.img{
|
||||
height:40vh;
|
||||
border-radius: 100px;
|
||||
margin-top: 14vh;
|
||||
}
|
||||
|
||||
#antenneimg{
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.divproj{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 10vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paraproj{
|
||||
width: 50vw;
|
||||
margin-top: 10vw;
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
#antennepara{
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
#campara{
|
||||
margin-left: 2vw;
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: "Syncopate", sans-serif;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
margin-top: 5vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
header{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#competences {
|
||||
border-radius: 50px;
|
||||
border-width: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50vh;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.competence {
|
||||
background-color: grey;
|
||||
width: 19vw;
|
||||
height: 24vh;
|
||||
margin-right: 4vw;
|
||||
margin-left: 4vw;
|
||||
margin-top: 4vh;
|
||||
margin-bottom: 4vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 150px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.competence:hover {
|
||||
background-color: grey;
|
||||
width: 30vw;
|
||||
height: 20vh;
|
||||
margin: 2vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.competence:hover .paracomp {
|
||||
display: block;
|
||||
}
|
||||
.competence:hover .comptitle {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.paracomp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comptitle {
|
||||
margin: 20px;
|
||||
height: 80%;
|
||||
width: auto;
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: "Syncopate", sans-serif;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
margin-top: 5vh;
|
||||
padding: 10vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
header{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#text{
|
||||
width: 70vw;
|
||||
align-self: flex-start;
|
||||
margin-top: 5vh;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
#intro{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
#logoetlien{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
#technos{
|
||||
display: flex;
|
||||
flex-direction : column;
|
||||
align-items: center;
|
||||
width: 15vw;
|
||||
margin-top: 5vh;
|
||||
padding-top: 1vh;
|
||||
padding-bottom: 5vh;
|
||||
background-color: grey;
|
||||
border-radius: 60px;
|
||||
border-color: darkgrey;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
#technostitle{
|
||||
margin-right: 2vw;
|
||||
margin-left: 2vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
.imgtechnos{
|
||||
height: 200%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#liengit{
|
||||
width: 40vw;
|
||||
height: 10vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: orangered;
|
||||
color: black;
|
||||
font-size: 200%;
|
||||
text-decoration: none;
|
||||
border-radius: 60px;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
#logo{
|
||||
height:50%;
|
||||
width: auto;
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Etudes</title>
|
||||
<link rel="stylesheet" href="../css/menu.css">
|
||||
<link rel="stylesheet" href="../css/style_adsbcam.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav id="menu">
|
||||
<a href="main" class="liens_dans_le_menu">Page principale</a>
|
||||
<div class="dropdown">
|
||||
<p1 class="liens_dans_le_menu">Projets<p1/>
|
||||
<div class="dropdown-content">
|
||||
<a href="Adsbcam" class="liens_dans_le_menu">ADS-B Cam</a>
|
||||
<a href="Sae201" class="liens_dans_le_menu">SAE 2.01</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="Competences" class="liens_dans_le_menu">Compétences</a>
|
||||
<a href="main#id_1_2" class="liens_dans_le_menu">Passions</a>
|
||||
<a href="Perso" class="liens_dans_le_menu">Vie privée</a>
|
||||
<a href="Etudes" class="liens_dans_le_menu">Vie étudiante</a>
|
||||
</nav>
|
||||
<div id="reseaux_fixe">
|
||||
<a href="http://instagram.com" class="liens_réseaux_sociaux_dans_menu"><img src="../images/insta.png" class="logos_réseaux_sociaux_dans_menu" ></a>
|
||||
<a href="http://x.com" class="liens_réseaux_sociaux_dans_menu"><img src="../images/x.png" class="logos_réseaux_sociaux_dans_menu"></a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1 id="title">ADS-B Cam : Caméra de suivi d'avions</h1>
|
||||
<p1 id="text">J'ai réalisé ce projet avec l'aide d'un ami. Le but était de réaliser un setup qui permettrai de faire suivre un avion par une caméra motorisée</p1>
|
||||
<div id="intro">
|
||||
<div id="divlogo">
|
||||
<img src="../images/adsb.HEIC" id="logo"/>
|
||||
</div>
|
||||
<div id="technos">
|
||||
<h2 id="technostitle">Technos<br>utilisées</h2>
|
||||
<img src="../images/go.png" class="imgtechnos"/>
|
||||
<img src="../images/hikvision.png" class="imgtechnos"/>
|
||||
<img src="../images/nanopi.png" class="imgtechnos"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fct" class="divproj">
|
||||
<p1 id="fctpara" class="paraproj">Pour la plupart, es avions envoient en continu un signal de transpondeur sous la forme d'ADS-B (Automatic Dependant Surveillance Broadcast) qui communique nottament leurs coordonnées et leur altitude.</p1>
|
||||
<img src="../images/schema.png" id="fctimg" class="img"/>
|
||||
</div>
|
||||
|
||||
<div id="antenne" class="divproj">
|
||||
<img src="../images/antenne.HEIC" id="antenneimg" class="img"/>
|
||||
<p1 id="antennepara" class="paraproj">Ces messages sont emis sur la fréquence 1090MHz, pour les capter nous avons donc construit une antenne à base de cable coaxial de telle sorte qu'elle n'écoute que cette fréquence.</p1>
|
||||
</div>
|
||||
|
||||
<div id="boitier" class="divproj">
|
||||
<p1 id="boitierpara" class="paraproj">L'antenne est ensuite reliée à un ordinateur via un dongle qui traite ces données pour que nous puissions les exploiter. En guise d'ordinateur, nous utilisons ici un nanopi r2s qui execute en continu un algorithme en GoLang dont le but est d'effectuer des calculs mathématiques qui permettront d'orienter la caméra correctement, ainsi que de lui envoyer ces infos</p1>
|
||||
<img src="../images/r2s.jpg" id="boitierimg" class="img"/>
|
||||
</div>
|
||||
|
||||
<div id="camera" class="divproj">
|
||||
<img src="../images/ptz.jpg" id="camimg" class="img"/>
|
||||
<p1 id="campara" class="paraproj">Enfin nous avons la caméra IP. Motorisée, elle est controlable manuellement via un navigateur Web, mais également via des requêtes API, nous utilisaons cela pour l'orienter depuis le programme.</p1>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Etudes</title>
|
||||
<link rel="stylesheet" href="../css/menu.css">
|
||||
<link rel="stylesheet" href="../css/style_competences.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav id="menu">
|
||||
<a href="main" class="liens_dans_le_menu">Page principale</a>
|
||||
<div class="dropdown">
|
||||
<p1 class="liens_dans_le_menu">Projets<p1/>
|
||||
<div class="dropdown-content">
|
||||
<a href="Adsbcam" class="liens_dans_le_menu">ADS-B Cam</a>
|
||||
<a href="Sae201" class="liens_dans_le_menu">SAE 2.01</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="Competences" class="liens_dans_le_menu">Compétences</a>
|
||||
<a href="main#id_1_2" class="liens_dans_le_menu">Passions</a>
|
||||
<a href="Perso" class="liens_dans_le_menu">Vie privée</a>
|
||||
<a href="Etudes" class="liens_dans_le_menu">Vie étudiante</a>
|
||||
</nav>
|
||||
<div id="reseaux_fixe">
|
||||
<a href="http://instagram.com" class="liens_réseaux_sociaux_dans_menu"><img src="../images/insta.png" class="logos_réseaux_sociaux_dans_menu" ></a>
|
||||
<a href="http://x.com" class="liens_réseaux_sociaux_dans_menu"><img src="../images/x.png" class="logos_réseaux_sociaux_dans_menu"></a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1>Compétences</h1>
|
||||
<div id="competences">
|
||||
<div class="competence">
|
||||
<img src="../images/cpp.png" class="comptitle"/>
|
||||
<p1 class="paracomp">Le C++ est le premier langage objet que j'ai découvert, je l'apprécie particulièrement et en aie une bonne maîtrise </p1>
|
||||
</div>
|
||||
<div class="competence">
|
||||
<img src="../images/csharp.png" class="comptitle"/>
|
||||
<p1 class="paracomp">J'ai appris le C# dans le cadre de mon projet de SAE 2.01 mais il me manque encore des notions à son sujet</p1></div>
|
||||
<div class="competence">
|
||||
<img src="../images/go.png" class="comptitle"/>
|
||||
<p1 class="paracomp">J'apprends toujours le GoLang à titre personnel pour des projets comme l'ADS-B Cam, mes compétences dessus sont encore limitées</p1>
|
||||
</div>
|
||||
<div class="competence">
|
||||
<img src="../images/psql.png" class="comptitle"/>
|
||||
<p1 class="paracomp">J'ai découvert le SQL<br>avec PostgreSQL cette année et ai déjà réalisé deux projets l'utilisant, je maîtrise assez bien ce langage</p1>
|
||||
</div>
|
||||
<div class="competence">
|
||||
<img src="../images/html5.png" class="comptitle"/>
|
||||
<p1 class="paracomp">J'ai appris le HTML il y a quelques annnées et j'ai<br>pu développer mes compétences récemment nottament grâce à ce portfolio</p1>
|
||||
</div>
|
||||
<div class="competence">
|
||||
<img src="../images/css3.png" class="comptitle"/>
|
||||
<p1 class="paracomp">J'ai appris le CSS il y a quelques annnées et j'a<br>pu développer mes compétences récemment nottament grâce à ce portfolio</p1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,8 @@
|
||||
<nav id="menu">
|
||||
<a href="main" class="liens_dans_le_menu">Page principale</a>
|
||||
<a href="Projets" class="liens_dans_le_menu">Automobile</a>
|
||||
<a href="Compétences Techniques" class="liens_dans_le_menu">Ski</a>
|
||||
<a href="Compétences Personnelles" class="liens_dans_le_menu">Aviation</a>
|
||||
<a href="Perso" class="liens_dans_le_menu">Vie privée</a>
|
||||
<a href="Etudes" class="liens_dans_le_menu">Vie étudiante</a>
|
||||
</nav>
|
||||
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Etudes</title>
|
||||
<link rel="stylesheet" href="../css/menu.css">
|
||||
<link rel="stylesheet" href="../css/style_sae201.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav id="menu">
|
||||
<a href="main" class="liens_dans_le_menu">Page principale</a>
|
||||
<div class="dropdown">
|
||||
<p1 class="liens_dans_le_menu">Projets<p1/>
|
||||
<div class="dropdown-content">
|
||||
<a href="Adsbcam" class="liens_dans_le_menu">ADS-B Cam</a>
|
||||
<a href="Sae201" class="liens_dans_le_menu">SAE 2.01</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="Competences" class="liens_dans_le_menu">Compétences</a>
|
||||
<a href="main#id_1_2" class="liens_dans_le_menu">Passions</a>
|
||||
<a href="Perso" class="liens_dans_le_menu">Vie privée</a>
|
||||
<a href="Etudes" class="liens_dans_le_menu">Vie étudiante</a>
|
||||
</nav>
|
||||
<div id="reseaux_fixe">
|
||||
<a href="http://instagram.com" class="liens_réseaux_sociaux_dans_menu"><img src="../images/insta.png" class="logos_réseaux_sociaux_dans_menu" ></a>
|
||||
<a href="http://x.com" class="liens_réseaux_sociaux_dans_menu"><img src="../images/x.png" class="logos_réseaux_sociaux_dans_menu"></a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1>SAE 2.01 : Programmation d'un jeu avec interface utilisateur</h1>
|
||||
<p1 id="text"><strong>Contexte :</strong><br><br>C'est le projet le plus long que j'ai réalisé jusque là, par équipe de 3 nous devions programmer un jeu appelé Onitama qui est un jeu de plateau japonais s'inspirant des échecs. Une interface graphique pour les utilisateurs était attendue également c'est un projet exploitant les compétences de développement d'applications simple et d'apréhension et construction d'algorithmes<br><br>Au sein de ce projet mes tâches principales étaient la conception et la programmation d'une partie ainsi que la création des pages de sélection des anciennes parties à continuer et l'historique des parties</p1>
|
||||
<div id="intro">
|
||||
<div id="logoetlien">
|
||||
<img src="../images/onitama.webp" id="logo"/>
|
||||
<a href="https://codefirst.iut.uca.fr/git/2025_SAE_1A/SAE_1A_G8_BARBARA_TIXIER_JACQUES_ONITAMA" id="liengit">Accéder au dépôt Git</a>
|
||||
</div>
|
||||
<div id="technos">
|
||||
<h2 id="technostitle">Technos<br>utilisées</h2>
|
||||
<img src="../images/dotnet.png" class="imgtechnos"/>
|
||||
<img src="../images/xaml.webp" class="imgtechnos"/>
|
||||
<img src="../images/csharp.png" class="imgtechnos"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,9 @@
|
||||
<nav id="menu">
|
||||
<a href="main" class="liens_dans_le_menu">Page principale</a>
|
||||
<a href="Automobile" class="liens_dans_le_menu">Automobile</a>
|
||||
<a href="Ski" class="liens_dans_le_menu">Ski</a>
|
||||
<a href="Avion" class="liens_dans_le_menu">Aviation</a>
|
||||
<a href="Formulaire" class="liens_dans_le_menu">Formulaire</a>
|
||||
<a href="Perso" class="liens_dans_le_menu">Vie privée</a>
|
||||
<a href="Etudes" class="liens_dans_le_menu">Vie étudiante</a>
|
||||
</nav>
|
||||
Loading…
Reference in new issue