initial commit
parent
b913a59259
commit
02cc8e6968
File diff suppressed because it is too large
Load Diff
@ -1,28 +1,25 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
<b-container fluid></b-container>
|
||||
<router-view></router-view>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
* {
|
||||
border: 0px black solid;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,179 @@
|
||||
<style scoped>
|
||||
|
||||
* {
|
||||
border: 0px black solid;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to
|
||||
/* .fade-leave-active below version 2.1.8 */
|
||||
|
||||
{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.intro_review {
|
||||
text-align: justify;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<div>
|
||||
|
||||
<b-row class="mb-5">
|
||||
<b-col md="8" offset-md="9">
|
||||
<b-button variant="light">About</b-button>
|
||||
<b-button variant="light">Glossary</b-button>
|
||||
<b-button variant="light">Full text</b-button>
|
||||
<b-button variant="light">Full video</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!-- End of top menu-->
|
||||
|
||||
<b-row align-h="center" class="mb-5">
|
||||
|
||||
<b-col cols="8" md-10 justify-text-center class="intro_review">
|
||||
<p>
|
||||
... this is more than just a simple review. Instead of just discussing the physical characteristics of one product or another, my analysis focuses on the broader context in which these products have developed. I've become interested in meal replacements
|
||||
because the concept of rejecting food as inefficient, and replacing it with an ultra-processed powder, however many nutrients it contained, intrigued me. I found the idea to be completely alien, so far removed from my values and desires,
|
||||
that I had to look deeper. I ended up writing an essay, following the historical path and cultural patterns that led to the growth of a culture, an ideology, a community around the act of replacing one of the most basic human habits.
|
||||
</p>
|
||||
<p>
|
||||
Below, you will find excerpts of my essay, split into the main topics covered in my research. Scattered throughout the text are images, references, articles, quotes and video snippets, some even extracted from my own video essay, that together build a
|
||||
complex image of the world of meal replacements.
|
||||
</p>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!-- End of description-->
|
||||
|
||||
<b-row align-h="center" class="mb-5">
|
||||
<b-col cols="2" class="text-center">
|
||||
<b-dropdown id="dropdown-2" class="m-md-2" variant="outline-dark" @click="onClick" no-caret>
|
||||
<span slot="text"> <font-awesome-icon icon="stroopwafel" size="3x" /></span>
|
||||
<b-card title="Replacing cooking" class="mb-2">
|
||||
<b-card-text>
|
||||
Meal replacements aim to replace food with food-like substances, which means there's no need to cook. But what do people have against cooking in the first place? When did cooking become important for humans?
|
||||
</b-card-text>
|
||||
|
||||
<b-dropdown-item-button v-on:click="showCookingCard = !showCookingCard" href="#" variant="primary">Keep reading</b-dropdown-item-button>
|
||||
</b-card>
|
||||
</b-dropdown>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="2" class="text-center">
|
||||
<b-dropdown id="dropdown-2" class="m-md-2" variant="outline-dark" @click="onClick" no-caret>
|
||||
<span slot="text"> <font-awesome-icon icon="stopwatch" size="3x" /></span>
|
||||
<b-card title="Saving time" class="mb-2">
|
||||
<b-card-text>
|
||||
When you have no time to eat throughout the day, you have to reconsider your priorities. sometimes, that can mean eating your meals in liquid form, on the go.
|
||||
</b-card-text>
|
||||
|
||||
<b-dropdown-item-button v-on:click="showTimeCard = !showTimeCard" href="#" variant="primary">Keep reading</b-dropdown-item-button>
|
||||
</b-card>
|
||||
</b-dropdown>
|
||||
</b-col>
|
||||
<b-col cols="2" class="text-center">
|
||||
<b-dropdown id="dropdown-3" class="m-md-2" variant="outline-dark" @click="onClick" no-caret>
|
||||
<span slot="text"> <font-awesome-icon icon="code" size="3x" /></span>
|
||||
<b-card title="Providing solutions" class="mb-2">
|
||||
<b-card-text>
|
||||
The food system has plenty of problems, from food waste to world hunger. Most meal replacement brands claim to tackle some of these issues through their products. But I don't think that's working very well.
|
||||
</b-card-text>
|
||||
|
||||
<b-dropdown-item-button v-on:click="showSolutionsCard = !showSolutionsCard" href="#" variant="primary">Keep reading</b-dropdown-item-button>
|
||||
</b-card>
|
||||
</b-dropdown>
|
||||
|
||||
</b-col>
|
||||
<b-col cols="2" class="text-center">
|
||||
<b-dropdown id="dropdown-4" class="m-md-2" variant="outline-dark" @click="onClick" no-caret>
|
||||
<span slot="text"> <font-awesome-icon icon="search-dollar" size="3x" /></span>
|
||||
<b-card title="Adding value" class="mb-2">
|
||||
<b-card-text>
|
||||
If food is inefficient in keeping humans alive, what makes meal replacements, or complete foods, an appropriate alternative?
|
||||
</b-card-text>
|
||||
|
||||
<b-dropdown-item-button v-on:click="showValueCard = !showValueCard" href="#" variant="primary">Keep reading</b-dropdown-item-button>
|
||||
</b-card>
|
||||
</b-dropdown>
|
||||
</b-col>
|
||||
<b-col cols="2" class="text-center">
|
||||
<b-dropdown id="dropdown-5" class="m-md-2" variant="outline-dark" @click="onClick" no-caret>
|
||||
<span slot="text"> <font-awesome-icon icon="seedling" size="3x" /></span>
|
||||
<b-card title="Saving the future" class="mb-2">
|
||||
<b-card-text>
|
||||
In the future, we will probably have to change the ways in which we relate to food. Will future food be purely functional? Will agriculture change drastically, as well as our reliance on it?
|
||||
</b-card-text>
|
||||
|
||||
<b-dropdown-item-button v-on:click="showFutureCard = !showFutureCard" href="#" variant="primary">Keep reading</b-dropdown-item-button>
|
||||
</b-card>
|
||||
</b-dropdown>
|
||||
|
||||
</b-col>
|
||||
|
||||
</b-row>
|
||||
|
||||
<b-row align-h="center">
|
||||
<b-col cols="8" class="text-center">
|
||||
<transition name="fade">
|
||||
<div v-if="showCookingCard">
|
||||
<CookingCard/>
|
||||
</div>
|
||||
<div v-if="showTimeCard">
|
||||
<TimeCard/>
|
||||
</div>
|
||||
<div v-if="showSolutionsCard">
|
||||
<SolutionsCard/>
|
||||
</div>
|
||||
<div v-if="showValueCard">
|
||||
<ValueCard/>
|
||||
</div>
|
||||
<div v-if="showFutureCard">
|
||||
<FutureCard/>
|
||||
</div>
|
||||
</transition>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import CookingCard from './CookingCard'
|
||||
import TimeCard from './TimeCard'
|
||||
import SolutionsCard from './SolutionsCard'
|
||||
import ValueCard from './ValueCard'
|
||||
import FutureCard from './FutureCard'
|
||||
export default {
|
||||
name: 'ReviewPage',
|
||||
components: {
|
||||
CookingCard, TimeCard, SolutionsCard, ValueCard, FutureCard,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
showCookingCard: false,
|
||||
showTimeCard: false,
|
||||
showSolutionsCard: false,
|
||||
showValueCard: false,
|
||||
showFutureCard: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
// Close the menu and (by passing true) return focus to the toggle button
|
||||
this.$refs.dropdown.hide(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,8 +1,41 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faCarBattery, faSeedling, faStroopwafel, faBrain, faStopwatch, faChartLine, faCode, faUserCheck, faSearchDollar } from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
import { VBPopover } from 'bootstrap-vue/es/directives'
|
||||
|
||||
import VueRouter from 'vue-router'
|
||||
// Note: Vue automatically prefixes the directive name with 'v-'
|
||||
Vue.directive('b-popover', VBPopover)
|
||||
|
||||
library.add(faCarBattery, faSeedling, faStroopwafel, faBrain, faStopwatch, faChartLine, faCode, faUserCheck, faSearchDollar)
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
||||
|
||||
import SplashPage from './components/SplashPage'
|
||||
import ReviewPage from './components/ReviewPage'
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{ path: '/', component: SplashPage },
|
||||
{ path: '/review', component: ReviewPage }
|
||||
]
|
||||
|
||||
})
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
|
||||
Loading…
Reference in New Issue