wieerwill/wieerwill.github.io
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

move angular to own folder

Browse Source
This commit is contained in:
WieErWill
2021-07-04 16:43:07 +02:00
parent b95dfc2b3c
commit 156406e815
353 changed files with 0 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
angular/src/app/app-routing.module.ts Normal file
View File

@@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

35
angular/src/app/app.component.css Normal file
View File

@@ -0,0 +1,35 @@
mat-sidenav {
padding: 20px;
min-width: 30vw;
max-width: 70vw;
}
mat-sidenav ul {
list-style-type: none;
}
mat-sidenav li {
margin: 20px;
}
mat-sidenav-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#sidenavbutton {
writing-mode: vertical-lr;
text-orientation: upright;
float: left;
position: fixed;
z-index: 2;
}
@media (max-width: 500px) {
#sidenavbutton {
writing-mode: unset;
}
}

30
angular/src/app/app.component.html Normal file
View File

@@ -0,0 +1,30 @@
<mat-sidenav-container>
<mat-sidenav class="text-center" mode="over" #sidenav closed>
<h1 class="display-4"> Welcome to my Card</h1>
<p>my name is Robert and here you can find all sort of things i do</p>
<hr/>
<p>Click on the buttons to get to each section <br> or just scroll trough this page</p>
<ul>
<li><a href="#overview"><button mat-raised-button color="primary">Overview</button></a></li>
<li><a href="#projects"><button mat-raised-button color="primary">Projects</button></a></li>
<li><a href="#skills"><button mat-raised-button color="primary">Skills and Tools</button></a></li>
<li><a href="#certificates"><button mat-raised-button color="primary">Certificates</button></a></li>
</ul>
<hr/>
<p>In case you want to learn more about me just write me an email<br> or follow me and my works</p>
</mat-sidenav>
<mat-sidenav-content>
<button mat-raised-button color="primary" id="sidenavbutton" class="p-3" (click)=sidenav.toggle()>Navigation</button>
<main class="container">
<app-start id="overview"></app-start>
<app-projects id="projects"></app-projects>
<app-skills id="skills"></app-skills>
<app-certificates id="certificates"></app-certificates>
</main>
</mat-sidenav-content>
</mat-sidenav-container>

10
angular/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'source';
}

43
angular/src/app/app.module.ts Normal file
View File

