Permalink
Browse files

Cool stuff happening

  • Loading branch information...
Adamkillander96 committed Aug 2, 2018
1 parent ed19f28 commit 956ca5fcd99dbcde6daea66ecb068361c84366ad
@@ -1,4 +1,66 @@
@each $color, $value in $theme-colors {
@include bg-variant(".bg-#{$color}", $value);
@include bg-variant(".bg-light-#{$color}", rgba($value, 0.5));
}

/*Real custom*/
@mixin transition($property) {
-webkit-transition: $property;
-moz-transition: $property;
-o-transition: $property;
transition: $property;
}

@mixin transform($property) {
-webkit-transform: $property;
-moz-transform: $property;
-o-transform: $property;
transform: $property;
}

.bar-icon {
width: 50px;
height: 40px;
position: relative;
@include transition((.2s ease-in-out));
@include transform(rotate(0deg));
cursor: pointer;
span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: white;
opacity: 1;
left: 0;
@include transition((.2s ease-in-out));
@include transform(rotate(0deg));
&:nth-child(1) {
top: 0px;
}
&:nth-child(2), &:nth-child(3) {
top: 18px;
}
&:nth-child(4) {
top: 36px;
}
}
&.toggle span {
&:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
&:nth-child(2) {
@include transform(rotate(45deg));
}
&:nth-child(3) {
@include transform(rotate(-45deg));
}
&:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
}
@@ -56,6 +56,7 @@ $danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$pinky: $pink !default;
$tealy: $teal !default;
$deep: $purple !default;

$theme-colors: () !default;
@@ -68,6 +69,7 @@ $theme-colors: map-merge((
"warning": $warning,
"danger": $danger,
"light": $light,
"tealy": $tealy,
"dark": $dark,
"pinky": $pinky
), $theme-colors);
@@ -0,0 +1,61 @@
<template>

<b-container fluid class="introSection">
<b-row>
<b-col lg="12" class="text-center mt-0 mt-md-5">
<h1 class="display-3" v-html="$t('appHead')"></h1>
<p class="lead" v-html="$t('appDescr')"></p>
<i class="fal fa-user-astronaut fa-10x"></i>
</b-col>
</b-row>
<b-row>
<b-col lg="12" class="text-center my-2 py-md-5">
<span class="lead" v-html="$t('helloMsg')"></span>
</b-col>
</b-row>
<b-row class="mt-5">
<b-col cols="12" class="text-center py-4">{{$t('lang')}}</b-col>
<b-col cols="6" sm="6" class="p-0">
<a class="d-flex align-items-center justify-content-center p-5 position-relative" id="Swedish" type="language"
@click="setLanguage('sv'); setActive('sv')"
:class="{ active: isActive('sv'), 'bg-primary': isActive('sv'), 'bg-light-secondary': isActive('en') }" >
<span style="z-index:2"><i class="fal fa-flag fa-fw d-block mx-auto mb-1"></i> Svenska</span></a>
</b-col>
<b-col cols="6" sm="6" class="p-0">
<a class="d-flex align-items-center justify-content-center p-5 position-relative" id="English" type="language"
@click="setLanguage('en'); setActive('en')"
:class="{ active: isActive('en'), 'bg-danger': isActive('en'), 'bg-light-secondary': isActive('sv') }">
<span style="z-index:2"><i class="fal fa-flag fa-fw d-block mx-auto mb-1"></i> English</span></a>
</b-col>
</b-row>
</b-container>

</template>

<script>
export default {
name: 'intro',
data() {
return {
activeItem: this.$i18n.locale,
}
},
created() {
const html = document.documentElement // returns the html tag
html.setAttribute('lang', this.$i18n.locale)
},
methods: {
setLanguage (val) {
this.$i18n.locale = val
},
isActive: function (menuItem) {
return this.activeItem === menuItem
},
setActive: function (menuItem) {
this.activeItem = menuItem
}
}
}
</script>
@@ -1,7 +1,14 @@
<template>
<b-navbar id="app-nav" toggleable="md" type="dark" role="navigation">

<b-navbar-toggle target="nav_collapse"><i class="fas fa-bars fa-lg"></i></b-navbar-toggle>
<b-navbar-toggle target="nav_collapse" class="p-0 m-0 border-0">
<div class="bar-icon collapsed">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</b-navbar-toggle>
<b-navbar-brand v-on:click="intro = true" to="/" value="/" exact for="appName">{{ $t('appName') }}</b-navbar-brand>
<b-collapse is-nav id="nav_collapse">

@@ -18,5 +25,10 @@
<script>
export default {
name: 'app-header',
data() {
return {
toggleIcon: false
}
}
}
</script>
@@ -0,0 +1,99 @@
<template>
<b-row>
<b-col cols="12">
<h3 class="text-success">{{ $t('updateTitle') }}</h3>
<p>{{ $t('updateDesc') }}</p>
<b-row>
<b-input-group class="col-lg-4 col-md-4 col-sm-6 mb-2 mb-sm-0">
<div class="input-group-prepend">
<div class="input-group-text bg-light-dark text-light border-0">Repository</div>
</div>
<b-form-select v-model="currentRepositorie" class="bg-dark text-success border-0">
<option class="text-light" v-for="repositorie in repositories" :key="repositorie.key" :id="repositorie" :value="repositorie">{{repositorie}}</option>
</b-form-select>
</b-input-group>
<b-input-group class="col-lg-4 col-md-4 col-sm-6">
<div class="input-group-prepend">
<div class="input-group-text bg-light-dark text-light border-0">Branch</div>
</div>
<b-form-select v-model="currentBranch" class="bg-dark text-success border-0">
<option class="text-light" v-for="branch in branches" :key="branch.key" :id="branch" :value="branch">{{branch}}</option>
</b-form-select>
</b-input-group>
</b-row>
<p class="mt-3">Adam Killander / {{ currentRepositorie }} @ {{ currentBranch }}</p>
<hr class="border-success">
</b-col>
<b-col md="4" class="mb-4" v-for="record in commits" v-bind:key="record.id">
<div class="card-body bg-dark rounded-top">
<a :href="record.html_url" target="_blank" class="h5 card-title">{{ record.sha.slice(0, 7) }}</a>
<span class="d-block lead">{{ record.commit.message | truncate }}</span>
</div>
<div class="card-footer bg-light-dark rounded-bottom">
<span class="d-block">
<a :href="record.author.html_url" target="_blank" class="text-success"><i class="fas fa-user-tag"></i> {{ record.commit.author.name }}</a>
</span>
<small class="text-secondary"><i class="far fa-calendar-alt"></i> {{ record.commit.author.date | formatDate }}</small>
</div>
</b-col>
</b-row>
</template>

