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

added a bunch of projects with their respective images

Browse Source
This commit is contained in:
Karma Riuk 2024-03-15 14:45:59 +01:00
parent d777587b29
commit 0f1535f0ec
9 changed files with 78 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
assets/css/style.css
View File

@ -1009,31 +1009,44 @@ section {
z-index: 3; z-index: 3;
right: 15px; right: 15px;
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, .7);
padding: 10px 15px; padding: 10px 15px;
} }
.portfolio .portfolio-item .portfolio-info h4 { .portfolio .portfolio-item .portfolio-info h4 {
font-size: 18px; font-size: 18px;
color: var(--background); color: var(--text-color-alt);
font-weight: 600; font-weight: 600;
color: var(--background);
margin-bottom: 0px; margin-bottom: 0px;
} }
.portfolio .portfolio-item .portfolio-info p { .portfolio .portfolio-item .portfolio-info p {
color: rgba(255, 255, 255, 0.8); color: var(--text-color-alt);
font-size: 14px; font-size: 14px;
margin-bottom: 0; margin-bottom: 0;
} }
.portfolio .portfolio-item .portfolio-info div{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.portfolio .portfolio-item .portfolio-info div a{
display: flex;
align-items: center;
}
.portfolio .portfolio-item .portfolio-info div p .br{
display: block;
margin-bottom: .5em;
}
.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link { .portfolio .portfolio-item .portfolio-info .details-link {
position: absolute;
right: 40px;
font-size: 24px; font-size: 24px;
top: calc(50% - 18px); color: var(--text-color-alt);
color: var(--background);
transition: 0.3s; transition: 0.3s;
} }
@ -1042,10 +1055,6 @@ section {
color: #ffc041; color: #ffc041;
} }
.portfolio .portfolio-item .portfolio-info .details-link {
right: 10px;
}
.portfolio .portfolio-item:hover .portfolio-img img { .portfolio .portfolio-item:hover .portfolio-img img {
transform: scale(1.2); transform: scale(1.2);
} }

BIN
assets/img/portfolio/aoc.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
assets/img/portfolio/esim.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
assets/img/portfolio/flying-balls.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
assets/img/portfolio/flying-balls2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
assets/img/portfolio/maze-solver.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

BIN
assets/img/portfolio/maze-solver.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
assets/img/portfolio/paper-mosaik.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB

144
index.html
View File

@ -543,7 +543,7 @@
<div class="section-title"> <div class="section-title">
<span class="prevent-select">My Portfolio</span> <span class="prevent-select">My Portfolio</span>
<h2>My Portfolio</h2> <h2>My Portfolio</h2>
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</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">
@ -555,121 +555,87 @@
<div class="row portfolio-container"> <div class="row portfolio-container">
<!-- 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/portfolio-1.jpg" class="img-fluid" <div class="portfolio-img"><img src="assets/img/portfolio/flying-balls2.png" class="img-fluid" alt=""></div>
alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4>App 1</h4> <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding Polygons</a></h4>
<p>App</p> <div>
<a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery" <p>
class="portfolio-lightbox preview-link" title="App 1"><i class="bx bx-plus"></i></a> An extension of a physics engine to simulate polygons,
<a href="portfolio-details.html" class="details-link" title="More Details"><i focusing on collision detection and effects in
class="bx bx-link"></i></a> real-time, ensuring smooth
animations.<span class="br"></span>
Language: C++
</p>
<a href="https://github.com/karma-riuk/flying-balls" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web"> <div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" <div class="portfolio-img"><img src="assets/img/portfolio/esim.jpg" class="img-fluid"
alt=""></div> alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4>Web 3</h4> <h4><a href="https://github.com/karma-riuk/flying-balls">HDR ESIM</a></h4>
<p>Web</p> <div>
<a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" <p>
class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a> Extended a the simulation of an event camera in order to generate HDR
<a href="portfolio-details.html" class="details-link" title="More Details"><i frames.<span class="br" ></span>
class="bx bx-link"></i></a> Language: C++
</p>
<a href="https://github.com/karma-riuk/hdr_esim" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div> </div>
</div> </div>
<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/portfolio-3.jpg" class="img-fluid" <div class="portfolio-img"><img src="assets/img/portfolio/aoc.jpeg" class="img-fluid"
alt=""></div> alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4>App 2</h4> <h4><a href="https://github.com/karma-riuk/advent-of-code">Advent of Code</a></h4>
<p>App</p> <div>
<a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" <p>
class="portfolio-lightbox preview-link" title="App 2"><i class="bx bx-plus"></i></a> Fun coding challenges during christmas.<span
<a href="portfolio-details.html" class="details-link" title="More Details"><i class="br" ></span>
class="bx bx-link"></i></a> Languages: C++, Go, Python
</p>
<a href="https://github.com/karma-riuk/advent-of-code" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div> </div>
</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/portfolio-4.jpg" class="img-fluid" <div class="portfolio-img"><img src="assets/img/portfolio/paper-mosaik.png" class="img-fluid" alt=""></div>
alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4>Card 2</h4> <h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4>
<p>Card</p> <!-- TODO: makea good readme fo this project -->
<a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" <div>
class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a> <p>
<a href="portfolio-details.html" class="details-link" title="More Details"><i A visualization tool to represent reasearchers in terms of their papers
class="bx bx-link"></i></a> and their relationships to other
researchers.<span class="br" ></span>
Language: Smalltalk (Pharo)
</p>
<a href="https://github.com/karma-riuk/PaperMosaik" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-info">
<h4>Web 2</h4>
<p>Web</p>
<a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery"
class="portfolio-lightbox preview-link" title="Web 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="details-link" title="More Details"><i
class="bx bx-link"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-info">
<h4>App 3</h4>
<p>App</p>
<a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery"
class="portfolio-lightbox preview-link" title="App 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="details-link" title="More Details"><i
class="bx bx-link"></i></a>
</div>
</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/portfolio-7.jpg" class="img-fluid" <div class="portfolio-img"><img src="assets/img/portfolio/maze-solver.gif" class="img-fluid" alt=""></div>
alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4>Card 1</h4> <h4><a href="https://github.com/karma-riuk/maze-sovler-go">Maze Solver</a></h4>
<p>Card</p> <div>
<a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" <p>
class="portfolio-lightbox preview-link" title="Card 1"><i class="bx bx-plus"></i></a> A simple maze solver that takes in various types of maze as input and
<a href="portfolio-details.html" class="details-link" title="More Details"><i outputs the solution.<span class="br" ></span>
class="bx bx-link"></i></a> Language: Go
</p>
<a href="https://github.com/karma-riuk/maze-sovler-go" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-info">
<h4>Card 3</h4>
<p>Card</p>
<a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery"
class="portfolio-lightbox preview-link" title="Card 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="details-link" title="More Details"><i
class="bx bx-link"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery"
class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="details-link" title="More Details"><i
class="bx bx-link"></i></a>
</div>
</div> </div>
</div> </div>