@@ -0,0 +1,43 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatCardModule } from "@angular/material/card";
import { MatGridListModule } from "@angular/material/grid-list";
import { StartComponent } from './components/start/start.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { CertificatesComponent } from './components/certificates/certificates.component';
import { SkillsComponent } from './components/skills/skills.component';
@NgModule({
declarations: [
AppComponent,
StartComponent,
ProjectsComponent,
CertificatesComponent,
SkillsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatSidenavModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
MatCardModule,
MatGridListModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

93
angular/src/app/components/certificates/certificates.component.css Normal file
View File

@@ -0,0 +1,93 @@
.cert-img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity: 0;
color: white;
font-size: 15px;
padding: 15px;
text-align: center;
}
.cert-container:hover .overlay {
opacity: 1;
}
/* The Close Button */
.close {
position: fixed;
z-index: 2;
top: 0;
right: 20px;
color: #d3d3d3;
font-size: 80px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#myModal {
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-width: 700px;
max-height: 100%;
max-height: 1000px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}

26
angular/src/app/components/certificates/certificates.component.html Normal file
View File

@@ -0,0 +1,26 @@
<mat-card class="content-container bg-primary text-white" style="border-radius:20px;">
<mat-card-title>
<h1 class="my-3 display-1 text-center">
<span style="color:#ffffff">C</span><span style="color:#bebdff">ertifications</span>
</h1>
</mat-card-title>
<mat-card-subtitle>
<p class="mb-5 lead text-center">"What is a piece of paper else a note in time?"</p>
</mat-card-subtitle>
<mat-card-content>
<mat-grid-list cols="5" rowHeight="1:1">
<mat-grid-tile class="cert-container {{certificate.category}}" *ngFor="let certificate of certificates" (click)="showModal(certificate.category+'/'+ certificate.title +'.jpg')">
<img src="../../../assets/Zertifikate/{{certificate.category}}/{{certificate.title}}.jpg" class="cert-img">
<p class="overlay">{{certificate.title}}</p>
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
</mat-card>
<div id="myModal" *ngIf='show'>
<span class="close" (click)="hideModal()">&times;</span>
<img class="modal-content" src='../../../assets/Zertifikate/{{show}}'>
</div>

29
angular/src/app/components/certificates/certificates.component.ts Normal file
View File

@@ -0,0 +1,29 @@
import { Component, OnInit } from '@angular/core';
import { CERTIFICATES } from "./certificates";
@Component({
selector: 'app-certificates',
templateUrl: './certificates.component.html',
styleUrls: ['./certificates.component.css']
})
export class CertificatesComponent implements OnInit {
certificates: any = CERTIFICATES;
show: any = false;
constructor() { }
ngOnInit(): void {
}
showModal(chosen: String){
console.log("show "+ chosen )
this.show = chosen
}
hideModal(){
this.show = false;
}
}

65
angular/src/app/components/certificates/certificates.ts Normal file
View File

@@ -0,0 +1,65 @@
interface certificate {
title: string,
category: string
}
export const CERTIFICATES = [
{ title: "Full Stack WebDev", category: "adv" },
{ title: "Responsive WebDesign", category: "adv" },
{ title: "HTML5 Champion", category: "adv" },
{ title: "Advanced SQL Analytics", category: "adv" },
{ title: "DSGVO Certified", category: "adv" },
{ title: "MySQl for Data Analysis", category: "adv" },
{ title: "Angriffsvektoren und Schutzmaßnahmen im Internet", category: "adv" },
{ title: "Technologie Internet", category: "adv" },
{ title: "Basic HTML", category: "web" },
{ title: "Homepage Design", category: "web" },
{ title: "CakePHP", category: "web" },
{ title: "Dynamic Web Forms with validation", category: "web" },
{ title: "GitHub Grundlagen", category: "web" },
{ title: "HTML5", category: "web" },
{ title: "HTML Bootcamp", category: "web" },
{ title: "Web Development Crash Course", category: "web" },
{ title: "HTML5 and CSS3", category: "web" },
{ title: "InfiniteScroll AJAX", category: "web" },
{ title: "Landing Page Hacks", category: "web" },
{ title: "HTML5 and CSS3 by Coding", category: "web" },
{ title: "Learn HTML5", category: "web" },
{ title: "Make Ecommerce Website Front-End", category: "web" },
{ title: "PHP&MySQL", category: "web" },
{ title: "PSD Frontend", category: "web" },
{ title: "Telegram Bot with Python", category: "web" },
{ title: "XHTML-01", category: "web" },
{ title: "XHTML-02", category: "web" },
{ title: "XHTML-03", category: "web" },
{ title: "XHTML-04", category: "web" },
{ title: "XHTML-05", category: "web" },
{ title: "XHTML-06", category: "web" },
{ title: "XHTML-07", category: "web" },
{ title: "Yii PHP Framework", category: "web" },
{ title: "Sicher per E-Mail kommunizieren", category: "other" },
{ title: "Amazon FBA", category: "other" },
{ title: "eBay Dropshipping", category: "other" },
{ title: "Exel 2010 Productivity", category: "other" },
{ title: "Godot Game Engine", category: "other" },
{ title: "Google Sheets", category: "other" },
{ title: "Google Docs", category: "other" },
{ title: "Grundlagen Vermögensverwaltung", category: "other" },
{ title: "Landschaftsfotografie", category: "other" },
{ title: "Microsoft Exel Pivot", category: "other" },
{ title: "Startup & Business", category: "other" },
{ title: "Visual Studio Code Hacks", category: "other" },
{ title: "Robocup 2014", category: "robotic" },
{ title: "Robocup 2015", category: "robotic" },
{ title: "Robocup 2016", category: "robotic" },
{ title: "Robotik", category: "robotic" },
{ title: "Mechatronik Seminar", category: "robotic" },
{ title: "146. Jugend Presse Kongress", category: "newspaper" },
{ title: "150. Jugend Presse Kongress", category: "newspaper" },
{ title: "Multimedia Workshop", category: "newspaper" },
];

10
angular/src/app/components/projects/projects.component.css Normal file
View File

@@ -0,0 +1,10 @@
.project-folder {
background-color: #8cf5f5;
color: #1e3332;
border: 1px solid grey;
}
.project-head {
padding: 15px;
background-color: #548f8f;
}

30
angular/src/app/components/projects/projects.component.html Normal file
View File

@@ -0,0 +1,30 @@
<mat-card class="content-container bg-primary text-white" style="border-radius:20px;">
<mat-card-title>
<h1 class="my-3 display-1 text-center">
<span style="color:#ffffff">P</span><span style="color:#bebdff">rojects</span>
<span class="text-muted">&nbsp;&&nbsp;</span>
<span style="color:#ffffff">W</span><span style="color:#bebdff">orks</span>
</h1>
</mat-card-title>
<mat-card-subtitle>
<p class="mb-5 lead text-center">"Do what you love and work is a hobby"</p>
</mat-card-subtitle>
<mat-card-content class="list-group">
<div class="list-group-item list-group-item-action my-3" *ngFor="let project of projects">
<div class="d-flex w-100 justify-content-between">
<h3 class="mb-1">{{project.title}}</h3>
<small>
<a href={{project.link}} *ngIf="project.link">
<button mat-mini-fab color="primary">
<mat-icon>link</mat-icon>
</button>
</a>
</small>
</div>
<p class="mx-5">{{project.description}}</p>
</div>
</mat-card-content>
</mat-card>

18
angular/src/app/components/projects/projects.component.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Component, OnInit } from '@angular/core';
import { PROJECTS } from "./projects";
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.css']
})
export class ProjectsComponent implements OnInit {
projects:any = PROJECTS;
constructor() { }
ngOnInit(): void {
}
}

