Skip to content

Commit 01731cc

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#17 from NangialaiStoman/components-bps
Best Practices Applied
2 parents 7ef9ef8 + 509a9f6 commit 01731cc

26 files changed

+803
-737
lines changed

‎README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,12 @@ A simple portfolio starter theme built with Vue.js v3 and TailwindCSS v2. This i
2828

2929
1. ##### Make sure you have Node JS installed. If you don't have it:
3030

31+
- [Download it from nodejs.org](https://nodejs.org)
32+
- [Install it using NVM ](https://github.com/nvm-sh/nvm)
33+
- If you're on Mac, install it with Homebrew:
34+
3135
```
32-
npm install -g npm
36+
brew install node
3337
```
3438

3539
2. ##### Clone the repo:

‎src/App.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div :class="appTheme" class="pt-0.5">
33
<!-- App header -->
4-
<Header></Header>
4+
<AppHeader />
55

66
<!-- Render active component contents with transition -->
77
<transition name="fade" mode="out-in">
@@ -18,19 +18,19 @@
1818
</back-to-top>
1919

2020
<!-- App footer -->
21-
<Footer></Footer>
21+
<AppFooter />
2222
</div>
2323
</template>
2424

2525
<script>
2626
import feather from 'feather-icons';
27-
import Header from './components/shared/Header';
28-
import Footer from './components/shared/Footer';
27+
import AppHeader from './components/AppHeader';
28+
import AppFooter from './components/AppFooter';
2929
3030
export default {
3131
components: {
32-
Header,
33-
Footer,
32+
AppHeader,
33+
AppFooter,
3434
},
3535
data: () => {
3636
return {

‎src/components/AboutClientSingle.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div>
3+
<img
4+
:src="client.img"
5+
:alt="client.title"
6+
class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
7+
/>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: ['client'],
14+
};
15+
</script>
16+
17+
<style lang="scss" scoped></style>

‎src/components/AboutClients.vue

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<div class="mt-10 sm:mt-20">
3+
<p
4+
class="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold"
5+
>
6+
{{ clientsHeading }}
7+
</p>
8+
<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
9+
<AboutClientSingle
10+
v-for="client in clients"
11+
:key="client.id"
12+
:client="client"
13+
/>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script>
19+
import AboutClientSingle from './AboutClientSingle.vue';
20+
21+
export default {
22+
components: {
23+
AboutClientSingle,
24+
},
25+
data: () => {
26+
return {
27+
clientsHeading: 'Some of the brands I worked with',
28+
clients: [
29+
{
30+
id: 1,
31+
title: 'Amazon',
32+
img: require('@/assets/images/brands/amazon_gray.png'),
33+
},
34+
{
35+
id: 2,
36+
title: 'Sony',
37+
img: require('@/assets/images/brands/sony_gray.png'),
38+
},
39+
{
40+
id: 3,
41+
title: 'Adidas',
42+
img: require('@/assets/images/brands/adidas_gray.png'),
43+
},
44+
{
45+
id: 4,
46+
title: 'FILA',
47+
img: require('@/assets/images/brands/fila_gray.png'),
48+
},
49+
{
50+
id: 5,
51+
title: 'NB',
52+
img: require('@/assets/images/brands/nb_gray.png'),
53+
},
54+
{
55+
id: 6,
56+
title: 'SAMSUNG',
57+
img: require('@/assets/images/brands/samsung_gray.png'),
58+
},
59+
{
60+
id: 7,
61+
title: 'CANON',
62+
img: require('@/assets/images/brands/canon_gray.png'),
63+
},
64+
{
65+
id: 7,
66+
title: 'PUMA',
67+
img: require('@/assets/images/brands/puma_gray.png'),
68+
},
69+
],
70+
};
71+
},
72+
};
73+
</script>

‎src/components/about/AboutCounter.vue renamed to ‎src/components/AboutCounter.vue

File renamed without changes.

‎src/components/about/AboutMe.vue renamed to ‎src/components/AboutMe.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<!-- About me portfolio image start -->
44
<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
55
<img
6-
src="../../assets/images/profile.jpeg"
6+
src="@/assets/images/profile.jpeg"
77
class="rounded-xl w-96"
88
alt=""
99
/>

‎src/components/home/Banner.vue renamed to ‎src/components/AppBanner.vue

File renamed without changes.

‎src/components/shared/Footer.vue renamed to ‎src/components/AppFooter.vue

File renamed without changes.

‎src/components/shared/Header.vue renamed to ‎src/components/AppHeader.vue

Lines changed: 11 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
<router-link to="/"
1212
><img
1313
v-if="theme === 'light'"
14-
src="../../assets/images/logo-dark.svg"
14+
src="@/assets/images/logo-dark.svg"
1515
class="w-36"
1616
alt="Dark Logo"
1717
/>
1818
<img
1919
v-else
20-
src="../../assets/images/logo-light.svg"
20+
src="@/assets/images/logo-light.svg"
2121
class="w-36"
2222
alt="Light Logo"
2323
/>
@@ -130,136 +130,25 @@
130130
<!-- Header end -->
131131

132132
<!-- Hire me modal start -->
133-
<transition name="fade">
134-
<div v-show="modal" class="fixed inset-0 z-30">
135-
<!-- background -->
136-
<div
137-
v-show="modal"
138-
@click="showModal()"
139-
class="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"
140-
></div>
141-
<!-- -->
142-
<main
143-
class="flex flex-col items-center justify-center h-full w-full"
144-
>
145-
<transition name="fade-up-down">
146-
<div
147-
v-show="modal"
148-
class="modal-wrapper flex items-center z-30"
149-
>
150-
<div
151-
class="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-xl relative"
152-
>
153-
<div
154-
class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
155-
>
156-
<h5
157-
class=" text-primary-dark dark:text-primary-light text-2xl"
158-
>
159-
What project are you looking for?
160-
</h5>
161-
<button
162-
class="px-4 font-bold text-primary-dark dark:text-primary-light"
163-
@click="showModal()"
164-
>
165-
X
166-
</button>
167-
</div>
168-
<div
169-
class="modal-body p-5 w-full h-full overflow-y-auto "
170-
>
171-
<form class="max-w-xl m-4 text-left">
172-
<div class="">
173-
<input
174-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
175-
id="name"
176-
name="name"
177-
type="text"
178-
required=""
179-
placeholder="Name"
180-
aria-label="Name"
181-
/>
182-
</div>
183-
<div class="mt-6">
184-
<input
185-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
186-
id="email"
187-
name="email"
188-
type="text"
189-
required=""
190-
placeholder="Email"
191-
aria-label="Email"
192-
/>
193-
</div>
194-
<div class="mt-6">
195-
<select
196-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
197-
id="subject"
198-
name="subject"
199-
type="text"
200-
required=""
201-
aria-label="Project Category"
202-
>
203-
<option
204-
v-for="category in categories"
205-
:key="category.id"
206-
:value="category.value"
207-
>{{ category.name }}</option
208-
>
209-
</select>
210-
</div>
211-
212-
<div class="mt-6">
213-
<textarea
214-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
215-
id="message"
216-
name="message"
217-
cols="14"
218-
rows="6"
219-
aria-label="Details"
220-
placeholder="Project description"
221-
></textarea>
222-
</div>
223-
224-
<div class="mt-6">
225-
<button
226-
class="px-6 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-1 focus:ring-indigo-900"
227-
type="submit"
228-
aria-label="Submit Request"
229-
>
230-
Send Request
231-
</button>
232-
</div>
233-
</form>
234-
</div>
235-
<div
236-
class="modal-footer py-3 px-5 border0-t text-right"
237-
>
238-
<button
239-
class="px-6 py-2 bg-indigo-400 hover:bg-indigo-500 rounded-lg font-bold text-primary-light focus:ring-1 focus:ring-indigo-900"
240-
@click="showModal()"
241-
aria-label="Close Modal"
242-
>
243-
Close
244-
</button>
245-
</div>
246-
</div>
247-
</div>
248-
</transition>
249-
</main>
250-
</div>
251-
</transition>
133+
<HireMeModal
134+
:showModal="showModal"
135+
:modal="modal"
136+
:categories="categories"
137+
aria-modal="Hire Me Modal"
138+
/>
252139
<!-- Hire me modal end -->
253140
</nav>
254141
</template>
255142

256143
<script>
257-
import ThemeSwitcher from '../ThemeSwitcher';
144+
import ThemeSwitcher from './ThemeSwitcher';
145+
import HireMeModal from './HireMeModal.vue';
258146
import feather from 'feather-icons';
259147
260148
export default {
261149
components: {
262150
ThemeSwitcher,
151+
HireMeModal,
263152
},
264153
data() {
265154
return {
@@ -329,43 +218,4 @@ export default {
329218
@apply dark:text-indigo-400;
330219
@apply font-medium;
331220
}
332-
333-
.modal-body {
334-
max-height: 500px;
335-
}
336-
.bg-gray-800-opacity {
337-
background-color: #2d374850;
338-
}
339-
@media screen and (max-width: 768px) {
340-
.modal-body {
341-
max-height: 400px;
342-
}
343-
}
344-
.fade-up-down-enter-active {
345-
transition: all 0.3s ease;
346-
}
347-
.fade-up-down-leave-active {
348-
transition: all 0.3s ease;
349-
}
350-
.fade-up-down-enter {
351-
transform: translateY(10%);
352-
opacity: 0;
353-
}
354-
.fade-up-down-leave-to {
355-
transform: translateY(10%);
356-
opacity: 0;
357-
}
358-
359-
.fade-enter-active {
360-
-webkit-transition: opacity 2s;
361-
transition: opacity 0.3s;
362-
}
363-
.fade-leave-active {
364-
transition: opacity 0.3s;
365-
}
366-
367-
.fade-enter,
368-
.fade-leave-to {
369-
opacity: 0;
370-
}
371221
</style>

‎src/components/ContactDetails.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="w-full sm:w-1/2">
3+
<div class="text-left max-w-xl px-6">
4+
<h2
5+
class="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8"
6+
>
7+
Contact details
8+
</h2>
9+
<ul class="">
10+
<li class="flex" v-for="contact in contacts" :key="contact.id">
11+
<i
12+
:data-feather="contact.icon"
13+
class="w-5 text-gray-500 dark:text-gray-400 mr-4"
14+
></i>
15+
<a
16+
href="#"
17+
class="text-lg mb-4 text-ternary-dark dark:text-ternary-light"
18+
:class="
19+
contact.icon === 'mail' || contact.icon === 'phone'
20+
? 'hover:underline cursor-pointer'
21+
: ''
22+
"
23+
aria-label="Website and Phone"
24+
>
25+
{{ contact.name }}
26+
</a>
27+
</li>
28+
</ul>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
props: ['contacts'],
36+
};
37+
</script>
38+
39+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)