Skip to content

Commit 9084be7

Browse files
realstomanrealstoman
committed
App js app css pages and other files refactoring
1 parent 7919169 commit 9084be7

File tree

9 files changed

+97
-95
lines changed

9 files changed

+97
-95
lines changed

‎src/App.vue

+25-25
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,3 @@
1-
<template>
2-
<div :class="appTheme" class="pt-0.5">
3-
<!-- App header -->
4-
<AppHeader />
5-
6-
<!-- Render active component contents with transition -->
7-
<transition name="fade" mode="out-in">
8-
<router-view :theme="appTheme" />
9-
</transition>
10-
11-
<!-- Scroll to top -->
12-
<back-to-top
13-
visibleoffset="500"
14-
right="30px"
15-
bottom="20px"
16-
class="shadow-lg"
17-
>
18-
<i data-feather="chevron-up"></i>
19-
</back-to-top>
20-
21-
<!-- App footer -->
22-
<AppFooter />
23-
</div>
24-
</template>
25-
261
<script>
272
import feather from 'feather-icons';
283
import AppHeader from './components/shared/AppHeader';
@@ -47,6 +22,31 @@ export default {
4722
};
4823
</script>
4924

25+
<template>
26+
<div :class="appTheme" class="pt-0.5">
27+
<!-- App header -->
28+
<AppHeader />
29+
30+
<!-- Render active component contents with vue transition -->
31+
<transition name="fade" mode="out-in">
32+
<router-view :theme="appTheme" />
33+
</transition>
34+
35+
<!-- Scroll to top -->
36+
<back-to-top
37+
visibleoffset="500"
38+
right="30px"
39+
bottom="20px"
40+
class="shadow-lg"
41+
>
42+
<i data-feather="chevron-up"></i>
43+
</back-to-top>
44+
45+
<!-- App footer -->
46+
<AppFooter />
47+
</div>
48+
</template>
49+
5050
<style>
5151
#app {
5252
font-family: Avenir, Helvetica, Arial, sans-serif;

‎src/assets/css/app.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*==
2-
* Vuejs & TailwindCSS Portfolio Main CSS File
3-
* Powered by: @NangialaiStoman
2+
* Vue.js & TailwindCSS Portfolio Main CSS File
3+
* Powered by: @realstoman
44
*/
55

66
@tailwind base;

