-
+
+
Hi, Iam Stoman
A Full-Stack Developer & Design Enthusiast
- - - Download CV +
+
+
+ Download CV
+
@@ -26,94 +33,143 @@
-
-
- +
Projects Portfolio
-+
Some of the projects I have successfully completed
-
+
+
+
+
+
+
+
+
- 
+
+
-
-
- King Health Platform
- Wen Application ++ King Health Platform +
+ Wen Application
-
-
- Pheonix Digital Agenncy
- Mobile Application ++ Pheonix Digital Agenncy +
+ Mobile Application
- 
+
+
-
-
- Project Management UI
- UI / Frontend ++ Project Management UI +
+ UI / Frontend
- 
+
+
-
-
- Cloud Storage Platform
- UI / Frontend ++ Cloud Storage Platform +
+ UI / Frontend
-
-
- Kabul Social App
- Mobile Application ++ Kabul Social App +
+ Mobile Application
- 
+
+
-
-
+ Apple Design System
- Web Application ++ Apple Design System +
+ Web Application
+
@@ -130,12 +186,16 @@ export default {
props: {
msg: String,
},
+ data: () => {
+ return {};
+ },
mounted() {
feather.replace();
},
updated() {
feather.replace();
},
+ methods: {},
};
diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index 682b63fe..2ff97b3b 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -1,27 +1,164 @@
-
-
+ Projects Page
- -
+
+
+
+
+
-
+
diff --git a/src/components/SingleProject.vue b/src/components/SingleProject.vue
new file mode 100644
index 00000000..668a77a7
--- /dev/null
+++ b/src/components/SingleProject.vue
@@ -0,0 +1,24 @@
+
+
+
+
+ + Projects Portfolio +
++ Some of the projects I have successfully completed +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + King Health Platform +
+ Wen Application +
+
+
+
+
+
+ + Pheonix Digital Agenncy +
+ Mobile Application +
+
+
+
+
+
+ + Project Management UI +
+ UI / Frontend +
+
+
+
+
+
+ + Cloud Storage Platform +
+ UI / Frontend +
+
+
+
+
+
+ + Kabul Social App +
+ Mobile Application +
+
+
+
+
+
+ + Apple Design System +
+ Web Application +
+
+
+
+
+
+
+
+
+
diff --git a/src/components/shared/Footer.vue b/src/components/shared/Footer.vue
index 61d247cc..1c6f97ad 100644
--- a/src/components/shared/Footer.vue
+++ b/src/components/shared/Footer.vue
@@ -1,27 +1,35 @@
- Single Project
+
-
-
Follow me
--
+
- - +
- - +
- - +
- - +
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 0a087321..b779d11b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,45 +1,63 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../components/Home.vue'
+import { createRouter, createWebHistory } from 'vue-router';
+import Home from '../components/Home.vue';
const routes = [
- {
- path: '/',
- name: 'Home',
- component: Home,
- meta: {
- title: 'Home'
- }
- },
- {
- path: '/about',
- name: 'About',
- // route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ '../components/About.vue'),
- meta: {
- title: 'About'
- }
- },
- {
- path: '/projects',
- name: 'Projects',
- // route level code-splitting
- // 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'),
- meta: {
- title: 'Projects'
- }
- }
-]
+ {
+ path: '/',
+ name: 'Home',
+ component: Home,
+ meta: {
+ title: 'Home',
+ },
+ },
+ {
+ path: '/about',
+ name: 'About',
+ // route level code-splitting
+ // this generates a separate chunk (about.[hash].js) for this route
+ // which is lazy-loaded when the route is visited.
+ component: () =>
+ import(/* webpackChunkName: "about" */ '../components/About.vue'),
+ meta: {
+ title: 'About',
+ },
+ },
+ {
+ path: '/projects',
+ name: 'Projects',
+ // route level code-splitting
+ // 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'
+ ),
+ meta: {
+ title: 'Projects',
+ },
+ },
+ {
+ path: '/projects/single-project',
+ name: 'Single Project',
+ // route level code-splitting
+ // 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/SingleProject.vue'
+ ),
+ meta: {
+ title: 'Single Project',
+ },
+ },
+];
const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
- routes
-})
+ history: createWebHistory(process.env.BASE_URL),
+ routes,
+});
-export default router
+export default router;
/**
* Below code will display the component/active page title
@@ -48,44 +66,56 @@ export default router
// This callback runs before every route change, including on page load.
router.beforeEach((to, from, next) => {
- // This goes through the matched routes from last to first, finding the closest route with a title.
- // e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
- // `/nested`'s will be chosen.
- const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
+ // This goes through the matched routes from last to first, finding the closest route with a title.
+ // e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
+ // `/nested`'s will be chosen.
+ const nearestWithTitle = to.matched
+ .slice()
+ .reverse()
+ .find((r) => r.meta && r.meta.title);
- // Find the nearest route element with meta tags.
- const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+ // Find the nearest route element with meta tags.
+ const nearestWithMeta = to.matched
+ .slice()
+ .reverse()
+ .find((r) => r.meta && r.meta.metaTags);
- const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+ const previousNearestWithMeta = from.matched
+ .slice()
+ .reverse()
+ .find((r) => r.meta && r.meta.metaTags);
- // If a route with a title was found, set the document (page) title to that value.
- if(nearestWithTitle) {
- document.title = nearestWithTitle.meta.title;
- } else if(previousNearestWithMeta) {
- document.title = previousNearestWithMeta.meta.title;
- }
+ // If a route with a title was found, set the document (page) title to that value.
+ if (nearestWithTitle) {
+ document.title = nearestWithTitle.meta.title;
+ } else if (previousNearestWithMeta) {
+ document.title = previousNearestWithMeta.meta.title;
+ }
- // Remove any stale meta tags from the document using the key attribute we set below.
- Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
+ // Remove any stale meta tags from the document using the key attribute we set below.
+ Array.from(
+ document.querySelectorAll('[data-vue-router-controlled]')
+ ).map((el) => el.parentNode.removeChild(el));
- // Skip rendering meta tags if there are none.
- if(!nearestWithMeta) return next();
+ // Skip rendering meta tags if there are none.
+ if (!nearestWithMeta) return next();
- // Turn the meta tag definitions into actual elements in the head.
- nearestWithMeta.meta.metaTags.map(tagDef => {
- const tag = document.createElement('meta');
+ // Turn the meta tag definitions into actual elements in the head.
+ nearestWithMeta.meta.metaTags
+ .map((tagDef) => {
+ const tag = document.createElement('meta');
- Object.keys(tagDef).forEach(key => {
- tag.setAttribute(key, tagDef[key]);
- });
+ Object.keys(tagDef).forEach((key) => {
+ tag.setAttribute(key, tagDef[key]);
+ });
- // We use this to track which meta tags we create so we don't interfere with other ones.
- tag.setAttribute('data-vue-router-controlled', '');
+ // We use this to track which meta tags we create so we don't interfere with other ones.
+ tag.setAttribute('data-vue-router-controlled', '');
- return tag;
- })
- // Add the meta tags to the document head.
- .forEach(tag => document.head.appendChild(tag));
+ return tag;
+ })
+ // Add the meta tags to the document head.
+ .forEach((tag) => document.head.appendChild(tag));
- next();
+ next();
});
+ Follow me +
+