├── static ├── ads.txt ├── aes.png ├── gn.png ├── tf.png ├── aaise.png ├── aaseh.png ├── asejb.png ├── avatar.jpg ├── avatar.png ├── azure.png ├── blog.png ├── flask.jpg ├── foods.png ├── jaeger.png ├── logo.png ├── python.png ├── SK_Logo.png ├── ef-core.png ├── favicon.ico ├── go-logo.png ├── library.png ├── listify.png ├── LLBLGenLogo.png ├── aboelkassem.jpg ├── chattingapp.png ├── elk-stack.png ├── Keycloak_Logo.png ├── Logo-pwc-dark.png ├── Logo-pwc-light.png ├── identity-server.png ├── attendance-system.jpg ├── dot-NET_Core_Logo.png ├── assets │ └── img │ │ ├── favicon-48.png │ │ ├── favicon-72.png │ │ ├── favicon-96.png │ │ ├── favicon-144.png │ │ ├── favicon-192.png │ │ └── favicon-512.png ├── entity-framework-core.png ├── Beni-Suef_University_logo.png ├── Mohamed Kassem - Senior Software Engineer.pdf ├── vue-9.svg ├── angular.svg ├── rss.xml ├── tensorflow-2.svg ├── html.svg ├── csharp.svg ├── sql.svg ├── css.svg ├── typescript.svg ├── javascript.svg ├── kafka.svg ├── manifest.json ├── blazor.svg ├── git.svg ├── asp.svg ├── java.svg ├── mlogo.svg ├── mysql.svg ├── jquery.svg ├── docker.svg ├── postgresql.svg ├── arrow1.svg ├── arrow2.svg ├── developer.svg ├── projects.svg ├── skills.svg ├── education.svg ├── logo.svg └── sql-server.svg ├── netlify.toml ├── src ├── favicon.png ├── templates │ └── README.md ├── pages │ └── 404.vue ├── components │ ├── TransitionComponent.vue │ ├── ThemeSwitcher.vue │ └── ProjectCard.vue ├── main.js ├── css │ ├── circle.css │ └── main.css └── layouts │ └── Default.vue ├── .gitignore ├── gridsome.server.js ├── package.json ├── README.md ├── gridsome.config.js └── tailwind.config.js /static/ads.txt: -------------------------------------------------------------------------------- 1 | google.com, pub-1672384345508414, DIRECT, f08c47fec0942fa0 -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "dist" 3 | command = "gridsome build" 4 | -------------------------------------------------------------------------------- /static/aes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/aes.png -------------------------------------------------------------------------------- /static/gn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/gn.png -------------------------------------------------------------------------------- /static/tf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/tf.png -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/src/favicon.png -------------------------------------------------------------------------------- /static/aaise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/aaise.png -------------------------------------------------------------------------------- /static/aaseh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/aaseh.png -------------------------------------------------------------------------------- /static/asejb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/asejb.png -------------------------------------------------------------------------------- /static/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/avatar.jpg -------------------------------------------------------------------------------- /static/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/avatar.png -------------------------------------------------------------------------------- /static/azure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/azure.png -------------------------------------------------------------------------------- /static/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/blog.png -------------------------------------------------------------------------------- /static/flask.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/flask.jpg -------------------------------------------------------------------------------- /static/foods.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/foods.png -------------------------------------------------------------------------------- /static/jaeger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/jaeger.png -------------------------------------------------------------------------------- /static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/logo.png -------------------------------------------------------------------------------- /static/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/python.png -------------------------------------------------------------------------------- /static/SK_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/SK_Logo.png -------------------------------------------------------------------------------- /static/ef-core.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/ef-core.png -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/go-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/go-logo.png -------------------------------------------------------------------------------- /static/library.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/library.png -------------------------------------------------------------------------------- /static/listify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/listify.png -------------------------------------------------------------------------------- /static/LLBLGenLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/LLBLGenLogo.png -------------------------------------------------------------------------------- /static/aboelkassem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/aboelkassem.jpg -------------------------------------------------------------------------------- /static/chattingapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/chattingapp.png -------------------------------------------------------------------------------- /static/elk-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/elk-stack.png -------------------------------------------------------------------------------- /static/Keycloak_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/Keycloak_Logo.png -------------------------------------------------------------------------------- /static/Logo-pwc-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/Logo-pwc-dark.png -------------------------------------------------------------------------------- /static/Logo-pwc-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/Logo-pwc-light.png -------------------------------------------------------------------------------- /static/identity-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/identity-server.png -------------------------------------------------------------------------------- /static/attendance-system.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/attendance-system.jpg -------------------------------------------------------------------------------- /static/dot-NET_Core_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/dot-NET_Core_Logo.png -------------------------------------------------------------------------------- /static/assets/img/favicon-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/assets/img/favicon-48.png -------------------------------------------------------------------------------- /static/assets/img/favicon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/assets/img/favicon-72.png -------------------------------------------------------------------------------- /static/assets/img/favicon-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/assets/img/favicon-96.png -------------------------------------------------------------------------------- /static/entity-framework-core.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/entity-framework-core.png -------------------------------------------------------------------------------- /static/assets/img/favicon-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/assets/img/favicon-144.png -------------------------------------------------------------------------------- /static/assets/img/favicon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/assets/img/favicon-192.png -------------------------------------------------------------------------------- /static/assets/img/favicon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/assets/img/favicon-512.png -------------------------------------------------------------------------------- /static/Beni-Suef_University_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/Beni-Suef_University_logo.png -------------------------------------------------------------------------------- /static/Mohamed Kassem - Senior Software Engineer.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkassm/Personal-Website/HEAD/static/Mohamed Kassem - Senior Software Engineer.pdf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .cache 3 | .DS_Store 4 | src/.temp 5 | node_modules 6 | dist 7 | .env 8 | .env.* 9 | static/rss.xml 10 | 11 | # Local Netlify folder 12 | .netlify -------------------------------------------------------------------------------- /src/templates/README.md: -------------------------------------------------------------------------------- 1 | Templates for **GraphQL collections** should be added here. 2 | To create a template for a collection called `WordPressPost` 3 | create a file named `WordPressPost.vue` in this folder. 4 | 5 | Learn more: https://gridsome.org/docs/templates 6 | 7 | You can delete this file. -------------------------------------------------------------------------------- /src/pages/404.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | 18 | -------------------------------------------------------------------------------- /static/vue-9.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gridsome.server.js: -------------------------------------------------------------------------------- 1 | // Server API makes it possible to hook into various parts of Gridsome 2 | // on server-side and add custom data to the GraphQL data layer. 3 | // Learn more: https://gridsome.org/docs/server-api 4 | 5 | // Changes here require a server restart. 6 | // To restart press CTRL + C in terminal and run `gridsome develop` 7 | 8 | module.exports = function (api, options) { 9 | api.loadSource(store => { 10 | }) 11 | } 12 | -------------------------------------------------------------------------------- /static/angular.svg: -------------------------------------------------------------------------------- 1 | file_type_angular -------------------------------------------------------------------------------- /static/rss.xml: -------------------------------------------------------------------------------- 1 | <![CDATA[Mohamed Kassem portfolio]]>https://www.kassm.meRSS for NodeTue, 03 Dec 2024 14:38:18 GMT -------------------------------------------------------------------------------- /static/tensorflow-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/TransitionComponent.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | 24 | 33 | -------------------------------------------------------------------------------- /static/html.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/csharp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/sql.svg: -------------------------------------------------------------------------------- 1 | file_type_sql -------------------------------------------------------------------------------- /static/css.svg: -------------------------------------------------------------------------------- 1 | file_type_css -------------------------------------------------------------------------------- /static/typescript.svg: -------------------------------------------------------------------------------- 1 | Artboard 3 -------------------------------------------------------------------------------- /static/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/kafka.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/ThemeSwitcher.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aboelkassem-portfolio", 3 | "private": true, 4 | "scripts": { 5 | "build": "gridsome build", 6 | "develop": "gridsome develop", 7 | "explore": "gridsome explore" 8 | }, 9 | "dependencies": { 10 | "@gridsome/plugin-google-analytics": "^0.1.2", 11 | "@gridsome/plugin-sitemap": "^0.4.0", 12 | "@gridsome/source-filesystem": "^0.6.2", 13 | "@gridsome/transformer-remark": "^0.6.3", 14 | "axios": "^0.21.0", 15 | "gridsome": "^0.7.21", 16 | "gridsome-plugin-gtm": "^0.1.1", 17 | "gridsome-plugin-remark-shiki": "^0.5.0", 18 | "gridsome-plugin-robots-txt": "^1.0.2", 19 | "gridsome-plugin-rss": "^1.2.0", 20 | "vue-scrollto": "^2.20.0", 21 | "vue-typed-js": "^0.1.2" 22 | }, 23 | "devDependencies": { 24 | "@tailwindcss/postcss7-compat": "^2.0.3", 25 | "autoprefixer": "^9.8.6", 26 | "gridsome-plugin-manifest": "^0.3.5", 27 | "gridsome-plugin-tailwindcss": "^3.0.1", 28 | "node-sass": "^5.0.0", 29 | "postcss": "^7.0.35", 30 | "sass-loader": "^10.1.1", 31 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3" 32 | }, 33 | "resolutions": { 34 | "sharp": "^0.29.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Personal Website 2 | 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/43e6409b-6c59-41cf-ae20-5d84ba06e44e/deploy-status)](https://app.netlify.com/sites/aboelkassem/deploys) 4 | 5 | Tech stack used: [GridSome](https://gridsome.org), Vue JS, and hosted on [Netlify](https://www.netlify.com). 6 | 7 | ## Features 8 | * Speed and Performance 9 | * Support Dark Mode 10 | * Responsive design for different screens 11 | * SEO Friendly(Slugs, Sitemap, Schemas, Robots.txt, Meta Tags, GTM etc.) 12 | * Tags and RSS Feed 13 | * Medium like progressive image loading 14 | * Easy deployment in different platforms such as Netlify, Vercel etc. 15 | * Used UI Framework TailwindCSS 16 | 17 | ## Environment Variables 18 | 19 | * `GTM_ID` Google Tag Manager ID 20 | * `GTAGJS_ID` Google Analytics ID 21 | 22 | ## Available NPM Commands 23 | 24 | ### Install Dependencies 25 | 26 | ```shell 27 | npm install 28 | ``` 29 | 30 | ### Develop 31 | 32 | Start a hot-reloading development environment accessible at `localhost:8080` 33 | 34 | ```shell 35 | gridsome develop 36 | ``` 37 | 38 | ### Build 39 | 40 | Get an optimized production build for your site generating static HTML and per-route JavaScript code bundles. 41 | 42 | ```shell 43 | gridsome build 44 | ``` 45 | 46 | Visit at [mohamedkassem.xyz](https://mohamedkassem.xyz/) 47 | -------------------------------------------------------------------------------- /static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "background_color": "#000000", 3 | "icon_path": "./src/favicon.png", 4 | "name": "Mohamed Kassem Portfolio", 5 | "short_name": "Mohamed Kassem", 6 | "theme_color": "#FFFFFF", 7 | "lang": "en", 8 | "display": "minimal-ui", 9 | "file_name": "manifest.json", 10 | "orientation": "any", 11 | "scope": "/", 12 | "start_url": "/", 13 | "dir": "auto", 14 | "prefer_related_applications": false, 15 | "related_applications": [], 16 | "icons": [ 17 | { 18 | "src": "/assets/img/favicon-512.png", 19 | "type": "image/png", 20 | "sizes": "512x512" 21 | }, 22 | { 23 | "src": "/assets/img/favicon-192.png", 24 | "type": "image/png", 25 | "sizes": "192x192" 26 | }, 27 | { 28 | "src": "/assets/img/favicon-144.png", 29 | "type": "image/png", 30 | "sizes": "144x144" 31 | }, 32 | { 33 | "src": "/assets/img/favicon-96.png", 34 | "type": "image/png", 35 | "sizes": "96x96" 36 | }, 37 | { 38 | "src": "/assets/img/favicon-72.png", 39 | "type": "image/png", 40 | "sizes": "72x72" 41 | }, 42 | { 43 | "src": "/assets/img/favicon-48.png", 44 | "type": "image/png", 45 | "sizes": "48x48" 46 | } 47 | ] 48 | } -------------------------------------------------------------------------------- /static/blazor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/git.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/asp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/java.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gridsome.config.js: -------------------------------------------------------------------------------- 1 | // This is where project configuration and plugin options are located. 2 | // Learn more: https://gridsome.org/docs/config 3 | 4 | // Changes here require a server restart. 5 | // To restart press CTRL + C in terminal and run `gridsome develop` 6 | 7 | module.exports = { 8 | siteName: "Mohamed Kassem", 9 | siteDescription: 10 | "Mohamed Kassem (@mkassm) is a software engineer who loves the tech industry, problem solving, and open source contributions.", 11 | siteUrl: "https://www.mohamedkassem.xyz", 12 | plugins: [ 13 | { 14 | use: "gridsome-plugin-tailwindcss", 15 | }, 16 | { 17 | use: "@gridsome/source-filesystem", 18 | options: { 19 | path: "blog/**/*.md", 20 | typeName: "Post", 21 | refs: { tags: { typeName: "Tag", create: true } }, 22 | }, 23 | }, 24 | { 25 | use: "gridsome-plugin-rss", 26 | options: { 27 | contentTypeName: "Post", 28 | feedOptions: { 29 | title: "Mohamed Kassem portfolio", 30 | feed_url: "https://www.mohamedkassem.xyz/rss.xml", 31 | site_url: "https://www.mohamedkassem.xyz", 32 | }, 33 | feedItemOptions: (node) => ({ 34 | title: node.title, 35 | description: node.summary, 36 | url: "https://blog.mohamedkassem.xyz/" + node.slug, 37 | author: "Mohamed Kassem", 38 | date: node.date, 39 | }), 40 | output: { dir: "./static", name: "rss.xml" }, 41 | }, 42 | }, 43 | { 44 | use: "@gridsome/plugin-sitemap", 45 | options: { 46 | cacheTime: 600000, // default 47 | config: { "/*": { changefreq: "daily", priority: 0.5 } }, 48 | }, 49 | }, 50 | { 51 | use: "@gridsome/plugin-google-analytics", 52 | options: { id: "UA-153855958-2" }, 53 | }, 54 | { 55 | use: "gridsome-plugin-manifest", 56 | options: { 57 | background_color: "#000000", 58 | icon_path: "./src/favicon.png", 59 | name: "Mohamed Kassem Portfolio", 60 | short_name: "Mohamed Kassem", 61 | theme_color: "#FFFFFF", 62 | lang: "en", 63 | }, 64 | }, 65 | { 66 | use: "gridsome-plugin-gtm", 67 | options: { id: "GTM-57J8VXW", enabled: true, debug: true }, 68 | }, 69 | { 70 | use: "gridsome-plugin-robots-txt", 71 | options: { 72 | host: "https://www.mohamedkassem.xyz", 73 | sitemap: "https://www.mohamedkassem.xyz/sitemap.xml", 74 | policy: [ 75 | { 76 | userAgent: "Googlebot", 77 | allow: "/", 78 | disallow: "/search", 79 | crawlDelay: 2, 80 | }, 81 | { 82 | userAgent: "*", 83 | allow: "/", 84 | disallow: "/search", 85 | crawlDelay: 10, 86 | cleanParam: "ref /articles/", 87 | }, 88 | ], 89 | }, 90 | }, 91 | ], 92 | templates: { Tag: "/tag/:id" }, 93 | transformers: { 94 | remark: { 95 | plugins: [ 96 | [ 97 | "gridsome-plugin-remark-shiki", 98 | { theme: "Material-Theme-Palenight", skipInline: true }, 99 | ], 100 | ], 101 | externalLinksTarget: "_blank", 102 | externalLinksRel: ["nofollow", "noopener", "noreferrer"], 103 | anchorClassName: "icon icon-link", 104 | }, 105 | }, 106 | icon: "/favicon.ico", 107 | }; 108 | -------------------------------------------------------------------------------- /static/mlogo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/mysql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: { 3 | content: [ 4 | './src/**/*.vue', 5 | './src/**/*.js', 6 | './src/**/*.jsx', 7 | './src/**/*.html', 8 | './src/**/*.pug', 9 | './src/**/*.md', 10 | './docs/**/*.md', 11 | './blog/**/*.md', 12 | ], 13 | options: { 14 | whitelist: [ 15 | 'body', 16 | 'html', 17 | 'img', 18 | 'a', 19 | 'g-image', 20 | 'g-image--lazy', 21 | 'g-image--loaded', 22 | 'active', 23 | ], 24 | }, 25 | }, 26 | theme: { 27 | extend: { 28 | spacing: { 29 | '80': '20rem', 30 | '108': '27rem', 31 | }, 32 | borderWidth: { 33 | '14': '14px', 34 | }, 35 | }, 36 | container: { 37 | padding: '1rem', 38 | }, 39 | colors: { 40 | background: { 41 | primary: 'var(--bg-background-primary)', 42 | secondary: 'var(--bg-background-secondary)', 43 | tertiary: 'var(--bg-background-tertiary)', 44 | 45 | form: 'var(--bg-background-form)', 46 | }, 47 | 48 | copy: { 49 | primary: 'var(--text-copy-primary)', 50 | secondary: 'var(--text-copy-hover)', 51 | }, 52 | 53 | 'border-color': { 54 | primary: 'var(--border-border-color-primary)', 55 | }, 56 | 57 | transparent: 'transparent', 58 | 59 | black: '#000', 60 | white: '#fff', 61 | 62 | green: { 63 | 100: '#f0fff4', 64 | 200: '#c6f6d5', 65 | 300: '#9ae6b4', 66 | 400: '#68d391', 67 | 500: '#48bb78', 68 | 600: '#38a169', 69 | 700: '#2f855a', 70 | 800: '#276749', 71 | 900: '#22543d', 72 | }, 73 | 74 | gray: { 75 | 100: '#f7fafc', 76 | 200: '#edf2f7', 77 | 300: '#e2e8f0', 78 | 400: '#cbd5e0', 79 | 500: '#a0aec0', 80 | 600: '#718096', 81 | 700: '#4a5568', 82 | 800: '#2d3748', 83 | 900: '#1a202c', 84 | }, 85 | 86 | indigo: { 87 | 100: '#ebf4ff', 88 | 200: '#c3dafe', 89 | 300: '#a3bffa', 90 | 400: '#7f9cf5', 91 | 500: '#667eea', 92 | 600: '#5a67d8', 93 | 700: '#4c51bf', 94 | 800: '#434190', 95 | 900: '#3c366b', 96 | }, 97 | 98 | blue: { 99 | 400: '#3C92D6', 100 | }, 101 | }, 102 | fontFamily: { 103 | sans: [ 104 | 'Nunito Sans', 105 | 'Roboto', 106 | '-apple-system', 107 | 'BlinkMacSystemFont', 108 | '"Segoe UI"', 109 | '"Helvetica Neue"', 110 | 'Arial', 111 | '"Noto Sans"', 112 | 'sans-serif', 113 | '"Apple Color Emoji"', 114 | '"Segoe UI Emoji"', 115 | '"Segoe UI Symbol"', 116 | '"Noto Color Emoji"', 117 | ], 118 | serif: [ 119 | 'Georgia', 120 | 'Cambria', 121 | '"Times New Roman"', 122 | 'Times', 123 | 'serif', 124 | ], 125 | mono: [ 126 | 'Menlo', 127 | 'Monaco', 128 | 'Consolas', 129 | '"Liberation Mono"', 130 | '"Courier New"', 131 | 'monospace', 132 | ], 133 | }, 134 | screens: { 135 | 'xs': '320px', 136 | 'sm': '640px', 137 | // => @media (min-width: 640px) { ... } 138 | 139 | 'md': '768px', 140 | // => @media (min-width: 768px) { ... } 141 | 142 | 'lg': '1024px', 143 | // => @media (min-width: 1024px) { ... } 144 | 145 | 'xl': '1280px', 146 | // => @media (min-width: 1280px) { ... } 147 | 148 | '2xl': '1536px', 149 | // => @media (min-width: 1536px) { ... } 150 | } 151 | }, 152 | variants: { 153 | // Some useful comment 154 | }, 155 | plugins: [ 156 | // Some useful comment 157 | ], 158 | }; 159 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // This is the main.js file. Import global CSS and scripts here. 2 | // The Client API can be used here. Learn more: gridsome.org/docs/client-api 3 | 4 | import VueScrollTo from "vue-scrollto"; 5 | import VueTypedJs from "vue-typed-js"; 6 | import DefaultLayout from "~/layouts/Default.vue"; 7 | 8 | export default function (Vue, { router, head, isClient }) { 9 | // Set default layout as a global component 10 | Vue.component("Layout", DefaultLayout); 11 | Vue.use(VueTypedJs); 12 | 13 | Vue.use(VueScrollTo, { 14 | duration: 1200, 15 | easing: "ease-in-out", 16 | offset: -200, 17 | }); 18 | 19 | head.meta.push({ 20 | name: "keywords", 21 | content: 22 | "Mohamed Kassem, mkssm, mohamedkassem.xyz, pwc, aboelkassem, mo_kassm, ابوالقاسم,محمد عبدالرحمن,Mohamed Abdelrahman,aboelkassem,Abo elkassem,Mohamed, mohamedkassem.xyz,aboelkassem me,abo_elkassem,aboel_kassem,ab0elkassem,Aboelkassem77, distributed systems, developer, egypt, beni suef, pwc etic, web security, mohamed aboelkassem,Mohamed Abdelrahman Aboelkassem,mohamed abdelrahman,back-end engineer, web developer, full stack developer,junior full stack developer,.Net developer,software engineer,software developer,aboelkassem developer,Portfolio,Gridsome,Vue,Tailwind,Tailwind CSS,JavaScript,HTML,CSS,Vue.js,VueJS,Typescript,ASP.NET Core,Angular,Listify,SQL Server,github,code,software,open source,beni suef,Beni-Suef,egypt, silverkey, silverkeytech", 23 | }); 24 | 25 | head.meta.push({ 26 | name: 'description', 27 | content: 'Mohamed Kassem is a passionate software engineer based in Egypt who love the tech industry, problem solving, and open source contributions. He specializes in developing high-quality web applications', 28 | }); 29 | 30 | head.meta.push({ 31 | name: "author", 32 | content: "Mohamed Kassem", 33 | }); 34 | 35 | head.meta.push({ 36 | name: "twitter:card", 37 | content: "summary_large_image", 38 | }); 39 | 40 | head.meta.push({ 41 | name: "twitter:creator", 42 | content: "@mo_kassm", 43 | }); 44 | 45 | head.meta.push({ 46 | name: "twitter:description", 47 | content: 48 | "Mohamed Kassem is a passionate software engineer based in Egypt who love the tech-industry, problem-solving, and open source contributions. He specializes in developing high-quality web applications", 49 | }); 50 | 51 | head.meta.push({ 52 | name: "twitter:site", 53 | content: "@mo_kassm", 54 | }); 55 | 56 | head.meta.push({ 57 | name: "twitter:title", 58 | content: "Software Developer| Mohamed Kassem", 59 | }); 60 | 61 | head.meta.push({ 62 | name: "twitter:image", 63 | content: 64 | "https://res.cloudinary.com/dvdcninhs/image/upload/v1616943424/IMG_20210325_074803_ykddh1.jpg", 65 | }); 66 | 67 | head.meta.push({ 68 | name: "twitter:url", 69 | content: "https://mohamedkassem.xyz", 70 | }); 71 | 72 | head.meta.push({ 73 | name: "og:image", 74 | content: 75 | "https://res.cloudinary.com/dvdcninhs/image/upload/v1616943424/IMG_20210325_074803_ykddh1.jpg", 76 | }); 77 | 78 | head.meta.push({ 79 | name: "og:title", 80 | content: "Software Developer| Mohamed Kassem", 81 | }); 82 | 83 | head.meta.push({ 84 | name: "og:description", 85 | content: 86 | "Mohamed Kassem is a passionate software engineer based in Egypt who love the tech industry, problem-solving, open-source contributions and specializes in developing high-quality web applications", 87 | }); 88 | 89 | head.meta.push({ 90 | name: "og:type", 91 | content: "website", 92 | }); 93 | 94 | head.meta.push({ 95 | name: "og:url", 96 | content: "https://www.mohamedkassem.xyz", 97 | }); 98 | 99 | head.meta.push({ 100 | name: "og:site_name", 101 | content: "Mohamed Kassem", 102 | }); 103 | 104 | head.meta.push({ 105 | name: "og:locale", 106 | content: "en_US", 107 | }); 108 | 109 | head.meta.push({ 110 | name: "og:image:type", 111 | content: "image/png", 112 | }); 113 | 114 | head.meta.push({ 115 | name: "og:image:width", 116 | content: "1280", 117 | }); 118 | 119 | head.meta.push({ 120 | name: "og:image:height", 121 | content: "640", 122 | }); 123 | 124 | head.meta.push({ 125 | name: "og:image:alt", 126 | content: "Mohamed Kassem", 127 | }); 128 | 129 | head.meta.push({ 130 | name: "canonical", 131 | content: "https://mohamedkassem.xyz", 132 | }); 133 | 134 | head.meta.push({ 135 | name: "google-site-verification", 136 | content: "Cfa3-x3PAYmdZcQUYdxt-HZ0SkbHwLMPIUwIGxTCnj0", 137 | }); 138 | 139 | head.link.push({ 140 | rel: "stylesheet", 141 | href: "https://fonts.googleapis.com/css?family=Nunito+Sans:400,700", 142 | }); 143 | 144 | head.link.push({ 145 | rel: "icon", 146 | href: "/favicon.ico", 147 | }); 148 | 149 | head.link.push({ 150 | rel: "shortcut icon", 151 | href: "/favicon.ico", 152 | }); 153 | 154 | head.script.push({ 155 | type: "text/javascript", 156 | "data-ad-client": "ca-pub-1672384345508414", 157 | src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", 158 | async: true, 159 | }); 160 | } 161 | -------------------------------------------------------------------------------- /src/components/ProjectCard.vue: -------------------------------------------------------------------------------- 1 | 93 | 94 | 133 | 134 | -------------------------------------------------------------------------------- /static/jquery.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/docker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/postgresql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/arrow1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/arrow2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/developer.svg: -------------------------------------------------------------------------------- 1 | coding -------------------------------------------------------------------------------- /src/css/circle.css: -------------------------------------------------------------------------------- 1 | .c100.p100 .slice,.c100.p55 .slice,.c100.p60 .slice,.c100.p65 .slice,.c100.p70 .slice,.c100.p75 .slice,.c100.p80 .slice,.c100.p85 .slice,.c100.p90 .slice,.c100.p95 .slice,.rect-auto{clip:rect(auto,auto,auto,auto)}.c100 .bar,.c100.p100 .fill,.c100.p55 .fill,.c100.p60 .fill,.c100.p65 .fill,.c100.p70 .fill,.c100.p75 .fill,.c100.p80 .fill,.c100.p85 .fill,.c100.p90 .fill,.c100.p95 .fill,.pie{position:absolute;border:.08em solid #307bbb;width:.84em;height:.84em;clip:rect(0,.5em,1em,0);border-radius:50%;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}.c100.p100 .bar:after,.c100.p100 .fill,.c100.p55 .bar:after,.c100.p55 .fill,.c100.p60 .bar:after,.c100.p60 .fill,.c100.p65 .bar:after,.c100.p65 .fill,.c100.p70 .bar:after,.c100.p70 .fill,.c100.p75 .bar:after,.c100.p75 .fill,.c100.p80 .bar:after,.c100.p80 .fill,.c100.p85 .bar:after,.c100.p85 .fill,.c100.p90 .bar:after,.c100.p90 .fill,.c100.p95 .bar:after,.c100.p95 .fill,.pie-fill{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.c100{position:relative;font-size:100px;width:1em;height:1em;border-radius:50%;float:left;margin:0 .1em .1em 0;background-color:transparent}.c100 *,.c100 :after,.c100 :before{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.c100.center{float:none;margin:0 auto}.c100.big{font-size:240px}.c100.medium{font-size:150px}.c100.small{font-size:80px}.c100>span{position:absolute;width:100%;z-index:1;left:0;top:0;width:5em;line-height:5em;font-size:.2em;color:#ccc;display:block;text-align:center;white-space:nowrap;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.c100:after{position:absolute;top:.08em;left:.08em;display:block;content:" ";border-radius:50%;background-color:transparent;width:.84em;height:.84em;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in}.c100 .slice{position:absolute;width:1em;height:1em;clip:rect(0,1em,1em,.5em)}.c100.p1 .bar{-webkit-transform:rotate(3.6deg);-moz-transform:rotate(3.6deg);-ms-transform:rotate(3.6deg);-o-transform:rotate(3.6deg);transform:rotate(3.6deg)}.c100.p2 .bar{-webkit-transform:rotate(7.2deg);-moz-transform:rotate(7.2deg);-ms-transform:rotate(7.2deg);-o-transform:rotate(7.2deg);transform:rotate(7.2deg)}.c100.p3 .bar{-webkit-transform:rotate(10.8deg);-moz-transform:rotate(10.8deg);-ms-transform:rotate(10.8deg);-o-transform:rotate(10.8deg);transform:rotate(10.8deg)}.c100.p4 .bar{-webkit-transform:rotate(14.4deg);-moz-transform:rotate(14.4deg);-ms-transform:rotate(14.4deg);-o-transform:rotate(14.4deg);transform:rotate(14.4deg)}.c100.p5 .bar{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-ms-transform:rotate(18deg);-o-transform:rotate(18deg);transform:rotate(18deg)}.c100.p45 .bar{-webkit-transform:rotate(162deg);-moz-transform:rotate(162deg);-ms-transform:rotate(162deg);-o-transform:rotate(162deg);transform:rotate(162deg)}.c100.p50 .bar{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.c100.p55 .bar{-webkit-transform:rotate(198deg);-moz-transform:rotate(198deg);-ms-transform:rotate(198deg);-o-transform:rotate(198deg);transform:rotate(198deg)}.c100.p60 .bar{-webkit-transform:rotate(216deg);-moz-transform:rotate(216deg);-ms-transform:rotate(216deg);-o-transform:rotate(216deg);transform:rotate(216deg)}.c100.p65 .bar{-webkit-transform:rotate(234deg);-moz-transform:rotate(234deg);-ms-transform:rotate(234deg);-o-transform:rotate(234deg);transform:rotate(234deg)}.c100.p70 .bar{-webkit-transform:rotate(252deg);-moz-transform:rotate(252deg);-ms-transform:rotate(252deg);-o-transform:rotate(252deg);transform:rotate(252deg)}.c100.p75 .bar{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.c100.p80 .bar{-webkit-transform:rotate(288deg);-moz-transform:rotate(288deg);-ms-transform:rotate(288deg);-o-transform:rotate(288deg);transform:rotate(288deg)}.c100.p85 .bar{-webkit-transform:rotate(306deg);-moz-transform:rotate(306deg);-ms-transform:rotate(306deg);-o-transform:rotate(306deg);transform:rotate(306deg)}.c100.p90 .bar{-webkit-transform:rotate(324deg);-moz-transform:rotate(324deg);-ms-transform:rotate(324deg);-o-transform:rotate(324deg);transform:rotate(324deg)}.c100.p91 .bar{-webkit-transform:rotate(327.6deg);-moz-transform:rotate(327.6deg);-ms-transform:rotate(327.6deg);-o-transform:rotate(327.6deg);transform:rotate(327.6deg)}.c100.p92 .bar{-webkit-transform:rotate(331.2deg);-moz-transform:rotate(331.2deg);-ms-transform:rotate(331.2deg);-o-transform:rotate(331.2deg);transform:rotate(331.2deg)}.c100.p93 .bar{-webkit-transform:rotate(334.8deg);-moz-transform:rotate(334.8deg);-ms-transform:rotate(334.8deg);-o-transform:rotate(334.8deg);transform:rotate(334.8deg)}.c100.p94 .bar{-webkit-transform:rotate(338.40000000000003deg);-moz-transform:rotate(338.40000000000003deg);-ms-transform:rotate(338.40000000000003deg);-o-transform:rotate(338.40000000000003deg);transform:rotate(338.40000000000003deg)}.c100.p95 .bar{-webkit-transform:rotate(342deg);-moz-transform:rotate(342deg);-ms-transform:rotate(342deg);-o-transform:rotate(342deg);transform:rotate(342deg)}.c100.p96 .bar{-webkit-transform:rotate(345.6deg);-moz-transform:rotate(345.6deg);-ms-transform:rotate(345.6deg);-o-transform:rotate(345.6deg);transform:rotate(345.6deg)}.c100.p97 .bar{-webkit-transform:rotate(349.2deg);-moz-transform:rotate(349.2deg);-ms-transform:rotate(349.2deg);-o-transform:rotate(349.2deg);transform:rotate(349.2deg)}.c100.p98 .bar{-webkit-transform:rotate(352.8deg);-moz-transform:rotate(352.8deg);-ms-transform:rotate(352.8deg);-o-transform:rotate(352.8deg);transform:rotate(352.8deg)}.c100.p99 .bar{-webkit-transform:rotate(356.40000000000003deg);-moz-transform:rotate(356.40000000000003deg);-ms-transform:rotate(356.40000000000003deg);-o-transform:rotate(356.40000000000003deg);transform:rotate(356.40000000000003deg)}.c100.p100 .bar{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}.c100:hover{cursor:default}.c100:hover>span{width:3.33em;line-height:3.33em;font-size:.3em;color:#307bbb}.c100:hover:after{top:.04em;left:.04em;width:.92em;height:.92em}.c100.dark{background-color:#777}.c100.dark .bar,.c100.dark .fill{border-color:#c6ff00!important}.c100.dark>span{color:#777}.c100.dark:after{background-color:#666}.c100.dark:hover>span{color:#c6ff00}.c100.green .bar,.c100.green .fill{border-color:#4db53c!important}.c100.green:hover>span{color:#4db53c}.c100.green.dark .bar,.c100.green.dark .fill{border-color:#5fd400!important}.c100.green.dark:hover>span{color:#5fd400}.c100.orange .bar,.c100.orange .fill{border-color:#dd9d22!important}.c100.orange:hover>span{color:#dd9d22}.c100.orange.dark .bar,.c100.orange.dark .fill{border-color:#e08833!important}.c100.orange.dark:hover>span{color:#e08833}.c100.jsColor .bar,.c100.jsColor .fill{border-color:#fccb1b!important}.c100.jsColor:hover>span{color:#fccb1b}.c100.cColor .bar,.c100.cColor .fill{border-color:#6890d5!important}.c100.cColor:hover>span{color:#6890d5}.c100.javaColor .bar,.c100.javaColor .fill{border-color:#f70023!important}.c100.javaColor:hover>span{color:#f70023}.c100.htmlColor .bar,.c100.htmlColor .fill{border-color:#fa570f!important}.c100.htmlColor:hover>span{color:#fa570f}.c100.cssColor .bar,.c100.cssColor .fill{border-color:#1c81d8!important}.c100.cssColor:hover>span{color:#1c81d8}.c100.nodeColor .bar,.c100.nodeColor .fill{border-color:#5edf00!important}.c100.nodeColor:hover>span{color:#5edf00}.c100.jqueryColor .bar,.c100.jqueryColor .fill{border-color:#255aad!important}.c100.jqueryColor:hover>span{color:#255aad}.c100.bootColor .bar,.c100.bootColor .fill{border-color:#720e97!important}.c100.bootColor:hover>span{color:#720e97}.c100.mongoColor .bar,.c100.mongoColor .fill{border-color:#86d774!important}.c100.mongoColor:hover>span{color:#86d774}.c100.mysqlColor .bar,.c100.mysqlColor .fill{border-color:#5879a3!important}.c100.mysqlColor:hover>span{color:#5879a3}.c100.gitColor .bar,.c100.gitColor .fill{border-color:#F34F29!important}.c100.gitColor:hover>span{color:#F34F29}.c100.linuxColor .bar,.c100.linuxColor .fill{border-color:#f4af00!important}.c100.linuxColor:hover>span{color:#f4af00}.c100.vueColor .bar,.c100.vueColor .fill{border-color:#00c380!important}.c100.vueColor:hover>span{color:#00c380}.c100.vuexColor .bar,.c100.vuexColor .fill{border-color:#2d2f38!important}.c100.reactColor:hover>span{color:#95dbfb }.c100.pythonColor .bar,.c100.pythonColor .fill{border-color:#253f62!important}.c100.pythonColor:hover>span{color:#253f62}.c100.djangoColor .bar,.c100.djangoColor .fill{border-color:#3f695a!important}.c100.djangoColor:hover>span{color:#3f695a}.c100.goColor .bar,.c100.goColor .fill{border-color:#74cddd!important}.c100.goColor:hover>span{color:#74cddd}.c100.csharpColor .bar,.c100.csharpColor .fill{border-color:#68217A!important}.c100.csharpColor:hover>span{color:#253f62}.c100.typescriptColor .bar,.c100.typescriptColor .fill{border-color:#007ACC!important}.c100.dotnetColor .bar,.c100.dotnetColor .fill{border-color:#5C2992!important} 2 | .c100.blazorColor .bar,.c100.blazorColor .fill{border-color:#702AF7!important} 3 | .c100.angularColor .bar,.c100.angularColor .fill{border-color:#C3002F!important} 4 | .c100.llblColor .bar,.c100.llblColor .fill{border-color:#C9F0F5!important} 5 | .c100.postgresColor .bar,.c100.postgresColor .fill{border-color:#336791!important} 6 | .c100.dockerColor .bar,.c100.dockerColor .fill{border-color:#019BC6!important} 7 | .c100.identityServerColor .bar,.c100.identityServerColor .fill{border-color:#E8903C !important} 8 | .c100.keycloakColor .bar,.c100.keycloakColor .fill{border-color:#D4D4D4 !important} 9 | .c100.elkColor .bar,.c100.elkColor .fill{border-color:#EB0D72 !important} -------------------------------------------------------------------------------- /static/projects.svg: -------------------------------------------------------------------------------- 1 | Projects -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | 7 | .theme-light { 8 | background-color: #ffffff; 9 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='2'%3E%3Cpath d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='4' transform='' cx='500' cy='100' r='40'/%3E%3Cpath transform='' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='4'%3E%3Cpath transform='' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='8' transform='' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 10 | background-attachment: fixed; 11 | background-size: cover; 12 | 13 | --bg-background-secondary: #f7fafc; 14 | --bg-background-tertiary: #FFFFFF; 15 | 16 | --bg-background-form: white; 17 | 18 | --text-copy-primary: #2d3748; 19 | --text-copy-secondary: #4a5568; 20 | 21 | --border-border-color-primary: white; 22 | } 23 | 24 | .theme-dark { 25 | background-color: #0d0404; 26 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1167' height='583.5' viewBox='0 0 1600 800'%3E%3Cpath fill='%23FF7' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5C1123.3 752.1 1107.5 739.5 1102.5 734.8zM1226.3 229.1c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c0 0 0 0 0 0-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9C1226.5 230.4 1226.6 229.6 1226.3 229.1zM33 770.3C33 770.3 33 770.3 33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3 0 0 .1 0 .1 0 7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9C32.9 783.3 32.9 776.2 33 770.3z'/%3E%3Cpath fill='%235ff' d='M171.1 383.4c1.3-2.5 14.3-22 15.6-21.6.8.3 11.5 21.2 11.5 22.1C198.1 384.2 177.9 384 171.1 383.4zM596.4 711.8c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6 0-.8.3L574 712c0 0 0 0 0 0-.2.2-.2.5-.2.9 0 .3.2.7.4.9.1.1 1.8 2.2 2.8 3.1 3.1 3.1 8.8 10.5 8.9 10.6.2.3.5.4.8.4.3 0 .5-.2.6-.5 0 0 1.2-2.8 2-4.1 1.1-1.9 2.3-3.7 3.5-5.5.9-1.4 1.3-1.7 1.7-2 .5-.4 1-.7 2.1-2.4C596.9 713.1 596.8 712.3 596.4 711.8zM727.5 179.9C727.5 179.9 727.5 179.9 727.5 179.9c.6.2 1.3-.2 1.4-.8 0-.1 0-.2 0-.4.2-1.4 2.8-12.6 4.5-19.5.1-.3 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7 0-.9.2-.2.2-.4.4-.5.6 0 0 0 .1 0 .1-.8 6.5-2.2 13.1-3.9 19.4-.1.3 0 .6.2.9.2.3.5.4.8.5C714.8 176.9 721.7 178.5 727.5 179.9zM728.5 178.1c-.1-.1-.2-.2-.4-.2C728.3 177.9 728.4 178 728.5 178.1z'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='M699.6 472.7c-1.5 0-2.8-.8-3.5-2.3-.8-1.9 0-4.2 1.9-5 3.7-1.6 6.8-4.7 8.4-8.5 1.6-3.8 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6 2-12.8 1.7-3.1 4.1-6.1 7.6-9.1 1.6-1.4 4-1.2 5.3.4 1.4 1.6 1.2 4-.4 5.3-2.8 2.5-4.7 4.7-5.9 7-1.4 2.6-1.9 5.3-1.3 7.6.3 1.4 1 2.8 1.7 4.3.5 1.1 1 2.2 1.5 3.3 2.1 5.6 2 12-.3 17.6-2.3 5.5-6.8 10.1-12.3 12.5C700.6 472.6 700.1 472.7 699.6 472.7zM740.4 421.4c1.5-.2 3 .5 3.8 1.9 1.1 1.8.4 4.2-1.4 5.3-3.7 2.1-6.4 5.6-7.6 9.5-1.2 4-.8 8.4 1.1 12.1.4.9 1 1.7 1.6 2.7 1 1.7 2.2 3.5 3 5.7 1.4 4 1.2 8.7-.6 13.2-1.4 3.4-3.5 6.6-6.8 10.1-1.5 1.6-3.9 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4 2.6-2.8 4.3-5.3 5.3-7.7 1.1-2.8 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8 1.8-5.9 5.8-11 11.2-14C739.4 421.6 739.9 421.4 740.4 421.4zM261.3 590.9c5.7 6.8 9 15.7 9.4 22.4.5 7.3-2.4 16.4-10.2 20.4-3 1.5-6.7 2.2-11.2 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4 1.8-15.9 3.2-3.5 7.8-4.1 11.2-1.6 1.2.9 1.5 2.7.6 3.9-.9 1.2-2.7 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4 2.6-2.1 7-.8 9.9 1.5 3.4 4.7 5 10.4 5.1 3.6 0 6.4-.5 8.6-1.6 4.7-2.4 7.7-8.6 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2 2.4-9.7 5-6.6 5.1-11.7 11.8-14.2 19-2.7 7.7-2.1 15.8 1.9 23.9.7 1.4.1 3.1-1.3 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2 2.9-8.2 8.6-15.9 16.1-21.6 4.1-3.1 8-5.1 11.8-6 6-1.4 12 0 17.5 4C257.6 586.9 259.6 588.8 261.3 590.9z'/%3E%3Ccircle cx='1013.7' cy='153.9' r='7.1'/%3E%3Ccircle cx='1024.3' cy='132.1' r='7.1'/%3E%3Ccircle cx='1037.3' cy='148.9' r='7.1'/%3E%3Cpath d='M1508.7 297.2c-4.8-5.4-9.7-10.8-14.8-16.2 5.6-5.6 11.1-11.5 15.6-18.2 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2 1-4.2 6.2-9.1 11.6-14.5 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3 0-1.5 1.5-1.5 3.9 0 5.3 4.9 4.8 9.7 9.8 14.5 14.8-1.1 1.1-2.3 2.2-3.5 3.2-4.1 3.8-8.4 7.8-12.4 12-1.4 1.5-1.4 3.8 0 5.3 0 0 0 0 0 0 1.5 1.4 3.9 1.4 5.3-.1 3.9-4 8.1-7.9 12.1-11.7 1.2-1.1 2.3-2.2 3.5-3.3 4.9 5.3 9.8 10.6 14.6 15.9.1.1.1.1.2.2 1.4 1.4 3.7 1.5 5.2.2C1510 301.2 1510.1 298.8 1508.7 297.2zM327.6 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37 0-5.5 0-11.5.2-18.5 0-.7 0-1.5 0-2.3 0-5 0-11.2 3.9-13.5 2.2-1.3 5.1-1 8.5.9 5.7 3.1 13.2 8.7 17.5 14.9 5.5 7.8 7.3 16.9 5 25.7-3.2 12.3-15 31-30 32.1L327.6 248.6zM332.1 179.2c-.2 0-.3 0-.4.1-.1.1-.7.5-1.1 2.7-.3 1.9-.3 4.2-.3 6.3 0 .8 0 1.7 0 2.4-.2 6.9-.2 12.8-.2 18.3.1 12.5.7 23.5 2 33.7 11-2.7 20.4-18.1 23-27.8 1.9-7.2.4-14.8-4.2-21.3l0 0C347 188.1 340 183 335 180.3 333.6 179.5 332.6 179.2 332.1 179.2zM516.3 60.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C517.3 60.4 516.8 60.8 516.3 60.8zM506.1 70.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C506.4 70.5 506.2 70.5 506.1 70.5zM494.1 64.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C494.7 64.3 494.4 64.4 494.1 64.4zM500.5 55.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C500.9 55.3 500.7 55.3 500.5 55.3zM506.7 55c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C507.4 54.8 507.1 55 506.7 55zM1029.3 382.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C1030.3 382.4 1029.8 382.8 1029.3 382.8zM1019.1 392.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C1019.4 392.5 1019.2 392.5 1019.1 392.5zM1007.1 386.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C1007.7 386.3 1007.4 386.4 1007.1 386.4zM1013.5 377.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C1013.9 377.3 1013.7 377.3 1013.5 377.3zM1019.7 377c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C1020.4 376.8 1020.1 377 1019.7 377zM1329.7 573.4c-1.4 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1 3.3-15.5 10.6-15.4 21 0 1.5-1.2 2.7-2.7 2.8 0 0 0 0 0 0-1.5 0-2.7-1.2-2.7-2.7-.1-6.7 2.4-12.9 7-18 3.6-4 8.4-7.1 13.7-8.8.5-6.5 3.1-12.9 7.4-17.4 7-7.4 18.2-8.9 27.3-10.1l.7-.1c1.5-.2 2.9.9 3.1 2.3.2 1.5-.9 2.9-2.3 3.1l-.7.1c-8.6 1.2-18.4 2.5-24 8.4-3 3.2-5 7.7-5.7 12.4 7.9-1 17.7 1.3 24.3 5.7 4.3 2.9 7.1 7.8 7.2 12.7.2 4.3-1.7 8.3-5.2 11.1C1335.2 572.4 1332.6 573.4 1329.7 573.4zM1311 546.7c.1 1.5.4 3 .8 4.4 1.7 5.8 8.7 14.2 15.1 16.3 2.8.9 5.1.5 7.2-1.1 2.7-2.1 3.2-4.8 3.1-6.6-.1-3.2-2-6.4-4.8-8.3C1326.7 547.5 1317.7 545.6 1311 546.7z'/%3E%3C/g%3E%3C/svg%3E"); 27 | background-attachment: fixed; 28 | background-size: cover; 29 | 30 | --bg-background-secondary: #102c44; 31 | --bg-background-tertiary: #0D0404; 32 | 33 | --bg-background-form: #1a202c; 34 | 35 | --text-copy-primary: #cbd5e0; 36 | --text-copy-secondary: #e2e8f0; 37 | 38 | --border-border-color-primary: #1a202c; 39 | } 40 | 41 | @font-face { 42 | font-display: swap; 43 | } 44 | 45 | .theme-dark .markdown-body { 46 | color: #cbd5e0; 47 | } 48 | 49 | .theme-dark nav .active { 50 | @apply border-white border-b; 51 | } 52 | 53 | .content-wrapper { 54 | transition: background-color 0.25s; 55 | } 56 | 57 | .content-wrapper > header, 58 | .content-wrapper > main { 59 | background-color: var(--bg-background-primary); 60 | } 61 | 62 | a { 63 | @apply text-green-700 font-bold; 64 | } 65 | 66 | a:hover { 67 | @apply text-green-800; 68 | } 69 | 70 | nav .active { 71 | font-weight: bold; 72 | @apply border-black border-b; 73 | } 74 | 75 | .container-inner { 76 | padding-left: 1rem; 77 | padding-right: 1rem; 78 | } 79 | 80 | @media (min-width: 640px) { 81 | .container-inner { 82 | max-width: 640px; 83 | } 84 | } 85 | 86 | @media (min-width: 768px) { 87 | .container-inner { 88 | max-width: 768px; 89 | } 90 | } 91 | 92 | @media (min-width: 1024px) { 93 | .container-inner { 94 | max-width: 1100px; 95 | } 96 | } 97 | 98 | .checkmark { 99 | background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2229%22%20height%3D%2229%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.427%2024.93A14.5%2014.5%200%201%201%2024.93%204.427c5.495%205.69%205.416%2014.733-.177%2020.326s-14.637%205.672-20.326.177z%22%20fill%3D%22%232E855A%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M10.234%2012.803l3.67%203.253L20.766%2010%2023%2012l-9.096%208L8%2014.789l2.234-2z%22/%3E%3C/svg%3E'); 100 | background-repeat: no-repeat; 101 | @apply pl-10; 102 | } 103 | 104 | .responsive-container { 105 | position: relative; 106 | overflow: hidden; 107 | padding-top: 56.25%; 108 | } 109 | 110 | .responsive-iframe { 111 | position: absolute; 112 | top: 0; 113 | left: 0; 114 | width: 100%; 115 | height: 100%; 116 | border: 0; 117 | } 118 | 119 | .wave { 120 | animation-name: wave-animation; /* Refers to the name of your @keyframes element below */ 121 | animation-duration: 2.1s; /* Change to speed up or slow down */ 122 | animation-iteration-count: infinite; /* Never stop waving :) */ 123 | transform-origin: 70% 70%; /* Pivot around the bottom-left palm */ 124 | display: inline-block; 125 | } 126 | 127 | 128 | 129 | .tech-skills{ 130 | padding-top: 90px; 131 | margin-left: 5%; 132 | margin-right: 5%; 133 | } 134 | 135 | .c100{ 136 | margin-bottom: 30px; 137 | margin-left: 30px; 138 | } 139 | 140 | .c100 .text-skills{ 141 | font-weight: lighter; 142 | font-size: 0.2em; 143 | font-family: 'Share Tech', cursive; 144 | } 145 | 146 | .c100:hover > .text-skills { 147 | color: #307bbb; 148 | text-align:center; 149 | } 150 | 151 | .c100 .bar{ 152 | -webkit-transition: all 1.5s ease-in-out; 153 | -moz-transition: all 1.5s ease-in-out; 154 | -o-transition: all 1.5s ease-in-out; 155 | transition: all 1.5s ease-in-out; 156 | } 157 | 158 | .img-skill { 159 | max-width: 80% !important; 160 | height: 80px !important; 161 | border-radius: 50%; 162 | margin-right: auto; 163 | margin-left: auto; 164 | padding: 9px; 165 | } 166 | 167 | @keyframes wave-animation { 168 | 0% { 169 | transform: rotate(0deg); 170 | } 171 | 10% { 172 | transform: rotate(14deg); 173 | } /* The following five values can be played with to make the waving more or less extreme */ 174 | 20% { 175 | transform: rotate(-8deg); 176 | } 177 | 30% { 178 | transform: rotate(14deg); 179 | } 180 | 40% { 181 | transform: rotate(-4deg); 182 | } 183 | 50% { 184 | transform: rotate(10deg); 185 | } 186 | 60% { 187 | transform: rotate(0deg); 188 | } /* Reset for the last half to pause */ 189 | 100% { 190 | transform: rotate(0deg); 191 | } 192 | } -------------------------------------------------------------------------------- /static/skills.svg: -------------------------------------------------------------------------------- 1 | Skills -------------------------------------------------------------------------------- /static/education.svg: -------------------------------------------------------------------------------- 1 | Education -------------------------------------------------------------------------------- /src/layouts/Default.vue: -------------------------------------------------------------------------------- 1 | 278 | 279 | 280 | query { 281 | metadata { 282 | siteName 283 | } 284 | } 285 | 286 | 287 | 313 | 314 | aboelkassem -------------------------------------------------------------------------------- /static/sql-server.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------