<app-grid>
    <div class="wide-full">
        <br />
        <h1>Welcome to my homepage!</h1>
    </div>
    <mat-card class="wide-2 tall-2">
        <h2>OS development</h2>
        <img src="https://lukas-eisenhauer.de/git/lukas/honey-os/blob/master/honey-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
            to read files from an attached SATA disk. However, the design unintentionally turned into a huge
            monolithic kernel, making further expansion very difficult.
        </p>
        <p>
            <a href="https://lukas-eisenhauer.de/git/lukas/honey-os">Honey OS</a> is the new one where I actually
            went through the effort to correctly implement paging. Therefore, multiasking is made possible and there are
            a number of different system calls implemented. Furthermore, each process has its own memory space to avoid
            interference between processes.
        </p>
        <p>
            Even though the project will probably never see any real world use, learning about the x86 architecture is
            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 wrote a scientific article about a topic related to "everyday physics". I focused on the
            design of urban intersections.
            For this, I needed a simulation for cars traversing different designs. You can find the souce 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 developed an Android application to dynamically synthesize music. 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>
        <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>