68
angular/src/app/components/projects/projects.ts Normal file
View File

@@ -0,0 +1,68 @@
interface project {
title: string,
description: string,
link: string
}
export const PROJECTS = [
{
title: "RoboCup participants",
description: "With a team up to four we build and programmed multiple robots to play football against each other or 2v2.With much fun and learning we worked together for several years and remain our friendships.",
link: "https://robocupgermanopen.de/de/junior/soccer"
},
{
title: "UNIKAT",
description: "My first club at University of Ilmenau: UNIKAT, the makerspace for students and scholars.Here i worked for nearly three years on 3d - printers, CNC - milling - machines and much more.Each semester we also made a workshop week and gave our knowledge to further students.I retired at the end of 2019 but am still visiting and sometimes working there.",
link: "https://www.tu-ilmenau.de/unikat"
},
{
title: "Robocup Volunteer",
description: "After school my university didn't have a robotics contest so i am currently volunteering as referee and helping hand for the organizers.",
link: "https://robocupgermanopen.de/de"
},
{
title: "Engineers without borders ",
description: "Who are we? Engineering students! What are we doing ? Helping other people! As some of us are planning and working on projects down in africa i am responsible for the repair cafe to keep things running.",
link: "https://ingenieure-ohne-grenzen.org/de/ilmenau"
},
{
title: "Python Intro",
description: "I am programming for many years now and want to start making cheatsheets and introductions to several programming languages.Python wasn't my first language but i think is for most the easiest to begin with. Therefor i started this Project on Github.",
link: "https://github.com/wieerwill/Python-Intro"
},
{
title: "BI Student Club",
description: "Mainly because of the music i joined this club on my campus.With good old(and new) metal and rock we got some of the hardest partys and best members you can imageine. After some time i am one of our head technicans. Currently i am responsible for our cultural programm and association communication.",
link: "http://www.bi-club.de"
},
{
title: "Project management",
description: "Working with a team you get to know that nobody has that much of a overview what tools you can use to work and participate.This bilingual sheet is a short overview of tools and programms to make your cooperations and projects easier.",
link: "https://github.com/wieerwill/Project-Management"
},
{
title: "Business card",
description: "You want to be seen and show people what you do? This page is an example of my business card project.Feel free to use it for your own.A description on how to get free webspace included.",
link: "https://github.com/wieerwill/wieerwill.github.io"
},
{
title: "NodeJS Boilerplate",
description: "Start your NodeJS Project today with my simple but structured boilerplate.Don't get anything confused with this organized project map and documentation.",
link: "https://github.com/wieerwill/nodejs-boilerplate"
},
{
title: "Discord Bot",
description: "With corona virus pandemia we shipped our weekly club meeting to discord.For management, fun and more interactivity we created a discord bot with several functions.",
link: null
},
{
title: "Wandern bringt Wasser",
description: "In collaboration with Engineers without Borders, this website is a fundraiser to encourage regional companies to support the 'Water for Nyamache' project.",
link: ""
},
{
title: "Ilmenauer Studentenclub e.V.",
description: "After being active in one of the sections for several years, I was elected to the board of the association. In this position, I manage, organise and plan four student clubs and a student café with three other board members in close cooperation with the individual sections. This work is more exciting than before in other associations, especially because of the Corona situation.",
link: "http://il-sc.de"
},
];