<script>
export default {
name: 'update-component',
data() {
return {
active: false,
selected: null,
repositories: ['AdamsPortfolio', 'instant-app-maker'],
currentRepositorie: 'AdamsPortfolio',
branches: ['master', 'docs'],
currentBranch: 'master',
commits: null
}
},
created: function () {
this.fetchData()
},
watch: {
currentRepositorie: 'fetchData',
currentBranch: 'fetchData'
},
filters: {
truncate: function (v) {
var newline = v.indexOf('\n')
return newline > 0 ? v.slice(0, newline) : v
},
formatDate: function (v) {
return v.replace(/T|Z/g, ' ')
}
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', 'https://api.github.com/repos/Adamkillander96/' + self.currentRepositorie + '/commits?per_page=3&sha=' + self.currentBranch)
xhr.onload = function () {
self.commits = JSON.parse(xhr.responseText)
console.log(self.commits[0].html_url)
}
xhr.send()
}
},
i18n: {
messages: {
en: {
updateTitle: 'Latest GitHub commits',
updateDesc: 'Select a repository & what branch to view.'
},
sv: {
updateTitle: 'Senaste GitHub commits',
updateDesc: 'Välj en repository & vilken branch du vill titta på.'
}
}
}
}
</script>
@@ -0,0 +1,53 @@
<template>
<b-row>
<b-col cols="12">
<h3 class="text-primary">{{ $t('titleh1') }}</h3>
<p>{{ $t('titledesc') }}</p>
<hr class="border-primary">
</b-col>
<b-col md="4" class="mb-4" v-for="website in website" v-bind:key="website.id">
<div class="card-body bg-dark rounded-top">
<h3 v-t="website.content[0]"></h3>
<span class="thisio" v-t="website.content[1]"></span>
</div>
<div class="card-footer bg-light-dark rounded-bottom">
<span class="d-block">
<a class="text-primary" target="_blank" v-bind:href="website.thumbnail" ><i class="fal fa-external-link-alt fa-fw"></i> Länk till prototypen</a>
</span>
</div>
</b-col>
</b-row>
</template>

<script>
export default {
name: 'website-template',
data() {
return {
website: [
{ content: this.$t('website1'), thumbnail: 'https://jsfiddle.net/Adamkillander/pmd9Ls2z/' },
{ content: this.$t('website2'), thumbnail: 'https://jsfiddle.net/Adamkillander/vuq3gnd5/' },
{ content: this.$t('website3'), thumbnail: 'https://jsfiddle.net/Adamkillander/tkyv438b/' },
]
}
},
i18n: {
messages: {
en: {
titleh1: 'Latest JSFiddles',
titledesc: 'My newest JSFiddles, follow the link to try them out.',
website1: [ 'Weather styling', 'Description 1' ],
website2: [ 'A simple Vue.js langauge switcher', 'Use vue.js i18n to change language quick and easy. ' ],
website3: [ 'Latest commits', 'Based on the offical Vue.js example but whit Bootstrap 4.' ],
},
sv: {
titleh1: 'Senaste JSFiddles',
titledesc: 'Mina senaste JSFiddles, följ länken för att testa funktionerna.',
website1: [ 'Väder styling', 'Ändra bakgrundsfärg beroende på vädret!' ],
website2: [ 'Språk-switcher', 'Byt snabbt & enkelt språk utan att uppdatera sidan.' ],
website3: [ 'Senaste commits', 'Byggt med vue.js officiela documentation fast med Bootstrap 4.' ],
}
}
}
}
</script>
@@ -5,8 +5,8 @@
<p>{{ $t('titledesc') }}</p>
<hr class="border-primary">
</b-col>
<b-col md="4" class="p-0 mb-4" v-for="website in website" v-bind:key="website.id">
<div class="mx-4 bg-dark rounded">
<b-col md="4" class="mb-4" v-for="website in website" v-bind:key="website.id">
<div class="bg-dark rounded">
<div class="card-body">
<h3 v-t="website.content[0]"></h3>
<span class="thisio" v-t="website.content[1]"></span>
@@ -8,18 +8,18 @@
</b-col>
</b-row>
<b-container class="pb-5">
<websiteComponent />
<websites />
</b-container>
<b-container class="pb-5">
<githubCommits />
<commits />
</b-container>
</b-container>

</template>

<script>
import websiteComponent from './websites-component.vue'
import githubCommits from './update-component.vue'
import websites from './items/fiddles.vue'
import commits from './items/commits.vue'
export default {
name: 'portfolio-details',
@@ -28,8 +28,8 @@ export default {
}
},
components: {
websiteComponent,
githubCommits
websites,
commits
},
}
Oops, something went wrong.

0 comments on commit 956ca5f

Please sign in to comment.