karma/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: karma:5f772b1f78efe50ab96d4eb12d38c704dde35982
Branches Tags
karma:main
..
compare: karma:b47c9ad995352b5433a48a8935410216420c39d5
Branches Tags
karma:main

3 Commits
5f772b1f78 ... b47c9ad995

Author SHA1 Message Date
Karma Riuk
b47c9ad995 removed the unessecary pics and modifies two gifs 
to make them shorter
 2024-03-17 09:08:17 +01:00
Karma Riuk
a4ba8c0c86 cleaned up the animations 2024-03-17 09:07:47 +01:00
Karma Riuk
ee3d06d939 formatted the tailwind classes 2024-03-16 10:25:53 +01:00
15 changed files with 29 additions and 37 deletions
Show Stats Expand all files Collapse all files

BIN
assets/img/portfolio/flyingballs.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 MiB

BIN
assets/img/portfolio/papermosaik.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
assets/img/portfolio/portfolio-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 165 KiB

BIN
assets/img/portfolio/portfolio-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 189 KiB

BIN
assets/img/portfolio/portfolio-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 63 KiB

BIN
assets/img/portfolio/portfolio-4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
assets/img/portfolio/portfolio-5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
assets/img/portfolio/portfolio-6.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

BIN
assets/img/portfolio/portfolio-7.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 180 KiB

BIN
assets/img/portfolio/portfolio-8.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
assets/img/portfolio/portfolio-9.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 172 KiB

BIN
assets/img/portfolio/portfolio-details-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 109 KiB

BIN
assets/img/portfolio/portfolio-details-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 160 KiB

BIN
assets/img/portfolio/portfolio-details-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 160 KiB

64
index.html
View File