9
angular/src/app/components/skills/skills.component.css Normal file
View File

@@ -0,0 +1,9 @@
.card-image,
.mat-card-image {
height: auto;
width: 50px;
}
.mat-card-avatar {
border-radius: 0 !important;
}

35
angular/src/app/components/skills/skills.component.html Normal file
View File

@@ -0,0 +1,35 @@
<mat-card class="content-container bg-primary text-white" style="border-radius:20px;">
<mat-card-title>
<h1 class="my-3 display-1 text-center">
<span style="color:#ffffff">S</span><span style="color:#bebdff">kills</span>
<span class="text-muted">&</span>
<span style="color:#ffffff">T</span><span style="color:#bebdff">ools</span>
</h1>
</mat-card-title>
<mat-card-subtitle>
<p class="mb-5 lead text-center">With the right kind of tools, everything is possible</p>
</mat-card-subtitle>
<mat-card-content>
<div class="row justify-content-around">
<mat-card class="col-4 col-sm-2 m-2" *ngFor="let skill of skills">
<mat-card-header>
<div mat-card-avatar>
<img mat-card-image class="m-auto" src="../../../assets/icons/{{skill.logo}}" alt="{{skill.name}}">
</div>
<mat-card-title>{{skill.name}}</mat-card-title>
<mat-card-subtitle>{{skill.kategory}}</mat-card-subtitle>
</mat-card-header>
<!--<mat-card-content>
<p>{{skill.description}}</p>
</mat-card-content>-->
<mat-card-actions>
<a href="{{skill.link}}"><button mat-raised-button>visit Website</button></a>
</mat-card-actions>
</mat-card>
</div>
</mat-card-content>
</mat-card>

17
angular/src/app/components/skills/skills.component.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Component, OnInit } from '@angular/core';
import { SKILLS } from "./skills";
@Component({
selector: 'app-skills',
templateUrl: './skills.component.html',
styleUrls: ['./skills.component.css']
})
export class SkillsComponent implements OnInit {
skills = SKILLS;
constructor() { }
ngOnInit(): void {
}
}

220
angular/src/app/components/skills/skills.ts Normal file
View File

