Skip to content

Commit 5042275

Browse files
basicBrogrammerbasicBrogrammer
committed
mostly done with the index
1 parent b1dbeb5 commit 5042275

File tree

12 files changed

+744
-73
lines changed

12 files changed

+744
-73
lines changed

‎assets/icons/iconmonstr-github-5.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/icons/iconmonstr-instagram-15.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/icons/iconmonstr-twitter-5.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎components/ArticleCard.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div class="p-3 border-2 rounded-lg border-primary">
3+
<h3 class="font-bold tracking-wider text-center color-secondary">
4+
{{ article.title }}
5+
</h3>
6+
<p class="py-1 my-2 font-medium border-t-2">
7+
{{ article.description }}
8+
</p>
9+
<ArticleTag v-for="tag in tags" :key="tag" :tag="tag" />
10+
</div>
11+
</template>
12+
13+
<script>
14+
import ArticleTag from '@/components/ArticleTag'
15+
16+
export default {
17+
components: { ArticleTag },
18+
props: {
19+
article: {
20+
type: Object,
21+
required: true,
22+
},
23+
},
24+
computed: {
25+
tags() {
26+
return this.article.tags.split(',').map((tag) => tag.trim())
27+
},
28+
},
29+
}
30+
</script>
31+
32+
<!-- <style scoped></style> -->

‎components/ArticleTag.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<span :class="tag">{{ tag }}</span>
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
tag: {
9+
type: String,
10+
required: true,
11+
},
12+
},
13+
}
14+
</script>
15+
16+
<style scoped>
17+
span {
18+
@apply p-1 m-1 border-2 rounded-lg border-current font-mono;
19+
}
20+
.react {
21+
color: #61dafb;
22+
background-color: #282c34;
23+
}
24+
.javascript {
25+
color: black;
26+
background-color: #fcdc00;
27+
}
28+
.redux {
29+
color: white;
30+
background-color: #764abc;
31+
border-color: black;
32+
}
33+
</style>

‎components/SideBar.vue‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<aside
3+
class="flex flex-col justify-between flex-none w-3/4 h-screen px-4 py-10 border-r-2 fixed md:relative md:w-1/4 border-secondary"
4+
>
5+
<ul class="flex flex-col items-center font-semibold tracking-wider">
6+
<li>
7+
<img
8+
class="w-20 h-20 border-2 border-double rounded-full border-primary"
9+
src="https://pbs.twimg.com/profile_images/1339914545616306176/RL3BryOf_400x400.jpg"
10+
alt="Jeremy Ward"
11+
/>
12+
</li>
13+
<li>
14+
<nuxt-link to="/about" @click="console.log('hey there')">
15+
/ReadMe
16+
</nuxt-link>
17+
</li>
18+
<li>
19+
<nuxt-link to="/"> /Blog </nuxt-link>
20+
</li>
21+
<!-- <li> -->
22+
<!-- <nuxt-link to="/portfolio"> /Works </nuxt-link> -->
23+
<!-- </li> -->
24+
<li v-for="social in socials" :key="social.id" class="md:hidden">
25+
<a :href="social.href" target="_blank">
26+
{{ social.text }}
27+
</a>
28+
</li>
29+
</ul>
30+
<div class="justify-around hidden md:flex">
31+
<a
32+
v-for="social in socials"
33+
:key="social.id"
34+
:href="social.href"
35+
target="_blank"
36+
>
37+
<SocialIcon :for="social.id" />
38+
</a>
39+
</div>
40+
</aside>
41+
</template>
42+
43+
<script>
44+
import SocialIcon from '@/components/SocialIcon'
45+
46+
export default {
47+
components: { SocialIcon },
48+
data() {
49+
return {
50+
socials: [
51+
{
52+
id: 'github',
53+
text: '/GitHub',
54+
href: 'https://github.com/basicbrogrammer',
55+
},
56+
{
57+
id: 'twitter',
58+
text: '/Twitter',
59+
href: 'https://twitter.com/basicbrogrammer',
60+
},
61+
{
62+
id: 'instagram',
63+
text: '/Instagram',
64+
href: 'https://instagram.com/basicbrogrammer',
65+
},
66+
],
67+
}
68+
},
69+
}
70+
</script>
71+
72+
<style scoped>
73+
li {
74+
margin: 0.5rem 0;
75+
}
76+
aside {
77+
background-color: #feecfb;
78+
}
79+
</style>

