diff --git a/assets/design_graphic.svg b/assets/design_graphic.svg
new file mode 100644
index 0000000..5dad643
--- /dev/null
+++ b/assets/design_graphic.svg
@@ -0,0 +1,89 @@
+
+
diff --git a/assets/manifest.json b/assets/manifest.json
index 77f03db..1c094db 100644
--- a/assets/manifest.json
+++ b/assets/manifest.json
@@ -2,20 +2,23 @@
"short_name": "Fall Project",
"icons": [
{
- "src": "assets/48x48.png",
+ "src": "48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
- "src": "assets/96x96.png",
+ "src": "96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
- "src": "assets/192x192.png",
+ "src": "192x192.png",
"type": "image/png",
"sizes": "192x192"
}
],
- "start_url": "/"
+ "start_url": "/",
+ "display": "standalone",
+ "background_color": "#2d9cdb",
+ "theme_color": "#69b6e4"
}
\ No newline at end of file
diff --git a/assets/undraw-designer.svg b/assets/undraw-designer.svg
new file mode 100644
index 0000000..9b4339f
--- /dev/null
+++ b/assets/undraw-designer.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/undraw-pen.svg b/assets/undraw-pen.svg
new file mode 100644
index 0000000..2a85d01
--- /dev/null
+++ b/assets/undraw-pen.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/undraw-responsive.svg b/assets/undraw-responsive.svg
new file mode 100644
index 0000000..28bceec
--- /dev/null
+++ b/assets/undraw-responsive.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/undraw_coding.svg b/assets/undraw_coding.svg
new file mode 100644
index 0000000..173dd0b
--- /dev/null
+++ b/assets/undraw_coding.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/undraw_design.svg b/assets/undraw_design.svg
new file mode 100644
index 0000000..6622ed7
--- /dev/null
+++ b/assets/undraw_design.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/comp.sass b/comp.sass
index 94e5b53..0ad050c 100644
--- a/comp.sass
+++ b/comp.sass
@@ -9,15 +9,25 @@ html, body, main
top: 0
font-family: 'Rubik'
-.projects
+.grid
padding: 20px
display: grid
+ grid-template-areas: 320px 180px
grid-template-columns: repeat(auto-fit, 320px)
grid-gap: 20px
- grid-auto-rows: 180px
justify-content: center
background-color: #efefef
+.projects, .services
+ display: grid
+ grid-gap: 20px
+ justify-content: center
+
+.services
+ grid-template-rows: 320px
+ grid-template-columns: repeat(auto-fit, 320px)
+ overflow-x: scroll
+
header
height: 45%
color: white
@@ -48,6 +58,9 @@ header>div
background-size: cover
color: black
+.cardSquare
+ height: 320px
+
.cardTitle
margin: 0
font-family: 'Rubik'
@@ -137,7 +150,7 @@ header>div
clear: both
float: none
display: grid
- grid-auto-rows: 50px
+ grid-template-rows: repeat(auto-fill,50px)
grid-template-columns: 100%
justify-content: center
background-color: white
diff --git a/components/app.vue b/components/app.vue
index c6fe7f0..79a9e15 100644
--- a/components/app.vue
+++ b/components/app.vue
@@ -23,16 +23,21 @@
-
+
@@ -45,12 +50,30 @@
vData: Object
},
methods: {
- revert: function() { this.showMenu = !this.showMenu; }
+ revert() {this.showMenu = !this.showMenu;}
},
data: function() {
return {
- showMenu: true,
- innerWidth: window.innerWidth
+ showMenu: true,
+ innerWidth: window.innerWidth,
+ services: [
+ {
+ title: "Design",
+ text: "Branding, Mobile, and Web Design",
+ links: [],
+ background: 'assets/design_graphic.svg',
+ square: true,
+ weight: 'bold'
+ },
+ {
+ title: "Coding",
+ text: "Web and Backend",
+ links: [],
+ background: 'assets/undraw_coding.svg',
+ square: true,
+ weight: 'bold'
+ }
+ ]
}
},
created() {
@@ -58,7 +81,7 @@
},
components: { card },
watch: {
- innerWidth: () => {menu()}
+ innerWidth: () => {this.showMenu = menu()}
}
}
diff --git a/components/card.vue b/components/card.vue
index 37190f6..5832d3b 100644
--- a/components/card.vue
+++ b/components/card.vue
@@ -1,5 +1,5 @@
-