Skip to content

Commit 7416a61

Browse files
kabbagepatchkabbagepatch
committed
Restyled website
1 parent 45f08ff commit 7416a61

File tree

16 files changed

+286
-108
lines changed

16 files changed

+286
-108
lines changed

‎src/App.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22
<div
33
id="app"
44
v-bind:class="{
5-
greyGradient: $route.name === 'Home',
5+
pinkGradient: $route.name === 'Home',
66
blueGradient: $route.name === 'Books',
7-
brownGradient: $route.name === 'Work' || $route.name === 'AoC',
7+
greenGradient: $route.name === 'Projects' || $route.name === 'AoC',
88
}"
99
>
1010
<Header
1111
id="header"
1212
:tabs="tabs"
1313
/>
14+
<hr :style="{ margin: '0px' }"/>
1415
<transition name="fade" mode="out-in">
1516
<router-view
1617
:apiKey="this.apiKey"
@@ -20,7 +21,7 @@
2021
<footer
2122
v-bind:class="{
2223
bluefooter: $route.name === 'Books',
23-
brownfooter: $route.name === 'Work',
24+
brownfooter: $route.name === 'Projects',
2425
brownfooter: $route.name === 'AoC',
2526
}"
2627
>
@@ -41,7 +42,7 @@ export default {
4142
name: 'app',
4243
data() {
4344
return {
44-
tabs: ['Books', 'Work'],
45+
tabs: ['Books', 'Projects'],
4546
apiKey: 'AIzaSyBj6pwMyPi8NVKBybSPJ3WWwGfx3__Nr4I',
4647
};
4748
},
@@ -59,23 +60,22 @@ export default {
5960
6061
#app {
6162
min-height: 90vh;
62-
min-width: 500px;
6363
-webkit-font-smoothing: antialiased;
6464
-moz-osx-font-smoothing: grayscale;
6565
color: hsl(335, 99%, 68%);
66-
padding: 0 2% 2% 2%;
66+
padding-bottom: 2%;
6767
}
6868
69-
.greyGradient {
70-
background: linear-gradient(to bottom right, hsl(0, 5%, 33%) 20%, hsl(292, 38%, 92%));
69+
.pinkGradient {
70+
background: linear-gradient(to bottom right, hsl(355, 35%, 78%) 10%, hsl(355, 55%, 94%));
7171
}
7272
7373
.blueGradient {
7474
background: linear-gradient(to bottom right, hsl(212, 51%, 31%) 10%, hsl(204, 36%, 47%));
7575
}
7676
77-
.brownGradient {
78-
background: linear-gradient(to top right, hsl(11, 84%, 7%) 50%, hsl(37, 22%, 51%));
77+
.greenGradient {
78+
background: linear-gradient(to top right, hsl(101, 38%, 79%) 50%, hsl(101, 78%, 79%));
7979
}
8080
8181
.fade-enter-active,
@@ -90,8 +90,8 @@ export default {
9090
9191
footer {
9292
text-align: center;
93-
padding: 10px 0 40px 0;
94-
min-width: 500px;
93+
padding: 10px 0 50px 0;
94+
width: 100%;
9595
height: 70px;
9696
background: hsla(292, 38%, 92%, 50%);
9797
color: hsl(331, 86%, 75%);

‎src/components/Books/Book.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default {
6969
position: absolute;
7070
top: 0;
7171
left: 0;
72-
background: rgba(0, 0, 0, 0.7);
72+
background: hsla(0, 0%, 0%, 0.7);
7373
color: white;
7474
display: flex;
7575
justify-content: center;

‎src/components/Books/BookSection.vue‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,15 +72,15 @@ export default {
7272
transition: background 0.5s ease-in-out;
7373
display: flex;
7474
justify-content: space-between;
75-
background-color: hsl(212, 51%, 31%);
76-
background-image: -webkit-linear-gradient(45deg, hsl(212, 51%, 31%) 50%, hsl(204, 39%, 35%) 50%);
75+
background-color: hsl(209, 50%, 54%);
76+
background-image: -webkit-linear-gradient(45deg, hsl(209, 70%, 40%) 50%, hsl(209, 84%, 49%) 50%);
7777
}
7878
7979
.book-section-header:hover {
8080
cursor: pointer;
8181
transition: background 0.5s ease-in-out;
82-
background-color: hsl(212, 51%, 41%);
83-
background-image: -webkit-linear-gradient(45deg, hsl(212, 51%, 36%) 50%, hsl(204, 39%, 40%) 50%);
82+
background-color: hsl(209, 50%, 57%);
83+
background-image: -webkit-linear-gradient(45deg, hsl(209, 70%, 44%) 50%, hsl(209, 84%, 52%) 50%);
8484
}
8585
8686
.book {
@@ -94,6 +94,7 @@ export default {
9494
}
9595
9696
p {
97+
padding: 0 5%;
9798
margin-bottom: -5px;
9899
color: hsl(212, 51%, 31%);
99100
}
@@ -129,4 +130,11 @@ export default {
129130
height: 0;
130131
}
131132
}
133+
134+
@media screen and (max-width: 450px) {
135+
.book {
136+
width: 45%;
137+
margin: 2.5%;
138+
}
139+
}
132140
</style>

‎src/components/Button.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ export default {
4949
background: transparent;
5050
font-size: var(--font-size);
5151
outline: transparent;
52-
letter-spacing: 2px;
5352
position: relative;
5453
font-weight: 700;
5554
border: 0;

‎src/components/Header.vue‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<template>
2-
<div class="header">
2+
<div class="header" v-bind:class="{
3+
pinkGradient: $route.name === 'Home',
4+
blueGradient: $route.name === 'Books',
5+
greenGradient: $route.name === 'Projects' || $route.name === 'AoC',
6+
}">
37
<h1 id="title">
48
<router-link :to="'/'">
59
Kavish
@@ -37,7 +41,21 @@ export default {
3741

3842
<style scoped>
3943
.header {
44+
padding: 0 2%;
4045
padding-bottom: 20px;
46+
background: hsl(291, 37%, 25%);
47+
}
48+
49+
.pinkGradient {
50+
background: linear-gradient(to bottom right, hsl(355, 35%, 28%) 10%, hsl(355, 51%, 48%));
51+
}
52+
53+
.blueGradient {
54+
background: linear-gradient(to bottom right, hsl(212, 51%, 11%) 10%, hsl(204, 36%, 31%));
55+
}
56+
57+
.greenGradient {
58+
background: linear-gradient(to top right, hsl(101, 38%, 29%) 50%, hsl(101, 78%, 39%));
4159
}
4260
4361
#title {
@@ -90,7 +108,7 @@ ul, ol {
90108
text-decoration: none;
91109
display: inline-block;
92110
padding: 5px 0;
93-
height: 40px;
111+
height: 55px;
94112
-webkit-border-radius: 10px;
95113
-moz-border-radius: 10px;
96114
border-radius: 10px;
@@ -101,11 +119,25 @@ ul, ol {
101119
}
102120
103121
#main-menu li a.selected {
104-
color: rgb(220, 208, 255);
122+
color: hsl(255, 100%, 91%);
105123
}
106124
107125
#main-menu li a:hover {
108126
cursor: pointer;
109127
}
110128
129+
@media screen and (max-width: 450px) {
130+
.header {
131+
padding-bottom: 30px;
132+
}
133+
134+
#title {
135+
font-size: 2em;
136+
}
137+
138+
#main-menu li a {
139+
padding: 0;
140+
}
141+
}
142+
111143
</style>

‎src/components/HomeCanvas/HomeCanvas.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,9 @@ export default {
165165
</script>
166166

167167
<style>
168+
#my-canvas {
169+
width: 100%;
170+
}
168171
#subtext {
169172
margin-top: -15px;
170173
color: hsl(300, 64%, 8%);

‎src/components/Projects/RepoInfo.vue‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<template>
2+
<transition enter-active-class="bloom-in">
3+
<div class="repo-card" v-if="Object.keys(this.repo).length > 0">
4+
<a :href='this.repo.clone_url' target="_blank">
5+
<div class="card-background">
6+
<div class="repo-content">
7+
<div class="repo-header">
8+
<div class="repo-title">{{this.repo.name}}</div>
9+
</div>
10+
<div class="repo-description">{{this.repo.description}}</div>
11+
</div>
12+
</div>
13+
</a>
14+
</div>
15+
</transition>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: 'Repo',
21+
props: {
22+
repo: {
23+
type: Object,
24+
default: () => ({}),
25+
},
26+
},
27+
};
28+
</script>
29+
30+
<style scoped>
31+
.repo-card {
32+
margin: 16px 0;
33+
position: relative;
34+
}
35+
36+
.repo-card a {
37+
text-decoration: none;
38+
}
39+
40+
.card-background {
41+
background: linear-gradient(135deg, hsl(0, 78%, 98%) 0%, hsl(300, 36%, 96%) 50%, hsl(120, 36%, 96%) 100%);
42+
border: 2px solid hsl(355, 53%, 81%);
43+
border-radius: 20px;
44+
padding: 20px;
45+
position: relative;
46+
box-shadow:
47+
0 8px 25px hsla(355, 53%, 81%, 0.3),
48+
0 4px 10px hsla(351, 100%, 86%, 0.2);
49+
transition: all 0.3s ease;
50+
overflow: hidden;
51+
}
52+
53+
.card-background::before {
54+
content: '';
55+
position: absolute;
56+
top: -50%;
57+
left: -50%;
58+
width: 200%;
59+
height: 200%;
60+
background: radial-gradient(circle, hsla(351, 100%, 86%, 0.1) 0%, transparent 70%);
61+
animation: gentle-float 6s ease-in-out infinite;
62+
z-index: 0;
63+
}
64+
65+
.card-background:hover {
66+
transform: translateY(-5px) scale(1.02);
67+
box-shadow:
68+
0 15px 35px hsla(355, 53%, 81%, 0.4),
69+
0 8px 15px hsla(351, 100%, 86%, 0.3);
70+
border-color: hsl(355, 35%, 74%);
71+
cursor: pointer;
72+
}
73+
74+
.repo-content {
75+
position: relative;
76+
z-index: 2;
77+
}
78+
79+
.repo-header {
80+
display: flex;
81+
align-items: center;
82+
margin-bottom: 12px;
83+
gap: 12px;
84+
}
85+
86+
.repo-title {
87+
flex: 1;
88+
color: hsl(330, 31%, 42%);
89+
text-decoration: none;
90+
font-weight: 600;
91+
font-size: 18px;
92+
font-family: 'Georgia', serif;
93+
transition: all 0.3s ease;
94+
position: relative;
95+
}
96+
97+
.repo-title:hover {
98+
color: hsl(332, 43%, 83%);
99+
text-shadow: 0 2px 4px hsla(330, 31%, 42%, 0.2);
100+
}
101+
102+
.repo-title::after {
103+
content: '✨';
104+
margin-left: 8px;
105+
opacity: 0;
106+
transition: opacity 0.3s ease;
107+
}
108+
109+
.repo-title:hover::after {
110+
opacity: 1;
111+
}
112+
113+
.repo-description {
114+
color: hsl(280, 12%, 40%);
115+
font-size: 15px;
116+
line-height: 1.5;
117+
margin-bottom: 12px;
118+
padding-left: 44px;
119+
font-family: 'Georgia', serif;
120+
}
121+
122+
.bloom-in {
123+
animation: bloom-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
124+
}
125+
126+
@keyframes bloom-in {
127+
0% {
128+
opacity: 0;
129+
transform: scale(0.8) rotate(-2deg);
130+
}
131+
50% {
132+
transform: scale(1.05) rotate(1deg);
133+
}
134+
100% {
135+
opacity: 1;
136+
transform: scale(1) rotate(0deg);
137+
}
138+
}
139+
140+
@keyframes gentle-float {
141+
0%, 100% {
142+
transform: translateY(0px) rotate(0deg);
143+
}
144+
50% {
145+
transform: translateY(-10px) rotate(180deg);
146+
}
147+
}
148+
149+
@media (max-width: 768px) {
150+
.card-background {
151+
padding: 16px;
152+
margin: 0 5px;
153+
}
154+
155+
.repo-header {
156+
flex-direction: column;
157+
align-items: flex-start;
158+
gap: 8px;
159+
}
160+
161+
.repo-description {
162+
padding-left: 0;
163+
}
164+
165+
.floral-decoration {
166+
top: 8px;
167+
right: 12px;
168+
}
169+
}
170+
</style>

0 commit comments

Comments
 (0)