@@ -0,0 +1,220 @@
interface skill {
name: string,
kategory: string,
logo: string,
link: string,
description: string
};
export const SKILLS = [
{
name: "Inkscape",
kategory: "Design",
logo: "incscape.jpg",
link: "https://inkscape.org",
description: "The Vector graphics program Inkscape is an open source drawing program with which logos, banners, posters and much more can be designed. The program is compatible with the SVG format, but can also import EPS, Postscript, JPG, PNG, BMP or TIF images and export them to PNG or other vector-based formats. Even direct editing of XML codes in the XML editor is possible."
},
{
name: "GIMP",
kategory: "Design",
logo: "gimp.jpg",
link: "https://www.gimp.org",
description: "GIMP (GNU Image Manipulation Program) is a pixel-based graphics program that includes functions for image processing and digital painting of raster graphics. GIMP supports more than thirty file formats."
},
{
name: "Adobe Photoshop",
kategory: "Design",
logo: "photoshop.jpg",
link: "https://www.adobe.com/de/products/photoshop.html",
description: "Adobe Photoshop is an image processing program for pixel graphics from the US software house Adobe Inc. In the field of image processing and pre-press, the program is the world market leader and dominates the market."
},
{
name: "Blender",
kategory: "Design",
logo: "blender.png",
link: "https://www.blender.org",
description: "Blender is one of the best among the open source programs, because it leaves hardly any wishes unfulfilled. Designing and modeling 3D objects and animations is no problem, so Blender can be used for videos, pictures or games. Blender's features include object and figure sculpting, modeling with N-gon and script support, rigging for figure movement, animation with sound synchronization and automatically or individually defined movements. Complex particle simulations, a complete game engine and a video editing and effects tool complete this."
},
{
name: "OpenSCAD",
kategory: "Design",
logo: "openscad.jpg",
link: "http://openscad.org",
description: "In the free CAD software, 3D models are created with a text-based description language. The objects consist of simple geometric basic bodies and are combined with transformations and modifications to a complex 3D model. The modelling is based on CSG technology. Animations can also be realized with OpenSCAD."
},
{
name: "Anime.js",
kategory: "Design",
logo: "animejs.gif",
link: "https://animejs.com",
description: "Anime.js is a lightweight JavaScript animation library with a simple but powerful API. With the help of CSS properties, SVG, DOM attributes and Javascript objects, complex web pages, animations and moving graphics can be created quickly."
},
{
name: "HTML",
kategory: "Websites",
logo: "html.png",
link: "https://de.wikipedia.org/wiki/Hypertext_Markup_Language",
description: "The Hypertext Markup Language, abbreviated HTML, is a text-based markup language for structuring electronic documents such as texts with hyperlinks, images and other content. HTML documents are the basis of the World Wide Web and are displayed by web browsers."
},
{
name: "CSS",
kategory: "Websites",
logo: "css.png",
link: "https://de.wikipedia.org/wiki/Cascading_Style_Sheets",
description: "Cascading Style Sheets, or CSS for short, is a stylesheet language for electronic documents and, together with HTML and DOM, one of the core languages of the World Wide Web."
},
{
name: "JavaScript",
kategory: "Websites",
logo: "javascript.png",
link: "https://de.wikipedia.org/wiki/JavaScript",
description: "JavaScript is a scripting language originally developed in 1995 by Netscape for dynamic HTML in web browsers to evaluate user interactions, modify, reload or generate content and thus extend the possibilities of HTML and CSS. Today, JavaScript is also used outside browsers, for example on servers and in microcontrollers."
},
{
name: "Markdown",
kategory: "Websites",
logo: "markdown.png",
link: "https://markdown.de",
description: "Markdown is a simple syntax for generating HTML code from text documents, similar to the formatting of plain text email. One goal of Markdown is that the original form is already easily readable without further conversion."
},
{
name: "Bootstrap",
kategory: "Frontend technologies",
logo: "bootstrap.jpg",
link: "https://getbootstrap.com",
description: "Bootstrap, a comprehensive yet lightweight mobile first frond end framework for easier and faster development on the web."
},
{
name: "Materialize",
kategory: "Frontend technologies",
logo: "materialize.jpg",
link: "https://materializecss.com",
description: "A modern responsive front-end framework based on material design"
},
{
name: "Semantic UI",
kategory: "Frontend technologies",
logo: "semantic.png",
link: "https://semantic-ui.com",
description: "Semantic is a development framework that helps to create beautiful and appealing layouts with human friendly HTML. Concise HTML classes use syntax from natural languages such as noun/modifier relationships, word order and plurality to intuitively connect concepts."
},
{
name: "React",
kategory: "Frontend technologies",
logo: "react.png",
link: "https://reactjs.org",
description: "React is a JavaScript software library that provides a basic framework for the output of user interface components of web pages."
},
{
name: "Angular",
kategory: "Frontend technologies",
logo: "angular.png",
link: "https://angular.io",
description: "Angular is a TypeScript-based front-end web application framework. Achieve the maximum speed possible on the Web platform today and take it to the next level with the help of Web workers and server-side rendering."
},
{
name: "SQL",
kategory: "Backend technologies",
logo: "sql.png",
link: "https://de.wikipedia.org/wiki/SQL",
description: "SQL is a database language for the definition of data structures in relational databases as well as for processing and querying data sets based on them. MySQL and NoSQL are two of the most common relational database management systems in the world."
},
{
name: "MongoDB",
kategory: "Backend technologies",
logo: "mongodb.png",
link: "https://www.mongodb.com",
description: "MongoDB is a document-oriented NoSQL database written in the programming language C++. Because the database is document-oriented, it can manage collections of JSON-like documents."
},
{
name: "PHP",
kategory: "Backend technologies",
logo: "php.png",
link: "https://php.net",
description: "PHP is a scripting language with a syntax similar to C and Perl, which is mainly used to create dynamic websites or web applications. PHP is distributed as free software under the PHP license. NorthScorp uses both PHP version 5 and version 7 and, in addition to self-developed frameworks, Laravel."
},
{
name: "NodeJs",
kategory: "Backend technologies",
logo: "nodejs.jpg",
link: "https://nodejs.org",
description: "Node.js is a server-side platform in software development for operating network applications. In particular, web servers can be realized with it."
},
{
name: "Django",
kategory: "Backend technologies",
logo: "django.png",
link: "https://www.djangoproject.com",
description: "Django is a high-level Python web framework that promotes rapid development and clean, pragmatic design. Developed by experienced programmers, it takes care of much of the hassle of web development, so we can focus on writing your app without having to reinvent the wheel. It is free and open source."
},
{
name: "GatsbyJS",
kategory: "Backend technologies",
logo: "gatsby.png",
link: "https://www.gatsbyjs.org",
description: "GatsbyJS was born in May 2015 as an easy way to create a website with React. Over the past three years, tens of thousands of developers have used Gatsby to create websites from blogs and portfolio pages to corporate homepages and e-commerce applications."
},
{
name: "Magento",
kategory: "shop systems",
logo: "magento.jpg",
link: "https://magento.com",
description: "Magento is an online shop software and was released in 2008 as an open source e-commerce platform. Magento is used on 1.3% of all websites and is therefore the most widely used pure online shop software."
},
{
name: "OpenCart",
kategory: "shop systems",
logo: "opencart.jpg",
link: "https://www.opencart.com",
description: "The OpenCart marketplace offers over 13000 modules and themes to start, grow and expand your shop. Here you will find nice topics for almost every industry, service integrations, payment providers, shipping methods, social media, marketing, accounting, reporting, sales and language packs."
},
{
name: "PayPal",
kategory: "shop systems",
logo: "paypal.png",
link: "https://paypal.com",
description: "PayPal is a listed operator of an online payment service that can be used for the payment of medium and small amounts, for example when buying and selling in online commerce."
},
{
name: "Woo Commerce",
kategory: "shop systems",
logo: "woo.png",
link: "https://woocommerce.com/",
description: "WooCommerce is a free plug-in for WordPress, which adds the functionality of an online shop to the content management system. It has been downloaded more than 15 million times."
},
{
name: "C",
kategory: "programming",
logo: "code_c.png",
link: "https://de.wikipedia.org/wiki/C_(Programmiersprache)",
description: "C is an imperative and procedural programming language developed by computer scientist Dennis Ritchie at Bell Laboratories in the early 1970s. Since then it has become one of the most widely used programming languages."
},
{
name: "C++",
kategory: "programming",
logo: "c++.jpg",
link: "https://de.wikipedia.org/wiki/C%2B%2B",
description: "C++ enables both efficient and machine-oriented programming and programming at a high level of abstraction. The standard also defines a standard library for which various implementations exist."
},
{
name: "C#",
kategory: "programming",
logo: "code_csharp.jpg",
link: "https://de.wikipedia.org/wiki/C-Sharp",
description: "C# is a type-safe, object-oriented general-purpose programming language. The language is platform-independent in itself, but was developed within the framework of the .NET strategy, is optimized for it and is usually found in its context."
},
{
name: "Java",
kategory: "programming",
logo: "java.jpg",
link: "https://de.wikipedia.org/wiki/Java_(Programmiersprache)",
description: "Within the Java technology, the programming language Java is mainly used to formulate programs. The Java compiler, which is part of the development tool, translates the source code of the program into the machine-understandable Java byte code for later execution."
},
{
name: "Phyton",
kategory: "programming",
logo: "phyton.jpg",
link: "https://www.python.org",
description: "Python is a dynamic, object-oriented programming language for scripts and rapid application development. Python offers extensive support for the integration of other languages as well as tools and contains numerous standard libraries."
}
];

