From 99b02a93e9a4f51c718f5bfa0e7ac044906019e1 Mon Sep 17 00:00:00 2001 From: Arckie Jadulco Date: Mon, 26 Jan 2026 22:07:02 +0800 Subject: [PATCH 01/13] fix: updated working package-lock to a working version with the project. --- package-lock.json | 68 +++++++++++++++-------------------------------- 1 file changed, 21 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 15b8ee1..e055a8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -92,7 +92,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz", "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", @@ -1324,7 +1323,6 @@ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", "license": "MIT", - "peer": true, "dependencies": { "@floating-ui/core": "^1.7.3", "@floating-ui/utils": "^0.2.10" @@ -2290,7 +2288,6 @@ "resolved": "https://registry.npmjs.org/@nuxt/content/-/content-3.11.0.tgz", "integrity": "sha512-sC2AyuQAZpw+iSxwekh75AsLc7Ja9aEY+l4r1DxGBEMkq+YGj8+6AqQSRqFjOH0Hu9yDUhRgpIUnlGVq43WqOA==", "license": "MIT", - "peer": true, "dependencies": { "@nuxt/kit": "^4.2.2", "@nuxtjs/mdc": "^0.20.0", @@ -3738,6 +3735,22 @@ "node": ">=18.12.0" } }, + "node_modules/@nuxt/test-utils/node_modules/crossws": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/crossws/-/crossws-0.4.3.tgz", + "integrity": "sha512-lmf5mtwHiToP3HumOx53cqS0T5TK8GMBpsbSCXRB5OuszbltTgGOO4B1WhrDYqTeXOk3BAemibNjJx8E0/ecNw==", + "license": "MIT", + "optional": true, + "peer": true, + "peerDependencies": { + "srvx": ">=0.7.1" + }, + "peerDependenciesMeta": { + "srvx": { + "optional": true + } + } + }, "node_modules/@nuxt/test-utils/node_modules/estree-walker": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", @@ -5531,7 +5544,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -6521,7 +6533,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.17.1.tgz", "integrity": "sha512-f8hB9MzXqsuXoF9qXEDEH5Fb3VgwhEFMBMfk9EKN88l5adri6oM8mt2XOWVxVVssjpEW0177zXSLPKWzoS/vrw==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -6618,7 +6629,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/extension-collaboration/-/extension-collaboration-3.17.1.tgz", "integrity": "sha512-4ehZ5LL7M3nFfcogCG7bWRHIR/8366i1vz5i0PaaoArJga2N5sXnWcuBGXG7ykC8owbgrfL3agFxjHlhTl4sNw==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -6648,7 +6658,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/extension-drag-handle/-/extension-drag-handle-3.17.1.tgz", "integrity": "sha512-RKrhs+z5ki4/WPKA8P+G9bRWoWAGXI3NjwrJtIA27PO19tZAwTZs6oKFcyTtp6FtMKgny3n0qm+UZxxRppDRUQ==", "license": "MIT", - "peer": true, "dependencies": { "@floating-ui/dom": "^1.6.13" }, @@ -6809,7 +6818,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.17.1.tgz", "integrity": "sha512-LHKIxmXe5Me+vJZKhiwMBGHlApaBIAduNMRUpm5mkY7ER/m96zKR0VqrJd4LjVVH2iDvck5h1Ka4396MHWlKNg==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -6865,7 +6873,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/extension-node-range/-/extension-node-range-3.17.1.tgz", "integrity": "sha512-tGt/Yr7aALKsrerAldQG5iBUFmml2i25nrjLIU+SR1Bzm+OWxTSXxOWunkowdquh2f/Lft5GnnSIs3e3Jr20Bg==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -6958,7 +6965,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.17.1.tgz", "integrity": "sha512-aQ4WA5bdRpv9yPQ6rRdiqwlMZ1eJw1HyEaNPQhOr2HVhQ0EqSDIOEXF4ymCveGAHxXbxNvtQ+4t1ymQEikGfXA==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -6990,7 +6996,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.17.1.tgz", "integrity": "sha512-UyVLkN8axV/zop6Se2DCBJRu5DM21X0XEQvwEC5P/vk8eC9OcQZ3FLtxeYy2ZjpAZUzBGLw0/BGsmEip/n7olw==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-changeset": "^2.3.0", "prosemirror-collab": "^1.3.1", @@ -7057,7 +7062,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/suggestion/-/suggestion-3.17.1.tgz", "integrity": "sha512-a188uVYjlLsUiwK3Ki7KsaWVWC0u28KsqGEAqCk9ECYmtVY99Hrb+rcAwGpMjA7tn8WAwThOxiLISoMdpuqXwg==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -7072,7 +7076,6 @@ "resolved": "https://registry.npmjs.org/@tiptap/vue-3/-/vue-3-3.17.1.tgz", "integrity": "sha512-0NaAY3+S1KZuSY9Sl6e0zvgcX8JvKKwDamY+YOl/ZO4GRaA1VnVkS/OJtofuTAODJmoXWL8wS9NwOgAzKeAvkw==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -7147,8 +7150,7 @@ "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/linkify-it": { "version": "5.0.0", @@ -7250,7 +7252,6 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz", "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==", "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.53.1", "@typescript-eslint/types": "8.53.1", @@ -7454,7 +7455,6 @@ "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.1.2.tgz", "integrity": "sha512-w5yxH/fkkLWAFAOnMSIbvAikNHYn6pgC7zGF/BasXf+K3CO1cYIPFehYAk5jpcsbiNPMc3goyyw1prGLoyD14g==", "license": "MIT", - "peer": true, "dependencies": { "hookable": "^6.0.1", "unhead": "2.1.2" @@ -7973,7 +7973,6 @@ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz", "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==", "license": "MIT", - "peer": true, "dependencies": { "@babel/parser": "^7.28.5", "@vue/compiler-core": "3.5.27", @@ -8125,7 +8124,6 @@ "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz", "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==", "license": "MIT", - "peer": true, "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.1.0", @@ -8257,7 +8255,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -8681,7 +8678,6 @@ "integrity": "sha512-8VYKM3MjCa9WcaSAI3hzwhmyHVlH8tiGFwf0RlTsZPWJ1I5MkzjiudCo4KC4DxOaL/53A5B1sI/IbldNFDbsKA==", "hasInstallScript": true, "license": "MIT", - "peer": true, "dependencies": { "bindings": "^1.5.0", "prebuild-install": "^7.1.1" @@ -8812,7 +8808,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -10076,8 +10071,7 @@ "version": "8.6.0", "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/embla-carousel-auto-height": { "version": "8.6.0", @@ -10326,7 +10320,6 @@ "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -10394,7 +10387,6 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz", "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -11889,7 +11881,6 @@ "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz", "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==", "license": "Apache-2.0", - "peer": true, "engines": { "node": ">=10" } @@ -13192,6 +13183,7 @@ "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz", "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==", "license": "MIT", + "peer": true, "funding": { "type": "GitHub Sponsors ❤", "url": "https://github.com/sponsors/dmonad" @@ -13450,6 +13442,7 @@ "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz", "integrity": "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==", "license": "MIT", + "peer": true, "dependencies": { "isomorphic.js": "^0.2.4" }, @@ -15359,7 +15352,6 @@ "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-4.3.0.tgz", "integrity": "sha512-99Iw3E3L5/2QtJyV4errZ0axkX/S9IAFK0AHm0pmRHkCu37OFn8mz2P4/CYTt6B/TG3mcKbXAVaeuF2FsAc1cA==", "license": "MIT", - "peer": true, "dependencies": { "@dxup/nuxt": "^0.3.2", "@nuxt/cli": "^3.32.0", @@ -15685,7 +15677,6 @@ "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.110.0.tgz", "integrity": "sha512-GijUR3K1Ln/QwMyYXRsBtOyzqGaCs9ce5pOug1UtrMg8dSiE7VuuRuIcyYD4nyJbasat3K0YljiKt/PSFPdSBA==", "license": "MIT", - "peer": true, "dependencies": { "@oxc-project/types": "^0.110.0" }, @@ -16061,7 +16052,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -16731,7 +16721,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz", "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==", "license": "MIT", - "peer": true, "dependencies": { "orderedmap": "^2.0.0" } @@ -16761,7 +16750,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz", "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-transform": "^1.0.0", @@ -16822,7 +16810,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.5.tgz", "integrity": "sha512-UDQbIPnDrjE8tqUBbPmCOZgtd75htE6W3r0JCmY9bL6W1iemDM37MZEKC49d+tdQ0v/CKx4gjxLoLsfkD2NiZA==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-model": "^1.20.0", "prosemirror-state": "^1.0.0", @@ -17465,7 +17452,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.56.0.tgz", "integrity": "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==", "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -18112,7 +18098,6 @@ "resolved": "https://registry.npmjs.org/srvx/-/srvx-0.10.1.tgz", "integrity": "sha512-A//xtfak4eESMWWydSRFUVvCTQbSwivnGCEf8YGPe2eHU0+Z6znfUTCPF0a7oV3sObSOcrXHlL6Bs9vVctfXdg==", "license": "MIT", - "peer": true, "bin": { "srvx": "bin/srvx.mjs" }, @@ -18413,7 +18398,6 @@ "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz", "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/dcastil" @@ -18442,8 +18426,7 @@ "version": "4.1.18", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz", "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/tapable": { "version": "2.3.0", @@ -18634,7 +18617,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -18820,7 +18802,6 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -19378,7 +19359,6 @@ "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==", "hasInstallScript": true, "license": "MIT", - "peer": true, "dependencies": { "napi-postinstall": "^0.3.0" }, @@ -19782,7 +19762,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -20186,7 +20165,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -20214,7 +20192,6 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz", "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==", "license": "MIT", - "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.27", "@vue/compiler-sfc": "3.5.27", @@ -20276,7 +20253,6 @@ "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz", "integrity": "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==", "license": "MIT", - "peer": true, "dependencies": { "debug": "^4.4.0", "eslint-scope": "^8.2.0", @@ -20300,7 +20276,6 @@ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz", "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==", "license": "MIT", - "peer": true, "dependencies": { "@vue/devtools-api": "^6.6.4" }, @@ -20677,7 +20652,6 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } From fa87dc57610f30ba2f67edd0eb3d4c29b1694337 Mon Sep 17 00:00:00 2001 From: Arckie Jadulco Date: Mon, 26 Jan 2026 23:04:30 +0800 Subject: [PATCH 02/13] feat: scaffolding and minor updates --- CHANGELOG.md | 106 ++++++++++ app/app.config.ts | 10 + app/app.vue | 4 +- app/assets/css/main.css | 332 +++++++++++++++++++++++++++++++ app/components/TheFooter.vue | 49 +++++ app/components/TheHeader.vue | 81 ++++++++ app/components/TheMobileMenu.vue | 141 +++++++++++++ app/layouts/default.vue | 56 ++++++ content/index.md | 24 --- nuxt.config.ts | 19 ++ package-lock.json | 68 +++++++ package.json | 1 + 12 files changed, 866 insertions(+), 25 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 app/app.config.ts create mode 100644 app/assets/css/main.css create mode 100644 app/components/TheFooter.vue create mode 100644 app/components/TheHeader.vue create mode 100644 app/components/TheMobileMenu.vue create mode 100644 app/layouts/default.vue diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..abda78b --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,106 @@ +# Changelog + +All notable changes to the Arckie Jadulco Portfolio project will be documented in this file. + +--- + +## [Unreleased] + +### Phase 1: Design System Foundation + +#### Added +- **`app/assets/css/main.css`** - Core design system with Tailwind CSS 4 + - Custom color palette (Soft Muted Dark theme) + - `--color-bg-primary: #1a1a1f` (deep charcoal) + - `--color-bg-secondary: #242429` (cards/sections) + - `--color-bg-tertiary: #2d2d33` (hover states) + - `--color-text-primary: #e8e6e3` (warm off-white) + - `--color-text-secondary: #9d9a95` (muted gray) + - `--color-text-muted: #6b6965` (subtle gray) + - `--color-accent-primary: #c9a87c` (warm gold/amber) + - `--color-accent-secondary: #8fa3a8` (soft sage/teal) + - `--color-border: #3a3a40` (subtle borders) + - Font families: Playfair Display, Source Sans 3, JetBrains Mono + - Custom animations: fade-in, slide-up, float, typing, blink + - Custom box shadows: soft, glow + - Base layer styles (scrollbar, selection, focus states) + - Component utilities: container-narrow, heading-display, heading-section, text-body, btn-primary, btn-secondary, card, link-underline, grain-overlay, reveal classes + - Page transition CSS + +- **`app/app.config.ts`** - Nuxt UI v4 theme configuration + - Primary color set to amber + - Secondary color set to slate + - Neutral color set to stone + +#### Modified +- **`nuxt.config.ts`** + - Added CSS file to `css` array + - Added `colorMode` config (dark mode default) + - Added `@nuxtjs/google-fonts` module + - Configured Google Fonts: Playfair Display, Source Sans 3, JetBrains Mono + +#### Dependencies Added +- `@nuxtjs/google-fonts` - Google Fonts integration + +--- + +### Phase 2: Layout and Navigation + +#### Added +- **`app/layouts/default.vue`** - Default layout wrapper + - Grain texture overlay (decorative) + - Ambient background glow with radial gradients + - Skip-to-content accessibility link + - Header, mobile menu, and footer component integration + - Mobile menu state management + +- **`app/components/TheHeader.vue`** - Fixed header component + - Logo/brand mark ("AJ." with accent dot) + - Desktop navigation with 6 links (About, Skills, Projects, Experience, Blog, Contact) + - Mobile menu toggle button (hamburger icon) + - Scroll detection for background blur effect + - Hover animations on nav links (underline effect) + +- **`app/components/TheMobileMenu.vue`** - Full-screen mobile menu + - Teleported to body for proper stacking + - Backdrop blur and dark overlay + - Close button (X icon) + - Navigation links with staggered animation + - Keyboard accessibility (Escape to close) + - Body scroll lock when open + - Social links section + +- **`app/components/TheFooter.vue`** - Footer component + - Border-top separator + - Dynamic copyright year + - Social links with icons (GitHub, LinkedIn, Twitter) + - Hover color transitions + +#### Modified +- **`app/app.vue`** - Wrapped NuxtPage with NuxtLayout + +--- + +## Notes for Reviewer + +### Suggested Commit Messages (in order) + +**Phase 1:** +``` +feat: configure design system with Tailwind CSS 4 and custom tokens + +- Add custom color palette (Soft Muted Dark theme) +- Configure typography with Google Fonts +- Add custom animations and component utilities +- Set dark mode as default +``` + +**Phase 2:** +``` +feat: add base layout with header, footer, and mobile navigation + +- Create default layout with grain overlay and ambient glow +- Add fixed header with scroll blur effect +- Add full-screen mobile menu with keyboard support +- Add footer with social links +``` diff --git a/app/app.config.ts b/app/app.config.ts new file mode 100644 index 0000000..a09fd56 --- /dev/null +++ b/app/app.config.ts @@ -0,0 +1,10 @@ +export default defineAppConfig({ + ui: { + // Set primary color to our warm gold/amber accent + colors: { + primary: 'amber', + secondary: 'slate', + neutral: 'stone', + }, + }, +}) diff --git a/app/app.vue b/app/app.vue index 0acd39e..06ef1a5 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,4 +1,6 @@ \ No newline at end of file diff --git a/app/assets/css/main.css b/app/assets/css/main.css new file mode 100644 index 0000000..059b13b --- /dev/null +++ b/app/assets/css/main.css @@ -0,0 +1,332 @@ +@import "tailwindcss"; + +/* ========================================= + Design System - Tailwind CSS 4 + Arckie Jadulco Portfolio + ========================================= */ + +@theme { + /* Color Palette - Soft Muted Dark */ + --color-bg-primary: #1a1a1f; + --color-bg-secondary: #242429; + --color-bg-tertiary: #2d2d33; + --color-text-primary: #e8e6e3; + --color-text-secondary: #9d9a95; + --color-text-muted: #6b6965; + --color-accent-primary: #c9a87c; + --color-accent-secondary: #8fa3a8; + --color-border: #3a3a40; + + /* Font Families */ + --font-display: "Playfair Display", ui-serif, Georgia, Cambria, serif; + --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; + --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; + + /* Custom Animations */ + --animate-fade-in: fade-in 0.6s ease-out forwards; + --animate-slide-up: slide-up 0.6s ease-out forwards; + --animate-float: float 6s ease-in-out infinite; + --animate-typing: typing 3.5s steps(40) infinite; + --animate-blink: blink 1s step-end infinite; + + /* Custom Box Shadows */ + --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3); + --shadow-glow: 0 0 30px rgba(201, 168, 124, 0.15); +} + +/* Keyframe Definitions */ +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes slide-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes float { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes typing { + from, to { + width: 0; + } + 50% { + width: 100%; + } +} + +@keyframes blink { + from, to { + border-color: transparent; + } + 50% { + border-color: var(--color-accent-primary); + } +} + +/* ========================================= + Base Layer + ========================================= */ + +@layer base { + html { + scroll-behavior: smooth; + background-color: var(--color-bg-primary); + color: var(--color-text-primary); + } + + body { + font-family: var(--font-body); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + ::selection { + background-color: var(--color-accent-primary); + color: var(--color-bg-primary); + } + + /* Custom Scrollbar */ + ::-webkit-scrollbar { + width: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--color-bg-secondary); + } + + ::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: var(--color-text-muted); + } + + /* Focus styles for accessibility */ + *:focus-visible { + outline: 2px solid var(--color-accent-primary); + outline-offset: 2px; + } +} + +/* ========================================= + Component Layer + ========================================= */ + +@layer components { + /* Container */ + .container-narrow { + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + /* Section Spacing */ + .section-spacing { + padding-top: 6rem; + padding-bottom: 6rem; + } + + @media (min-width: 768px) { + .section-spacing { + padding-top: 8rem; + padding-bottom: 8rem; + } + } + + /* Typography */ + .heading-display { + font-family: var(--font-display); + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.02em; + color: var(--color-text-primary); + } + + .heading-section { + font-family: var(--font-display); + font-size: clamp(1.75rem, 3vw, 2.5rem); + font-weight: 600; + line-height: 1.2; + color: var(--color-text-primary); + } + + .text-body { + font-family: var(--font-body); + font-size: 1rem; + line-height: 1.7; + color: var(--color-text-secondary); + } + + @media (min-width: 768px) { + .text-body { + font-size: 1.125rem; + } + } + + /* Buttons */ + .btn-primary { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.875rem 1.75rem; + background-color: var(--color-accent-primary); + color: var(--color-bg-primary); + font-family: var(--font-body); + font-weight: 600; + font-size: 0.9375rem; + border-radius: 0.5rem; + transition: all 0.2s ease; + } + + .btn-primary:hover { + background-color: color-mix(in srgb, var(--color-accent-primary) 85%, white); + transform: translateY(-2px); + box-shadow: var(--shadow-glow); + } + + .btn-secondary { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.875rem 1.75rem; + background-color: transparent; + color: var(--color-text-primary); + font-family: var(--font-body); + font-weight: 600; + font-size: 0.9375rem; + border: 1px solid var(--color-border); + border-radius: 0.5rem; + transition: all 0.2s ease; + } + + .btn-secondary:hover { + border-color: var(--color-accent-primary); + color: var(--color-accent-primary); + transform: translateY(-2px); + } + + /* Card */ + .card { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 0.75rem; + padding: 1.5rem; + transition: all 0.3s ease; + } + + .card:hover { + border-color: var(--color-accent-primary); + box-shadow: var(--shadow-soft); + } + + /* Link with animated underline */ + .link-underline { + position: relative; + color: var(--color-text-primary); + text-decoration: none; + transition: color 0.2s ease; + } + + .link-underline::after { + content: ""; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 1px; + background-color: var(--color-accent-primary); + transition: width 0.3s ease; + } + + .link-underline:hover { + color: var(--color-accent-primary); + } + + .link-underline:hover::after { + width: 100%; + } + + /* Grain Overlay */ + .grain-overlay { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 1000; + opacity: 0.03; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); + } + + /* Scroll Reveal Animations */ + .reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; + } + + .reveal.is-visible { + opacity: 1; + transform: translateY(0); + } + + .reveal-delay-1 { + transition-delay: 0.1s; + } + + .reveal-delay-2 { + transition-delay: 0.2s; + } + + .reveal-delay-3 { + transition-delay: 0.3s; + } + + .reveal-delay-4 { + transition-delay: 0.4s; + } +} + +/* ========================================= + Page Transitions + ========================================= */ + +.page-enter-active, +.page-leave-active { + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.page-enter-from { + opacity: 0; + transform: translateY(10px); +} + +.page-leave-to { + opacity: 0; + transform: translateY(-10px); +} diff --git a/app/components/TheFooter.vue b/app/components/TheFooter.vue new file mode 100644 index 0000000..0e738ec --- /dev/null +++ b/app/components/TheFooter.vue @@ -0,0 +1,49 @@ + + + diff --git a/app/components/TheHeader.vue b/app/components/TheHeader.vue new file mode 100644 index 0000000..1b644b4 --- /dev/null +++ b/app/components/TheHeader.vue @@ -0,0 +1,81 @@ + + + diff --git a/app/components/TheMobileMenu.vue b/app/components/TheMobileMenu.vue new file mode 100644 index 0000000..807270c --- /dev/null +++ b/app/components/TheMobileMenu.vue @@ -0,0 +1,141 @@ + + + + + diff --git a/app/layouts/default.vue b/app/layouts/default.vue new file mode 100644 index 0000000..3b39c10 --- /dev/null +++ b/app/layouts/default.vue @@ -0,0 +1,56 @@ + + + diff --git a/content/index.md b/content/index.md index 0c686d0..e69de29 100644 --- a/content/index.md +++ b/content/index.md @@ -1,24 +0,0 @@ -# Welcome to Nuxt Content Starter - -This is the main page displaying Markdown located at [content/index.md](https://github.com/nuxt/starter/blob/content/content/index.md). - -Move to [about](/about) page. - -## Manage your Contents - -Create new pages or modify the existing ones in `content/` directory. - -## Query & Render Pages - -You can find an example of querying contents and rendering them in a [catch-all page](https://github.com/nuxt/starter/blob/content/app/pages/%5B...slug%5D.vue) - -## Integrate Vue Component - -::alert{color="green"} -The current [alert](https://github.com/nuxt/starter/blob/content/app/components/Alert.vue) and the [counter](https://github.com/nuxt/starter/blob/content/app/components/Counter.vue) below are `Vue` components integrated into the Markdown. -:: - -::counter -:: - -Checkout out the [documentation](https://content.nuxt.com/docs/getting-started) to learn more. diff --git a/nuxt.config.ts b/nuxt.config.ts index 2d3f1bd..98c09d6 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -9,7 +9,26 @@ export default defineNuxtConfig({ '@nuxt/scripts', '@nuxt/test-utils', '@nuxt/ui', + '@nuxtjs/google-fonts', ], + + googleFonts: { + families: { + 'Playfair Display': [400, 500, 600, 700], + 'Source Sans 3': [300, 400, 500, 600, 700], + 'JetBrains Mono': [400, 500, 600], + }, + display: 'swap', + preload: true, + }, + + css: ['~/assets/css/main.css'], + + colorMode: { + preference: 'dark', + fallback: 'dark', + }, + devtools: { enabled: true }, compatibilityDate: '2024-04-03', }) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e055a8a..a85cb55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@nuxt/scripts": "^0.13.2", "@nuxt/test-utils": "^3.23.0", "@nuxt/ui": "^4.4.0", + "@nuxtjs/google-fonts": "^3.2.0", "@unhead/vue": "^2.1.2", "better-sqlite3": "^12.6.2", "eslint": "^9.39.2", @@ -4039,6 +4040,61 @@ "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", "license": "MIT" }, + "node_modules/@nuxtjs/google-fonts": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@nuxtjs/google-fonts/-/google-fonts-3.2.0.tgz", + "integrity": "sha512-cGAjDJoeQ2jm6VJCo4AtSmKO6KjsbO9RSLj8q261fD0lMVNMZCxkCxBkg8L0/2Vfgp+5QBHWVXL71p1tiybJFw==", + "license": "MIT", + "dependencies": { + "@nuxt/kit": "^3.10.3", + "google-fonts-helper": "^3.5.0", + "pathe": "^1.1.2" + } + }, + "node_modules/@nuxtjs/google-fonts/node_modules/@nuxt/kit": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.21.0.tgz", + "integrity": "sha512-KMTLK/dsGaQioZzkYUvgfN9le4grNW54aNcA1jqzgVZLcFVy4jJfrJr5WZio9NT2EMfajdoZ+V28aD7BRr4Zfw==", + "license": "MIT", + "dependencies": { + "c12": "^3.3.3", + "consola": "^3.4.2", + "defu": "^6.1.4", + "destr": "^2.0.5", + "errx": "^0.1.0", + "exsolve": "^1.0.8", + "ignore": "^7.0.5", + "jiti": "^2.6.1", + "klona": "^2.0.6", + "knitwork": "^1.3.0", + "mlly": "^1.8.0", + "ohash": "^2.0.11", + "pathe": "^2.0.3", + "pkg-types": "^2.3.0", + "rc9": "^2.1.2", + "scule": "^1.3.0", + "semver": "^7.7.3", + "tinyglobby": "^0.2.15", + "ufo": "^1.6.3", + "unctx": "^2.5.0", + "untyped": "^2.0.0" + }, + "engines": { + "node": ">=18.12.0" + } + }, + "node_modules/@nuxtjs/google-fonts/node_modules/@nuxt/kit/node_modules/pathe": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", + "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", + "license": "MIT" + }, + "node_modules/@nuxtjs/google-fonts/node_modules/pathe": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz", + "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==", + "license": "MIT" + }, "node_modules/@nuxtjs/mdc": { "version": "0.20.0", "resolved": "https://registry.npmjs.org/@nuxtjs/mdc/-/mdc-0.20.0.tgz", @@ -12094,6 +12150,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/google-fonts-helper": { + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/google-fonts-helper/-/google-fonts-helper-3.7.3.tgz", + "integrity": "sha512-dENZeK6RMvkCOFoKbLbS+pyoDgpmk4U6BYmfXnztMar2d8SjEG6valxql/Lkyi7bu5F+3FTdE+gAEYSYZ5zzMA==", + "license": "MIT", + "dependencies": { + "deepmerge": "^4.3.1", + "hookable": "^5.5.3", + "ofetch": "^1.4.1", + "ufo": "^1.5.4" + } + }, "node_modules/gopd": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", diff --git a/package.json b/package.json index 9f71a62..1e7dd92 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@nuxt/scripts": "^0.13.2", "@nuxt/test-utils": "^3.23.0", "@nuxt/ui": "^4.4.0", + "@nuxtjs/google-fonts": "^3.2.0", "@unhead/vue": "^2.1.2", "better-sqlite3": "^12.6.2", "eslint": "^9.39.2", From e4ca64f01886c01933e2fa6e0dd1a89ff35075da Mon Sep 17 00:00:00 2001 From: Arckie Jadulco Date: Mon, 26 Jan 2026 23:10:37 +0800 Subject: [PATCH 03/13] feat(design-system): add Tailwind CSS 4 config with custom tokens - Add main.css with color palette, fonts, animations, shadows - Configure Nuxt UI theme in app.config.ts - Add @nuxtjs/google-fonts with Playfair Display, Source Sans 3, JetBrains Mono - Set dark mode as default --- CHANGELOG.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index abda78b..90cd98e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -81,6 +81,36 @@ All notable changes to the Arckie Jadulco Portfolio project will be documented i --- +### Phase 3: Reusable UI Components + +#### Added +- **`app/components/ui/SkillCard.vue`** - Skill display card + - Props: name, icon, level (expert/advanced/intermediate) + - 3-bar level indicator + - Hover border and shadow effects + +- **`app/components/ui/ProjectCard.vue`** - Project showcase card + - Props: title, description, tags[], image, demoUrl, repoUrl, featured + - Aspect-ratio image area with placeholder + - Hover overlay with demo/repo link buttons + - "Featured" badge for highlighted projects + - Spans 2 columns when featured + +- **`app/components/ui/TimelineItem.vue`** - Experience timeline entry + - Props: title, company, period, description, technologies[], isLast + - Vertical timeline with connecting line + - Dot indicator with accent border + - Period badge and technology tags + +- **`app/components/ui/BlogCard.vue`** - Blog post preview card + - Props: title, description, date, slug, readingTime, tags[] + - Formatted date display + - 2-line clamped description + - Tags with # prefix + - "Read article" indicator on hover + +--- + ## Notes for Reviewer ### Suggested Commit Messages (in order) @@ -104,3 +134,13 @@ feat: add base layout with header, footer, and mobile navigation - Add full-screen mobile menu with keyboard support - Add footer with social links ``` + +**Phase 3:** +``` +feat: add reusable UI components + +- Add SkillCard with level indicator +- Add ProjectCard with hover overlay and featured badge +- Add TimelineItem for experience section +- Add BlogCard with formatted date and tags +``` From f0881c6c7cb5aec9e593f69771e8b6c22b46e9ef Mon Sep 17 00:00:00 2001 From: Arckie Jadulco Date: Mon, 26 Jan 2026 23:10:51 +0800 Subject: [PATCH 04/13] feat(components): add reusable UI components - Add SkillCard with icon, name, and 3-bar level indicator - Add ProjectCard with image, hover overlay, featured badge - Add TimelineItem with vertical timeline and tech tags - Add BlogCard with formatted date and read-more indicator --- app/components/ui/BlogCard.vue | 72 ++++++++++++++++++++ app/components/ui/ProjectCard.vue | 105 +++++++++++++++++++++++++++++ app/components/ui/SkillCard.vue | 58 ++++++++++++++++ app/components/ui/TimelineItem.vue | 72 ++++++++++++++++++++ 4 files changed, 307 insertions(+) create mode 100644 app/components/ui/BlogCard.vue create mode 100644 app/components/ui/ProjectCard.vue create mode 100644 app/components/ui/SkillCard.vue create mode 100644 app/components/ui/TimelineItem.vue diff --git a/app/components/ui/BlogCard.vue b/app/components/ui/BlogCard.vue new file mode 100644 index 0000000..174056a --- /dev/null +++ b/app/components/ui/BlogCard.vue @@ -0,0 +1,72 @@ + + + diff --git a/app/components/ui/ProjectCard.vue b/app/components/ui/ProjectCard.vue new file mode 100644 index 0000000..1d30f4a --- /dev/null +++ b/app/components/ui/ProjectCard.vue @@ -0,0 +1,105 @@ + + + diff --git a/app/components/ui/SkillCard.vue b/app/components/ui/SkillCard.vue new file mode 100644 index 0000000..0ce7920 --- /dev/null +++ b/app/components/ui/SkillCard.vue @@ -0,0 +1,58 @@ + + + diff --git a/app/components/ui/TimelineItem.vue b/app/components/ui/TimelineItem.vue new file mode 100644 index 0000000..d618d5f --- /dev/null +++ b/app/components/ui/TimelineItem.vue @@ -0,0 +1,72 @@ + + + From d2e58cd59f4c6226670aabdd6e696c224ea17224 Mon Sep 17 00:00:00 2001 From: Arckie Jadulco Date: Mon, 26 Jan 2026 23:13:39 +0800 Subject: [PATCH 05/13] feat(pages): add home page sections and main index - Add HeroSection with typing animation and scroll indicator - Add AboutSection with stats grid and floating code snippet - Add SkillsSection with 3-column categorized grid - Add ProjectsSection with featured project cards - Add ExperienceSection with vertical timeline - Add ContactSection with form validation - Create index.vue assembling all sections - Remove catch-all [...slug].vue route --- CHANGELOG.md | 59 +++++ app/components/sections/AboutSection.vue | 95 +++++++ app/components/sections/ContactSection.vue | 237 ++++++++++++++++++ app/components/sections/ExperienceSection.vue | 79 ++++++ app/components/sections/HeroSection.vue | 128 ++++++++++ app/components/sections/ProjectsSection.vue | 106 ++++++++ app/components/sections/SkillsSection.vue | 86 +++++++ app/pages/[...slug].vue | 18 -- app/pages/index.vue | 21 ++ 9 files changed, 811 insertions(+), 18 deletions(-) create mode 100644 app/components/sections/AboutSection.vue create mode 100644 app/components/sections/ContactSection.vue create mode 100644 app/components/sections/ExperienceSection.vue create mode 100644 app/components/sections/HeroSection.vue create mode 100644 app/components/sections/ProjectsSection.vue create mode 100644 app/components/sections/SkillsSection.vue delete mode 100644 app/pages/[...slug].vue create mode 100644 app/pages/index.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 90cd98e..b5d0651 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -111,6 +111,52 @@ All notable changes to the Arckie Jadulco Portfolio project will be documented i --- +### Phase 4: Home Page Sections + +#### Added +- **`app/components/sections/HeroSection.vue`** - Full-height hero + - Floating background blobs with animation + - Typing animation cycling through roles + - CTA buttons (View My Work, Get In Touch) + - Animated scroll indicator + +- **`app/components/sections/AboutSection.vue`** - About section + - 2-column grid (image | content) + - Floating code snippet card + - Bio paragraphs + - Stats grid (Years, Projects, Clients) + +- **`app/components/sections/SkillsSection.vue`** - Skills section + - 3-column category grid (Frontend, Backend, DevOps) + - Uses SkillCard components + - Categorized skill listing + +- **`app/components/sections/ProjectsSection.vue`** - Projects section + - 2-column project grid + - 6 placeholder projects (2 featured) + - Uses ProjectCard components + - "View More on GitHub" button + +- **`app/components/sections/ExperienceSection.vue`** - Experience section + - Sticky header with download resume button + - Timeline layout with 4 entries + - Uses TimelineItem components + +- **`app/components/sections/ContactSection.vue`** - Contact section + - Contact info cards (Email, Location, Availability) + - Contact form with validation + - Success/error states + - Social links reminder + +- **`app/pages/index.vue`** - Main portfolio page + - Assembles all section components + - SEO meta tags configured + +#### Removed +- **`app/pages/[...slug].vue`** - Removed catch-all route + +--- + ## Notes for Reviewer ### Suggested Commit Messages (in order) @@ -144,3 +190,16 @@ feat: add reusable UI components - Add TimelineItem for experience section - Add BlogCard with formatted date and tags ``` + +**Phase 4:** +``` +feat: add home page sections and main index page + +- Add HeroSection with typing animation and CTAs +- Add AboutSection with stats and floating code snippet +- Add SkillsSection with categorized skill grid +- Add ProjectsSection with featured projects +- Add ExperienceSection with timeline layout +- Add ContactSection with form validation +- Create index.vue assembling all sections +``` diff --git a/app/components/sections/AboutSection.vue b/app/components/sections/AboutSection.vue new file mode 100644 index 0000000..36da63a --- /dev/null +++ b/app/components/sections/AboutSection.vue @@ -0,0 +1,95 @@ + + + diff --git a/app/components/sections/ContactSection.vue b/app/components/sections/ContactSection.vue new file mode 100644 index 0000000..2487cfb --- /dev/null +++ b/app/components/sections/ContactSection.vue @@ -0,0 +1,237 @@ + + +