single-file-prototype/prototype.html at main · RobStino/single-file-prototype · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Single File Prototype</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body id="prototype">
		<div class="flex flex-col items-center justify-center w-screen h-screen p-6 bg-gradient-to-r from-indigo-900 to-violet-900">
			<div class="flex flex-col items-center text-indigo-50 md:flex-row">
				<img class="w-20 h-20 overflow-hidden rounded-lg grayscale" src="https://pbs.twimg.com/profile_images/1449934029432635395/g713SnCo_400x400.jpg" alt="">
				<div class="flex flex-col mt-4 md:ml-4 md:mt-0">
					<span class="mt-1 font-serif text-2xl italic text-center md:text-left">{{ quote }}</span>
					<span class="mt-2 text-center opacity-75 md:ml-2 md:text-left md:mt-0">{{ name }}</span>
					<!-- <span class="w-2 h-2 mt-2 rotate-45 bg-indigo-600 border border-indigo-400 rounded-sm"></span> -->
				</div>
			</div>
			<div class="flex flex-col flex-wrap items-center mt-12 sm:flex-row sm:space-x-4">
				<a
					v-for="link in links"
					:key="link.name"
					:href="link.url"
					target="_blank"
					class="font-light underline text-indigo-50 decoration-indigo-600 underline-offset-1 hover:decoration-indigo-400 hover:text-white">
					{{ link.name }}
				</a>
			</div>
		</div>
	</body>
</html>

<script>
	const app = Vue.createApp({
	data() {
		return {
			quote: '"G\'day! Welcome to the single file prototype."',
			name: 'Rob Stinson',
			links: [
				{
					name: "About",
					url: 'https://robstinson.co/single-file-prototype'
				},
				{
					name: "Codepen",
					url: 'https://codepen.io/robstinson'
				},
				{
					name: "Twitter",
					url: 'https://twitter.com/rob_stino'
				},
				{
					name: "Website",
					url: 'https://robstinson.co'
				}
			]
		}
	},
	methods: {
		openDetailsModal() {
				this.detailsModal = true
			}
		},
	})
	app.mount('#prototype')
</script>