├── .prettierrc ├── vercel.json ├── preview.png ├── config ├── privateRuntimeConfig.js ├── firebase.js ├── sitemap.js ├── publicRuntimeConfig.js └── meta.js ├── src ├── static │ ├── icon.png │ ├── favicon.ico │ └── banners │ │ ├── banner.png │ │ └── dictionary.png ├── assets │ └── svalley.png ├── plugins │ ├── aos.client.js │ └── v-tooltip.client.js ├── components │ ├── Blog │ │ ├── Info.vue │ │ ├── Contents.vue │ │ ├── GoTop.vue │ │ └── Share.vue │ ├── Icon │ │ ├── Check.vue │ │ ├── Chevron.vue │ │ ├── Calendar.vue │ │ ├── At.vue │ │ ├── Link.vue │ │ ├── Circle.vue │ │ ├── Star.vue │ │ ├── Fire.vue │ │ ├── Fork.vue │ │ └── Brand.vue │ ├── Card │ │ ├── Word.vue │ │ ├── Project.vue │ │ ├── Repo.vue │ │ ├── Post.vue │ │ └── Song.vue │ ├── Nav │ │ ├── Footer.vue │ │ └── Default.vue │ ├── Widget │ │ ├── Technologies.vue │ │ ├── Spotify.vue │ │ └── Discord.vue │ ├── Contact.vue │ ├── Color.vue │ ├── Skeleton.vue │ └── AboutMe.vue ├── pages │ ├── index.vue │ ├── utils │ │ ├── index.vue │ │ └── metatag.vue │ ├── info │ │ ├── repos.vue │ │ └── projects.vue │ ├── dictionary.vue │ ├── blog │ │ ├── index.vue │ │ └── _slug.vue │ ├── donate.vue │ └── recommends.vue ├── stylesheets │ ├── transitions.scss │ ├── disqus.scss │ ├── scrollbar.scss │ └── root.scss └── layouts │ ├── default.vue │ └── error.vue ├── .env.example ├── windi.config.js ├── netlify └── functions │ └── getMetatag.mjs ├── LICENSE ├── posts ├── yeniden-mi.md ├── ilginc-cinayet-kisa-hikaye.md ├── tiriviriseyler-devlog1.md └── spotifyd-ve-spt-ile-spotify-clientten-kurtulun.md ├── .gitignore ├── nuxt.config.js ├── package.json └── README.md /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "silent": true 4 | } 5 | } -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mehmetali345Dev/website/HEAD/preview.png -------------------------------------------------------------------------------- /config/privateRuntimeConfig.js: -------------------------------------------------------------------------------- 1 | export default { 2 | lastfm: process.env.LASTFM_APIKEY, 3 | } 4 | -------------------------------------------------------------------------------- /src/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mehmetali345Dev/website/HEAD/src/static/icon.png -------------------------------------------------------------------------------- /src/assets/svalley.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mehmetali345Dev/website/HEAD/src/assets/svalley.png -------------------------------------------------------------------------------- /src/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mehmetali345Dev/website/HEAD/src/static/favicon.ico -------------------------------------------------------------------------------- /src/static/banners/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mehmetali345Dev/website/HEAD/src/static/banners/banner.png -------------------------------------------------------------------------------- /src/static/banners/dictionary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mehmetali345Dev/website/HEAD/src/static/banners/dictionary.png -------------------------------------------------------------------------------- /src/plugins/aos.client.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import VueAnimateOnScroll from 'vue-animate-onscroll' 4 | Vue.use(VueAnimateOnScroll) 5 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | LASTFM_APIKEY="YOUR-LASTFM-API-KEY" 2 | FIREBASE_API_KEY="YOUR-API-KEY" 3 | FIREBASE_PROJECT_ID="YOUR-PROJECT-ID" 4 | FIREBASE_APP_ID="YOUR-APP-ID" -------------------------------------------------------------------------------- /src/plugins/v-tooltip.client.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VTooltipPlugin from 'v-tooltip' 3 | import 'v-tooltip/dist/v-tooltip.css' 4 | 5 | Vue.use(VTooltipPlugin) 6 | -------------------------------------------------------------------------------- /windi.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: 'class', 3 | plugins: [ 4 | // ... 5 | require('@windicss/plugin-scrollbar'), 6 | require('windicss/plugin/line-clamp'), 7 | ], 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Blog/Info.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /config/firebase.js: -------------------------------------------------------------------------------- 1 | export default { 2 | config: { 3 | appId: process.env.FIREBASE_APP_ID, 4 | apiKey: process.env.FIREBASE_API_KEY, 5 | projectId: process.env.FIREBASE_PROJECT_ID, 6 | }, 7 | services: { 8 | firestore: true, 9 | }, 10 | } -------------------------------------------------------------------------------- /src/stylesheets/transitions.scss: -------------------------------------------------------------------------------- 1 | .page-enter-active, 2 | .page-leave-active { 3 | transition: opacity 0.2s; 4 | } 5 | 6 | .page-enter, 7 | .page-leave-to { 8 | opacity: 0; 9 | } 10 | .fade-enter-active, 11 | .fade-leave-active { 12 | transition: opacity 0.2s; 13 | } 14 | 15 | .fade-enter, 16 | .fade-leave-to { 17 | opacity: 0; 18 | } 19 | -------------------------------------------------------------------------------- /src/components/Icon/Check.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/components/Icon/Chevron.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /config/sitemap.js: -------------------------------------------------------------------------------- 1 | 2 | export default async function () { 3 | const { $content } = require("@nuxt/content") 4 | const posts = await $content().fetch() 5 | 6 | const routes = [] 7 | for (const post of posts) { 8 | routes.push(`blog/${post.slug}`) 9 | } 10 | 11 | return { 12 | hostname: "https://345dev.me", 13 | gzip: true, 14 | routes, 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /config/publicRuntimeConfig.js: -------------------------------------------------------------------------------- 1 | export default { 2 | links: { 3 | Discord: "https://discord.gg/cjrz8t5HcZ", 4 | Twitter: "https://twitter.com/AnakinS07677978/?utm_source=mehmetali345.xyz", 5 | Github: "https://github.com/Mehmetali345Dev/?utm_source=mehmetali345.xyz", 6 | mail: "mailto:345m.ali2007@gmail.com", 7 | }, 8 | lastfm: process.env.LASTFM_APIKEY 9 | } 10 | -------------------------------------------------------------------------------- /netlify/functions/getMetatag.mjs: -------------------------------------------------------------------------------- 1 | import metaFetcher from 'meta-fetcher' 2 | 3 | exports.handler = async function (event, context) { 4 | // your server-side functionality 5 | 6 | const url = event.queryStringParameters.url || "https://345dev.me"; 7 | 8 | const meta = await metaFetcher(url) 9 | 10 | return { 11 | statusCode: 200, 12 | body: JSON.stringify(meta), 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Icon/Calendar.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/components/Icon/At.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/stylesheets/disqus.scss: -------------------------------------------------------------------------------- 1 | $gray-100: rgb(243, 244, 246); 2 | $gray-200: rgb(229, 231, 235); 3 | 4 | $gray-700: rgb(55, 65, 81); 5 | $gray-900: rgb(17, 24, 39); 6 | 7 | #disqus_thread { 8 | a { 9 | color: black; 10 | 11 | &:hover { 12 | color: $gray-900; 13 | } 14 | } 15 | } 16 | 17 | .dark #disqus_thread { 18 | a { 19 | color: $gray-200; 20 | 21 | &:hover { 22 | color: white; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Icon/Link.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/components/Icon/Circle.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/components/Icon/Star.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/Icon/Fire.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/components/Blog/Contents.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /src/pages/utils/index.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/Card/Word.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /src/components/Card/Project.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/components/Nav/Footer.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/components/Widget/Technologies.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Mehmet Ali Külahçı 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/Blog/GoTop.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 51 | -------------------------------------------------------------------------------- /posts/yeniden-mi.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Yeniden mi? 3 | description: Sitemin 4. kez yenilenmesi sonucunda neler değiştine bakıyoruz. 4 | image: https://emojipedia-us.s3.amazonaws.com/source/skype/289/party-popper_1f389.png 5 | date: 2021-09-18 6 | banner: https://miro.medium.com/max/2470/0*Zi9dr_E7XHoPvTk7 7 | --- 8 | # Neler oluyooooor 9 | Hepinize merhaba ben Mehmet Ali, uzun bir aradan sonra tekrar blog yazıları yazmaya başladım. Çünkü eski sitemde blog bulunmamaktaydı. Ancak birkaç haftalık tekrar sitemi yazmamım ardından bir blog eklemeye karar verdim. 10 | 11 | # Neler değişti? 12 | 13 | - Yeniden blog eklendi. 14 | - Bağış sayfası tekrar düzenlendi, ayrıca RepeatPay'e geçildi. (Yakında bunun hakkında gönderi gelecek.) 15 | - Blog sayfası ve gönderi sayfası tekrar yazıldı. 16 | - Eski blogdaki ihtiyaç olmayan özellikler kaldırıldı. 17 | 18 | *Ayrıca artık tamamen bana ait YeY* 19 | 20 | # Blog yazıları 21 | 22 | Blog yazılarını elimden geldiğince sık atmaya çalışacağım belki haftada bir veya iki haftada bir olabilir. 23 | 24 | # Son projelerim 25 | 26 | Şu an üzerinde çalıştığım iki projem var: [ModernaCSS](https://github.com/Mehmetali345Dev/modernacss) ve [RepeatPay](https://github.com/RepeatPay/RepeatPay). İkiside aktif ve geliştirme altında, ilerleyen zamanlarda yeni projeler gelecektir. 27 | 28 | 29 | # Son olarak 30 | 31 | Eski siteme [buradan](https://is.my.subdomain.cool.mehmetali345.xyz) ulaşabilirsiniz. 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/components/Contact.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 55 | -------------------------------------------------------------------------------- /src/components/Icon/Fork.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | 92 | # netlify folder 93 | .netlify -------------------------------------------------------------------------------- /src/stylesheets/scrollbar.scss: -------------------------------------------------------------------------------- 1 | /* Tailwind Colors */ 2 | $gray-200: rgb(229, 231, 235); 3 | $gray-300: rgb(209, 213, 219); 4 | 5 | $gray-700: rgb(0, 14, 20); 6 | $gray-800: rgb(000, 000, 000); 7 | 8 | /* Scrollbar mixin */ 9 | @mixin scrollbar($isdark, $iselement) { 10 | scrollbar-width: thin; 11 | 12 | /* Don't set background to elements */ 13 | @if $isdark == 'true' and $iselement == 'false' { 14 | /* @apply bg-gray-700; */ 15 | background-color: $gray-700; 16 | } @else if $isdark == 'false' and $iselement == 'false' { 17 | /* @apply bg-gray-300; */ 18 | background-color: $gray-300; 19 | } 20 | 21 | ::-webkit-scrollbar { 22 | /* Apply thinner scrollbar for elements */ 23 | @if $iselement == 'true' { 24 | width: 6px; 25 | height: 6px; 26 | } @else { 27 | width: 8px; 28 | height: 8px; 29 | } 30 | 31 | @if $isdark == 'true' { 32 | &-thumb { 33 | /* @apply bg-gray-700; */ 34 | background-color: $gray-700; 35 | } 36 | &-track { 37 | /* @apply bg-gray-800; */ 38 | background-color: $gray-800; 39 | } 40 | } @else { 41 | &-thumb { 42 | /* @apply bg-gray-300; */ 43 | background-color: $gray-300; 44 | } 45 | 46 | &-track { 47 | /* @apply bg-gray-200; */ 48 | background-color: $gray-200; 49 | } 50 | } 51 | } 52 | } 53 | 54 | /* Use the mixin on HTML */ 55 | html { 56 | @include scrollbar('false', 'false'); 57 | 58 | &.dark { 59 | @include scrollbar('true', 'false'); 60 | } 61 | } 62 | 63 | /* Create a class for other elements */ 64 | .scrollbar { 65 | @include scrollbar('false', 'true'); 66 | } 67 | 68 | .dark .scrollbar { 69 | @include scrollbar('true', 'true'); 70 | } 71 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | import head from './config/meta' 2 | import sitemap from './config/sitemap' 3 | import publicRuntimeConfig from './config/publicRuntimeConfig' 4 | import firebase from './config/firebase' 5 | 6 | export default { 7 | rootDir: './', 8 | srcDir: 'src', 9 | target: 'static', 10 | ssr: true, 11 | components: true, 12 | publicRuntimeConfig, 13 | 14 | // Meta tags imported from ./config/meta.js 15 | head, 16 | 17 | googleAnalytics: { 18 | id: 'UA-183921946-1', 19 | }, 20 | 21 | buildModules: [ 22 | 'nuxt-windicss', 23 | '@nuxtjs/color-mode', 24 | '@nuxtjs/moment', 25 | '@nuxt/image', 26 | '@nuxtjs/google-analytics', 27 | 'nuxt-compress', 28 | ], 29 | 30 | modules: [ 31 | 'nuxt-webfontloader', 32 | '@nuxtjs/axios', 33 | '@nuxtjs/pwa', 34 | '@nuxt/content', 35 | '@nuxtjs/robots', 36 | ['@nuxtjs/sitemap', sitemap], 37 | ['@nuxtjs/firebase', firebase], 38 | ], 39 | 40 | // Loads all of css files from one rootscss file 41 | css: ['~/stylesheets/root.scss'], 42 | 43 | // Imports Animate-on-scroll and v-tooltip plugin 44 | plugins: ['@/plugins/aos.client.js', '@/plugins/v-tooltip.client.js'], 45 | 46 | // Configuration for modules 47 | 48 | pwa: { 49 | manifest: { 50 | lang: 'en', 51 | }, 52 | }, 53 | 54 | colorMode: { 55 | classSuffix: '', 56 | }, 57 | 58 | // For @nuxt/content 59 | content: { 60 | liveEdit: false, 61 | 62 | // Specifies blog posts' directory 63 | dir: '../posts', 64 | 65 | markdown: { 66 | prism: { 67 | theme: 'prism-themes/themes/prism-holi-theme.css', 68 | }, 69 | }, 70 | }, 71 | 72 | webfontloader: { 73 | google: { 74 | families: ['JetBrains Mono:400,700'], 75 | }, 76 | }, 77 | windicss: { 78 | analyze: true, 79 | }, 80 | } 81 | -------------------------------------------------------------------------------- /src/components/Nav/Default.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 66 | 67 | -------------------------------------------------------------------------------- /src/components/Card/Repo.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /src/components/Card/Post.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/components/Color.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 64 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "345dev.me", 3 | "version": "5.1.0", 4 | "license": "MIT", 5 | "homepage": "https://345dev.me", 6 | "author": { 7 | "name": "Mehmet Ali Külahçı", 8 | "email": "345m.ali2007@gmail.com", 9 | "url": "https://345dev.me" 10 | }, 11 | "bugs": { 12 | "email": "345m.ali2007@gmail.com", 13 | "url": "https://github.com/mehmetali345dev/website/issues" 14 | }, 15 | "funding": [ 16 | { 17 | "type": "individual", 18 | "url": "https://345dev.me/donate" 19 | }, 20 | { 21 | "type": "patreon", 22 | "url": "https://www.patreon.com/mehmetali345" 23 | } 24 | ], 25 | "scripts": { 26 | "dev": "nuxt", 27 | "build": "nuxt build", 28 | "start": "nuxt start", 29 | "generate": "nuxt generate", 30 | "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .", 31 | "lint": "yarn lint:js" 32 | }, 33 | "dependencies": { 34 | "@guillaumebriday/vue-scroll-progress-bar": "^1.0.0", 35 | "@netlify/functions": "^0.10.0", 36 | "@nuxt/content": "^1.15.1", 37 | "@nuxtjs/axios": "^5.13.6", 38 | "@nuxtjs/firebase": "^8.1.1", 39 | "@nuxtjs/pwa": "^3.3.5", 40 | "@nuxtjs/robots": "^2.5.0", 41 | "@nuxtjs/sitemap": "^2.4.0", 42 | "core-js": "^3.20.2", 43 | "firebase": "^9.6.1", 44 | "meta-fetcher": "^3.1.1", 45 | "nuxt": "^2.15.7", 46 | "nuxt-helmet": "^2.0.1", 47 | "nuxt-webfontloader": "^1.1.0", 48 | "prism-themes": "^1.9.0", 49 | "sass": "^1.46.0", 50 | "sass-loader": "10.1.1", 51 | "v-tooltip": "^3.0.0-beta.12", 52 | "vue-animate-onscroll": "^1.0.8", 53 | "vue-disqus": "^4.0.1" 54 | }, 55 | "devDependencies": { 56 | "@nuxt/image": "^0.6.0", 57 | "@nuxtjs/color-mode": "^2.1.1", 58 | "@nuxtjs/google-analytics": "^2.4.0", 59 | "@nuxtjs/moment": "^1.6.1", 60 | "@windicss/plugin-animations": "^1.0.9", 61 | "@windicss/plugin-scrollbar": "^1.2.3", 62 | "nuxt-compress": "^5.0.0", 63 | "nuxt-windicss": "^2.2.2", 64 | "prettier": "^2.5.0" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /config/meta.js: -------------------------------------------------------------------------------- 1 | const description = 2 | "My name is Mehmet Ali. I'm full stack developer and student from Turkey. Visit website and learn more about me." 3 | 4 | export default { 5 | title: "Mehmetali345Dev", 6 | titleTemplate: "%s - Mehmetali345Dev", 7 | meta: [ 8 | { charset: 'utf-8' }, 9 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 10 | { 11 | hid: 'description', 12 | name: 'description', 13 | content: description, 14 | }, 15 | /* Twitter */ 16 | { 17 | hid: 'twitter:card', 18 | name: 'twitter:card', 19 | content: 'summary', 20 | }, 21 | { 22 | hid: 'twitter:site', 23 | name: 'twitter:site', 24 | content: '@AnakinS07677978', 25 | }, 26 | { 27 | hid: 'twitter:creator', 28 | name: 'twitter:creator', 29 | content: '@AnakinS07677978', 30 | }, 31 | { 32 | hid: 'twitter:title', 33 | name: 'twitter:title', 34 | content: '345dev.me', 35 | }, 36 | { 37 | hid: 'twitter:description', 38 | name: 'twitter:description', 39 | content: description, 40 | }, 41 | { 42 | hid: 'twitter:image', 43 | name: 'twitter:image', 44 | content: '/icon.png', 45 | }, 46 | /* Open-Graph */ 47 | { 48 | hid: 'og:title', 49 | name: 'og:title', 50 | content: 'Mehmetali345Dev', 51 | }, 52 | { 53 | hid: 'og:type', 54 | name: 'og:type', 55 | content: 'website', 56 | }, 57 | { 58 | hid: 'og:site_name', 59 | name: 'og:site_name', 60 | content: '345dev.me', 61 | }, 62 | { 63 | hid: 'og:description', 64 | name: 'og:description', 65 | content: description, 66 | }, 67 | { 68 | hid: 'og:image', 69 | name: 'og:image', 70 | content: 'https://345dev.me/banners/banner.png', 71 | }, 72 | /* Others */ 73 | { 74 | hid: 'theme-color', 75 | name: 'theme-color', 76 | content: '#059669', 77 | }, 78 | ].map((i) => { 79 | if (i.name && !i.property) i.property = i.name 80 | return i 81 | }), 82 | link: [ 83 | { 84 | rel: 'icon', 85 | type: 'image/x-icon', 86 | href: '/favicon.ico', 87 | }, 88 | ], 89 | } -------------------------------------------------------------------------------- /src/stylesheets/root.scss: -------------------------------------------------------------------------------- 1 | @import 'transitions'; 2 | @import 'scrollbar'; 3 | @import 'disqus'; 4 | 5 | html { 6 | font-family: 'JetBrains Mono', monospace; 7 | font-display: swap; 8 | scroll-behavior: smooth; 9 | } 10 | 11 | @mixin code { 12 | @apply bg-green-100 py-px px-1 text-green-600 dark:(bg-green-900 bg-opacity-50 text-green-400); 13 | &::before, 14 | &::after { 15 | content: '`'; 16 | } 17 | } 18 | 19 | .scale-up{ 20 | @apply hover:scale-103 transform ease-in transition-all duration-200; 21 | } 22 | 23 | .nuxt-content { 24 | @apply space-y-2; 25 | /** Apply styles for headings */ 26 | h1 { 27 | @apply text-3xl text-green-500 font-bold; 28 | } 29 | h2 { 30 | @apply text-2xl text-green-500 font-bold; 31 | } 32 | h3, 33 | h4, 34 | h5 { 35 | @apply text-lg text-green-500; 36 | } 37 | 38 | p { 39 | @apply text-gray-900 dark:text-gray-200; 40 | & a { 41 | @apply text-green-500 hover:underline; 42 | } 43 | & img { 44 | @apply rounded my-2; 45 | } 46 | &.text-center { 47 | @apply flex justify-center; 48 | } 49 | & strong { 50 | @apply font-medium text-gray-900 dark:text-gray-100; 51 | } 52 | code { 53 | @include code; 54 | } 55 | &:not(:last-child) { 56 | @apply mb-6; 57 | } 58 | } 59 | 60 | /** Apply style for codeblocks */ 61 | .nuxt-content-highlight { 62 | @apply my-2 relative; 63 | .filename { 64 | @apply font-light mt-3 mr-3 text-sm right-0 text-gray-300 z-10 absolute; 65 | } 66 | pre { 67 | @apply rounded-md text-sm py-4 px-6; 68 | } 69 | } 70 | 71 | ol, 72 | ul { 73 | @apply text-black dark:text-white; 74 | li a { 75 | @apply text-green-500 dark:text-green-500 hover:underline; 76 | } 77 | li code { 78 | @include code; 79 | } 80 | li:not(:last-child) { 81 | @apply mb-1; 82 | } 83 | } 84 | ol { 85 | @apply list-decimal pl-4; 86 | li:not(:last-child) { 87 | @apply mb-5; 88 | } 89 | } 90 | ul { 91 | @apply list-disc pl-6; 92 | &:not(:last-child) { 93 | @apply mb-5; 94 | } 95 | li::marker { 96 | @apply text-green-500; 97 | } 98 | } 99 | /* Horizontal line */ 100 | hr { 101 | @apply border-dashed border-gray-300 my-8 dark:border-gray-700; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/components/Widget/Spotify.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 83 | 84 | -------------------------------------------------------------------------------- /src/components/Blog/Share.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 82 | 83 | 88 | -------------------------------------------------------------------------------- /src/components/Card/Song.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 345dev.me 2 | ![Preview](https://raw.githubusercontent.com/Mehmetali345Dev/website/master/preview.png) 3 | 4 | [![CodeFactor](https://www.codefactor.io/repository/github/mehmetali345dev/website/badge)](https://www.codefactor.io/repository/github/mehmetali345dev/website) 5 | 6 | My personal portfolio and blog made with Nuxt.js, Vue.js, WindiCSS. 7 | 8 | 9 | # What it have? 10 | 11 | - Realtime Discord and Spotify status! 12 | - Page for freelancers 13 | - Works, projects and repos! 14 | - Custom and re-usable components 15 | - 20+ components 16 | - Skeleton loaders, cards etc. 17 | - Static blog 18 | - Comments with Disqus 19 | - Write blog posts with markdown! 20 | - Real-world apps 21 | - Firebase integration! 22 | - Turkish Dictionary for awkward words (Firestore) 23 | - Recommendations (Firestore) 24 | - Utilities like metatag generator (WIP) 25 | - Most of styling job is made with WindiCSS 26 | - JIT! 27 | - Except some transitions and blog most of styling is made with WindiCSS 28 | # Getting Started 29 | 30 | ## Requirements 31 | 32 | - Nodejs 12.17.1 or higher version. 33 | - Yarn package manager (It not need but I prefer this.) 34 | 35 | ## Compiling Source Code 36 | 37 | ### First 38 | 1. Download code and unzip folder 39 | 2. Open terminal or CMD (Windows) on project folder. 40 | ### Second 41 | Install packages with your preffered package manager 42 | 43 | Write these command CMD or Terminal 44 | - With Yarn: ```yarn``` 45 | - With NPM: ```npm install``` 46 | 47 | ### Third 48 | For running app on development server 49 | 50 | Write these command CMD or Terminal 51 | 52 | - With Yarn: ```yarn dev``` 53 | - With NPM: ```npm run dev``` 54 | 55 | For build and compile: 56 | 57 | - With Yarn: ```yarn generate (or yarn build)``` 58 | - With NPM: ```npm run generate or (npm run build)``` 59 | 60 | and open [localhost:3000](http://localhost:3000) on your browser and your app is ready. 61 | 62 | If you are want host on **paid or free services**. I recommend Vercel or Netlify. My app is hosted by [Vercel](https://vercel.com). 63 | 64 | # Firebase 65 | I have two special pages, a Dictionary and Recommendations. If you don't need these pages you can remove this pages. 66 | 67 | - First, remove `firebase` and `@nuxtjs/firebase` modules 68 | - Second delete firebase.js file from `config` directory 69 | - Third remove `@nuxtjs/firebase` in `modules` array from `nuxt.config.js` and delete firebase import. 70 | - After that you can delete these two pages 71 | 72 | # To-do 73 | - [x] Add share options to blog posts 74 | - [ ] Add works 75 | - [x] Custom error page 76 | - Recommandations 77 | - [x] Create page 78 | - [ ] Add weekly book recommandation 79 | - [x] Add daily song recommandation 80 | 81 | # Special Thanks 82 | to [Eggsy](https://github.com/eggsy), [Ven](https://ven.earth) and [Tarık Coşkun](https://github.com/tarikcoskun). I'm very inspired by them, and i used some of their code. 83 | -------------------------------------------------------------------------------- /src/layouts/error.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 95 | 100 | -------------------------------------------------------------------------------- /src/pages/info/repos.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 109 | -------------------------------------------------------------------------------- /src/pages/dictionary.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 113 | -------------------------------------------------------------------------------- /src/pages/blog/index.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /src/pages/info/projects.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /src/pages/donate.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /src/pages/utils/metatag.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /src/pages/recommends.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 142 | -------------------------------------------------------------------------------- /src/components/Widget/Discord.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 152 | 153 | -------------------------------------------------------------------------------- /src/components/Skeleton.vue: -------------------------------------------------------------------------------- 1 |