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

add new nuxt build

Browse Source
This commit is contained in:
WieErWill
2021-07-04 16:56:48 +02:00
parent 5b9db458ac
commit 2fbbabe45c
142 changed files with 12354 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
nuxt/pages/certification.vue Normal file
View File

@@ -0,0 +1,232 @@
<template lang="pug">
div
.title
.outrun.small.glow show me what you got
.chrome.medium.shine(data-text="Certifications") Certifications
.container
em &laquo;What is a piece of paper else a note in time?&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
</template>
<script>
export default {
head: {
title: 'Certification'
},
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",
],
},
],
};
},
};
</script>
<style scoped>
.container {
color: white;
width: 80%;
margin: auto;
margin-top: 25vh;
text-align: center;
}
.container em {
margin: 20px;
}
.gallery {
margin: 100px 0;
}
.gallery article {
width: 60%;
margin: 30px auto;
min-height: 60px;
background: linear-gradient(
95deg,
#343a80de 0%,
#3d4a75de 13%,
#6668aade 18%,
#0092dbde 39%,
#e1217bde 54%,
#a20e69de 63%,
#670558de 83%,
#27034bde 100%
);
border-radius: 60px 60px 60px 60px;
animation: scanner 2s ease-in-out alternate both infinite;
}
.gallery article:nth-child(2) {
animation-delay: 1s;
}
.gallery article:nth-child(3) {
animation-delay: 0.5s;
}
.gallery article:nth-child(4) {
animation-delay: 1.5s;
}
@keyframes scanner {
0% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 0%,
#6668aade 5%,
#e1217bde 10%,
#a20e69de 15%,
#670558de 50%,
#27034bde 100%
);
}
15% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 5%,
#6668aade 10%,
#e1217bde 15%,
#a20e69de 20%,
#670558de 60%,
#27034bde 100%
);
}
25% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 10%,
#6668aade 20%,
#e1217bde 25%,
#a20e69de 35%,
#670558de 70%,
#27034bde 100%
);
}
40% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 10%,
#6668aade 35%,
#e1217bde 40%,
#a20e69de 45%,
#670558de 75%,
#27034bde 100%
);
}
50% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 20%,
#6668aade 45%,
#e1217bde 50%,
#a20e69de 55%,
#670558de 80%,
#27034bde 100%
);
}
60% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 35%,
#6668aade 55%,
#e1217bde 60%,
#a20e69de 65%,
#670558de 85%,
#27034bde 100%
);
}
75% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 25%,
#6668aade 70%,
#e1217bde 75%,
#a20e69de 80%,
#670558de 90%,
#27034bde 100%
);
}
85% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 35%,
#6668aade 80%,
#e1217bde 85%,
#a20e69de 90%,
#670558de 95%,
#27034bde 100%
);
}
100% {
background: linear-gradient(
90deg,
#343a80de 0%,
#3d4a75de 50%,
#6668aade 85%,
#e1217bde 90%,
#a20e69de 95%,
#670558de 100%,
#27034bde 100%
);
}
}
article h4 {
padding: 10px auto 0 auto;
margin: 10px auto;
}
article p {
width: 80%;
font-size: 20px;
padding-top: 0;
margin: 0 auto;
}
@media screen and (max-width: 600px) {
.gallery {
margin: 10px 0;
}
.gallery article {
width: 100%;
}
article h4 {
font-size: 15px;
}
article p {
font-size: 10px;
}
}
</style>

22
nuxt/pages/index.vue Normal file
View File

@@ -0,0 +1,22 @@
<template lang="pug">
div
.titleview
.outrun.glow
a(href="https://github.com/wieerwill") GitHub.io
.chrome.large.shine(data-text="Wieerwill") Wie
span.spark
| erwill
.buttonrow
NuxtLink(to="/profile")
button
span#offset St
span art
</template>
<script>
export default {
head: {
title: 'Welcome'
},
}
</script>

165
nuxt/pages/profile.vue Normal file
View File

@@ -0,0 +1,165 @@
<template lang="pug">
div
.title
.outrun.small.glow Inventor &middot; Entrepreneur &middot; Student
.chrome.medium.shine(data-text="Robert Jeutter") Robert Jeutter
.container
.siderow
nuxt-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
.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.
.footer
NuxtLink.navbutton(to="/") Home
NuxtLink.navbutton(to="/skills") Skills
NuxtLink.navbutton(to="/projects") Projects
NuxtLink.navbutton(to="/certification") Certification
</template>
<script>
export default {
head: {
title: 'Profile'
},
}
</script>
<style scoped>
.container {
width: 80%;
margin: auto;
margin-top: 25vh;
padding: 20px;
border-radius: 20px;
background: linear-gradient(
172deg,
#e1217bde 0%,
#670558de 23%,
#343a80de 39%,
#0092dbde 59%,
#6668aade 62%,
#3d4a75de 77%,
#a20e69de 86%,
#27034bde 100%
);
color: white;
font-size: calc(20px + 1vh);
text-align: center;
animation: background-flicker 5s linear infinite;
}
.siderow {
width: 25%;
height: 100%;
display: inline-block;
}
.siderow .card-image {
margin: auto;
padding: auto;
max-width: 90%;
height: auto;
animation: letter-flicker 7s linear infinite;
display: block;
border-radius: 20%;
border-style: solid;
}
.siderow .card-image:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.siderow ul {
margin: 0;
padding: 0;
}
.siderow .card-list,
.card-list a {
text-align: left;
text-decoration: none;
list-style: none;
color: white;
}
.siderow .card-list a span {
padding-left: 5px;
font-size: 15px;
}
.card-text {
width: 75%;
height: 100%;
display: inline-block;
}
.card-text p {
text-align: left;
padding: 0 0 0 15px;
margin: 0;
}
@media screen and (max-width: 600px) {
.container {
width: 85%;
font-size: calc(10px + 1vh);
}
.siderow {
margin: auto;
width: 90%;
display: block;
}
.siderow .card-image {
width: 90%;
margin: auto;
padding: 4px;
}
.siderow li {
text-align: center;
}
.card-text {
display: block;
margin: 20px 0 20px 0;
width: 100%;
}
}
</style>

