Skip to content

Home Projects Section Design #5

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 11 commits into from
Jul 14, 2021
Merged

Home Projects Section Design #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7a7c823
Home script changes
zlrundefined Jul 10, 2021
0c1c12a
Projects section design changes
zlrundefined Jul 10, 2021
2ce74ba
Title section responsive design
zlrundefined Jul 10, 2021
b136c6b
Footer design changes
zlrundefined Jul 10, 2021
3ecdf97
Footer responsive design
zlrundefined Jul 10, 2021
f75a2e5
Responsive design changes
zlrundefined Jul 10, 2021
93cef98
Home load more button and title
zlrundefined Jul 11, 2021
70f2e35
Home and foooter changes
zlrundefined Jul 12, 2021
f5eff3f
Create single project component
zlrundefined Jul 14, 2021
421d25b
Single project route and vue strcuture
zlrundefined Jul 14, 2021
d63d999
Projects page cards
zlrundefined Jul 14, 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
35 changes: 16 additions & 19 deletions src/components/About.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
<template>
<div class="container mx-auto px-4">
<p>About Page</p>
<i data-feather="home"></i>
</div>
<div class="container mx-auto px-4">
<p>About Page</p>
</div>
</template>

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

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

<style scoped>

</style>
<style scoped></style>
166 changes: 113 additions & 53 deletions src/components/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,28 @@
<!-- 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 class="text-5xl font-semibold text-gray-700 uppercase">
<h1
class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-gray-700 uppercase"
>
Hi, Iam Stoman
</h1>
<p
class="mt-4 text-4xl font-semibold leading-none text-gray-400"
class="mt-4 text-2xml sm:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
>
A Full-Stack Developer & Design Enthusiast
</p>
<a
href="#"
class="flex w-48 mt-10 text-lg border border-indigo-500 py-3 shadow-sm rounded-xl bg-indigo-50 hover:bg-indigo-500 hover:text-white"
>
<i data-feather="arrow-down-circle" class="ml-4 mr-3"></i>
<span>Download CV</span></a
>
<div class="flex justify-center sm:block">
<a
href="#"
class="flex justify-center items-center w-36 sm:w-48 mt-10 mb-6 sm:mb-0 text-lg border border-indigo-200 py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 hover:bg-indigo-500 hover:text-white"
>
<i
data-feather="arrow-down-circle"
class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"
></i>
<span class="text-sm sm:text-lg">Download CV</span></a
>
</div>
</div>
<div class="w-full sm:w-2/3 text-right">
<img src="@/assets/images/developer.svg" alt="Developer" />
Expand All @@ -26,94 +33,143 @@
<!-- Banner End -->

<!-- Home Poject Section Start -->
<section class="pt-48">
<section class="pt-12 sm:pt-40">
<div class="text-center">
<p class="text-4xl font-semibold mb-3 text-gray-600">
<p
class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600"
>
Projects Portfolio
</p>
<p class="text-lg text-gray-500">
<p class="text-md sm:text-xl text-gray-500">
Some of the projects I have successfully completed
</p>
</div>
<div class="w-full sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
<a
href="#"
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"

<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="" />
<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>King Health Platform</p>
<span>Wen Application</span>
<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>
</a>
<a
href="#"
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
</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>Pheonix Digital Agenncy</p>
<span>Mobile Application</span>
<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>
</a>
<a
href="#"
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
</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="" />
<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>Project Management UI</p>
<span>UI / Frontend</span>
<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>
</a>
<a
href="#"
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
</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="" />
<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>Cloud Storage Platform</p>
<span>UI / Frontend</span>
<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>
</a>
<a
href="#"
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
</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>Kabul Social App</p>
<span>Mobile Application</span>
<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>
</a>
<a
href="#"
class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
</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="" />
<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>Apple Design System</p>
<span>Web Application</span>
<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>
</a>
</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>
<!-- Home Poject Section End -->
Expand All @@ -130,12 +186,16 @@ export default {
props: {
msg: String,
},
data: () => {
return {};
},
mounted() {
feather.replace();
},
updated() {
feather.replace();
},
methods: {},
};
</script>

Expand Down
Loading