Skip to content

Commit f7dbb42

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#20 from NangialaiStoman/fix-ui-issues
Fix UI issues
2 parents dffa293 + 194f045 commit f7dbb42

13 files changed

+67
-64
lines changed

‎src/components/AboutMe.vue

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,6 @@ export default {
3939
bio:
4040
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
4141
},
42-
{
43-
id: 3,
44-
bio:
45-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
46-
},
47-
{
48-
id: 4,
49-
bio:
50-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
51-
},
5242
],
5343
};
5444
},

‎src/components/AppBanner.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<template>
22
<!-- Banner start -->
33
<section
4-
class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-2"
4+
class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-10"
55
>
66
<div class="w-full sm:w-1/3 text-left">
77
<h1
8-
class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
8+
class="text-3xl sm:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
99
>
1010
Hi, Iam Stoman
1111
</h1>
1212
<p
13-
class="mt-4 text-2xml sm:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
13+
class="mt-4 text-2xml sm:text-3xl xl:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
1414
>
1515
A Full-Stack Developer & Design Enthusiast
1616
</p>
1717
<div class="flex justify-center sm:block">
1818
<a
1919
download="Stoman-Resume.pdf"
2020
href="/files/Stoman-Resume.pdf"
21-
class="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
21+
class="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
2222
aria-label="Download Resume"
2323
>
2424
<i
@@ -29,7 +29,7 @@
2929
>
3030
</div>
3131
</div>
32-
<div class="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
32+
<div class="w-full sm:w-2/3 text-right float-right">
3333
<img
3434
v-if="theme === 'light'"
3535
src="@/assets/images/developer.svg"

‎src/components/AppFooter.vue

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="container mx-auto ">
33
<div
4-
class="innercontent pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
4+
class="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
55
>
66
<!-- Footer social links start -->
77
<div
@@ -22,7 +22,7 @@
2222
>
2323
<i
2424
:data-feather="social.icon"
25-
class="w-6 sm:w-8 h-6 sm:h-8"
25+
class="w-5 sm:w-8 h-5 sm:h-8"
2626
></i>
2727
</a>
2828
</ul>
@@ -31,9 +31,16 @@
3131