@ -44,8 +44,7 @@
<body class="dark"> <body class="dark">
<!-- ======= Header ======= --> <!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex justify-content-center <header id="header" class="fixed-top d-flex justify-content-center align-items-center header-transparent">
align-items-center header-transparent">
<nav id="navbar" class="navbar" data-aos="fade-down" data-aos-delay="2000"> <nav id="navbar" class="navbar" data-aos="fade-down" data-aos-delay="2000">
<ul> <ul>
@ -55,7 +54,7 @@
<li><a class="nav-link scrollto" href="#skills">Skills</a></li> <li><a class="nav-link scrollto" href="#skills">Skills</a></li>
<li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li> <li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li> <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<li><i class="dark-mode bi icon-white bi-sun-fill" onClick="toggleDarkMode(event)"></i> <li><i class="bi icon-white bi-sun-fill dark-mode" onClick="toggleDarkMode(event)"></i>
</li> </li>
</ul> </ul>
<i class="bi bi-list mobile-nav-toggle"></i> <i class="bi bi-list mobile-nav-toggle"></i>
@ -79,7 +78,7 @@
<section id="about" class="about"> <section id="about" class="about">
<div class="container"> <div class="container">
<div class="section-title" data-aos="fade-up"> <div class="section-title" data-aos="fade-in">
<span class="prevent-select">About Me</span> <span class="prevent-select">About Me</span>
<h2>About Me</h2> <h2>About Me</h2>
<p>I have a deep passion for computer science and enjoy <p>I have a deep passion for computer science and enjoy
@ -92,13 +91,11 @@
</div> </div>
<div class="row"> <div class="row">
<div class="image col-lg-4 d-flex align-items-stretch <div class="image col-lg-4 d-flex align-items-stretch justify-content-center justify-content-lg-start" data-aos="fade-up-right">
justify-content-center justify-content-lg-start" data-aos="fade-up-right">
</div> </div>
<div class="content col-lg-8 ps-lg-4 d-flex flex-column <div class="content col-lg-8 ps-lg-4 d-flex flex-column align-items-stretch justify-content-evenly" data-aos="fade-up-left">
align-items-stretch justify-content-evenly" data-aos="fade-up-left">
<div class="row"> <div class="row">
<div class="col-lg-6 mt-4 mt-lg-0"> <div class="mt-4 col-lg-6 mt-lg-0">
<ul> <ul>
<li><i class="bi bi-chevron-right"></i> <li><i class="bi bi-chevron-right"></i>
<strong>Name:</strong> <strong>Name:</strong>
@ -137,32 +134,28 @@
<div data-aos="fade-up"> <div data-aos="fade-up">
<div class="progress"> <div class="progress">
<span class="skill"><i class="flag <span class="skill"><i class="flag flag-france"></i>French <i class="val">Native</i></span>
flag-france"></i>French <i class="val">Native</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="7" aria-valuemin="0" <div class="progress-bar" role="progressbar" aria-valuenow="7" aria-valuemin="0"
aria-valuemax="7"></div> aria-valuemax="7"></div>
</div> </div>
</div> </div>
<div class="progress"> <div class="progress">
<span class="skill"><i class="flag <span class="skill"><i class="flag flag-uk"></i>English <i class="val">Native</i></span>
flag-uk"></i>English <i class="val">Native</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="7" aria-valuemin="0" <div class="progress-bar" role="progressbar" aria-valuenow="7" aria-valuemin="0"
aria-valuemax="7"></div> aria-valuemax="7"></div>
</div> </div>
</div> </div>
<div class="progress"> <div class="progress">
<span class="skill"><i class="flag <span class="skill"><i class="flag flag-italy"></i>Italian <i class="val">C2</i></span>
flag-italy"></i>Italian <i class="val">C2</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="6.5" aria-valuemin="0" <div class="progress-bar" role="progressbar" aria-valuenow="6.5" aria-valuemin="0"
aria-valuemax="7"></div> aria-valuemax="7"></div>
</div> </div>
</div> </div>
<div class="progress"> <div class="progress">
<span class="skill"><i class="flag <span class="skill"><i class="flag flag-germany"></i>German <i class="val">B1</i></span>
flag-germany"></i>German <i class="val">B1</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="3.5" aria-valuemin="0" <div class="progress-bar" role="progressbar" aria-valuenow="3.5" aria-valuemin="0"
aria-valuemax="7"></div> aria-valuemax="7"></div>
@ -182,7 +175,7 @@
<section id="resume" class="resume"> <section id="resume" class="resume">
<div class="container"> <div class="container">
<div class="section-title" data-aos="fade-up"> <div class="section-title" data-aos="fade-in">
<span class="prevent-select">My Resume</span> <span class="prevent-select">My Resume</span>
<h2>My Resume</h2> <h2>My Resume</h2>
<p>A brief overview of my professional experience and qualifications</p> <p>A brief overview of my professional experience and qualifications</p>
@ -192,7 +185,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div data-aos="fade-up-right"> <div data-aos="fade-up-right">
<h3 class="resume-title">Summary</h3> <h3 class="resume-title">Summary</h3>
<div class="resume-item pb-0"> <div class="pb-0 resume-item">
<h4>Arnaud Fauconnet</h4> <h4>Arnaud Fauconnet</h4>
<p><em>I'm a dedicated computer science enthusiast, fueled by a passion for programming <p><em>I'm a dedicated computer science enthusiast, fueled by a passion for programming
and and
@ -353,7 +346,7 @@
<section id="skills" class="skills"> <section id="skills" class="skills">
<div class="container"> <div class="container">
<div class="section-title" data-aos="fade-up"> <div class="section-title" data-aos="fade-in">
<span class="prevent-select">My Skills</span> <span class="prevent-select">My Skills</span>
<h2>My Skills</h2> <h2>My Skills</h2>
<p>A blend of technical expertise and personal passions</p> <p>A blend of technical expertise and personal passions</p>
@ -370,7 +363,7 @@
<div class="skills-container" data-aos="fade-up"> <div class="skills-container" data-aos="fade-up">
<div class="row"> <div class="row">
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby"> <div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
<div class="icon-box"> <div class="icon-box">
<div class="icon"><i class="fa fa-masks-theater"></i></div> <div class="icon"><i class="fa fa-masks-theater"></i></div>
<h4 class="title"><a>Theater</a></h4> <h4 class="title"><a>Theater</a></h4>
@ -383,7 +376,7 @@
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby"> <div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
<div class="icon-box"> <div class="icon-box">
<div class="icon"><i class="fa fa-basketball"></i></div> <div class="icon"><i class="fa fa-basketball"></i></div>
<h4 class="title"><a>Basketball</a></h4> <h4 class="title"><a>Basketball</a></h4>
@ -396,7 +389,7 @@
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby"> <div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
<div class="icon-box"> <div class="icon-box">
<div class="icon"><i class="fa fa-chess"></i></div> <div class="icon"><i class="fa fa-chess"></i></div>
<h4 class="title"><a>Chess</a></h4> <h4 class="title"><a>Chess</a></h4>
@ -408,7 +401,7 @@
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-web filter-prod filter-hobby"> <div class="mb-5 col-md-6 col-lg-3 skill-item filter-web filter-prod filter-hobby">
<div class="icon-box"> <div class="icon-box">
<div class="icon"><i class="bx bx-server"></i></div> <div class="icon"><i class="bx bx-server"></i></div>
<h4 class="title"><a>Server Management</a></h4> <h4 class="title"><a>Server Management</a></h4>
@ -425,7 +418,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod"> <div class="mb-5 col-md-6 col-lg-3 skill-item filter-prod">
<div class="icon-box"> <div class="icon-box">
<div class="icon"> <div class="icon">
<img src="assets/img/neovim.png" alt="neovim-logo" /> <img src="assets/img/neovim.png" alt="neovim-logo" />
@ -440,7 +433,7 @@
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod"> <div class="mb-5 col-md-6 col-lg-3 skill-item filter-prod">
<div class="icon-box"> <div class="icon-box">
<div class="icon"> <div class="icon">
<img src="assets/img/arch.png" alt="arch-linux-logo" /> <img src="assets/img/arch.png" alt="arch-linux-logo" />
@ -456,7 +449,7 @@
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod filter-web"> <div class="mb-5 col-md-6 col-lg-3 skill-item filter-prod filter-web">
<div class="icon-box"> <div class="icon-box">
<div class="icon"> <div class="icon">
<img src="assets/img/docker.png" alt="docker-logo" /> <img src="assets/img/docker.png" alt="docker-logo" />
@ -549,26 +542,25 @@
<section id="portfolio" class="portfolio"> <section id="portfolio" class="portfolio">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title" data-aos="fade-in">
<span class="prevent-select">My Portfolio</span> <span class="prevent-select">My Portfolio</span>
<h2>My Portfolio</h2> <h2>My Portfolio</h2>
<p>The building blocks of my career</p> <p>The building blocks of my career</p>
</div> </div>
<ul id="portfolio-flters" class="d-flex justify-content-center"> <ul id="portfolio-flters" class="d-flex justify-content-center" data-aos="fade-up">
<li data-filter="*" class="filter-active">All</li> <li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">App</li> <li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li> <li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li> <li data-filter=".filter-web">Web</li>
</ul> </ul>
<div class="row portfolio-container"> <div class="row portfolio-container" data-aos="fade-up">
<!-- TODO: move this section right after the about me section --> <!-- TODO: move this section right after the about me section -->
<div class="col-lg-4 col-md-6 portfolio-item filter-app"> <div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-img"><img src="assets/img/portfolio/flying-balls2.png" class="img-fluid" <div class="portfolio-img"><img src="assets/img/portfolio/flyingballs.gif" class="img-fluid" alt=""></div>
alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding
Polygons</a></h4> Polygons</a></h4>
@ -620,7 +612,8 @@
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card"> <div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-img"><img src="assets/img/portfolio/paper-mosaik.png" class="img-fluid" <div class="portfolio-img"><img
src="assets/img/portfolio/papermosaik.gif" class="img-fluid"
alt=""></div> alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4> <h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4>
@ -664,15 +657,14 @@
<section id="contact" class="contact"> <section id="contact" class="contact">
<div class="container"> <div class="container">
<div class="section-title" data-aos="fade-up"> <div class="section-title" data-aos="fade-in">
<span class="prevent-select">Contact Me</span> <span class="prevent-select">Contact Me</span>
<h2>Contact Me</h2> <h2>Contact Me</h2>
<p>Feel free to reach out for collaborations or to learn more about my work.</p> <p>Feel free to reach out for collaborations or to learn more about my work.</p>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6" data-aos="fade-up-right"> <div class="col-md-6" data-aos="fade-up-right">
<div class="email info-box h-100 d-flex flex-column <div class="email info-box h-100 d-flex flex-column justify-content-around">
justify-content-around">
<i><i class="bx bx-envelope"></i></i> <i><i class="bx bx-envelope"></i></i>
<h3>Email Me</h3> <h3>Email Me</h3>
<a href="mailto:arnaud.fauconnet.pro@gmail.com">arnaud.fauconnet.pro@gmail.com</a> <a href="mailto:arnaud.fauconnet.pro@gmail.com">arnaud.fauconnet.pro@gmail.com</a>