-
Projects
-
About Me
+
+
+ Home
+ GitHub Projects
+ About Me
+
+
diff --git a/src/components/shared/FooterCopyright.vue b/src/components/shared/FooterCopyright.vue
index 9613c0b5..0777c552 100644
--- a/src/components/shared/FooterCopyright.vue
+++ b/src/components/shared/FooterCopyright.vue
@@ -1,37 +1,35 @@
-
-
- © {{ copyrightDate }}.
+
+
+ © {{ copyrightDate }} ...template forked from GitHub
- {{ projectName }}
-
- . Developed by
+ href="https://github.com/realstoman/vuejs-tailwindcss-portfolio"
+ target="__blank"
+ class="font-general-medium hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 duration-500"
+ >
+ {{ projectName }}
+
+ by
{{ author }}
-
-
+ href="https://stoman.me"
+ target="__blank"
+ class="font-general-medium text-secondary-dark dark:text-secondary-light uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 duration-500"
+ >{{ author }}. ~Thanks mate 😉
+
+
diff --git a/src/composables/useThemeSwitcher.js b/src/composables/useThemeSwitcher.js
index 710e40e3..30f08d48 100644
--- a/src/composables/useThemeSwitcher.js
+++ b/src/composables/useThemeSwitcher.js
@@ -1,7 +1,7 @@
import { ref } from '@vue/reactivity';
export default function useThemeSwitcher() {
- const currentTheme = ref('light');
+ const currentTheme = ref('dark');
function toggleTheme() {
if (currentTheme.value == 'dark') {
diff --git a/src/data/projects.js b/src/data/projects.js
index 4dbd139a..22116d80 100644
--- a/src/data/projects.js
+++ b/src/data/projects.js
@@ -2,42 +2,30 @@
// 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.
const projects = [
- {
- id: 1,
- title: 'Google Health Platform',
- category: 'Web Application',
- img: require('@/assets/images/web-project-2.jpg'),
- },
- {
- id: 2,
- title: 'Phoenix Digital Agency',
- category: 'Mobile Application',
- img: require('@/assets/images/mobile-project-2.jpg'),
- },
- {
- id: 3,
- title: 'Project Management UI',
- category: 'UI/UX Design',
- img: require('@/assets/images/ui-project-1.jpg'),
- },
- {
- id: 4,
- title: 'Cloud Storage Platform',
- category: 'UI/UX Design',
- img: require('@/assets/images/ui-project-2.jpg'),
- },
- {
- id: 5,
- title: 'React Social App',
- category: 'Mobile Application',
- img: require('@/assets/images/mobile-project-1.jpg'),
- },
- {
- id: 6,
- title: 'Apple Design System',
- category: 'Web Application',
- img: require('@/assets/images/web-project-1.jpg'),
- },
+ {
+ id: 1,
+ title: "Laravel Translate",
+ category: "Laravel Package",
+ img: require("@/assets/images/github-domtranslate.jpg"),
+ description: "The Laravel Auto-Translation Package enables seamless multilingual support by allowing you to define phrases for automatic translation within your Laravel application. Using a built-in Blade directive, you can easily mark phrases that need translation before they are displayed to the user. This package simplifies multi-language management.",
+ externalLink: "https://github.com/wazzac/laravel-translate",
+ },
+ {
+ id: 2,
+ title: "Laravel CRM Sync",
+ category: "Laravel Package",
+ img: require("@/assets/images/github-syncmodeltocrm.png"),
+ description: "Laravel CRM Sync is a powerful package designed to seamlessly integrate and synchronize your Laravel models with multiple CRM systems. This package allows you to define specific model properties that will automatically synchronize with configured CRMs such as HubSpot and PipeDrive, across different environments (e.g., Sandbox, Production).",
+ externalLink: "https://github.com/wazzac/sync-model-to-crm",
+ },
+ {
+ id: 3,
+ title: "Laravel DB Encryptoy",
+ category: "Laravel Package",
+ img: require("@/assets/images/github-db-encryptor.png"),
+ description: "A Laravel package for secure, transparent encryption and decryption of sensitive model attributes, storing them in a dedicated table while keeping your main tables clean and fast.",
+ externalLink: "https://github.com/wazzac/laravel-db-encryption",
+ }
];
export default projects;
diff --git a/src/data/socialLinks.js b/src/data/socialLinks.js
index fe82d2b2..b8b16628 100644
--- a/src/data/socialLinks.js
+++ b/src/data/socialLinks.js
@@ -1,32 +1,20 @@
export const socialLinks = [
- {
- id: 1,
- name: 'Website',
- icon: 'globe',
- url: 'https://www.stoman.me/',
- },
- {
- id: 2,
- name: 'GitHub',
- icon: 'github',
- url: 'https://github.com/realstoman',
- },
- {
- id: 3,
- name: 'Twitter',
- icon: 'twitter',
- url: 'https://twitter.com/realstoman',
- },
- {
- id: 4,
- name: 'LinkedIn',
- icon: 'linkedin',
- url: 'https://www.linkedin.com/in/realstoman',
- },
- {
- id: 5,
- name: 'YouTube',
- icon: 'youtube',
- url: 'https://www.youtube.com/c/realstoman',
- },
+ {
+ id: 1,
+ name: "Website",
+ icon: "globe",
+ url: "https://wazzac.dev",
+ },
+ {
+ id: 2,
+ name: "GitHub",
+ icon: "github",
+ url: "https://github.com/wazzac",
+ },
+ {
+ id: 4,
+ name: "LinkedIn",
+ icon: "linkedin",
+ url: "https://www.linkedin.com/in/warrencoetzee/",
+ }
];
diff --git a/src/main.js b/src/main.js
index 74cdb0e3..a2363f2b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,25 +1,19 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-import './assets/css/app.css';
-import BackToTop from 'vue-backtotop';
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import "./assets/css/app.css";
+import BackToTop from "vue-backtotop";
-const feather = require('feather-icons');
+const feather = require("feather-icons");
feather.replace();
-createApp(App)
- .use(router)
- .use(BackToTop)
- .mount('#app');
+createApp(App).use(router).use(BackToTop).mount("#app");
-const appTheme = localStorage.getItem('theme');
+const appTheme = localStorage.getItem("theme");
// Check what is the active theme and change theme when user clicks on the theme button in header.
-if (
- appTheme === 'dark' &&
- document.querySelector('body').classList.contains('app-theme')
-) {
- document.querySelector('body').classList.add('bg-primary-dark');
+if (appTheme === "dark" && document.querySelector("body").classList.contains("app-theme")) {
+ document.querySelector("body").classList.add("bg-primary-dark");
} else {
- document.querySelector('body').classList.add('bg-secondary-light');
+ document.querySelector("body").classList.add("bg-secondary-light");
}
diff --git a/src/router/index.js b/src/router/index.js
index a9b574bd..7e082e2a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,73 +1,67 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../views/Home.vue';
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../views/Home.vue";
const routes = [
- {
- path: '/',
- name: 'Home',
- component: Home,
- meta: {
- title: 'Stoman - 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" */ '../views/About.vue'),
- meta: {
- title: 'Stoman - 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" */ '../views/Projects.vue'),
- meta: {
- title: 'Stoman - 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" */ '../views/SingleProject.vue'
- ),
- meta: {
- title: 'Stoman - Single Project',
- },
- },
- {
- path: '/contact',
- name: 'Contact',
- // 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" */ '../views/Contact.vue'),
- meta: {
- title: 'Stoman - Contact',
- },
- },
+ {
+ path: "/",
+ name: "Home",
+ component: Home,
+ meta: {
+ title: "WazzaC - 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" */ "../views/About.vue"),
+ meta: {
+ title: "WazzaC - 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" */ "../views/Projects.vue"),
+ meta: {
+ title: "WazzaC - 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" */ "../views/SingleProject.vue"),
+ meta: {
+ title: "WazzaC - Single Project",
+ },
+ },
+ {
+ path: "/contact",
+ name: "Contact",
+ // 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" */ "../views/Contact.vue"),
+ meta: {
+ title: "WazzaC - Contact",
+ },
+ },
];
const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
- routes,
- scrollBehavior() {
- document.getElementById('app').scrollIntoView();
- },
+ history: createWebHistory(process.env.BASE_URL),
+ routes,
+ scrollBehavior() {
+ document.getElementById("app").scrollIntoView();
+ },
});
export default router;
@@ -79,56 +73,54 @@ 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();
});
diff --git a/src/views/About.vue b/src/views/About.vue
index 1b854234..26197ca0 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,15 +1,15 @@
-
-
-
+
+
+
-
-
+
+
-
-
-
-
-
-
-
+
+
+
- 
+ 
- 
- 
+