‎src/data/projects.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// Projects data.
2+
// Note: Here we are getting data from a js file, but in a different project I'll be fetching these projects from some srt of APIs.
3+
14
const projects = [
25
{
36
id: 1,

‎src/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ createApp(App)
1414

1515
const appTheme = localStorage.getItem('theme');
1616

17-
// Check what is the active theme
17+
// Check what is the active theme and change theme when user clicks on the theme button in header.
1818
if (
1919
appTheme === 'dark' &&
2020
document.querySelector('body').classList.contains('app-theme')

‎src/views/About.vue

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,3 @@
1-
<template>
2-
<div>
3-
<!-- About me -->
4-
<div class="container mx-auto">
5-
<AboutMe />
6-
</div>
7-
8-
<!-- About counter -->
9-
<AboutCounter />
10-
11-
<!-- About counter -->
12-
<div class="container mx-auto">
13-
<AboutClients />
14-
</div>
15-
</div>
16-
</template>
17-
181
<script>
192
import AboutMe from '@/components/about/AboutMe';
203
import AboutCounter from '@/components/about/AboutCounter';
@@ -41,4 +24,21 @@ export default {
4124
};
4225
</script>
4326

27+
<template>
28+
<div>
29+
<!-- About me -->
30+
<div class="container mx-auto">
31+
<AboutMe />
32+
</div>
33+
34+
<!-- About counter -->
35+
<AboutCounter />
36+
37+
<!-- About counter -->
38+
<div class="container mx-auto">
39+
<AboutClients />
40+
</div>
41+
</div>
42+
</template>
43+
4444
<style scoped></style>

‎src/views/Contact.vue

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
<template>
2-
<div
3-
class="container mx-auto flex flex-col-reverse md:flex-row py-5 md:py-10 md:mt-10"
4-
>
5-
<!-- Contact form -->
6-
<ContactForm />
7-
8-
<!-- Contact details -->
9-
<ContactDetails :contacts="contacts" />
10-
</div>
11-
</template>
12-
131
<script>
142
import feather from 'feather-icons';
153
import ContactForm from '@/components/contact/ContactForm.vue';
@@ -50,3 +38,15 @@ export default {
5038
methods: {},
5139
};
5240
</script>
41+
42+
<template>
43+
<div
44+
class="container mx-auto flex flex-col-reverse md:flex-row py-5 md:py-10 md:mt-10"
45+
>
46+
<!-- Contact form -->
47+
<ContactForm />
48+
49+
<!-- Contact details -->
50+
<ContactDetails :contacts="contacts" />
51+
</div>
52+
</template>

‎src/views/Home.vue

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
<script>
2+
import AppBanner from '@/components/shared/AppBanner';
3+
import ProjectsGrid from '../components/projects/ProjectsGrid.vue';
4+
import Button from '../components/reusable/Button.vue';
5+
6+
export default {
7+
name: 'Home',
8+
components: {
9+
AppBanner,
10+
ProjectsGrid,
11+
Button,
12+
},
13+
};
14+
</script>
15+
116
<template>
217
<div class="container mx-auto">
318
<!-- Banner -->
@@ -19,19 +34,4 @@
1934
</div>
2035
</template>
2136

22-
<script>
23-
import AppBanner from '@/components/shared/AppBanner';
24-
import ProjectsGrid from '../components/projects/ProjectsGrid.vue';
25-
import Button from '../components/reusable/Button.vue';
26-
27-
export default {
28-
name: 'Home',
29-
components: {
30-
AppBanner,
31-
ProjectsGrid,
32-
Button,
33-
},
34-
};
35-
</script>
36-
3737
<style scoped></style>

‎src/views/Projects.vue

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
<template>
2-
<!-- Projects grid -->
3-
<div class="container mx-auto">
4-
<ProjectsGrid />
5-
</div>
6-
</template>
7-
81
<script>
92
import ProjectsGrid from '../components/projects/ProjectsGrid.vue';
103
@@ -16,4 +9,10 @@ export default {
169
};
1710
</script>
1811

12+
<template>
13+
<div class="container mx-auto">
14+
<ProjectsGrid />
15+
</div>
16+
</template>
17+
1918
<style scoped></style>

‎src/views/SingleProject.vue

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
<template>
2-
<div class="container mx-auto mt-10 sm:mt-20">
3-
<!-- Project header -->
4-
<ProjectHeader :singleProjectHeader="singleProjectHeader" />
5-
6-
<!-- Project gallery -->
7-
<ProjectGallery :projectImages="projectImages" />
8-
9-
<!-- Project information -->
10-
<ProjectInfo :projectInfo="projectInfo" />
11-
12-
<!-- Project related projects -->
13-
<ProjectRelatedProjects :relatedProject="relatedProject" />
14-
</div>
15-
</template>
16-
171
<script>
182
import feather from 'feather-icons';
193
import ProjectHeader from '../components/projects/ProjectHeader.vue';
@@ -187,4 +171,20 @@ export default {
187171
};
188172
</script>
189173

174+
<template>
175+
<div class="container mx-auto mt-10 sm:mt-20">
176+
<!-- Project header -->
177+
<ProjectHeader :singleProjectHeader="singleProjectHeader" />
178+
179+
<!-- Project gallery -->
180+
<ProjectGallery :projectImages="projectImages" />
181+
182+
<!-- Project information -->
183+
<ProjectInfo :projectInfo="projectInfo" />
184+
185+
<!-- Project related projects -->
186+
<ProjectRelatedProjects :relatedProject="relatedProject" />
187+
</div>
188+
</template>
189+
190190
<style scoped></style>

0 commit comments

Comments
 (0)