end

angular.json

@@ -13,7 +13,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "baseHref" : "/containers/remiarnal-portfolioo/",
             "outputPath": "dist/portfolioo",
             "index": "src/index.html",
             "browser": "src/main.ts",

models/item.model.ts

@@ -0,0 +1,7 @@
+export interface Item {
+	type: string;
+	imagePath: string;
+	description: string;
+	tags: string[];
+	markdownPath: string;
+}

src/app/about/about.component.css

@@ -0,0 +1,35 @@
+h2 {
+  margin: 1rem 0;
+}
+
+p {
+  margin-bottom: 10px;
+}
+
+div {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin-top: 10px;
+
+  a.action {
+    background-color: #593bee;
+    color: white;
+    padding: 6px;
+    border-radius: 5px;
+    text-decoration: none;
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+}
+
+#about {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  background: grey;
+  width: 100%;
+  padding: 10px;
+}

src/app/about/about.component.html

@@ -0,0 +1,23 @@
+<h2>A propos de moi</h2>
+
+<p>
+  Bonjour et bienvenue sur mon portfolio ! Je m'appelle Rémi Arnal et je suis actuellement en troisième année de BUT
+  informatique. Passionné par le développement web, j'ai choisi cette spécialisation pour exploiter la puissance du web
+  dans la création de solutions interactives et dynamiques. Actuellement, je réalise un stage à la DSI du département de
+  l'Aveyron, où je travaille sur l'évolution de leur intranet. Cette expérience m'a permis de découvrir de nombreuses
+  technologies et d'en apprendre plus sur les missions d'un département.
+</p>
+<p>
+  L'année prochaine, je poursuivrai mes études avec un master ILSEN (Ingénierie du Logiciel de la Société Numérique) à
+  Avignon pour approfondir mes connaissances en ingénierie logicielle et contribuer à la transformation numérique des
+  entreprises.
+</p>
+<p>
+  Je suis également très intéressé par les technologies de partage décentralisé telles que torrent, DHT, et
+  IPFS, ainsi que par l'archivage de médias. N'hésitez pas à explorer mes projets et à me contacter !
+</p>
+
+<div>
+  <a class="action" href="assets/cv.pdf" download="cv_remi_arnal.pdf">Télécharger le CV</a>
+  <a class="action" href="mailto:remi.arnal@etu.uca.fr">Envoyer un mail</a>
+</div>

src/app/about/about.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AboutComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/about/about.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  standalone: true,
+  imports: [],
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.css'
+})
+export class AboutComponent {
+
+}

src/app/app.component.css

@@ -1,7 +1,7 @@
 #main-wrapper {
   display: flex;
-  height: 87vh;
-  margin: 0 10px;
-  border-radius: 1rem;
-  border: 3px solid black;
+  flex-direction: column;
+  gap: 1rem;
+  width: 70%;
+  margin: 0 auto;
 }

src/app/app.component.html

@@ -1,5 +1,10 @@
 <app-navbar></app-navbar>
 
 <div id="main-wrapper">
+  <ng-container *ngIf="isHomeRoute()">
+    <app-about class="section"></app-about>
+    <app-projects class="section"></app-projects>
+    <app-internships class="section"></app-internships>
+  </ng-container>
   <router-outlet></router-outlet>
 </div>

src/app/app.component.ts

@@ -1,14 +1,26 @@
 import { Component } from '@angular/core';
 import { RouterOutlet, RouterLink } from '@angular/router';
 import { NavbarComponent } from './navbar/navbar.component';
+import { ProjectsComponent } from './projects/projects.component';
+import { InternshipsComponent } from './internships/internships.component';
+import { AboutComponent } from './about/about.component';
+import { Router } from '@angular/router';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet,RouterLink, NavbarComponent],
+  imports: [RouterOutlet, RouterLink, NavbarComponent, ProjectsComponent, InternshipsComponent, AboutComponent, NgIf],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'portfolioo';
+
+  constructor(private router: Router) { }
+
+  isHomeRoute() {
+    console.log("ROUTE", this.router.url)
+    return this.router.url.split('#')[0] == "/";
+  }
 }

