<app-grid>
    <div class="wide-full">
        <br/>
        <h1>Welcome to my homepage!</h1>
    </div>
    <mat-card>
        <h2>Who am I?</h2>
        <p>
            I'm Lukas, a german student doing software development on the side.
        </p>
        <h2>
            What is this webpage?
        </h2>
        <p>
            This is a portfolio to show off my work.
        </p>
    </mat-card>
    <mat-card class="tall-2">
        <h2>OS development</h2>
        <img src="https://lukas-eisenhauer.de/git/lukas/tree-os/blob/master/tree-os.png?raw=true">
        <p>
            I started writing two operating systems from scratch.
        </p>
        <p>
            <a href="https://lukas-eisenhauer.de/git/lukas/tree-os">Tree OS</a> was the first iteration which is able even read files from an attached SATA disk. However, the design unintentionally turned into a huge monolithic kernel.
        </p>
        <p>
            <a href="https://lukas-eisenhauer.de/git/lukas/honey-os">Honey OS</a> is the new one where I actually went trough the effort to correctly implement paging. Therefore, multiasking is made possible and there are a number of different system
            calls implemented.
        </p>
        <p>
            Even though the project will probably never have any real use, learning about the x86 architecture was really beneficial.
        </p>
    </mat-card>
    <mat-card>
        <a href="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator">
            <h2>Traffic simulator</h2>
        </a>
        <img src="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator/blob/master/screenshot.PNG?raw=true">
        <p>
            For school, I have to write a scientific article about a topic related to "everyday physics". I am focusing on the design of urban junctions and need a simulation for cars traversing different designs. You can find the current code
            <a href="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator">here</a>.
        </p>
    </mat-card>
    <mat-card class="tall-2">
        <a href="https://lukas-eisenhauer.de/git/lukas/music">
            <h2>
                Music-app
            </h2>
        </a>
        <img src="assets/music.jpg">
        <p>
            I am also developing an android app to play music.
        </p>
        <p>
            Behind the android and kotlin frontend, some c++ code for the sound synthesis is running in the background.
        </p>
    </mat-card>
    <mat-card>
        <h2>Websites</h2>
        <p>
            I personally created this website you are currently looking at using
            <a href="https://angular.io">Angular</a> and the
            <a href="https://material.io/design">Material design theme</a>. Additionally, I also created
            <a href="https://www.mpe.mpg.de/~eisenhau/">Frank Eisenhauer's webpage</a> and host an instance of
            <a href="https://lukas-eisenhauer.de/git">gitBucket</a>.
        </p>
        <p>
            The backend was made using <a href="https://rubyonrails.org/">Ruby on rails</a> and is responsible for the quotes you can see at the bottom of the page.
        </p>
        <p>
            If you want to take a look at the old version made just with HTML and CSS, click <a href="https://lukas-eisenhauer.de/legacy">here</a>.
        </p>
    </mat-card>
    <mat-card>
        <a href="https://gitlab.bixilon.de/bixilon/minosoft">
            <h2>Minosoft</h2>
        </a>
        <img src="https://gitlab.bixilon.de/bixilon/minosoft/-/raw/bd1ba8f50c4e5cc95894aeb5194514319ee6fa6d/doc/img/rendering1.png?inline=false%27)">
        <p>
            For the open source Minecraft client <a href="https://gitlab.bixilon.de/bixilon/minosoft">
                Minosoft</a>, I developed the voxel-rendering engine and implemented major parts of the physics as well. Additionally, I started development on a new GUI rendering system which wasn't merged.
        </p>
    </mat-card>
    <mat-card *ngIf="quotes.length > 0">
        <h2>Quotes:</h2>
        <div class="flex-center" *ngIf="loadingQuotes; else quotesTemplate">
            <mat-spinner color="primary" mode="indeterminate"></mat-spinner>
        </div>
        <ng-template #quotesTemplate>
            <div *ngFor="let quote of quotes">
                <blockquote> {{quote.quote}} <br> <i>-{{quote.user}}</i> </blockquote>
            </div>
        </ng-template>
    </mat-card>
    <mat-card *ngIf="statuses.length > 0">
        <h2>User statuses:</h2>
        <div class="flex-center" *ngIf="loadingStatuses; else statusesTemplate">
            <mat-spinner color="primary" mode="indeterminate"></mat-spinner>
        </div>
        <ng-template #statusesTemplate>
            <div *ngFor="let userStatus of statuses">
                <h4 style="text-align: left;"> {{userStatus.user}} </h4>
                <p> {{userStatus.message}} <br>
                    <i> (created {{userStatus.postTime.toString(true)}} ago,
                    visible for {{userStatus.lifetime.toString()}})</i>
                </p>
            </div>
        </ng-template>
    </mat-card>
</app-grid>