-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
231 lines (230 loc) · 11.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html>
<head>
<title>Portfolio | Rian Provesano Reis</title>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app" >
<v-app light>
<v-content class="grey lighten-3">
<v-parallax src="https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/drop.jpg" height="165" style="filter: blur(20) opacity(.3);">
<v-layout column align-center justify-center>
<h1 class="white--text">EGC5009 - Geração de Idéias e Criatividade</h1>
<h4 class="white--text">Portfolio da Disciplina</h4>
</v-layout>
</v-parallax>
<v-container>
<v-layout row wrap align-center>
<v-layout row justify-center>
<v-dialog v-model="anyPostSelected" fullscreen hide-overlay transition="dialog-bottom-transition">
<v-card>
<v-toolbar dark color="primary">
<v-btn icon dark @click.native="anyPostSelected = false">
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>{{ this.selectedPost.title }}</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-carousel cycle interval="3000">
<v-carousel-item v-for="(item,i) in selectedPost.pics" :src="item.src" :key="i">
</v-carousel-item>
</v-carousel>
<v-list three-line subheader>
<v-subheader>Resumo</v-subheader>
<v-list-tile avatar>
<v-list-tile-content>
<v-list-tile-title>Descrição</v-list-tile-title>
<v-list-tile-sub-title>{{ selectedPost.desc }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile avatar>
<v-list-tile-content>
<v-list-tile-title>Resultado para o Discente</v-list-tile-title>
<v-list-tile-sub-title>{{ selectedPost.outcome }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
</v-card>
</v-dialog>
</v-layout>
<!-- Dialog End -->
<!-- Left Start -->
<v-flex xs12 md5>
<div class="text-xs-center">
<v-card class="my-3" hover>
<v-card-media
class="white--text"
height="400px"
src="https://secure.gravatar.com/avatar/8b15c30f451ceedfcafa7c9a9d1687f5?s=512"
>
<v-container fill-height fluid>
<v-layout>
<v-flex xs12 d-flex>
<span class="headline"></span>
</v-flex>
</v-layout>
</v-container>
</v-card-media>
<v-card-title primary-title>
<div>
<v-subheader>Testemunho</v-subheader>
<h5>
{{ author.testimony }}
</h5>
</div>
</v-card-title>
<v-card-text>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn href="https://github.com/JustLey/" icon class="black--text">
<v-icon medium>fa-github</v-icon>
</v-btn>
<v-btn href="https://www.linkedin.com/in/rian-provesano-reis-431a9932/" icon class="light-blue--text">
<v-icon medium>fa-linkedin</v-icon>
</v-btn>
<v-btn href="https://www.facebook.com/rian.provesanoreis" icon class="blue--text text--darken-4">
<v-icon medium>fa-facebook</v-icon>
</v-btn>
</v-card-actions>
</v-card>
<!--
<v-avatar size="125px">
<img
class="img-circle elevation-7 mb-1"
src="https://secure.gravatar.com/avatar/8b15c30f451ceedfcafa7c9a9d1687f5?s=128"
>
</v-avatar>
<div class="headline">{{ author.name }}</div>
<div class="subheading text-xs-center grey--text pt-1 pb-3">{{ author.desc }}
</div>
<v-layout justify-space-between>
<v-btn icon class="black--text">
<v-icon medium>fa-github</v-icon>
</v-btn>
<v-btn icon class="light-blue--text">
<v-icon medium>fa-linkedin</v-icon>
</v-btn>
<v-btn icon class="blue--text text--darken-4">
<v-icon medium>fa-facebook</v-icon>
</v-btn>
</v-layout>-->
</div>
</v-flex>
<v-flex xs12 md5 offset-md2>
<div v-for="(post, index) in posts" :key="post.title">
<v-card class="my-3" hover>
<v-card-media
class="white--text"
height="170px"
:src="post.imgUrl"
>
<v-container fill-height fluid>
<v-layout>
<v-flex xs12 d-flex>
<span class="headline">{{ post.title }}</span>
</v-flex>
</v-layout>
</v-container>
</v-card-media>
<v-card-text>
{{ post.brief }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click.native="selectPost(index)" flat class="blue--text">Sobre</v-btn>
</v-card-actions>
</v-card>
</div>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer class="secondary" app>
<v-layout row wrap align-center>
<v-flex xs12>
<div class="white--text ml-3">
Desenvolvido com
<v-icon class="red--text">favorite</v-icon>
por {{ author.name }} utilizando <a class="white--text" href="https://vuejs.org" target="_blank">Vue</a>
e <a class="white--text" href="https://vuetifyjs.com" target="_blank">Vuetify</a>
</div>
</v-flex>
</v-layout>
</v-footer>
</v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src="https://use.fontawesome.com/73c8e2621d.js"></script>
<script>
new Vue({
el: '#app',
data () {
return {
anyPostSelected: false,
selectedPost: { pics: [{ src: ''}] },
author: {
name: "Rian Provesano Reis",
desc: "Graduando em Sistemas de Informação",
testimony: "A participação na disciplina foi de grande valia para o graduando. Apesar de conhecer diversas das técnicas e conceitos apresentados, ter a oportunidade de aplicá-los novamente é interessante. Além disso, as técnicas desconhecidas se mostraram importantes para a vida tanto acadêmica quanto profissional do aluno."
},
posts: [
{
title: 'Torre de Macarrão',
brief: 'Dinâmica realizada em grupo com foco no estudo em After Action Review',
desc: 'A dinâmica propunha o agrupamento de alunos para a construção de uma torre de macarrão contendo um MarshMallow em sua extremidade mais alta. A proposta era realizar um planejamento inicial com relação as ações a serem tomadas para realizar a tarefa (construção, divisão de tarefas, planejamento estrutural para alcance da maior altura, estabilidade, etc) e uma posterior revisão de tal planejamento com a finalidade de verificar o alcance dos objetivos e aprender lições sobre os objetivos não alcançados (técnica AAR - After Action Review).',
imgUrl: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/torre1.jpg',
outcome: 'A aplicação e aprendizagem sobre a técnica AAR foram de extrema utilidade. O grupo do qual fiz parte cumpriu o objetivo, apesar de não ter montado a torre mais alta :(',
pics: [
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/torre1.jpg' },
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/torre2.jpg' },
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/torre3.jpg' }
]
},
{
title: 'Seminários de Técnicas Criativas',
brief: 'Sequência de seminários sobre diversas técnicas de criatividade',
desc: 'As apresentações de técnicas de criativas constituiram-se de seminários realizados em conjunto com dinâmicas, envolvendo tanto teoria quanto prática. Os temas abordados foram diversos, desde espírito criativo a técnicas aplicadas como SCMAPER',
imgUrl: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/semi1.png',
outcome: 'Os seminários cobriram tanto tópicos conhecidos como desconhecidos para mim, porém o fato de haver dinâmica garantiu a validade da abordagem de ensino, tanto para aprendizado de técnicas novas quanto para fixação das conhecidas anteriormente',
pics: [
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/semi1.png' },
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/semi2.jpg' },
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/semi3.jpg' }
]
},
{
title: 'Elaboração de Pitch de Produto',
brief: 'Desenvolvimento de idéia e produto através de storytelling, BMC e modelagem de negócio',
desc: 'A abordagem sobre o tema constituiu-se de duas etapas: explicação e fundamento teórico sobre desenvolvimento de pitch de produto e desenvolvimento em grupo de produto para pitch',
imgUrl: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/pitch1.png',
outcome: 'Apesar de conhecer a técnica e já ter elaborado pitches, é uma atividade que me agrada e portanto foi interessante ter a oportunidade de criar mais um partindo de uma nova idéia.',
pics: [
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/pitch1.png' },
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/pitch2.png' },
{ src: 'https://raw.githubusercontent.com/JustLey/justley.github.io/master/assets/pitch3.png' }
]
}
]
}
},
methods: {
selectPost: function(post) {
console.log(post);
this.anyPostSelected = true;
this.selectedPost = this.posts[post];
},
closeDialog: function() {
this.selectedPost = {};
}
}
})
</script>
</body>
</html>