223
nuxt/pages/projects.vue Normal file
View File

@@ -0,0 +1,223 @@
<template lang="pug">
div
.title
.outrun.small.glow work and stuff
.chrome.medium.shine(data-text="Projects") Projects
.container
em &laquo;Do what you love and work is a hobby&raquo;
#timeline
.timeline-item(
v-for="(project, i) in projects",
: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
</template>
<style scoped>
.container {
color: white;
width: 80%;
margin: auto;
margin-top: 25vh;
padding: auto;
text-align: center;
}
.container em {
margin: 20px;
}
#timeline {
max-width: 1600px;
margin: 50px auto;
}
.timeline-item {
padding: 3em 2em 2em;
position: relative;
color: rgba(0, 0, 0, 0.7);
border-left: 6px solid rgba(0, 0, 0, 0.4);
}
.timeline-item h2 {
background: linear-gradient(
32deg,
#e1217bde 0%,
#670558de 23%,
#343a80de 39%,
#0092dbde 59%,
#6668aade 62%,
#3d4a75de 77%,
#a20e69de 86%,
#27034bde 100%
);
color: rgb(211, 255, 253);
padding: 10px 0 10px 0;
margin: 0 0 0 0;
border-radius: 15px 15px 0 0;
animation: background-flicker 6s linear infinite;
}
.timeline-item p {
text-align: left;
margin: 0 0 20px 0;
padding: 15px;
font-size: calc(15px + 1vh);
background-color: rgba(231, 231, 231, 0.9);
border-radius: 0 0 15px 15px;
}
.timeline-item::before {
content: attr(datetime);
position: absolute;
left: 1em;
top: 1em;
display: block;
font-weight: 700;
font-size: 0.785rem;
color: black;
background-color: white;
padding: 2px 7px;
border-radius: 0 10% 10% 0;
}
.timeline-item::after {
width: 10px;
height: 10px;
display: block;
top: 1em;
position: absolute;
left: -7px;
border-radius: 10px;
content: "";
border: 2px solid rgba(0, 0, 0, 0.3);
background: white;
}
.timeline-item:last-child {
border-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3) 60%,
rgba(0, 0, 0, 0)
)
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>

437
nuxt/pages/skills.vue Normal file
View File

@@ -0,0 +1,437 @@
<template lang="pug">
div
.title
.outrun.small.glow all you need
.chrome.medium.shine(data-text="Skills & Tools") Skills & Tools
.container
em &laquo;With the right tools, everything is possible&raquo;
.row.skills
h3.chrome.small.shine(data-text="Hire me to get") Hire me to get
.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
.column(v-for="tool of tools", :key="tool.name", :class="tool.kategory")
a.card(:href="tool.link")
nuxt-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
</template>
<script>
export default {
head: {
title: "Skills",
},
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",
},
],
};
},
};
</script>
<style scoped>
.skills h3.chrome {
margin-bottom: 0;
padding-bottom: 5px;
}
.skills {
margin-bottom: 100px;
}
.progress-bar {
text-align: left;
width: 80%;
margin: 30px auto;
padding: 0;
}
.skill-bar {
width: 20%;
height: 20px;
background-color: rgba(126, 117, 115, 0.6);
display: inline-block;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
margin: 0 auto;
padding: 5px;
}
.progress {
margin: 4px;
padding: 0;
min-width: 1%;
max-width: 99%;
height: 12px;
animation: progress 3s linear infinite;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
background-image: linear-gradient(
-45deg,
#92ce72 25%,
#70c542 25%,
#70c542 50%,
#92ce72 50%,
#92ce72 75%,
#70c542 75%,
#70c542
);
background-size: 20px 20px;
}
.progress-bar h4 {
font-size: 15px;
width: 70%;
padding: 0 15px;
margin: 0;
display: inline-block;
background-color: rgba(76, 0, 130, 0.3);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
@keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: 20px 20px;
}
}
.container {
color: white;
width: 80%;
margin: auto;
margin-top: 25vh;
padding: auto;
text-align: center;
}
.container em {
margin: 20px;
}
.column {
float: left;
width: 10%;
min-height: 100px;
padding: 2%;
}
.card img {
padding: 8px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15%;
height: 50px;
max-width: 100%;
border-radius: 10%;
-webkit-box-shadow: 0px 0px 28px 4px rgba(113, 22, 218, 0.705);
-moz-box-shadow: 0px 0px 28px 4px rgba(113, 22, 218, 0.705);
box-shadow: 0px 0px 28px 4px rgba(113, 22, 218, 0.705);
}
@media screen and (max-width: 600px) {
.column {
width: 40%;
display: block;
margin: auto auto 10px auto;
min-height: 100px;
}
.skills .progress-bar {
text-align: center;
}
}
</style>