3232
<!-- Footer copyright start -->
3333
<div class="flex justify-center items-center text-center">
34-
<div class="text-lg text-ternary-dark dark:text-ternary-light">
35-
&copy; Copyright {{ copyrightDate }}. Vue.js & TailwindCSS
36-
Portfolio.
34+
<div class="text-lg text-ternary-dark dark:text-ternary-light ">
35+
&copy; {{ copyrightDate }}.
36+
<a
37+
href="https://github.com/NangialaiStoman/vuejs-tailwindcss-portfolio"
38+
target="__blank"
39+
class="hover:underline"
40+
>
41+
Vue.js & TailwindCSS Portfolio
42+
</a>
43+
.
3744
<a
3845
href="https://stoman.me"
3946
target="__blank"
@@ -67,13 +74,19 @@ export default {
6774
url: 'https://twitter.com/NangialaiStoman',
6875
},
6976
{
70-
id: 3,
71-
name: 'Instagram',
72-
icon: 'instagram',
73-
url: 'https://instagram.com/NangialaiStoman',
77+
id: 2,
78+
name: 'Twitter',
79+
icon: 'twitter',
80+
url: 'https://twitter.com/NangialaiStoman',
7481
},
7582
{
7683
id: 4,
84+
name: 'Medium',
85+
icon: 'book',
86+
url: 'https://stoman.medium.com',
87+
},
88+
{
89+
id: 5,
7790
name: 'Behance',
7891
icon: 'feather',
7992
url: 'https://behance.net/NangialaiStoman',

‎src/components/AppHeader.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<theme-switcher
3030
:theme="theme"
3131
@themeChanged="updateTheme"
32-
class="block sm:hidden bg-ternary-light dark:bg-ternary-dark hover:bg-hover-light dark:hover:bg-hover-dark hover:shadow-sm px-2.5 py-2 rounded-lg ml-10"
32+
class="block sm:hidden bg-ternary-light dark:bg-ternary-dark hover:bg-hover-light dark:hover:bg-hover-dark hover:shadow-sm px-2.5 py-2 rounded-lg"
3333
/>
3434
<!-- Theme switcher small screen end -->
3535

@@ -91,7 +91,7 @@
9191
class="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark"
9292
>
9393
<button
94-
class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-4 py-2 mt-2"
94+
class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-sm px-4 py-2 mt-2"
9595
@click="showModal()"
9696
aria-label="Hire Me Button"
9797
>
@@ -108,7 +108,7 @@
108108
<!-- Hire me button start -->
109109
<div>
110110
<button
111-
class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5"
111+
class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-5 py-2.5"
112112
@click="showModal()"
113113
aria-label="Hire Me Button"
114114
>

‎src/components/ProjectSingleGallery.vue renamed to ‎src/components/ProjectGallery.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
>
99
<img
1010
:src="projectImage.img"
11-
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
11+
class="rounded-xl cursor-pointer shadow-lg sm:shadow-none"
1212
alt="{{ projectImage.title }}"
1313
/>
1414
</div>

‎src/components/ProjectSingleHeader.vue renamed to ‎src/components/ProjectHeader.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div>
33
<!-- Project heading and meta info start -->
44
<p
5-
class="text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-7 sm:mt-20 mb-7"
5+
class="text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-14 sm:mt-20 mb-7"
66
>
77
{{ singleProjectHeader.singleProjectTitle }}
88
</p>

‎src/components/ProjectSingleInfo.vue renamed to ‎src/components/ProjectInfo.vue

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
? 'hover:underline cursor-pointer'
2525
: ''
2626
"
27-
aria-label="Project Webiste and Phone"
27+
aria-label="Project Website and Phone"
2828
>{{ info.details }}</a
2929
>
3030
</li>
@@ -50,10 +50,10 @@
5050
<p
5151
class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
5252
>
53-
{{ projectInfo.technlogies[0].title }}
53+
{{ projectInfo.technologies[0].title }}
5454
</p>
5555
<p class="text-primary-dark dark:text-ternary-light">
56-
{{ projectInfo.technlogies[0].techs.join(', ') }}
56+
{{ projectInfo.technologies[0].techs.join(', ') }}
5757
</p>
5858
</div>
5959
<!-- Single project technologies end -->
@@ -73,7 +73,10 @@
7373
target="__blank"
7474
aria-label="Share Project"
7575
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
76-
><i :data-feather="social.icon" class="w-5 h-5"></i
76+
><i
77+
:data-feather="social.icon"
78+
class="w-4 lg:w-5 h-4 lg:h-5"
79+
></i
7780
></a>
7881
</div>
7982
</div>

‎src/components/ProjectSingleRelatedProjects.vue renamed to ‎src/components/ProjectRelatedProjects.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div v-for="item in relatedProject.relatedProjects" :key="item.id">
1414
<img
1515
:src="item.img"
16-
class="rounded-2xl cursor-pointer"
16+
class="rounded-xl cursor-pointer"
1717
:alt="item.title"
1818
/>
1919
</div>

‎src/components/ProjectSingle.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<router-link
33
to="/projects/single-project"
4-
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
4+
class="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
55
aria-label="Single Project"
66
>
77
<div>
88
<img
99
:src="project.img"
1010
:alt="project.title"
11-
class="rounded-t-3xl border-none"
11+
class="rounded-t-xl border-none"
1212
/>
1313
</div>
1414
<div class="text-center px-4 py-6">

‎src/components/ProjectsGrid.vue

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<template>
22
<!-- Projects start -->
3-
<section class="pt-20 sm:pt-28">
3+
<section class="pt-10 sm:pt-14">
44
<!-- Projects grid title start -->
55
<div class="text-center">
66
<p
77
class="text-2xl sm:text-5xl font-semibold mb-3 text-ternary-dark dark:text-ternary-light"
88
>
99
{{ projectsHeading }}
1010
</p>
11-
<p class="text-md sm:text-xl text-gray-500 dark:text-ternary-light">
11+
<!-- Note: This description is commented, if you want to, you can uncomment this -->
12+
<!-- <p class="text-md sm:text-xl text-gray-500 dark:text-ternary-light">
1213
{{ projectsDescription }}
13-
</p>
14+
</p> -->
1415
</div>
1516
<!-- Projects grid title end -->
1617

@@ -87,7 +88,9 @@
8788
<!-- Filter and search projects end -->
8889

8990
<!-- Projects grid start -->
90-
<div class="grid grid-cols-1 sm:grid-cols-3 mt-6 sm:gap-10">
91+
<div
92+
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10"
93+
>
9194
<ProjectSingle
9295
v-for="project in filteredProjects"
9396
:key="project.id"
@@ -140,7 +143,7 @@ export default {
140143
},
141144
{
142145
id: 5,
143-
title: 'Kabul Social App',
146+
title: 'React Social App',
144147
category: 'Mobile Application',
145148
img: require('@/assets/images/mobile-project-1.jpg'),
146149
},

‎src/views/Contact.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="container mx-auto sm:flex py-5 sm:py-10 mt-10 sm:mt-20">
2+
<div class="container mx-auto sm:flex py-5 sm:py-10 mt-5 sm:mt-10">
33
<!-- Contact form start -->
44
<ContactForm />
55
<!-- Contact form end -->

‎src/views/Home.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="container mx-auto">
33
<!-- Banner start -->
4-
<AppBanner />
4+
<AppBanner class="mb-5 sm:mb-8" />
55
<!-- Banner snd -->
66

77
<!-- Projects start -->

‎src/views/SingleProject.vue

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
<template>
22
<div class="container mx-auto mt-10 sm:mt-20">
33
<!-- Project header -->
4-
<ProjectSingleHeader :singleProjectHeader="singleProjectHeader" />
4+
<ProjectHeader :singleProjectHeader="singleProjectHeader" />
55

66
<!-- Project gallery -->
7-
<ProjectSingleGallery :projectImages="projectImages" />
7+
<ProjectGallery :projectImages="projectImages" />
88

99
<!-- Project information -->
10-
<ProjectSingleInfo :projectInfo="projectInfo" />
10+
<ProjectInfo :projectInfo="projectInfo" />
1111

1212
<!-- Project related projects -->
13-
<ProjectSingleRelatedProjects :relatedProject="relatedProject" />
13+
<ProjectRelatedProjects :relatedProject="relatedProject" />
1414
</div>
1515
</template>
1616

1717
<script>
1818
import feather from 'feather-icons';
19-
import ProjectSingleHeader from '../components/ProjectSingleHeader.vue';
20-
import ProjectSingleGallery from '../components/ProjectSingleGallery.vue';
21-
import ProjectSingleInfo from '../components/ProjectSingleInfo.vue';
22-
import ProjectSingleRelatedProjects from '../components/ProjectSingleRelatedProjects.vue';
19+
import ProjectHeader from '../components/ProjectHeader.vue';
20+
import ProjectGallery from '../components/ProjectGallery.vue';
21+
import ProjectInfo from '../components/ProjectInfo.vue';
22+
import ProjectRelatedProjects from '../components/ProjectRelatedProjects.vue';
2323
2424
export default {
2525
name: 'Projects',
2626
components: {
27-
ProjectSingleHeader,
28-
ProjectSingleGallery,
29-
ProjectSingleInfo,
30-
ProjectSingleRelatedProjects,
27+
ProjectHeader,
28+
ProjectGallery,
29+
ProjectInfo,
30+
ProjectRelatedProjects,
3131
},
3232
data: () => {
3333
return {
3434
singleProjectHeader: {
35-
singleProjectTitle: 'Kabul Project Management UI',
35+
singleProjectTitle: 'Project Management UI',
3636
singleProjectDate: 'Jul 26, 2021',
3737
singleProjectTag: 'UI / Frontend',
3838
},
@@ -79,8 +79,8 @@ export default {
7979
],
8080
objectivesHeading: 'Objective',
8181
objectivesDetails:
82-
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, natus! Quibusdam enim quod in esse, mollitia molestias incidunt quas ipsa accusamus veniam, quis odit cumque vero voluptate, reiciendis amet non!',
83-
technlogies: [
82+
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, natus! Quibusdam enim quod in esse, mollitia molestias incidunt quas ipsa accusamus veniam.',
83+
technologies: [
8484
{
8585
title: 'Tools & Technologies',
8686
techs: [
@@ -148,12 +148,6 @@ export default {
148148
icon: 'youtube',
149149
url: 'https://www.youtube.com/c/StomanStudio',
150150
},
151-
{
152-
id: 5,
153-
name: 'Dribbble',
154-
icon: 'dribbble',
155-
url: 'https://www.dribbble.com/',
156-
},
157151
],
158152
},
159153
relatedProject: {

0 commit comments

Comments
 (0)