69 lines
2.5 KiB
HTML
69 lines
2.5 KiB
HTML
<section id="hero" [ngClass]="{'mobile': deviceService.isMobile()}">
|
|
<div class="artwork">
|
|
<div class="circle big-circle"></div>
|
|
<div class="circle small-circle"></div>
|
|
<div class="circle image"></div>
|
|
</div>
|
|
<h1>
|
|
<span>Hallo, ich bin Leon Hoppe,</span><br>
|
|
full stack developer
|
|
</h1>
|
|
<p>
|
|
Auf dieser Seite erfahren Sie, an welchen Projekten ich bereits gearbeitet habe,<br>
|
|
was meine Programmierkenntnisse sind und welche Pläne ich für die Zukunft habe.
|
|
</p>
|
|
<a href="#projects">Mehr erfahren</a>
|
|
</section>
|
|
|
|
<section id="projects" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
|
|
<h1 class="title">Projekte</h1>
|
|
<a routerLink="/projects">alle ansehen</a>
|
|
<div id="project-wrapper">
|
|
<div class="project" *ngFor="let project of projects | featuredProjects">
|
|
<img src="{{project.cover}}" alt="{{project.name}}">
|
|
<h2>{{project.name}}</h2>
|
|
<span>{{project.description}}</span>
|
|
<div class="project-buttons">
|
|
<a class="project-button" *ngFor="let button of project.buttons" href="{{button.link}}">{{button.text}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="technologies" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
|
|
<h1 class="title">Technologien</h1>
|
|
<a href="/technologies">mehr erfahren</a>
|
|
<div id="technology-wrapper">
|
|
<div class="technology" *ngFor="let technology of technologies">
|
|
<div class="tech-header">
|
|
<h2 class="tech-name">{{technology.name}}</h2>
|
|
<span class="tech-level">{{getTechnologyLevelName(technology.level)}}</span>
|
|
</div>
|
|
<div [class]="createTechProgressClasses(technology.level)"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
|
|
<h1 class="title">Über mich</h1>
|
|
<a href="/about">mehr erfahren</a>
|
|
<div id="timeline">
|
|
<div class="timestamp" *ngFor="let timestamp of timeline">
|
|
<h2>{{timestamp.date}}</h2>
|
|
<span>{{timestamp.description}}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="footer" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
|
|
<span class="footer-title">Portfolio von Leon Hoppe</span>
|
|
<a href="mailto://leon@ladenbau-hoppe.de">leon@ladenbau-hoppe.de</a>
|
|
<span>+49 1575 8839776</span>
|
|
|
|
<div id="social-media">
|
|
<a class="header-social" target="_blank" *ngFor="let social of socialLinks" href="{{social.href}}">
|
|
<img src="{{social.image}}" alt="{{social.href}}" draggable="false">
|
|
</a>
|
|
</div>
|
|
</section>
|