‎components/SocialIcon.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<svg
3+
class="h-16 fill-current color-primary"
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
>
7+
<path :d="svgPath" />
8+
</svg>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: {
14+
for: {
15+
type: String,
16+
required: true,
17+
},
18+
},
19+
computed: {
20+
svgPath() {
21+
switch (this.for) {
22+
case 'instagram':
23+
return 'M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 7.082c1.602 0 1.792.006 2.425.035 1.627.074 2.385.845 2.46 2.459.028.633.034.822.034 2.424s-.006 1.792-.034 2.424c-.075 1.613-.832 2.386-2.46 2.46-.633.028-.822.035-2.425.035-1.602 0-1.792-.006-2.424-.035-1.63-.075-2.385-.849-2.46-2.46-.028-.632-.035-.822-.035-2.424s.007-1.792.035-2.424c.074-1.615.832-2.386 2.46-2.46.632-.029.822-.034 2.424-.034zm0-1.082c-1.63 0-1.833.007-2.474.037-2.18.1-3.39 1.309-3.49 3.489-.029.641-.036.845-.036 2.474 0 1.63.007 1.834.036 2.474.1 2.179 1.31 3.39 3.49 3.49.641.029.844.036 2.474.036 1.63 0 1.834-.007 2.475-.036 2.176-.1 3.391-1.309 3.489-3.49.029-.64.036-.844.036-2.474 0-1.629-.007-1.833-.036-2.474-.098-2.177-1.309-3.39-3.489-3.489-.641-.03-.845-.037-2.475-.037zm0 2.919c-1.701 0-3.081 1.379-3.081 3.081s1.38 3.081 3.081 3.081 3.081-1.379 3.081-3.081c0-1.701-1.38-3.081-3.081-3.081zm0 5.081c-1.105 0-2-.895-2-2 0-1.104.895-2 2-2 1.104 0 2.001.895 2.001 2s-.897 2-2.001 2zm3.202-5.922c-.397 0-.72.322-.72.72 0 .397.322.72.72.72.398 0 .721-.322.721-.72 0-.398-.322-.72-.721-.72z'
24+
case 'twitter':
25+
return 'M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.5 8.778c-.441.196-.916.328-1.414.388.509-.305.898-.787 1.083-1.362-.476.282-1.003.487-1.564.597-.448-.479-1.089-.778-1.796-.778-1.59 0-2.758 1.483-2.399 3.023-2.045-.103-3.86-1.083-5.074-2.572-.645 1.106-.334 2.554.762 3.287-.403-.013-.782-.124-1.114-.308-.027 1.14.791 2.207 1.975 2.445-.346.094-.726.116-1.112.042.313.978 1.224 1.689 2.3 1.709-1.037.812-2.34 1.175-3.647 1.021 1.09.699 2.383 1.106 3.773 1.106 4.572 0 7.154-3.861 6.998-7.324.482-.346.899-.78 1.229-1.274z'
26+
case 'github':
27+
return 'M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 6c-3.313 0-6 2.686-6 6 0 2.651 1.719 4.9 4.104 5.693.3.056.396-.13.396-.289v-1.117c-1.669.363-2.017-.707-2.017-.707-.272-.693-.666-.878-.666-.878-.544-.373.041-.365.041-.365.603.042.92.619.92.619.535.917 1.403.652 1.746.499.054-.388.209-.652.381-.802-1.333-.152-2.733-.667-2.733-2.965 0-.655.234-1.19.618-1.61-.062-.153-.268-.764.058-1.59 0 0 .504-.161 1.65.615.479-.133.992-.199 1.502-.202.51.002 1.023.069 1.503.202 1.146-.776 1.648-.615 1.648-.615.327.826.121 1.437.06 1.588.385.42.617.955.617 1.61 0 2.305-1.404 2.812-2.74 2.96.216.186.412.551.412 1.111v1.646c0 .16.096.347.4.288 2.383-.793 4.1-3.041 4.1-5.691 0-3.314-2.687-6-6-6z'
28+
default:
29+
return ''
30+
}
31+
},
32+
},
33+
}
34+
</script>

‎components/TwitterIcon.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<svg
3+
class="h-16 fill-current text-red-100"
4+
xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 24 24"
6+
>
7+
<path
8+
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.5 8.778c-.441.196-.916.328-1.414.388.509-.305.898-.787 1.083-1.362-.476.282-1.003.487-1.564.597-.448-.479-1.089-.778-1.796-.778-1.59 0-2.758 1.483-2.399 3.023-2.045-.103-3.86-1.083-5.074-2.572-.645 1.106-.334 2.554.762 3.287-.403-.013-.782-.124-1.114-.308-.027 1.14.791 2.207 1.975 2.445-.346.094-.726.116-1.112.042.313.978 1.224 1.689 2.3 1.709-1.037.812-2.34 1.175-3.647 1.021 1.09.699 2.383 1.106 3.773 1.106 4.572 0 7.154-3.861 6.998-7.324.482-.346.899-.78 1.229-1.274z"
9+
/>
10+
</svg>
11+
</template>
12+
13+
<script>
14+
export default {}
15+
</script>

0 commit comments

Comments
 (0)