Skip to content

Commit

Permalink
Adding important components
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtomes123
jtomes123 committed Jul 26, 2018
1 parent f8ec625 commit 73c6fe9
Show file tree
Hide file tree
Showing 5 changed files with 365 additions and 113 deletions.
120 changes: 120 additions & 0 deletions src/components/About.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!--
Component that retrieves data about the owner of the website from firebase and then displays it
-->
<template>
<div class="about">
<b-container>
<b-row align-h="center">
<h1>{{owner.header}}</h1>
</b-row>
<b-row align-h="center" style="margin: 1rem 0;">
<b-img :v-if="owner.image != ''" rounded="circle" :src="owner.image" style="max-width: 14rem; width: 14rem; height: 14rem; max-height: 14rem;"/>
</b-row>
<b-row align-h="center">
<h2>{{owner.name}}</h2>
</b-row>
<b-row align-h="center">{{owner.bio}}</b-row>
<b-row align-h="center">
<!-- Displays all social media links -->
<b-button varian="secondary" v-for="(s, i) in owner.social" :key="i" variant="link" @click="openLinkInNewTab(s.link)" class="social-btn"><icon scale="1.5" :name="s.icon"></icon></b-button>
</b-row>
<b-row align-h="center">
<h3 :v-if="owner.cv && owner.cv.length > 0">Curiculum Vitae</h3>
</b-row>
<b-row align-h="center">
<!-- Displays all links to view or download your cv -->
<b-button varian="secondary" v-for="(s, i) in owner.cv" :key="i" variant="link" @click="openLinkInNewTab(s.link)" class="social-btn"><icon scale="1.5" :name="s.icon"></icon></b-button>
</b-row>
</b-container>
</div>
</template>

<script>
import { db } from '../main.js'
export default {
name: 'Projects',
data () {
return {
owner: {}
}
},
// Load data from firestore
firestore () {
return {
owner: db.collection('contents').doc('owner')
}
},
watch: {
owner: function (oldData, newData) {
if (newData !== {}) {
console.log('Data loaded!')
this.$emit('loaded')
}
}
},
methods: {
// Opens link in a new tab
openLinkInNewTab (link) {
window.open(link, '_blank')
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.about {
padding-bottom: 8rem;
padding-top: 1rem;
background: -moz-linear-gradient(
top,
rgba(14, 14, 14, 1) 0%,
rgba(110, 111, 110, 1) 86%,
rgba(125, 126, 125, 0.07) 90%,
rgba(125, 126, 125, 0) 93%
);
background: -webkit-linear-gradient(
top,
rgba(14, 14, 14, 1) 0%,
rgba(110, 111, 110, 1) 86%,
rgba(125, 126, 125, 0.07) 90%,
rgba(125, 126, 125, 0) 93%
);
background: linear-gradient(
to bottom,
rgba(14, 14, 14, 1) 0%,
rgba(110, 111, 110, 1) 86%,
rgba(125, 126, 125, 0.07) 90%,
rgba(125, 126, 125, 0) 93%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#007d7e7d',GradientType=0 );
color: lightgray;
}
.social-btn {
color: lightgray;
}
.social-btn:hover {
color: gray;
}
h1,
h2 {
font-weight: normal;
}
h1,
h2,
a {
color: whitesmoke;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
98 changes: 98 additions & 0 deletions src/components/Contact.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!--
Simple component that retrieves the contacts from firebase and displays them using v-for
-->
<template>
<div class="contact">
<b-container>
<b-row align-h="center"><h2 :v-if="owner.contact && owner.contact.length > 0">Contact</h2></b-row>
<b-row align-h="center">
<b-button varian="secondary" v-for="(s, i) in owner.contact" :key="i" variant="link" @click="openLinkInNewTab(s.link)" class="social-btn"><icon scale="1.5" :name="s.icon"></icon></b-button>
</b-row>
</b-container>
</div>
</template>

<script>
import { db } from '../main.js'
export default {
name: 'Projects',
data () {
return {
owner: []
}
},
// Retrieve data from firebase
firestore () {
return {
owner: db.collection('contents').doc('owner')
}
},
watch: {
owner: function (oldData, newData) {
if (newData !== {}) {
this.$emit('loaded')
}
}
},
methods: {
// Open link in new tab
openLinkInNewTab (link) {
window.open(link, '_blank')
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contact {
color: whitesmoke;
padding-top: 4rem;
padding-bottom: 1rem;
background: -moz-linear-gradient(
bottom,
rgba(14, 14, 14, 1) 0%,
rgba(110, 111, 110, 1) 86%,
rgba(125, 126, 125, 0.07) 90%,
rgba(125, 126, 125, 0) 93%
);
background: -webkit-linear-gradient(
bottom,
rgba(14, 14, 14, 1) 0%,
rgba(110, 111, 110, 1) 86%,
rgba(125, 126, 125, 0.07) 90%,
rgba(125, 126, 125, 0) 93%
);
background: linear-gradient(
to top,
rgba(14, 14, 14, 1) 0%,
rgba(110, 111, 110, 1) 86%,
rgba(125, 126, 125, 0.07) 90%,
rgba(125, 126, 125, 0) 93%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007d7e7d', endColorstr='#0e0e0e',GradientType=0 );
}
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.social-btn {
color: lightgray;
}
.social-btn:hover {
color: gray;
}
</style>
113 changes: 0 additions & 113 deletions src/components/HelloWorld.vue
View file

This file was deleted.

61 changes: 61 additions & 0 deletions src/components/Main.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!--
The main component that displays everything
-->
<template>
<div>
<p-about v-on:loaded="aboutLoaded = true"></p-about>
<p-projects v-on:loaded="projectsLoaded = true"></p-projects>
<p-contact v-on:loaded="contactLoaded = true"></p-contact>
<div v-if="aboutLoaded == false || projectsLoaded == false || contactLoaded == false" class="loading-screen">
<icon name="spinner" pulse scale="3" style="margin: auto"></icon>
</div>
</div>
</template>

<script>
export default {
name: 'Main',
data () {
return {
aboutLoaded: false,
projectsLoaded: false,
contactLoaded: false
}
},
firestore () {
return {
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loading-screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

0 comments on commit 73c6fe9

Please sign in to comment.