src/app/app.config.ts

@@ -9,6 +9,5 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes, withComponentInputBinding()),
     provideHttpClient(),
-    // { provide: APP_BASE_HREF, useValue: '/containers/remiarnal-portfolioo'}
   ]
 };

src/app/internships/internships.component.css

@@ -0,0 +1,17 @@
+h2 {
+  margin-top: 1rem;
+}
+
+#internships {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  padding: 10px;
+  padding-left: 0;
+
+  app-project-card {
+    flex-basis: 23.5%;
+  }
+}

src/app/internships/internships.component.html

@@ -0,0 +1,5 @@
+<h2>Expérience</h2>
+
+<div id="internships">
+  <app-project-card *ngFor="let item of items" [item]="item"></app-project-card>
+</div>

src/app/internships/internships.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InternshipsComponent } from './internships.component';
+
+describe('InternshipsComponent', () => {
+  let component: InternshipsComponent;
+  let fixture: ComponentFixture<InternshipsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InternshipsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InternshipsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/internships/internships.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { ProjectCardComponent } from '../project-card/project-card.component';
+import { Item } from '../../../models/item.model'; 
+import { ItemsService } from '../items.service'; 
+import { NgFor } from '@angular/common';
+
+@Component({
+  selector: 'app-internships',
+  standalone: true,
+  imports: [ProjectCardComponent, NgFor],
+  templateUrl: './internships.component.html',
+  styleUrl: './internships.component.css'
+})
+export class InternshipsComponent {
+  items: Item[] = [];
+  
+  constructor(private itemService: ItemsService) {
+    this.itemService.getItems().subscribe(
+      (items) => {
+        this.items = items.filter((item: Item) => item.type === 'internship');
+      }
+    )
+  }
+}

src/app/items.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ItemsService } from './items.service';
+
+describe('ItemsService', () => {
+  let service: ItemsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ItemsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/items.service.ts

@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ItemsService {
+  jsonFilePath = "assets/items.json";
+
+  constructor(private http: HttpClient) { }
+
+  getItems() : Observable<any> {
+    return this.http.get(this.jsonFilePath);
+  }
+}

src/app/markdown/markdown.component.css

@@ -0,0 +1 @@
+

src/app/markdown/markdown.component.html

@@ -1 +1 @@
-<div [innerHtml]='md | markdown'></div>
+<div id="markdown" [innerHtml]='md | markdown'></div>

src/app/navbar/navbar.component.css

@@ -1,22 +1,29 @@
 nav {
-  width: 50%;
+  width: 70%;
   margin: 0 auto;
-  border-radius: 2rem;
-  border: 3px solid black;
-  margin: 1rem auto;
+  border-bottom: 3px solid black;
+  margin-bottom: 1rem;
 
   ul {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-around;
+    justify-content: start;
     list-style: none;
     gap: 1rem;
     padding: 1rem;
+    padding-left: 0;
 
     li {
+      :first-child {
+        padding-left: 0;
+      }
+
       a {
         padding: 20px 10px;
+        text-decoration: none;
+        color: black;
+        font-weight: bold;
       }
     }
   }

src/app/navbar/navbar.component.html

@@ -1,6 +1,7 @@
 <nav>
   <ul>
-    <li><a routerLink="/projects">Projects</a></li>
-    <li><a routerLink="/recipe/add" routerLinkActive="active" ariaCurrentWhenActive="page">Work</a></li>
+    <li><a href="#projects">Projets</a></li>
+    <li><a href="#internships">Expérience</a></li>
+    <li><a href="#about">A propos de moi</a></li>
   </ul>
 </nav>

src/app/project-card/project-card.component.css

@@ -0,0 +1,31 @@
+.project-card {
+  display: block;
+  padding: 10px;
+  border-radius: 1rem;
+  background-color: whitesmoke;
+  border: 2px solid black;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  img {
+    width: 100%;
+    border-radius: 6px;
+  }
+
+  .project-card-techno {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 4px;
+    margin-top: 10px;
+
+    span {
+      border-radius: 5px;
+      padding: 6px;
+      background-color: #8375f3;
+      color: white;
+    }
+  }
+}

src/app/project-card/project-card.component.html

@@ -0,0 +1,10 @@
+<div (click)="goToMarkdown(item.markdownPath)" class="project-card">
+  <img src="{{ item.imagePath }}" />
+  <p>{{ item.description }}</p>
+
+  <div class="project-card-techno">
+    <span *ngFor="let tag of item.tags">
+      {{ tag }}
+    </span>
+  </div>
+</div>

src/app/project-card/project-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectCardComponent } from './project-card.component';
+
+describe('ProjectCardComponent', () => {
+  let component: ProjectCardComponent;
+  let fixture: ComponentFixture<ProjectCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectCardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ProjectCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/project-card/project-card.component.ts

@@ -0,0 +1,21 @@
+import { NgFor } from '@angular/common';
+import { Component,Input } from '@angular/core';
+import { Item } from '../../../models/item.model';
+import { Router } from '@angular/router'; 
+
+@Component({
+  selector: 'app-project-card',
+  standalone: true,
+  imports: [NgFor],
+  templateUrl: './project-card.component.html',
+  styleUrl: './project-card.component.css'
+})
+export class ProjectCardComponent {
+  @Input() item!: Item;
+
+  constructor(private router: Router) {}
+
+  goToMarkdown(path: string) {
+    this.router.navigate(['/md', path]);
+  }
+}

src/app/projects/projects.component.css

@@ -0,0 +1,18 @@
+h2 {
+  margin-top: 1rem;
+}
+
+#projects {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  padding: 10px;
+  padding-left: 0;
+
+  app-project-card {
+    flex-basis: 23.5%;
+    min-width: 23%;
+  }
+}

src/app/projects/projects.component.html

@@ -0,0 +1,5 @@
+<h2>Projets</h2>
+
+<div id="projects">
+  <app-project-card *ngFor="let item of items" [item]="item"></app-project-card>
+</div>

src/app/projects/projects.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectsComponent } from './projects.component';
+
+describe('ProjectsComponent', () => {
+  let component: ProjectsComponent;
+  let fixture: ComponentFixture<ProjectsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ProjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/projects/projects.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { ProjectCardComponent } from '../project-card/project-card.component';
+import { ItemsService } from '../items.service';
+import { Item } from '../../../models/item.model'; 
+import { NgFor } from '@angular/common';
+
+@Component({
+  selector: 'app-projects',
+  standalone: true,
+  imports: [ProjectCardComponent, NgFor],
+  templateUrl: './projects.component.html',
+  styleUrl: './projects.component.css'
+})
+export class ProjectsComponent {
+  items: Item[] = [];
+  
+  constructor(private itemService: ItemsService) {
+    this.itemService.getItems().subscribe(
+      (items) => {
+        this.items = items.filter((item: Item) => item.type === 'project');
+      }
+    )
+  }
+}

src/app/services/markdown.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { marked } from 'marked';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 

src/assets/aveyron.md

@@ -0,0 +1,15 @@
+# DSI - Département de l'Aveyron
+
+J'effectue actuellement mon stage 3ème année d'une durée de 16 semaines à la
+Direction des systèmes d'Information du Département de l'Aveyron. Ma mission
+durant ce stage et de faire évoluer l'intranet du département utilisé quotidiennement
+par plus de 1500 agents.
+
+Cet intranet livré par un prestataire manque de fonctionnalités et contient un grand
+nombre de bugs et d'oublis. Pour rajouter les fonctionnalités il me faut relire le code
+sans documentation et m'adapter à l'architecture de l'application. Cela m'a beaucoup aider
+à comprendre le code d'autres personnes.
+
+Une de mes missions pendant ce stage a été de rajouter un module pour les offres d'emploi,
+ainsi les RH peuvent directement éditer les offres depuis un site web, ces offres sont récupérées
+par une Web API et affichées pour que les agents puissent postuler facilement.

src/assets/bluewhale.md

@@ -0,0 +1,11 @@
+# Blue Whale
+
+J'ai effectué mon stage de 2ème année dans l'entreprise [Blue Whale](https://www.blue-whale.com)
+ou j'ai travaillait sur l'ERP qui était en fin de service. Le nouvel ERP n'était pas encore fini,
+j'ai donc dû aider à la transition entre les ERP au niveau de la base donnée mais aussi du code
+de l'ancien ERP (Power Builder).
+
+Ce fut un stage très formateur, j'ai dès le début eu des responsabilités au niveau du recueil de besoin,
+résolution du bug et ajouts de nouvelles fonctionnalités. Ma mission la plus importante a été l'automatisation
+de processus métier lourd et peu productif, les assistantes commerciales remplissaient des fichiers excel manuellement.
+L'automatisation de ces processus est un gain de temps énorme.

src/assets/fukafukashita.md

@@ -0,0 +1,24 @@
+# Fukafukashita
+
+
+Fukafukashita est un projet réalisé en groupe de 4 pour apprendre à utiliser
+Symphony. Il se veut être un forum facile d'utilisation et moderne pour
+partager ses rêves et ses cauchemard et lire ceux des autres.
+
+[*lien vers le code source*](https://codefirst.iut.uca.fr/git/Assassymfony)
+
+## Fonctionalités
+
+- Poster vos rêves et vos cauchemard
+- Consulter les rêves sans connexion
+- Rechercher un post par son contenu
+- Abonnements
+- Design spécial **Cauchemard** !
+
+## Galerie
+
+<img src="assets/fukafukashita_1.jpg">
+<img src="assets/fukafukashita_2.png">
+<img src="assets/fukafukashita_3.png">
+<img src="assets/fukafukashita_4.png">
+

src/assets/items.json

@@ -0,0 +1,37 @@
+[
+	{
+		"type": "project",
+		"imagePath": "assets/fukafukashita.jpeg",
+		"description": "Un forum simple et moderne pour partager ses rêves et ses cauchemard !",
+		"markdownPath": "fukafukashita",
+		"tags": ["Symphony", "Twig"]
+	},
+	{
+		"type": "project",
+		"imagePath": "assets/passworld.jpeg",
+		"description": "Un manager de mots de passe pour vos appareils mobiles et desktop.",
+		"markdownPath": "passworld",
+		"tags": ["Flutter", "MariaDB"]
+	},
+	{
+		"type": "project",
+		"imagePath": "assets/plotabit.jpeg",
+		"description": "Entrainement d'une IA à la reconnaisance d'objets stellaires.",
+		"markdownPath": "plotabit",
+		"tags": ["Python", "Sklearn"]
+	},
+	{
+		"type": "internship",
+		"imagePath": "assets/bluewhale.jpeg",
+		"description": "Stage de 2ème année d'une durée de 10 semaines, missions sur l'ERP et automatisations.",
+		"markdownPath": "bluewhale",
+		"tags": ["PowerBuilder", "Fop"]
+	},
+	{
+		"type": "internship",
+		"imagePath": "assets/aveyron.jpeg",
+		"description": "Stage de 3ème année d'une durée de 16 semaines, missions sur l'intranet et autres projets.",
+		"markdownPath": "aveyron",
+		"tags": ["Symphony", "Javascript"]
+	}
+]

src/assets/passworld.md

@@ -0,0 +1,35 @@
+# Passworld
+
+Passworld est un gestionnaire de mots de passe cross-plateforme développé
+par un groupe de 5 personnes au cours de notre projet de 2ème année.
+
+Le principe même du gestionnaire de mots de passe et de stocker vos mots de passes
+à l'abri en toute sécurité. C'est ce que nous avons fait en utilisant AES-256 et
+les keystore de chaque plateformes pour être protégé au mieux sur chacune d'elles.
+
+La sauvegarde de vos informations est faite en arrière plan sur nos serveurs grâce
+à une base de donnée et un Web-API à chacune des modifications.
+
+[*lien vers le code source*](https://codefirst.iut.uca.fr/git/PassWorld)
+
+## Fonctionalités
+
+- Sauvegarde de mots de passe avec un mot de passe maître
+- Synchronisation et récupération des données
+- Authentification avec yubikey et empreinte digitale
+- Générateur de mots de passe
+- Analyse de la sécurité de vos mots de passe
+
+
+## Galerie
+<div class="gal-3">
+  <img src="assets/passworld_1.jpg">
+  <img src="assets/passworld_2.jpg">
+  <img src="assets/passworld_3.jpg">
+</div>
+
+<div class="gal-3">
+  <img src="assets/passworld_4.jpg">
+  <img src="assets/passworld_5.jpg">
+  <img src="assets/passworld_6.jpg">
+</div>

src/assets/plotabit.md

@@ -0,0 +1,35 @@
+# Plotabit
+
+Plotabit est un projet d'IA effectué par groupe de 2 durant notre 3ème année.
+Le but était d'apprendre la prédiction par IA en choisissant un jeu de donnée
+puis en utilisant différent modèle pour classifier avec la meilleure précision.
+
+Nous avons choisis un jeux de données contenant des observations de spectres lumineux
+et astres associés: **QUASAR**, **ETOILES** et **GALAXIE**.
+
+Pour analyser les données et optimiser l'entrainement de nos modèles nous avons utilisé
+des histogrammes, boîtes à moustaches, matrice de corrélation et scatter plot. Cela nous
+à permis de limiter le nombre de colonnes utilisées pour l'entrainement, le rendant plus court.
+
+Nous avons aussi lancé un grand nombre d'entrainement avec différent paramètres pour trouver la
+meilleure précision et mieux comprendre l'implication de ceux-ci dans les résulats.
+
+[*lien vers le code source*](https://codefirst.iut.uca.fr/git/PyPloteam/Plotabit)
+
+## Modèles
+
+- K Nearest Neighbors
+- Random Forest Classifier
+- Decision Tree Classifier
+- Linear SVC
+- SGD
+- Nearest Centroid
+- MLP Classifier (neural network)
+
+## Galerie
+
+<img src="assets/plotabit_1.jpg">
+<img src="assets/plotabit_2.jpg">
+<img src="assets/plotabit_3.jpg">
+<img src="assets/plotabit_4.jpg">
+<img src="assets/plotabit_5.jpg">

src/styles.css

@@ -6,4 +6,57 @@
 
 body {
   font-family: Helvetica, sans-serif, sans-serif;
+  font-size: 18px;
+  scroll-behavior: smooth;
+}
+
+#markdown {
+  h1 {
+    color: #593bee;
+    font-size: 3rem;
+  }
+
+  h1,
+  h2 {
+    margin-bottom: 10px;
+  }
+
+  h2 {
+    margin-top: 1.5rem;
+  }
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  ul,
+  li {
+    padding: 0;
+    padding-left: 1rem;
+  }
+
+  img {
+    max-width: 70%;
+    margin-bottom: 10px;
+    border-radius: 10px;
+  }
+
+  .gal-3 {
+    max-width: 70%;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    img {
+      border: 2px solid black;
+      max-width: 30%;
+    }
+  }
+
+  a {
+    color: #593bee;
+    text-decoration: none;
+    border-bottom: 3px solid #593bee;
+    line-height: 30px;
+  }
 }