38
angular/src/app/components/start/start.component.css Normal file
View File

@@ -0,0 +1,38 @@
.skill {
height: 45px;
}
.show_first {
display: block;
}
.show_hover {
display: none;
}
.card-image {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 80%;
max-width: 80%;
border-radius: 20%;
border-style: solid;
}
.card-image:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
h1 {
font-size: 35px;
text-transform: uppercase;
color: #b3b3b3;
font-weight: 600;
}
a {
color: #09ff00;
text-decoration: none;
}

99
angular/src/app/components/start/start.component.html Normal file
View File

@@ -0,0 +1,99 @@
<mat-card class="content-container bg-primary text-white" style="border-radius:20px;">
<mat-card-title>
<h1 class="my-3 display-1 text-center">
<span style="color:#ffffff">R</span><span style="color:#020077">obert</span>&nbsp;
<span style="color:#ffffff">J</span><span style="color:#020077">eutter</span>
</h1>
</mat-card-title>
<mat-card-subtitle>
<p class="mb-5 lead text-center">Inventor &#183; Entrepreneur &#183; Student</p>
</mat-card-subtitle>
<mat-card-content>
<div class="row">
<div class="col-md-3">
<img src="../../../assets/pic.png" class="card-image" alt="ProfilBild">
</div>
<div class="col-md-5">
<p class="card-text mx-3">
Welcome to my Card,<br> currently I am studying at <i><a href="http://www.tu-ilmenau.de">Technical University of Ilmenau</a></i> in the fields of Computer Sience and Biomechatronics.<br> In addition i am an active member of the
<a href="https://www.bi-club.de">student club</a>, <a href="https://ingenieure-ohne-grenzen.org/">Engineers without Borders</a> and building up my own business
<a href="https://www.northscorp.de">NorthScorp</a>.<br> My Hobbies include Programming, building Robots ever since my <a href="https://www.robocup.org/">RoboCup</a> Qualifications and electromechanical Machines.
</p>
</div>
<div class="col-md-4"><a href="#skills">
<h3 class="mt-2 mb-3 text-center">Skilltree</h3>
<div class="text-center" id="pro">
<h5 class="imgcent text-center text-light">Progamming </h5>
<div class="show_first" id="pro1">
<p>
<span class="txt-rotate" data-period="2000" data-rotate='[ "C", "C#", "C++", "Python", "Java" ]'></span>
</p>
</div>
</div>
<div class="text-center" id="full">
<h5 class="imgcent text-center text-light">Web Development </h5>
<div class="show_first" id="full1">
<p>
<span class="txt-rotate" data-period="2000" data-rotate='[ "HTML5", "CSS", "JavaScript", "PHP", "NodeJS", "SQL", "MongoDB" ]'></span>
</p>
</div>
</div>
<div class="text-center" id="cad">
<h5 class="imgcent text-center text-light">CAD, Graphic & Design </h5>
<div class="show_first" id="cad1">
<p>
<span class="txt-rotate" data-period="2000" data-rotate='[ "Inventor", "OpenSCAD", "Photoshop", "Gimp", "Bootstrap" ]'></span>
</p>
</div>
</div>
</a>
</div>
</div>
</mat-card-content>
<mat-card-actions class="text-center">
<ul class="list-inline-item justify-content-around">
<li class="list-inline-item mx-3">
<a href="mailto:jeutter@northscorp.de" target="_blank" matTooltip="E-Mail" matTooltipPosition="above">
<mat-icon>email</mat-icon>
</a>
</li>
<li class="list-inline-item mx-3">
<a href="http://www.github.com/wieerwill" target="_blank" matTooltip="Github" matTooltipPosition="above">
<mat-icon>code</mat-icon>
</a>
</li>
<li class="list-inline-item mx-3">
<a href="http://www.northscorp.de" target="_blank" matTooltip="NorthScorp" matTooltipPosition="above">
<mat-icon>web</mat-icon>
</a>
</li>
<li class="list-inline-item mx-3">
<a href="http://www.tu-ilmenau.de" target="_blank" matTooltip="University" matTooltipPosition="above">
<mat-icon>science</mat-icon>
</a>
</li>
<li class="list-inline-item mx-3">
<a href="https://www.udemy.com/user/robert-jeutter/" target="_blank" matTooltip="Udemy" matTooltipPosition="above">
<mat-icon>school</mat-icon>
</a>
</li>
<li class="list-inline-item mx-3">
<a href="https://www.freecodecamp.org/robert-jeutter" target="_blank" matTooltip="FreeCodeCamp" matTooltipPosition="above">
<mat-icon>cast_for_education</mat-icon>
</a>
</li>
<li class="list-inline-item mx-3">
<a href="https://www.instagram.com/northscorp/" target="_blank" matTooltip="Instagram" matTooltipPosition="above">
<mat-icon>emoji_people</mat-icon>
</a>
</li>
</ul>
</mat-card-actions>
</mat-card>

15
angular/src/app/components/start/start.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-start',
templateUrl: './start.component.html',
styleUrls: ['./start.component.css']
})
export class StartComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}