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

auto generating pages from file

Browse Source
This commit is contained in:
Robert Jeutter 2021-12-30 17:00:13 +01:00
parent f06ede188c
commit f9967f4adb
7 changed files with 604 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -8,6 +8,8 @@ With GitHub you can Present yourself easily and without a fee, as you can setup
People love it when something moves and changes it's shape, so use the power of CSS and JS to create an interactive and rememberable portfolio.
NEW: VUE can now generate your complete pages from only a single file with all entries ever needed. Never could be easier. Only change one file to change all texts, icons and links.
## Vue
The new Version is build with VUE. Very similar to Angular you will get easy into it.
@ -18,6 +20,7 @@ You can find all source files in [/nuxt](/nuxt)
- Synthwave design based on [inegoita Codepen](https://codepen.io/inegoita/pen/BgdXMw?editors=1000)
- Background Music by [Three Chain Links - Die Historic](https://soundcloud.com/beardmont)
- Soundeffects by [Soundbible](https://soundbible.com/royalty-free-sounds-14.html)
### Build Setup
```bash
@ -46,7 +49,7 @@ This page is completely build in [Angular 9](https://angular.io). Even if you ar
- `ng generate component component-name`: run to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
- `ng help`: To get more help on the Angular CLI or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
You can find all source files in [/anuglar](/angular)
You can find all source files in [/angular](/angular)
![](angular.png)

482
nuxt/life.js Normal file
View File

@ -0,0 +1,482 @@
const life = {
home: {
link: "Home",
title1: "Wie", //splitted to fit star
title2: "erwill",
subtitle: "GitHub.io",
button1: "St", //splitted cause of effect blink
button2: "art",
githubLink: "https://github.com/wieerwill"
},
certification: {
link: "Certificaton",
title: "Certifications",
subtitle: "show me what you got",
quote: "What is a piece of paper else a note in time?",
list: [
{
title: "FullStack Web Developer",
text: [
"Frontend with Angular, Vue and more",
"Backend with NodeJS, C++ and more",
],
},
{
title: "Software Developer",
text: ["Trained C/C++ Dev with agil and unified approach"],
},
{
title: "Data Protection Officer",
text: ["trained & qualified specialist", "BDSG & GDPR"],
},
{
title: "SixSigma Yellow Belt",
text: ["trained project management, improvment and quality ensurance"],
},
]
},
profile: {
link: "Profile",
title: "Robert Jeutter",
subtitle: "Inventor · Entrepreneur · Student",
text: `Welcome to my Card,<br/>
currently I am studying at <a href="http://www.tu-ilmenau.de"> Technical University of Ilmenau</a> in the fields of Computer Science and Biomechatronics. <br/> In addition i am an active member of the <a href="https://www.il-sc.de"> student clubs </a>, <a href="https://ingenieure-ohne-grenzen.org/"> Engineers without Borders</a> and running 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.`,
linklist: [
{ link: "mailto:jeutter@northscorp.de", icon: "mail", text: "Mail" },
{ link: "http://www.github.com/wieerwill", icon: "code", text: "GitHub" },
{ link: "http://www.northscorp.de", icon: "language", text: "NorthScorp" },
{ link: "http://www.tu-ilmenau.de", icon: "account_balance", text: "TU Ilmenau" },
{ link: "https://www.udemy.com/user/robert-jeutter/", icon: "school", text: "Udemy" },
{ link: "https://www.freecodecamp.org/robert-jeutter", icon: "local_library", text: "CodeCamp" },
]
},
projects: {
link: "Projects",
title: "Projects",
subtitle: "work and stuff",
quote: "Do what you love and work is a hobby",
projectlist: [//list will be printed in reverse, start with your oldest entry, this will be put at the bottom and the newest entry will be put on top
{
datetime: "...future",
title: "more is coming soon",
description: "be sure to check my github page from time to time"
},
{
datetime: "2012 - 2016",
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",
},
{
datetime: "2016 - 2019",
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",
},
{
datetime: "2018 - today",
title: "Robocup Volunteer",
description:
"During school taking part at RoboCup Soccer 1v1 and 2v2 for ~7 years. 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",
},
{
datetime: "2018 - today",
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",
},
{
datetime: "2018",
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",
},
{
datetime: "2018 - 2021",
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 imagine. After some time i am one of our head technicans was responsible for our cultural programm and association communication.",
link: "http://www.bi-club.de",
},
{
datetime: "2019",
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",
},
{
datetime: "2019 - today",
title: "GitHub Showcard",
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",
},
{
datetime: "2019 - today",
title: "Informatik",
description:
"Ever been interested what they teach at university? Need help or are lost? Take a look at my notes from university that i and my commilitones write down during our studies.",
link: "https://github.com/wieerwill/informatik",
},
{
datetime: "2020",
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",
},
{
datetime: "2020",
title: "DSGVO Templates",
description:
"Want to make use of your privacy rights? Use my templates for free and get all you need with little work.",
link: "https://github.com/wieerwill/dsgvo-templates",
},
{
datetime: "2020",
title: "Wandern bringt Wissen",
description:
"In collaboration with Engineers without Borders, this website is a fundraiser to encourage regional companies to support the 'Water for Nyamache' project and many other.",
link: "",
},
{
datetime: "2020-today",
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",
},
{
datetime: "2021",
title: "CocktailShaker App",
description:
"This App works on the web, iOS and Android and lets you discover new and interesting drinks. It's build on Ionic, Vue and the CocktailDB. This App is part of a university project.",
link: "https://github.com/wieerwill/CocktailShaker-App",
},
{
datetime: "2021",
title: "Berufsverband der Datenschutzbeauftragten Deutschlands e.V.",
description: "Active Member of the Association of Data Protection Officers Germany (BvD). We represent the interests of data protection officers from all over Germany. The members consult companies and administrations on how they can integrate the complex requirements for effective data protection into their operational processes.",
link: "https://www.bvdnet.de/"
},
{
datetime: "2021",
title: "AEGIS DoS Protection",
description: "AEGIS aims to defend your system against denial-of-service attacks through efficient user-space packet processing. It was build during a software project at the TU Ilmenau.",
link: "https://github.com/wieerwill/aegis-dos-protection"
},
{
datetime: "2021-2022",
title: "Objektposenschätzung",
description: "Object-Pose-Estimation is a work for university regarding state of the art technologies to detect novel objects in RGB and RGB-D inputs and estimating their 3-dimensional scale, translation and rotation. Pre-Work for robot automation to be able to grab new objects.",
link: "https://github.com/wieerwill/Objektposenschaetzung"
},
{
datetime: "2021",
title: "MobilePenBerry",
description: "This is a little project aiming for a multi-purpose mobile Penetration, Pwning and Wifi-Testing Station on a RaspberryPi. Next to that i gather all snippets and helps related to RaspberryPi and additonal parts. Only for LAWFUL, ETHICAL AND EDUCATIONAL PURPOSES",
link: "https://github.com/wieerwill/MobilePenBerry"
}
],
},
skills: {
link: "Skills",
title: "Skills & Tools",
subtitle: "all you need",
quote: "With the right tools, everything is possible",
hireme: "Hire me to get",
myTools: "my Tools",
kategoryList: ["Design", "WebDev", "Programming", "Divers"],
skillList: [
{
title:
"Solid background and advanced knowledge in computer development software including C++, Python and JavaScript",
progress: 90,
},
{
title:
"Skilled in working with big databases and database management tools such as MySQL and MongoDB",
progress: 70,
},
{
title:
"Highly organized with exceptional commitment to task completion and quality assurance",
progress: 80,
},
{
title:
"Committed to delivering company objectives to projects and improving each version of software I engage with",
progress: 60,
},
{
title:
"Ability to solve complex problems successfully with minimal guidance or help using a logical reasoning technique and a strong attention to detail",
progress: 80,
},
{
title:
"Leading teams and creating a proactive selforganising structure",
progress: 90,
},
{ title: "Creativity involved in each project", progress: 100 },
{ title: "Motivation to gain more", progress: 100 },
],
toolList: [
{
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: "Angular",
kategory: "Frontend",
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: "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: "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: "Bootstrap",
kategory: "Frontend",
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: "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: "cpp.png",
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: "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: "Django",
kategory: "Backend",
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",
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: "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: "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: "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: "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: "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: "Magento",
kategory: "Shop",
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: "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: "Materialize",
kategory: "Frontend",
logo: "materialize.jpg",
link: "https://materializecss.com",
description:
"A modern responsive front-end framework based on material design",
},
{
name: "MongoDB",
kategory: "Backend",
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: "NodeJs",
kategory: "Backend",
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: "OpenCart",
kategory: "Shop",
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: "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: "PayPal",
kategory: "Shop",
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: "PHP",
kategory: "Backend",
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: "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.",
},
{
name: "React",
kategory: "Frontend",
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: "Semantic UI",
kategory: "Frontend",
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: "SQL",
kategory: "Backend",
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: "Woo Commerce",
kategory: "Shop",
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: "Vue",
kategory: "Frontend",
logo: "Vue.png",
link: "https://vuejs.org",
},
],
}
}
export default life;

50
nuxt/pages/certification.vue
View File

@ -1,53 +1,41 @@
<template lang="pug">
div
.title
.outrun.small.glow show me what you got
.chrome.medium.shine(data-text="Certifications") Certifications
.outrun.small.glow {{ subtitle }}
.chrome.medium.shine(:data-text="title") {{ title }}
.container
em &laquo;What is a piece of paper else a note in time?&raquo;
em &laquo;{{ quote }}&raquo;
.gallery
article(v-for="cert in certification", :key="cert.title")
h4 {{ cert.title }}
p(v-for="text in cert.text") {{ text }}
.footer
NuxtLink.navbutton(to="/") Home
NuxtLink.navbutton(to="/profile") Profile
NuxtLink.navbutton(to="/skills") Skills
NuxtLink.navbutton(to="/projects") Projects
NuxtLink.navbutton(to="/") {{ homeLink }}
NuxtLink.navbutton(to="/profile") {{ profileLink }}
NuxtLink.navbutton(to="/skills") {{ skillLink }}
NuxtLink.navbutton(to="/projects") {{ projectLink }}
</template>
<script>
import life from "../life";
export default {
head: {
title: 'Certification'
title: life.certification.title,
},
data() {
return {
show: false,
certification: [
{
title: "FullStack Web Developer",
text: [
"Frontend with Angular, Vue and more",
"Backend with NodeJS, C++ and more",
],
},
{
title: "Software Developer",
text: ["Trained C/C++ Dev with agil and unified approach"],
},
{
title: "Data Protection Officer",
text: ["trained & qualified specialist", "BDSG & GDPR"],
},
{
title: "SixSigma Yellow Belt",
text: [
"trained project management, improvment and quality ensurance",
],
},
],
title: life.certification.title,
subtitle: life.certification.subtitle,
quote: life.certification.quote,
certification: life.certification.list,
homeLink: life.home.link,
profileLink: life.profile.link,
skillLink: life.skills.link,
certificationLink: life.certification.link,
projectLink: life.projects.link,
};
},
};

25
nuxt/pages/index.vue
View File

@ -2,21 +2,32 @@
div
.titleview
.outrun.glow
a(href="https://github.com/wieerwill") GitHub.io
.chrome.large.shine(data-text="Wieerwill") Wie
a(href="https://github.com/wieerwill") {{ subtitle }}
.chrome.large.shine(:data-text="title1 + title2") {{ title1 }}
span.spark
| erwill
| {{ title2 }}
.buttonrow
NuxtLink(to="/profile")
button
span#offset St
span art
span#offset {{ button1 }}
span {{ button2 }}
</template>
<script>
import life from "../life";
export default {
head: {
title: 'Welcome'
title: "Welcome",
},
}
data() {
return {
title1: life.home.title1,
title2: life.home.title2,
subtitle: life.home.subtitle,
button1: life.home.button1,
button2: life.home.button2,
github: life.home.githubLink,
};
},
};
</script>

80
nuxt/pages/profile.vue
View File

@ -1,73 +1,47 @@
<template lang="pug">
div
.title
.outrun.small.glow Inventor &middot; Entrepreneur &middot; Student
.chrome.medium.shine(data-text="Robert Jeutter") Robert Jeutter
.outrun.small.glow(v-html="subtitle")
.chrome.medium.shine(:data-text="title") {{ title }}
.container
.siderow
img.card-image(src="pic.png")
ul.card-list
li
a(href="mailto:jeutter@northscorp.de", target="_blank")
span.material-icons mail
span Mail
li
a(href="http://www.github.com/wieerwill", target="_blank")
span.material-icons code
span GitHub
li
a(href="http://www.northscorp.de", target="_blank")
span.material-icons language
span NorthScorp
li
a(href="http://www.tu-ilmenau.de", target="_blank")
span.material-icons account_balance
span TU Ilmenau
li
a(href="https://www.udemy.com/user/robert-jeutter/", target="_blank")
span.material-icons school
span Udemy
li
a(
href="https://www.freecodecamp.org/robert-jeutter",
target="_blank"
)
span.material-icons local_library
span CodeCamp
li(v-for="link in linklist", :key="link.text")
a(:href="link.link", target="_blank")
span.material-icons {{ link.icon }}
span {{ link.text }}
.card-text
p Welcome to my Card,
br
| currently I am studying at&nbsp;
i
a(href="http://www.tu-ilmenau.de") Technical University of Ilmenau&nbsp;
| in the fields of Computer Sience and Biomechatronics.&nbsp;
| In addition i am an active member of the&nbsp;
a(href="https://www.bi-club.de") student club
| ,
a(href="https://ingenieure-ohne-grenzen.org/") &nbsp;Engineers without Borders&nbsp;
|
| and building up my own business&nbsp;
a(href="https://www.northscorp.de") NorthScorp
| .&nbsp;
br
| My Hobbies include Programming, building Robots ever since my&nbsp;
a(href="https://www.robocup.org/") RoboCup&nbsp;
| Qualifications and electromechanical Machines.
p(v-html="text")
.footer
NuxtLink.navbutton(to="/") Home
NuxtLink.navbutton(to="/skills") Skills
NuxtLink.navbutton(to="/projects") Projects
NuxtLink.navbutton(to="/certification") Certification
NuxtLink.navbutton(to="/") {{ homeLink }}
NuxtLink.navbutton(to="/skills") {{ skillLink }}
NuxtLink.navbutton(to="/projects") {{ projectLink }}
NuxtLink.navbutton(to="/certification") {{ certificationLink }}
</template>
<script>
import life from "../life";
export default {
head: {
title: 'Profile'
title: life.profile.title,
},
}
data() {
return {
title: life.profile.title,
subtitle: life.profile.subtitle,
text: life.profile.text,
linklist: life.profile.linklist,
homeLink: life.home.link,
profileLink: life.profile.link,
skillLink: life.skills.link,
certificationLink: life.certification.link,
projectLink: life.projects.link,
};
},
};
</script>
<style scoped>

154
nuxt/pages/projects.vue
View File

@ -1,31 +1,49 @@
<template lang="pug">
div
.title
.outrun.small.glow work and stuff
.chrome.medium.shine(data-text="Projects") Projects
.outrun.small.glow {{ subtitle }}
.chrome.medium.shine(:data-text="title") {{ title }}
.container
em &laquo;Do what you love and work is a hobby&raquo;
em &laquo;{{ quote }}&raquo;
#timeline
.timeline-item(
v-for="(project, i) in projects",
v-for="(project, i) in projectlist.slice().reverse()",
:key="i",
:datetime="project.datetime"
)
h2 {{ project.title }}
p {{ project.description }}
a.button(v-if="project.link", :href="project.link") more infos
.timeline-item(datetime="today")
h2 more is coming soon
p be sure to check my github page
.footer
NuxtLink.navbutton(to="/") Home
NuxtLink.navbutton(to="/profile") Profile
NuxtLink.navbutton(to="/skills") Skills
NuxtLink.navbutton(to="/certification") Certification
NuxtLink.navbutton(to="/") {{ homeLink }}
NuxtLink.navbutton(to="/profile") {{ profileLink }}
NuxtLink.navbutton(to="/skills") {{ skillLink }}
NuxtLink.navbutton(to="/certification") {{ certificationLink }}
</template>
<script>
import life from "../life";
export default {
head: {
title: life.projects.title,
},
data() {
return {
title: life.projects.title,
subtitle: life.projects.subtitle,
quote: life.projects.quote,
projectlist: life.projects.projectlist,
homeLink: life.home.link,
profileLink: life.profile.link,
skillLink: life.skills.link,
certificationLink: life.certification.link,
projectLink: life.projects.link,
};
},
};
</script>
<style scoped>
.container {
@ -109,116 +127,4 @@ div
)
1 100%;
}
</style>
<script>
export default {
head: {
title: 'Projects'
},
data() {
return {
projects: [
{
datetime: "2012 - 2016",
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",
},
{
datetime: "2016 - 2019",
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",
},
{
datetime: "2018 - today",
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",
},
{
datetime: "2018 - today",
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",
},
{
datetime: "2018",
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",
},
{
datetime: "2018 - today",
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 imagine. After some time i am one of our head technicans was responsible for our cultural programm and association communication.",
link: "http://www.bi-club.de",
},
{
datetime: "2019",
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",
},
{
datetime: "2019 - today",
title: "GitHub Showcard",
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",
},
{
datetime: "2019 - today",
title: "Informatik",
description:
"Ever been interested what they teach at university? Need help or are lost? Take a look at my notes from university that i and my commilitones write down during our studies.",
link: "https://github.com/wieerwill/informatik",
},
{
datetime: "2020",
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",
},
{
datetime: "2020",
title: "DSGVO Templates",
description:
"Want to make use of your privacy rights? Use my templates for free and get all you need with little work.",
link: "https://github.com/wieerwill/dsgvo-templates",
},
{
datetime: "2020",
title: "Wandern bringt Wissen",
description:
"In collaboration with Engineers without Borders, this website is a fundraiser to encourage regional companies to support the 'Water for Nyamache' project and many other.",
link: "",
},
{
datetime: "2020",
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",
},
{
datetime: "2021",
title: "CocktailShaker App",
description:
"This App works on the web, iOS and Android and lets you discover new and interesting drinks. It's build on Ionic, Vue and the CocktailDB. This App is part of a university project.",
link: "https://github.com/wieerwill/CocktailShaker-App",
},
],
};
},
};
</script>
</style>

317
nuxt/pages/skills.vue
View File

@ -1,321 +1,52 @@
<template lang="pug">
div
.title
.outrun.small.glow all you need
.chrome.medium.shine(data-text="Skills & Tools") Skills & Tools
.outrun.small.glow {{ subtitle }}
.chrome.medium.shine(:data-text="title") {{ title }}
.container
em &laquo;With the right tools, everything is possible&raquo;
em &laquo;{{ quote }}&raquo;
.row.skills
h3.chrome.small.shine(data-text="Hire me to get") Hire me to get
h3.chrome.small.shine(:data-text="hireme") {{ hireme }}
.progress-bar(v-for="skill in skills", :key="skill.title")
.skill-bar
.progress(v-bind:style="{ width: skill.progress + '%' }")
h4 {{ skill.title }}
.row
.chrome.small.shine(data-text="my Tools") my Tools
.chrome.small.shine(:data-text="myTools") {{ myTools }}
.column(v-for="tool of tools", :key="tool.name", :class="tool.kategory")
a.card(:href="tool.link")
img(:src="`icons/${tool.logo}`")
.footer
NuxtLink.navbutton(to="/") Home
NuxtLink.navbutton(to="/profile") Profile
NuxtLink.navbutton(to="/projects") Projects
NuxtLink.navbutton(to="/certification") Certification
NuxtLink.navbutton(to="/") {{ homeLink }}
NuxtLink.navbutton(to="/profile") {{ profileLink }}
NuxtLink.navbutton(to="/projects") {{ projectLink }}
NuxtLink.navbutton(to="/certification") {{ certificationLink }}
</template>
<script>
import life from "../life";
export default {
head: {
title: "Skills",
title: life.skills.title,
},
data() {
return {
kategorys: ["Design", "WebDev", "Programming", "Divers"],
skills: [
{
title:
"Solid background and advanced knowledge in computer development software including C++, Python and JavaScript",
progress: 90,
},
{
title:
"Skilled in working with big databases and database management tools such as MySQL and MongoDB",
progress: 70,
},
{
title:
"Highly organized with exceptional commitment to task completion and quality assurance",
progress: 80,
},
{
title:
"Committed to delivering company objectives to projects and improving each version of software I engage with",
progress: 60,
},
{
title:
"Ability to solve complex problems successfully with minimal guidance or help using a logical reasoning technique and a strong attention to detail",
progress: 80,
},
{
title:
"Leading teams and creating a proactive selforganising structure",
progress: 90,
},
{ title: "Creativity involved in each project", progress: 100 },
{ title: "Motivation to gain more", progress: 100 },
],
tools: [
{
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: "Angular",
kategory: "Frontend",
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: "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: "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: "Bootstrap",
kategory: "Frontend",
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: "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: "cpp.png",
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: "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: "Django",
kategory: "Backend",
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",
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: "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: "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: "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: "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: "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: "Magento",
kategory: "Shop",
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: "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: "Materialize",
kategory: "Frontend",
logo: "materialize.jpg",
link: "https://materializecss.com",
description:
"A modern responsive front-end framework based on material design",
},
{
name: "MongoDB",
kategory: "Backend",
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: "NodeJs",
kategory: "Backend",
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: "OpenCart",
kategory: "Shop",
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: "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: "PayPal",
kategory: "Shop",
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: "PHP",
kategory: "Backend",
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: "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.",
},
{
name: "React",
kategory: "Frontend",
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: "Semantic UI",
kategory: "Frontend",
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: "SQL",
kategory: "Backend",
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: "Woo Commerce",
kategory: "Shop",
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: "Vue",
kategory: "Frontend",
logo: "Vue.png",
link: "https://vuejs.org",
},
],
title: life.skills.title,
subtitle: life.skills.subtitle,
quote: life.skills.quote,
hireme: life.skills.hireme,
myTools: life.skills.myTools,
kategorys: life.skills.kategoryList,
skills: life.skills.skillList,
tools: life.skills.toolList,
homeLink: life.home.link,
profileLink: life.profile.link,
skillLink: life.skills.link,
certificationLink: life.certification.link,
projectLink: life.projects.link,
};
},
};