├── .eslintrc.js ├── .gitignore ├── .npmrc ├── .prettierrc.cjs ├── README.md ├── app.vue ├── assets └── css │ ├── base.css │ ├── index.css │ ├── tailwind.css │ └── typography.css ├── components ├── ProjectCard.vue ├── TechnologyCard.vue ├── Timeline.vue ├── common │ ├── Button.vue │ ├── Container.vue │ └── Logo.vue ├── icons │ ├── DiscordIcon.vue │ ├── GithubIcon.vue │ └── TwitterIcon.vue └── layout │ ├── Footer.vue │ └── Navbar.vue ├── constants.ts ├── data ├── educations.ts ├── jobs.ts ├── meta.ts ├── projects.ts └── technologies.ts ├── error.vue ├── layouts └── default.vue ├── middleware └── scroll-to-top.global.ts ├── nuxt.config.ts ├── package.json ├── pages ├── about-me.vue ├── index.vue └── projects.vue ├── pnpm-lock.yaml ├── public ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── images │ ├── projects │ │ ├── back-to-code.svg │ │ ├── de-questcoach.svg │ │ ├── dierenpoli.svg │ │ ├── energielive.svg │ │ ├── first2find.svg │ │ ├── from-the-north.png │ │ ├── gedrag.svg │ │ ├── gewoon.svg │ │ ├── groninger-kracht.svg │ │ ├── jil-potma.svg │ │ ├── konforma.svg │ │ ├── kupers-bedrijfsjurist.svg │ │ ├── marenland.svg │ │ ├── meerstaete.svg │ │ ├── mondriaanfondsen.svg │ │ ├── naarsing-letselschade.svg │ │ ├── netwerk-wijkzorg-noord.svg │ │ ├── ooggetuigen-gaswinning.svg │ │ ├── paais.png │ │ ├── pppo.svg │ │ ├── publiek.svg │ │ ├── ruud-haverkort-autoschade.svg │ │ ├── sciva.svg │ │ ├── true-leadership.svg │ │ ├── van-harte.svg │ │ └── wijs-groningen.svg │ └── technologies │ │ ├── bootstrap.svg │ │ ├── css.svg │ │ ├── git.svg │ │ ├── gulp.svg │ │ ├── html.svg │ │ ├── javascript.svg │ │ ├── jquery.svg │ │ ├── laravel.svg │ │ ├── mongodb.svg │ │ ├── mysql.svg │ │ ├── nginx.svg │ │ ├── nuxtjs.svg │ │ ├── php.svg │ │ ├── postcss.svg │ │ ├── python.svg │ │ ├── sass.svg │ │ ├── tailwindcss.svg │ │ ├── typescript.svg │ │ ├── vuejs.svg │ │ ├── woocommerce.svg │ │ └── wordpress.svg ├── mstile-150x150.png ├── safari-pinned-tab.svg └── site.webmanifest ├── server └── tsconfig.json ├── tailwind.config.ts ├── tsconfig.json └── utils ├── array.ts └── meta.ts /.eslintrc.js: -------------------------------------------------------------------------------- 1 | require('@rushstack/eslint-patch/modern-module-resolution'); 2 | 3 | module.exports = { 4 | root: true, 5 | extends: [ 6 | '@nuxtjs/eslint-config-typescript', 7 | '@vue/eslint-config-airbnb-with-typescript', 8 | 'plugin:prettier/recommended', 9 | ], 10 | rules: { 11 | 'no-param-reassign': 0, 12 | 13 | 'import/no-extraneous-dependencies': 0, 14 | 'import/prefer-default-export': 0, 15 | 16 | 'vue/no-multiple-template-root': 0, 17 | 'vue/multi-word-component-names': 0, 18 | 19 | 'vuejs-accessibility/click-events-have-key-events': 0, 20 | 'vuejs-accessibility/label-has-for': 0, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /.prettierrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingComma: 'es5', 3 | tabWidth: 2, 4 | semi: true, 5 | singleQuote: true, 6 | endOfLine: 'auto', 7 | }; 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio 2 | 3 | This is the repository for my personal portfolio website. 4 | 5 | ## Tech Stack 6 | 7 | - Nuxt.js 8 | - Tailwind CSS 9 | 10 | ## Setup 11 | 12 | Make sure to install the dependencies: 13 | 14 | ```bash 15 | # yarn 16 | yarn install 17 | 18 | # npm 19 | npm install 20 | ``` 21 | 22 | # Development 23 | 24 | Start the development server on http://localhost:3000 25 | 26 | ```bash 27 | # yarn 28 | yarn dev 29 | 30 | # npm 31 | npm run dev 32 | ``` 33 | 34 | # Production 35 | 36 | Build the application for production: 37 | 38 | ```bash 39 | # yarn 40 | yarn build 41 | 42 | # npm 43 | npm run build 44 | ``` 45 | 46 | Locally preview the production build: 47 | 48 | ```bash 49 | # yarn 50 | yarn preview 51 | 52 | # npm 53 | npm run preview 54 | ``` 55 | 56 | --- 57 | 58 | © 2022 | MIT License 59 | -------------------------------------------------------------------------------- /app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /assets/css/base.css: -------------------------------------------------------------------------------- 1 | @layer base { 2 | body { 3 | @apply text-body font-work-sans bg-zinc-900 text-zinc-400 antialiased; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /assets/css/index.css: -------------------------------------------------------------------------------- 1 | @import './tailwind'; 2 | @import './typography'; 3 | @import './base'; 4 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /assets/css/typography.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .text-h1 { 3 | @apply text-[2.75rem] lg:text-[3.5rem]; 4 | } 5 | 6 | .text-h2 { 7 | @apply text-[2rem] lg:text-[2.625rem]; 8 | } 9 | 10 | .text-h3 { 11 | @apply text-[1.5rem] lg:text-[2rem]; 12 | } 13 | 14 | .text-h4 { 15 | @apply text-[1.125rem] lg:text-[1.5rem]; 16 | } 17 | 18 | .text-h5 { 19 | @apply text-[1rem] lg:text-[1.125rem]; 20 | } 21 | 22 | .text-h6 { 23 | @apply text-[0.875rem]; 24 | } 25 | 26 | .text-body { 27 | @apply text-[1.125rem] leading-[1.5] lg:text-[1.25rem] lg:leading-[1.75]; 28 | } 29 | 30 | .text-sm { 31 | @apply text-[1rem] leading-[1.5] lg:text-[1.125rem] lg:leading-[1.75]; 32 | } 33 | } 34 | 35 | @layer base { 36 | h1, 37 | h2, 38 | h3, 39 | h4, 40 | h5, 41 | h6 { 42 | @apply font-montserrat font-bold leading-[1.25] tracking-[-0.025em] [text-wrap:balance]; 43 | } 44 | 45 | h1 { 46 | @apply text-h1; 47 | } 48 | h2 { 49 | @apply text-h2; 50 | } 51 | h3 { 52 | @apply text-h3; 53 | } 54 | h4 { 55 | @apply text-h4; 56 | } 57 | h5 { 58 | @apply text-h5; 59 | } 60 | h6 { 61 | @apply text-h6; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /components/ProjectCard.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 37 | -------------------------------------------------------------------------------- /components/TechnologyCard.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 23 | -------------------------------------------------------------------------------- /components/Timeline.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 47 | -------------------------------------------------------------------------------- /components/common/Button.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 82 | -------------------------------------------------------------------------------- /components/common/Container.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /components/common/Logo.vue: -------------------------------------------------------------------------------- 1 | 52 | -------------------------------------------------------------------------------- /components/icons/DiscordIcon.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /components/icons/GithubIcon.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /components/icons/TwitterIcon.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /components/layout/Footer.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 50 | -------------------------------------------------------------------------------- /components/layout/Navbar.vue: -------------------------------------------------------------------------------- 1 | 84 | 85 | 120 | -------------------------------------------------------------------------------- /constants.ts: -------------------------------------------------------------------------------- 1 | export const NAVIGATION = [ 2 | { 3 | to: "/", 4 | name: "Home", 5 | exact: true, 6 | }, 7 | { 8 | to: "/about-me", 9 | name: "About Me", 10 | }, 11 | { 12 | to: "/projects", 13 | name: "My Work", 14 | }, 15 | ]; 16 | -------------------------------------------------------------------------------- /data/educations.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | timespan: 'Aug. 2019 - Jul. 2022', 4 | label: 'MBO, Level 4', 5 | title: 'Application & Media Developer', 6 | subtitle: 'Alfa-college - Groningen, The Netherlands', 7 | }, 8 | { 9 | timespan: 'Aug. 2018 - Jul. 2019', 10 | label: 'MBO, Level 3', 11 | title: 'Collaborator IT Management', 12 | subtitle: 'Alfa-college - Groningen, The Netherlands', 13 | }, 14 | ]; 15 | -------------------------------------------------------------------------------- /data/jobs.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | timespan: 'Nov. 2024 - present', 4 | label: 'Full-time', 5 | title: 'Full-stack Developer', 6 | subtitle: 'Kyano Digital B.V. - Groningen, The Netherlands', 7 | description: [ 8 | 'ClickUp', 9 | 'WordPress', 10 | 'Scrum', 11 | 'CSS', 12 | 'HTML', 13 | 'JavaScript', 14 | 'SASS/SCSS', 15 | 'PHP', 16 | ].join(', '), 17 | }, 18 | { 19 | timespan: 'Nov. 2022 - Oct.', 20 | label: 'Full-time', 21 | title: 'Full-stack Developer', 22 | subtitle: 'Script - Groningen, The Netherlands', 23 | description: [ 24 | 'Vite', 25 | 'Jira', 26 | 'Bitbucket', 27 | 'Esbuild', 28 | 'PostCSS', 29 | 'WordPress', 30 | 'TypeScript', 31 | 'Scrum', 32 | 'CSS', 33 | 'HTML', 34 | 'JavaScript', 35 | 'Git', 36 | 'SASS/SCSS', 37 | 'Tailwind CSS', 38 | 'PHP', 39 | ].join(', '), 40 | }, 41 | { 42 | timespan: 'Jul. 2022 - Nov. 2022', 43 | label: 'Contract', 44 | title: 'WordPress Developer', 45 | subtitle: 'Script - Groningen, The Netherlands', 46 | description: [ 47 | 'Jira', 48 | 'Bitbucket', 49 | 'Esbuild', 50 | 'PostCSS', 51 | 'WordPress', 52 | 'TypeScript', 53 | 'Scrum', 54 | 'CSS', 55 | 'HTML', 56 | 'JavaScript', 57 | 'Git', 58 | 'SASS/SCSS', 59 | 'Tailwind CSS', 60 | 'PHP', 61 | 'Bootstrap', 62 | ].join(', '), 63 | }, 64 | { 65 | timespan: 'Feb. 2022 - Jul. 2022', 66 | label: 'Internship', 67 | title: 'Full-stack Developer', 68 | subtitle: 'Script - Groningen, The Netherlands', 69 | description: [ 70 | 'Trello', 71 | 'Jira', 72 | 'Bitbucket', 73 | 'TypeScript', 74 | 'Scrum', 75 | 'CSS', 76 | 'HTML', 77 | 'JavaScript', 78 | 'Vue', 79 | 'Git', 80 | 'Laravel', 81 | 'Tailwind CSS', 82 | 'PHP', 83 | ].join(', '), 84 | }, 85 | { 86 | timespan: 'Sep. 2020 - Feb. 2021', 87 | label: 'Internship', 88 | title: 'Front-end Developer', 89 | subtitle: 'Prophyta - Scheemda, The Netherlands', 90 | description: [ 91 | 'Vue', 92 | 'Nuxt', 93 | 'Vuetify', 94 | 'HTML', 95 | 'CSS', 96 | 'JavaScript', 97 | 'Git', 98 | ].join(', '), 99 | }, 100 | ]; 101 | -------------------------------------------------------------------------------- /data/meta.ts: -------------------------------------------------------------------------------- 1 | export const title = 'NukeJS'; 2 | export const url = 'https://nukejs.dev'; 3 | export const description = "I'm Ronnie. A full-stack developer."; 4 | export const keywords = 5 | 'fullstack, ronnie, web developer, nodejs, vuejs, nuxtjs, blog'; 6 | export const twitter = '@nuke_js'; 7 | -------------------------------------------------------------------------------- /data/projects.ts: -------------------------------------------------------------------------------- 1 | import { Technology } from './technologies'; 2 | 3 | export interface Project { 4 | name: string; 5 | image: { 6 | name: string; 7 | extension?: string; 8 | }; 9 | slug: string; 10 | description: string; 11 | color?: string; 12 | links: { 13 | external?: string; 14 | github?: string; 15 | }; 16 | technologies: Technology[]; 17 | } 18 | 19 | export default [ 20 | { 21 | name: 'Marenland', 22 | image: { 23 | name: 'marenland', 24 | }, 25 | color: '#609b89', 26 | slug: 'marenland', 27 | description: 'A WordPress website.', 28 | links: { 29 | external: 'https://marenland.nl/', 30 | }, 31 | technologies: [ 32 | Technology.HTML, 33 | Technology.CSS, 34 | Technology.POSTCSS, 35 | Technology.TAILWIND_CSS, 36 | Technology.TYPESCRIPT, 37 | Technology.PHP, 38 | Technology.WORDPRESS, 39 | ], 40 | }, 41 | { 42 | name: 'Netwerk Wijkzorg Noord', 43 | image: { 44 | name: 'netwerk-wijkzorg-noord', 45 | }, 46 | slug: 'netwerk-wijkzorg-noord', 47 | description: 'A WordPress website.', 48 | links: { 49 | external: 'https://netwerkwijkzorgnoord.nl/', 50 | }, 51 | technologies: [ 52 | Technology.HTML, 53 | Technology.CSS, 54 | Technology.POSTCSS, 55 | Technology.TAILWIND_CSS, 56 | Technology.TYPESCRIPT, 57 | Technology.PHP, 58 | Technology.WORDPRESS, 59 | ], 60 | }, 61 | { 62 | name: 'EnergieLive', 63 | image: { 64 | name: 'energielive', 65 | }, 66 | slug: 'energielive', 67 | description: 'A WordPress website.', 68 | links: { 69 | external: 'https://energielive.nl/', 70 | }, 71 | technologies: [ 72 | Technology.HTML, 73 | Technology.CSS, 74 | Technology.POSTCSS, 75 | Technology.TAILWIND_CSS, 76 | Technology.TYPESCRIPT, 77 | Technology.PHP, 78 | Technology.WORDPRESS, 79 | ], 80 | }, 81 | { 82 | name: 'Ooggetuigen van de Gaswinning', 83 | image: { 84 | name: 'ooggetuigen-gaswinning', 85 | }, 86 | slug: 'ooggetuigen-gaswinning', 87 | description: 'A WordPress website.', 88 | links: { 89 | external: 'https://ooggetuigengaswinning.nl/', 90 | }, 91 | technologies: [ 92 | Technology.HTML, 93 | Technology.CSS, 94 | Technology.POSTCSS, 95 | Technology.TAILWIND_CSS, 96 | Technology.TYPESCRIPT, 97 | Technology.PHP, 98 | Technology.WORDPRESS, 99 | ], 100 | }, 101 | { 102 | name: 'De Questcoach', 103 | image: { 104 | name: 'de-questcoach', 105 | }, 106 | color: '#de9d2d', 107 | slug: 'de-questcoach', 108 | description: 'A WordPress website.', 109 | links: { 110 | external: 'https://de-questcoach.nl/', 111 | }, 112 | technologies: [ 113 | Technology.HTML, 114 | Technology.CSS, 115 | Technology.POSTCSS, 116 | Technology.TAILWIND_CSS, 117 | Technology.TYPESCRIPT, 118 | Technology.PHP, 119 | Technology.WORDPRESS, 120 | ], 121 | }, 122 | { 123 | name: 'Back to code', 124 | image: { 125 | name: 'back-to-code', 126 | }, 127 | color: '#1e1e21', 128 | slug: 'back-to-code', 129 | description: 'A WordPress website.', 130 | links: { 131 | external: 'https://backtocode.nl/', 132 | }, 133 | technologies: [ 134 | Technology.HTML, 135 | Technology.CSS, 136 | Technology.POSTCSS, 137 | Technology.TAILWIND_CSS, 138 | Technology.TYPESCRIPT, 139 | Technology.PHP, 140 | Technology.WORDPRESS, 141 | ], 142 | }, 143 | { 144 | name: 'Kupers Bedrijfsjurist', 145 | image: { 146 | name: 'kupers-bedrijfsjurist', 147 | }, 148 | slug: 'kupers-bedrijfsjurist', 149 | description: 'A WordPress website.', 150 | links: { 151 | external: 'https://kupers-bedrijfsjurist.nl/', 152 | }, 153 | technologies: [ 154 | Technology.HTML, 155 | Technology.CSS, 156 | Technology.POSTCSS, 157 | Technology.TAILWIND_CSS, 158 | Technology.TYPESCRIPT, 159 | Technology.PHP, 160 | Technology.WORDPRESS, 161 | ], 162 | }, 163 | { 164 | name: 'Groninger Kracht', 165 | image: { 166 | name: 'groninger-kracht', 167 | }, 168 | slug: 'groninger-kracht', 169 | description: 'A WordPress website.', 170 | links: { 171 | external: 'https://groningerkracht.nl/', 172 | }, 173 | technologies: [ 174 | Technology.HTML, 175 | Technology.CSS, 176 | Technology.POSTCSS, 177 | Technology.TAILWIND_CSS, 178 | Technology.TYPESCRIPT, 179 | Technology.PHP, 180 | Technology.WORDPRESS, 181 | ], 182 | }, 183 | { 184 | name: 'Sciva', 185 | image: { 186 | name: 'sciva', 187 | }, 188 | slug: 'sciva', 189 | description: 'A WordPress website.', 190 | links: { 191 | external: 'https://sciva.nl/', 192 | }, 193 | technologies: [ 194 | Technology.HTML, 195 | Technology.CSS, 196 | Technology.POSTCSS, 197 | Technology.TAILWIND_CSS, 198 | Technology.TYPESCRIPT, 199 | Technology.PHP, 200 | Technology.WORDPRESS, 201 | ], 202 | }, 203 | { 204 | name: 'WIJS Groningen', 205 | image: { 206 | name: 'wijs-groningen', 207 | }, 208 | color: '#4B4495', 209 | slug: 'wijs-groningen', 210 | description: 'A WordPress website.', 211 | links: { 212 | external: 'https://wijsgroningen.nl/', 213 | }, 214 | technologies: [ 215 | Technology.HTML, 216 | Technology.CSS, 217 | Technology.POSTCSS, 218 | Technology.TAILWIND_CSS, 219 | Technology.TYPESCRIPT, 220 | Technology.PHP, 221 | Technology.WORDPRESS, 222 | ], 223 | }, 224 | { 225 | name: 'First2Find', 226 | image: { 227 | name: 'first2find', 228 | }, 229 | color: '#ecc411', 230 | slug: 'first2find', 231 | description: 'A WordPress website.', 232 | links: { 233 | external: 'https://first2find.nl/', 234 | }, 235 | technologies: [ 236 | Technology.HTML, 237 | Technology.CSS, 238 | Technology.POSTCSS, 239 | Technology.TAILWIND_CSS, 240 | Technology.TYPESCRIPT, 241 | Technology.PHP, 242 | Technology.WORDPRESS, 243 | ], 244 | }, 245 | { 246 | name: 'Ruud Haverkort Autoschade', 247 | image: { 248 | name: 'ruud-haverkort-autoschade', 249 | }, 250 | color: '#ea5c02', 251 | slug: 'ruud-haverkort-autoschade', 252 | description: 'A WordPress website.', 253 | links: { 254 | external: 'https://ruudhaverkortautoschade.nl/', 255 | }, 256 | technologies: [ 257 | Technology.HTML, 258 | Technology.CSS, 259 | Technology.POSTCSS, 260 | Technology.TAILWIND_CSS, 261 | Technology.TYPESCRIPT, 262 | Technology.PHP, 263 | Technology.WORDPRESS, 264 | ], 265 | }, 266 | { 267 | name: 'Konforma', 268 | image: { 269 | name: 'konforma', 270 | }, 271 | slug: 'konforma', 272 | description: 'A WordPress website.', 273 | links: { 274 | external: 'https://konforma.nl/', 275 | }, 276 | technologies: [ 277 | Technology.HTML, 278 | Technology.CSS, 279 | Technology.POSTCSS, 280 | Technology.TAILWIND_CSS, 281 | Technology.TYPESCRIPT, 282 | Technology.PHP, 283 | Technology.WORDPRESS, 284 | ], 285 | }, 286 | { 287 | name: 'True Leadership', 288 | image: { 289 | name: 'true-leadership', 290 | }, 291 | slug: 'true-leadership', 292 | description: 'A WordPress website.', 293 | links: { 294 | external: 'https://true-leadership.com/en/', 295 | }, 296 | technologies: [ 297 | Technology.HTML, 298 | Technology.CSS, 299 | Technology.POSTCSS, 300 | Technology.TAILWIND_CSS, 301 | Technology.TYPESCRIPT, 302 | Technology.PHP, 303 | Technology.WORDPRESS, 304 | ], 305 | }, 306 | { 307 | name: 'Dierenpoli Sappemeer', 308 | image: { 309 | name: 'dierenpoli', 310 | }, 311 | slug: 'dierenpoli', 312 | description: 'A WordPress website.', 313 | links: { 314 | external: 'https://dierenpoli.nl/', 315 | }, 316 | technologies: [ 317 | Technology.HTML, 318 | Technology.CSS, 319 | Technology.POSTCSS, 320 | Technology.TAILWIND_CSS, 321 | Technology.TYPESCRIPT, 322 | Technology.PHP, 323 | Technology.WORDPRESS, 324 | ], 325 | }, 326 | { 327 | name: 'PPPO', 328 | image: { 329 | name: 'pppo', 330 | }, 331 | slug: 'pppo', 332 | description: 'A WordPress website.', 333 | links: { 334 | external: 'https://pppo.org/', 335 | }, 336 | technologies: [ 337 | Technology.HTML, 338 | Technology.CSS, 339 | Technology.POSTCSS, 340 | Technology.TAILWIND_CSS, 341 | Technology.TYPESCRIPT, 342 | Technology.PHP, 343 | Technology.WORDPRESS, 344 | ], 345 | }, 346 | { 347 | name: 'From the North', 348 | image: { 349 | name: 'from-the-north', 350 | extension: '.png', 351 | }, 352 | color: '#000', 353 | slug: 'from-the-north', 354 | description: 'A WooCommerce webshop.', 355 | links: { 356 | external: 'https://fromthenorthbrewing.com/', 357 | }, 358 | technologies: [ 359 | Technology.HTML, 360 | Technology.CSS, 361 | Technology.POSTCSS, 362 | Technology.TAILWIND_CSS, 363 | Technology.TYPESCRIPT, 364 | Technology.PHP, 365 | Technology.WORDPRESS, 366 | Technology.WOOCOMMERCE, 367 | ], 368 | }, 369 | { 370 | name: 'Jil Potma', 371 | image: { 372 | name: 'jil-potma', 373 | }, 374 | slug: 'jil-potma', 375 | description: 'A WordPress website.', 376 | links: { 377 | external: 'https://jilpotma.nl/', 378 | }, 379 | technologies: [ 380 | Technology.HTML, 381 | Technology.CSS, 382 | Technology.POSTCSS, 383 | Technology.TAILWIND_CSS, 384 | Technology.TYPESCRIPT, 385 | Technology.PHP, 386 | Technology.WORDPRESS, 387 | ], 388 | }, 389 | { 390 | name: 'Naarsing Letselschade', 391 | image: { 392 | name: 'naarsing-letselschade', 393 | }, 394 | color: '#1a1f2e', 395 | slug: 'naarsing-letselschade', 396 | description: 'A WordPress website.', 397 | links: { 398 | external: 'https://naarsingletselschade.nl/', 399 | }, 400 | technologies: [ 401 | Technology.HTML, 402 | Technology.CSS, 403 | Technology.POSTCSS, 404 | Technology.TAILWIND_CSS, 405 | Technology.TYPESCRIPT, 406 | Technology.PHP, 407 | Technology.WORDPRESS, 408 | ], 409 | }, 410 | { 411 | name: 'Paais', 412 | image: { 413 | name: 'paais', 414 | extension: '.png', 415 | }, 416 | slug: 'paais', 417 | description: 'A WooCommerce webshop.', 418 | links: { 419 | external: 'https://paais.nl/', 420 | }, 421 | technologies: [ 422 | Technology.HTML, 423 | Technology.CSS, 424 | Technology.POSTCSS, 425 | Technology.TAILWIND_CSS, 426 | Technology.TYPESCRIPT, 427 | Technology.PHP, 428 | Technology.WORDPRESS, 429 | Technology.WOOCOMMERCE, 430 | ], 431 | }, 432 | { 433 | name: 'Publiek', 434 | image: { 435 | name: 'publiek', 436 | }, 437 | slug: 'publiek', 438 | description: 'A WordPress website.', 439 | links: { 440 | external: 'https://publiek.com/', 441 | }, 442 | technologies: [ 443 | Technology.HTML, 444 | Technology.CSS, 445 | Technology.POSTCSS, 446 | Technology.TAILWIND_CSS, 447 | Technology.TYPESCRIPT, 448 | Technology.PHP, 449 | Technology.WORDPRESS, 450 | ], 451 | }, 452 | { 453 | name: 'Mondriaanfondsen', 454 | image: { 455 | name: 'mondriaanfondsen', 456 | }, 457 | color: '#94d4fd', 458 | slug: 'mondriaanfondsen', 459 | description: 'A WordPress website.', 460 | links: { 461 | external: 'https://mondriaanfondsen.nl/', 462 | }, 463 | technologies: [ 464 | Technology.HTML, 465 | Technology.CSS, 466 | Technology.POSTCSS, 467 | Technology.TAILWIND_CSS, 468 | Technology.TYPESCRIPT, 469 | Technology.PHP, 470 | Technology.WORDPRESS, 471 | ], 472 | }, 473 | { 474 | name: 'GeWoon', 475 | image: { 476 | name: 'gewoon', 477 | }, 478 | slug: 'gewoon', 479 | description: 'A WordPress website.', 480 | links: { 481 | external: 'https://gewoonbegeleiding.nl/', 482 | }, 483 | technologies: [ 484 | Technology.HTML, 485 | Technology.CSS, 486 | Technology.POSTCSS, 487 | Technology.TAILWIND_CSS, 488 | Technology.TYPESCRIPT, 489 | Technology.PHP, 490 | Technology.WORDPRESS, 491 | ], 492 | }, 493 | { 494 | name: 'Van Harte', 495 | image: { 496 | name: 'van-harte', 497 | }, 498 | slug: 'van-harte', 499 | description: 'A WordPress website.', 500 | links: { 501 | external: 'https://vanharte-haren.nl/', 502 | }, 503 | technologies: [ 504 | Technology.HTML, 505 | Technology.CSS, 506 | Technology.POSTCSS, 507 | Technology.TAILWIND_CSS, 508 | Technology.TYPESCRIPT, 509 | Technology.PHP, 510 | Technology.WORDPRESS, 511 | ], 512 | }, 513 | { 514 | name: 'Gedrag', 515 | image: { 516 | name: 'gedrag', 517 | }, 518 | color: '#ef703f', 519 | slug: 'gedrag', 520 | description: 'A WordPress website.', 521 | links: { 522 | external: 'https://gedrag.nl/', 523 | }, 524 | technologies: [ 525 | Technology.HTML, 526 | Technology.SCSS, 527 | Technology.BOOTSTRAP, 528 | Technology.JAVASCRIPT, 529 | Technology.PHP, 530 | Technology.WORDPRESS, 531 | ], 532 | }, 533 | { 534 | name: 'Meerstaete', 535 | image: { 536 | name: 'meerstaete', 537 | }, 538 | color: '#1d1a1d', 539 | slug: 'meerstaete', 540 | description: 'A WordPress website.', 541 | links: { 542 | external: 'https://vergaderlocatiemeerstaete.nl/', 543 | }, 544 | technologies: [ 545 | Technology.HTML, 546 | Technology.SCSS, 547 | Technology.BOOTSTRAP, 548 | Technology.JAVASCRIPT, 549 | Technology.PHP, 550 | Technology.WORDPRESS, 551 | ], 552 | }, 553 | ]; 554 | -------------------------------------------------------------------------------- /data/technologies.ts: -------------------------------------------------------------------------------- 1 | export enum Technology { 2 | HTML, 3 | CSS, 4 | JAVASCRIPT, 5 | LARAVEL, 6 | GIT, 7 | MONGODB, 8 | MYSQL, 9 | NGINX, 10 | NUXT, 11 | PHP, 12 | SCSS, 13 | TAILWIND_CSS, 14 | TYPESCRIPT, 15 | VUE, 16 | WORDPRESS, 17 | WOOCOMMERCE, 18 | BOOTSTRAP, 19 | POSTCSS, 20 | JQUERY, 21 | } 22 | 23 | export interface TechnologyInfo { 24 | name: string; 25 | image_name: string; 26 | } 27 | 28 | export const technologies = new Map([ 29 | [ 30 | Technology.HTML, 31 | { 32 | name: 'HTML', 33 | image_name: 'html', 34 | }, 35 | ], 36 | [ 37 | Technology.CSS, 38 | { 39 | name: 'CSS', 40 | image_name: 'css', 41 | }, 42 | ], 43 | [ 44 | Technology.JAVASCRIPT, 45 | { 46 | name: 'JavaScript', 47 | image_name: 'javascript', 48 | }, 49 | ], 50 | [ 51 | Technology.LARAVEL, 52 | { 53 | name: 'Laravel', 54 | image_name: 'laravel', 55 | }, 56 | ], 57 | [ 58 | Technology.GIT, 59 | { 60 | name: 'Git', 61 | image_name: 'git', 62 | }, 63 | ], 64 | [ 65 | Technology.MONGODB, 66 | { 67 | name: 'MongoDB', 68 | image_name: 'mongodb', 69 | }, 70 | ], 71 | [ 72 | Technology.MYSQL, 73 | { 74 | name: 'MySQL', 75 | image_name: 'mysql', 76 | }, 77 | ], 78 | [ 79 | Technology.NGINX, 80 | { 81 | name: 'NGINX', 82 | image_name: 'nginx', 83 | }, 84 | ], 85 | [ 86 | Technology.NUXT, 87 | { 88 | name: 'Nuxt', 89 | image_name: 'nuxtjs', 90 | }, 91 | ], 92 | [ 93 | Technology.PHP, 94 | { 95 | name: 'PHP', 96 | image_name: 'php', 97 | }, 98 | ], 99 | [ 100 | Technology.SCSS, 101 | { 102 | name: 'SCSS', 103 | image_name: 'sass', 104 | }, 105 | ], 106 | [ 107 | Technology.TAILWIND_CSS, 108 | { 109 | name: 'Tailwind CSS', 110 | image_name: 'tailwindcss', 111 | }, 112 | ], 113 | [ 114 | Technology.TYPESCRIPT, 115 | { 116 | name: 'TypeScript', 117 | image_name: 'typescript', 118 | }, 119 | ], 120 | [ 121 | Technology.VUE, 122 | { 123 | name: 'Vue', 124 | image_name: 'vuejs', 125 | }, 126 | ], 127 | [ 128 | Technology.WORDPRESS, 129 | { 130 | name: 'WordPress', 131 | image_name: 'wordpress', 132 | }, 133 | ], 134 | [ 135 | Technology.WOOCOMMERCE, 136 | { 137 | name: 'WooCommerce', 138 | image_name: 'woocommerce', 139 | }, 140 | ], 141 | [ 142 | Technology.BOOTSTRAP, 143 | { 144 | name: 'Bootstrap', 145 | image_name: 'bootstrap', 146 | }, 147 | ], 148 | [ 149 | Technology.POSTCSS, 150 | { 151 | name: 'PostCSS', 152 | image_name: 'postcss', 153 | }, 154 | ], 155 | [ 156 | Technology.JQUERY, 157 | { 158 | name: 'jQuery', 159 | image_name: 'jquery', 160 | }, 161 | ], 162 | ]); 163 | -------------------------------------------------------------------------------- /error.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 31 | 32 | 37 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /middleware/scroll-to-top.global.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtRouteMiddleware((to, from) => { 2 | if (to.path !== from.path && process.client) { 3 | window.scrollTo(0, 0); 4 | } 5 | }); 6 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import * as meta from './data/meta'; 2 | 3 | // https://v3.nuxtjs.org/api/configuration/nuxt.config 4 | export default defineNuxtConfig({ 5 | app: { 6 | head: { 7 | htmlAttrs: { 8 | lang: 'en', 9 | }, 10 | title: meta.title, 11 | meta: [ 12 | // Favicon stuff 13 | { name: 'msapplication-TileColor', content: '#ffffff' }, 14 | { name: 'theme-color', content: '#ec4899' }, 15 | 16 | // Basic meta 17 | { charset: 'utf-8' }, 18 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 19 | ], 20 | link: [ 21 | // Favicons 22 | { 23 | rel: 'apple-touch-icon', 24 | sizes: '180x180', 25 | href: '/apple-touch-icon.png', 26 | }, 27 | { 28 | rel: 'icon', 29 | type: 'image/png', 30 | sizes: '32x32', 31 | href: '/favicon-32x32.png', 32 | }, 33 | { 34 | rel: 'icon', 35 | type: 'image/png', 36 | sizes: '16x16', 37 | href: '/favicon-16x16.png', 38 | }, 39 | { 40 | rel: 'manifest', 41 | href: '/site.webmanifest', 42 | }, 43 | { 44 | rel: 'mask-icon', 45 | color: '#8b5cf6', 46 | href: '/safari-pinned-tab.svg', 47 | }, 48 | ], 49 | }, 50 | }, 51 | 52 | css: ['~/assets/css/index.css'], 53 | 54 | components: [ 55 | '~/components', 56 | '~/components/common', 57 | '~/components/icons', 58 | '~/components/layout', 59 | ], 60 | 61 | modules: [ 62 | '@nuxtjs/tailwindcss', 63 | '@nuxt/image', 64 | [ 65 | '@nuxtjs/google-fonts', 66 | { 67 | families: { 68 | 'Work+Sans': [100, 200, 300, 400, 500, 600, 700, 800, 900], 69 | Montserrat: [100, 200, 300, 400, 500, 600, 700, 800, 900], 70 | }, 71 | }, 72 | ], 73 | ], 74 | }); 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare" 11 | }, 12 | "devDependencies": { 13 | "@headlessui/vue": "^1.7.16", 14 | "@heroicons/vue": "^2.1.1", 15 | "@nuxt/image": "^1.1.0", 16 | "@nuxtjs/eslint-config-typescript": "^12.1.0", 17 | "@nuxtjs/google-fonts": "^3.1.3", 18 | "@nuxtjs/tailwindcss": "^6.10.3", 19 | "@rushstack/eslint-patch": "^1.6.1", 20 | "@types/node": "^20.10.6", 21 | "@vue/eslint-config-airbnb-with-typescript": "^8.0.0", 22 | "date-fns": "^2.30.0", 23 | "eslint": "^8.56.0", 24 | "eslint-config-prettier": "^9.1.0", 25 | "eslint-plugin-prettier": "^5.1.2", 26 | "nuxt": "^3.11.1", 27 | "prettier": "^3.1.1", 28 | "prettier-plugin-tailwindcss": "^0.5.10", 29 | "tailwindcss": "^3.4.0", 30 | "vue-router": "^4.2.5" 31 | }, 32 | "packageManager": "pnpm@8.15.5+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589" 33 | } 34 | -------------------------------------------------------------------------------- /pages/about-me.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 67 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 42 | -------------------------------------------------------------------------------- /pages/projects.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 33 | -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #ffffff 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/favicon.ico -------------------------------------------------------------------------------- /public/images/projects/back-to-code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30 | 33 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /public/images/projects/energielive.svg: -------------------------------------------------------------------------------- 1 | 3 | Group 28 4 | 5 | 7 | 9 | 11 | 12 | 13 | 71 | 72 | -------------------------------------------------------------------------------- /public/images/projects/from-the-north.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/images/projects/from-the-north.png -------------------------------------------------------------------------------- /public/images/projects/gedrag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/projects/gewoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/images/projects/groninger-kracht.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 11 | 14 | 17 | 20 | 23 | 26 | 28 | 31 | 34 | 37 | 40 | 43 | 46 | 49 | 52 | 55 | 58 | -------------------------------------------------------------------------------- /public/images/projects/jil-potma.svg: -------------------------------------------------------------------------------- 1 | 4 | 7 | 10 | 13 | 16 | 18 | 20 | -------------------------------------------------------------------------------- /public/images/projects/konforma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /public/images/projects/kupers-bedrijfsjurist.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 11 | 14 | 17 | 20 | 23 | 24 | 27 | 28 | 31 | 34 | 37 | 40 | 43 | 46 | 49 | 50 | 53 | 56 | 59 | 62 | 65 | 68 | 69 | 72 | 75 | 78 | 81 | 84 | 87 | 90 | 93 | -------------------------------------------------------------------------------- /public/images/projects/marenland.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 11 | 14 | 17 | 20 | 23 | 26 | 29 | 32 | -------------------------------------------------------------------------------- /public/images/projects/meerstaete.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 17 | 18 | 20 | 21 | 24 | 26 | 29 | 32 | 35 | 36 | 37 | 39 | 40 | 43 | 46 | 49 | 52 | 55 | 58 | 61 | 62 | 64 | 65 | 68 | 70 | 72 | 73 | 76 | 79 | 80 | 83 | 86 | 87 | 89 | 92 | 95 | 98 | 101 | 102 | 103 | 104 | 105 | 107 | 110 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /public/images/projects/mondriaanfondsen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/projects/naarsing-letselschade.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | -------------------------------------------------------------------------------- /public/images/projects/netwerk-wijkzorg-noord.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30 | 33 | 36 | 39 | 42 | 45 | 48 | 51 | 54 | 57 | 60 | 63 | 66 | 69 | 72 | 75 | 76 | -------------------------------------------------------------------------------- /public/images/projects/paais.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/images/projects/paais.png -------------------------------------------------------------------------------- /public/images/projects/publiek.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /public/images/projects/sciva.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 10 | 13 | 16 | 17 | -------------------------------------------------------------------------------- /public/images/projects/true-leadership.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/projects/van-harte.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /public/images/projects/wijs-groningen.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 15 | 18 | 21 | 24 | 27 | 30 | 33 | 36 | 39 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /public/images/technologies/bootstrap.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/css.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 44 | 46 | 47 | 49 | image/svg+xml 50 | 52 | 53 | 54 | 55 | 56 | 61 | 66 | 71 | 76 | 81 | 86 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /public/images/technologies/git.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/gulp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/html.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/jquery.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/laravel.svg: -------------------------------------------------------------------------------- 1 | Logomark -------------------------------------------------------------------------------- /public/images/technologies/mongodb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/mysql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/nginx.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/nuxtjs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/technologies/php.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/python.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/sass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/tailwindcss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/typescript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/vuejs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/technologies/woocommerce.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/technologies/wordpress.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NukeJS/portfolio/2442495df419e2d21cc822080229c33ffe1aa8aa/public/mstile-150x150.png -------------------------------------------------------------------------------- /public/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "start_url": "https://nukejs.dev", 19 | "display": "standalone" 20 | } 21 | -------------------------------------------------------------------------------- /server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss'; 2 | 3 | export default { 4 | content: [ 5 | 'components/**/*.{js,ts,vue}', 6 | 'layouts/**/*.vue', 7 | 'pages/**/*.vue', 8 | 'composables/**/*.{js,ts}', 9 | 'plugins/**/*.{js,ts}', 10 | 'App.{js,ts,vue}', 11 | 'app.{js,ts,vue}', 12 | 'error.vue', 13 | ], 14 | theme: { 15 | extend: { 16 | fontFamily: { 17 | 'work-sans': ["'Work Sans'", 'sans-serif'], 18 | montserrat: ['Montserrat', 'sans-serif'], 19 | }, 20 | }, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /utils/array.ts: -------------------------------------------------------------------------------- 1 | export const getMultipleRandomItems = (arr: T[], num: number) => 2 | [...arr].sort(() => 0.5 - Math.random()).slice(0, num); 3 | -------------------------------------------------------------------------------- /utils/meta.ts: -------------------------------------------------------------------------------- 1 | import type { MetaObject } from '#app'; 2 | import * as DEFAULT_META from '~/data/meta'; 3 | 4 | interface Meta { 5 | title?: string; 6 | description?: string; 7 | keywords?: string | string[]; 8 | image?: string; 9 | type?: string; 10 | } 11 | 12 | export const useHeadHelper = ({ 13 | title, 14 | description = DEFAULT_META.description, 15 | keywords, 16 | image, 17 | type = 'website', 18 | /* @ts-ignore */ 19 | bodyAttrs, 20 | /* @ts-ignore */ 21 | charset, 22 | /* @ts-ignore */ 23 | htmlAttrs, 24 | /* @ts-ignore */ 25 | link, 26 | /* @ts-ignore */ 27 | script, 28 | /* @ts-ignore */ 29 | style, 30 | /* @ts-ignore */ 31 | viewport, 32 | }: Meta & Omit = {}) => { 33 | title = title ? `${title} - ${DEFAULT_META.title}` : DEFAULT_META.title; 34 | const url = `${DEFAULT_META.url}${useRoute().path}`; 35 | 36 | useHead({ 37 | title, 38 | meta: [ 39 | /* ------------------------------- Open Graph ------------------------------- */ 40 | { hid: 'og:title', property: 'og:title', content: title }, 41 | { hid: 'og:type', property: 'og:type', content: type }, 42 | { hid: 'og:url', property: 'og:url', content: url }, 43 | /* -------------------------------------------------------------------------- */ 44 | 45 | /* --------------------------------- Twitter -------------------------------- */ 46 | { hid: 'twitter:title', name: 'twitter:title', content: title }, 47 | { hid: 'twitter:url', name: 'twitter:url', content: url }, 48 | { 49 | hid: 'twitter:creator', 50 | name: 'twitter:creator', 51 | content: DEFAULT_META.twitter, 52 | }, 53 | /* -------------------------------------------------------------------------- */ 54 | 55 | /* ------------------------------- Description ------------------------------ */ 56 | ...(description 57 | ? [ 58 | { 59 | hid: 'description', 60 | name: 'description', 61 | content: description, 62 | }, 63 | { 64 | hid: 'og:description', 65 | property: 'og:description', 66 | content: description, 67 | }, 68 | { 69 | hid: 'twitter:description', 70 | name: 'twitter:description', 71 | content: description, 72 | }, 73 | ] 74 | : []), 75 | /* -------------------------------------------------------------------------- */ 76 | 77 | /* ---------------------------------- Image --------------------------------- */ 78 | ...(image 79 | ? [ 80 | { hid: 'og:image', property: 'og:image', content: image }, 81 | { hid: 'twitter:image', name: 'twitter:image', content: image }, 82 | { 83 | hid: 'twitter:card', 84 | name: 'twitter:card', 85 | content: 'summary_large_image', 86 | }, 87 | ] 88 | : []), 89 | /* -------------------------------------------------------------------------- */ 90 | 91 | /* -------------------------------- Keywords -------------------------------- */ 92 | { 93 | hid: 'keywords', 94 | name: 'keywords', 95 | content: keywords 96 | ? `${DEFAULT_META.keywords}, ${ 97 | Array.isArray(keywords) ? keywords.join(', ') : keywords 98 | }` 99 | : DEFAULT_META.keywords, 100 | }, 101 | /* -------------------------------------------------------------------------- */ 102 | ], 103 | 104 | bodyAttrs, 105 | /* @ts-ignore */ 106 | charset, 107 | htmlAttrs, 108 | link, 109 | script, 110 | style, 111 | viewport, 112 | }); 113 | }; 114 | --------------------------------------------------------------------------------