Skip to content

Added Pages & More Design Changes #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Jul 16, 2021
Merged

Added Pages & More Design Changes #6

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
28ba7c3
Create contact component
zlrundefined Jul 15, 2021
d18cd57
Contact page router link, navigation and structure
zlrundefined Jul 15, 2021
21463c0
Single project layout design
zlrundefined Jul 15, 2021
757b097
Single project related projects structure
zlrundefined Jul 15, 2021
2905ee6
Single project social icons design
zlrundefined Jul 15, 2021
20773df
Single project responsive design
zlrundefined Jul 15, 2021
f905a6a
Code cleanup
zlrundefined Jul 15, 2021
e434972
Add logo and favicon
zlrundefined Jul 15, 2021
f94686f
Logo and favicon implemented
zlrundefined Jul 15, 2021
d340bc5
Create views
zlrundefined Jul 15, 2021
0cb9972
Home and router components structure
zlrundefined Jul 15, 2021
62d7314
Single project components division
zlrundefined Jul 15, 2021
e4cd080
REmove unneeded pages
zlrundefined Jul 15, 2021
7037915
About components and structure
zlrundefined Jul 16, 2021
cbe370b
About counter design
zlrundefined Jul 16, 2021
debb541
About me design
zlrundefined Jul 16, 2021
e989a57
About responsive design
zlrundefined Jul 16, 2021
edd6a37
Create clients component
zlrundefined Jul 16, 2021
050ce23
About more changes
zlrundefined Jul 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Home and router components structure
  • Loading branch information
@zlrundefined
zlrundefined committed Jul 15, 2021
commit 0cb99725100e7d732428d9bde24d34efd8cb8a49
164 changes: 0 additions & 164 deletions src/components/Projects.vue
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/components/home/Banner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<!-- Banner Start -->
<!-- Banner start -->
<section class="flex flex-col items-center sm:flex-row justify-between">
<div class="w-full sm:w-1/3 text-left">
<h1
Expand Down Expand Up @@ -29,7 +29,7 @@
<img src="@/assets/images/developer.svg" alt="Developer" />
</div>
</section>
<!-- Banner End -->
<!-- Banner end -->
</template>

<script>
Expand Down
156 changes: 156 additions & 0 deletions src/components/project/ProjectsGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<template>
<!-- Projects start -->
<section class="pt-12 sm:pt-20">
<div class="text-center">
<p class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600">
Projects Portfolio
</p>
<p class="text-md sm:text-xl text-gray-500">
Some of the projects I have successfully completed
</p>
</div>

<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
<router-link
to="/projects/single-project"
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
>
<div>
<img
src="../../assets/images/web-project-2.jpg"
alt=""
class="rounded-t-3xl border-none"
/>
</div>
<div class="text-center px-4 py-4">
<p class="text-2xl text-gray-600 font-semibold mb-3">
King Health Platform
</p>
<span class="text-lg text-gray-500">Wen Application</span>
</div>
</router-link>
<router-link
to="/projects/single-project"
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
>
<div>
<img
src="../../assets/images/mobile-project-2.jpg"
alt=""
class="rounded-t-3xl border-none"
/>
</div>
<div class="text-center px-4 py-4">
<p class="text-2xl text-gray-600 font-semibold mb-3">
Pheonix Digital Agenncy
</p>
<span class="text-lg text-gray-500"
>Mobile Application</span
>
</div>
</router-link>
<router-link
to="/projects/single-project"
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
>
<div>
<img
src="../../assets/images/ui-project-1.jpg"
alt=""
class="rounded-t-3xl border-none"
/>
</div>
<div class="text-center px-4 py-4">
<p class="text-2xl text-gray-600 font-semibold mb-3">
Project Management UI
</p>
<span class="text-lg text-gray-500">UI / Frontend</span>
</div>
</router-link>
<router-link
to="/projects/single-project"
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
>
<div>
<img
src="../../assets/images/ui-project-2.jpg"
alt=""
class="rounded-t-3xl border-none"
/>
</div>
<div class="text-center px-4 py-4">
<p class="text-2xl text-gray-600 font-semibold mb-3">
Cloud Storage Platform
</p>
<span class="text-lg text-gray-500">UI / Frontend</span>
</div>
</router-link>
<router-link
to="/projects/single-project"
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
>
<div>
<img
src="../../assets/images/mobile-project-1.jpg"
alt=""
class="rounded-t-3xl border-none"
/>
</div>
<div class="text-center px-4 py-4">
<p class="text-2xl text-gray-600 font-semibold mb-3">
Kabul Social App
</p>
<span class="text-lg text-gray-500"
>Mobile Application</span
>
</div>
</router-link>
<router-link
to="/projects/single-project"
class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
>
<div>
<img
src="../../assets/images/web-project-1.jpg"
alt=""
class="rounded-t-3xl border-none"
/>
</div>
<div class="text-center px-4 py-4">
<p class="text-2xl text-gray-600 font-semibold mb-3">
Apple Design System
</p>
<span class="text-lg text-gray-500">Web Application</span>
</div>
</router-link>
</div>
<div class="mt-10 sm:mt-20 flex justify-center">
<button
class="flex items-center px-6 py-3 rounded-xl shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 text-white text-lg sm:text-xl font-medium"
>
<i data-feather="refresh-cw" class="w-5 mr-3"></i>
<span>Load More</span>
</button>
</div>
</section>
<!-- Projects end -->
</template>

<script>
import feather from 'feather-icons';

export default {
name: 'Projects',
props: {
msg: String,
},
mounted() {
feather.replace();
},
updated() {
feather.replace();
},
};
</script>

<style scoped></style>
10 changes: 3 additions & 7 deletions src/router/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,7 @@ const routes = [
// this generates a separate chunk (projects.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(
/* webpackChunkName: "projects" */ '../components/Projects.vue'
),
import(/* webpackChunkName: "projects" */ '../views/Projects.vue'),
meta: {
title: 'Stoman - Projects',
},
Expand All @@ -44,7 +42,7 @@ const routes = [
// which is lazy-loaded when the route is visited.
component: () =>
import(
/* webpackChunkName: "projects" */ '../components/SingleProject.vue'
/* webpackChunkName: "projects" */ '../views/SingleProject.vue'
),
meta: {
title: 'Stoman - Single Project',
Expand All @@ -57,9 +55,7 @@ const routes = [
// this generates a separate chunk (projects.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(
/* webpackChunkName: "projects" */ '../components/Contact.vue'
),
import(/* webpackChunkName: "projects" */ '../views/Contact.vue'),
meta: {
title: 'Stoman - Contact',
},
Expand Down
14 changes: 11 additions & 3 deletions src/views/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
<template>
<!-- Banner Start -->
<Banner />
<!-- Banner End -->
<div class="container mx-auto px-4 py-10">
<!-- Banner start -->
<Banner />
<!-- Banner snd -->

<!-- Projects start -->
<ProjectsGrid />
<!-- Projects end -->
</div>
</template>

<script>
import Banner from '@/components/home/Banner';
import ProjectsGrid from '@/components/project/ProjectsGrid';
import feather from 'feather-icons';

export default {
name: 'Home',
components: {
Banner,
ProjectsGrid,
},
props: {
msg: String,
Expand Down
Loading