From be646f27cc36ca349d65bcb264c7f72f419ece3f Mon Sep 17 00:00:00 2001 From: TechnoTalksDev Date: Sun, 2 Mar 2025 13:08:19 -0800 Subject: [PATCH] Redesign components - Moved back to scrolling portfolio - Mobile first components - Missing content for experience and contact - Need to fix project card to become a grid when there's space --- package-lock.json | 127 +++++++++++++++++- package.json | 7 +- src/app.postcss | 20 +++ src/lib/components/Dock.svelte | 54 ++++++++ src/lib/components/DockIcon.svelte | 48 +++++++ src/lib/components/contactCall.svelte | 46 +++++++ src/lib/components/newExperience.svelte | 38 ++++++ src/lib/components/projectCard.svelte | 67 +++++++-- .../components/skillsSliderHorizontal.svelte | 41 ++++++ src/lib/svg/icons/discord-color.svg | 1 + src/lib/svg/icons/discord.svg | 1 + src/lib/svg/icons/github-white.svg | 1 + src/lib/svg/icons/github.svg | 1 + src/lib/svg/icons/gmail.svg | 1 + src/lib/svg/icons/linkedin.svg | 1 + src/lib/utils.ts | 14 ++ src/routes/+page.svelte | 80 +++++++---- tailwind.config.ts | 1 + 18 files changed, 508 insertions(+), 41 deletions(-) create mode 100644 src/lib/components/Dock.svelte create mode 100644 src/lib/components/DockIcon.svelte create mode 100644 src/lib/components/contactCall.svelte create mode 100644 src/lib/components/newExperience.svelte create mode 100644 src/lib/components/skillsSliderHorizontal.svelte create mode 100644 src/lib/svg/icons/discord-color.svg create mode 100644 src/lib/svg/icons/discord.svg create mode 100644 src/lib/svg/icons/github-white.svg create mode 100644 src/lib/svg/icons/github.svg create mode 100644 src/lib/svg/icons/gmail.svg create mode 100644 src/lib/svg/icons/linkedin.svg create mode 100644 src/lib/utils.ts diff --git a/package-lock.json b/package-lock.json index 41a797b..bfaf39f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,13 @@ "@floating-ui/dom": "1.6.5", "@selemondev/svelte-marquee": "^0.0.2", "@sveltejs/enhanced-img": "^0.2.1", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", "highlight.js": "11.9.0", "ldrs": "^1.0.2", - "lucide-svelte": "^0.395.0" + "lucide-svelte": "^0.395.0", + "svelte-motion": "^0.12.2", + "tailwind-merge": "^3.0.2" }, "devDependencies": { "@skeletonlabs/skeleton": "2.10.0", @@ -38,6 +42,7 @@ "prettier-plugin-svelte": "^3.1.2", "svelte": "^4.2.7", "svelte-check": "^3.6.0", + "tailwind-scrollbar": "^3.1.0", "tailwindcss": "3.4.4", "tslib": "^2.4.1", "typescript": "^5.0.0", @@ -1594,6 +1599,15 @@ "svelte": "^4.0.0" } }, + "node_modules/@selemondev/svelte-marquee/node_modules/tailwind-merge": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz", + "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/@skeletonlabs/skeleton": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.10.0.tgz", @@ -1803,12 +1817,26 @@ "undici-types": "~5.26.4" } }, + "node_modules/@types/prop-types": { + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==" + }, "node_modules/@types/pug": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz", "integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==", "dev": true }, + "node_modules/@types/react": { + "version": "18.3.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", + "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/resolve": { "version": "1.20.2", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", @@ -2364,6 +2392,17 @@ "node": ">= 6" } }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -2491,6 +2530,11 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", @@ -3107,6 +3151,19 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framesync": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz", + "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==", + "dependencies": { + "tslib": "2.4.0" + } + }, + "node_modules/framesync/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3267,6 +3324,11 @@ "node": ">= 0.4" } }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "node_modules/highlight.js": { "version": "11.9.0", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", @@ -4007,6 +4069,22 @@ "node": ">= 6" } }, + "node_modules/popmotion": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz", + "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==", + "dependencies": { + "framesync": "6.1.2", + "hey-listen": "^1.0.8", + "style-value-types": "5.1.2", + "tslib": "2.4.0" + } + }, + "node_modules/popmotion/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + }, "node_modules/postcss": { "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", @@ -4744,6 +4822,20 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-value-types": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz", + "integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==", + "dependencies": { + "hey-listen": "^1.0.8", + "tslib": "2.4.0" + } + }, + "node_modules/style-value-types/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", @@ -4894,6 +4986,21 @@ "svelte": "^3.19.0 || ^4.0.0" } }, + "node_modules/svelte-motion": { + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/svelte-motion/-/svelte-motion-0.12.2.tgz", + "integrity": "sha512-7RrdRz9iVP55B9HT/C0hYW3pyrKlF61kAby/AkDtOAP0uHFQDrfd0qQetDC81cEsK9b40jt+jfcqSAXcA7LPEw==", + "dependencies": { + "@types/react": "^18.2.42", + "framesync": "^6.1.2", + "popmotion": "^11.0.5", + "style-value-types": "5.1.2", + "tslib": "^2.6.2" + }, + "peerDependencies": { + "svelte": ">=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0" + } + }, "node_modules/svelte-parse-markup": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/svelte-parse-markup/-/svelte-parse-markup-0.1.4.tgz", @@ -4982,14 +5089,26 @@ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" }, "node_modules/tailwind-merge": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz", - "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz", + "integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==", "funding": { "type": "github", "url": "https://github.com/sponsors/dcastil" } }, + "node_modules/tailwind-scrollbar": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz", + "integrity": "sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==", + "dev": true, + "engines": { + "node": ">=12.13.0" + }, + "peerDependencies": { + "tailwindcss": "3.x" + } + }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/package.json b/package.json index bb815fa..11df97c 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "prettier-plugin-svelte": "^3.1.2", "svelte": "^4.2.7", "svelte-check": "^3.6.0", + "tailwind-scrollbar": "^3.1.0", "tailwindcss": "3.4.4", "tslib": "^2.4.1", "typescript": "^5.0.0", @@ -46,8 +47,12 @@ "@floating-ui/dom": "1.6.5", "@selemondev/svelte-marquee": "^0.0.2", "@sveltejs/enhanced-img": "^0.2.1", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", "highlight.js": "11.9.0", "ldrs": "^1.0.2", - "lucide-svelte": "^0.395.0" + "lucide-svelte": "^0.395.0", + "svelte-motion": "^0.12.2", + "tailwind-merge": "^3.0.2" } } diff --git a/src/app.postcss b/src/app.postcss index 52291e0..5b3ce3c 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -41,4 +41,24 @@ body { /* Color Stops */ @apply from-primary-500 via-success-500 to-tertiary-500; } + +.animate-gradient { + background-size: 300%; + -webkit-animation: animatedgradient 6s ease infinite alternate; + -moz-animation: animatedgradient 6s ease infinite alternate; + animation: animatedgradient 6s ease infinite alternate; +} + + +@keyframes animatedgradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} \ No newline at end of file diff --git a/src/lib/components/Dock.svelte b/src/lib/components/Dock.svelte new file mode 100644 index 0000000..a8504c5 --- /dev/null +++ b/src/lib/components/Dock.svelte @@ -0,0 +1,54 @@ + + + + +
handleMouseMove(e)} + on:mouseleave={handleMouseLeave} + class={dockClass} + > + + + Default + +
+ diff --git a/src/lib/components/DockIcon.svelte b/src/lib/components/DockIcon.svelte new file mode 100644 index 0000000..ceafac2 --- /dev/null +++ b/src/lib/components/DockIcon.svelte @@ -0,0 +1,48 @@ + + + +
+ +
+ diff --git a/src/lib/components/contactCall.svelte b/src/lib/components/contactCall.svelte new file mode 100644 index 0000000..04ec243 --- /dev/null +++ b/src/lib/components/contactCall.svelte @@ -0,0 +1,46 @@ + + + + + + Get in touch + + +
+ + {#each navs.navbar as item} + +
+ {item.label} +
+ + {/each} + +
+ diff --git a/src/lib/components/newExperience.svelte b/src/lib/components/newExperience.svelte new file mode 100644 index 0000000..a31407e --- /dev/null +++ b/src/lib/components/newExperience.svelte @@ -0,0 +1,38 @@ + + + +
+ +
+ {#each experiences as experience, index} +
+ +
+ +

+ {experience.company} +

+

+ {experience.position} +

+ +
+ + +

+ {experience.blurb} +

+ + +
+ + {/each} +
+ +
\ No newline at end of file diff --git a/src/lib/components/projectCard.svelte b/src/lib/components/projectCard.svelte index 078f1ea..50b9ead 100644 --- a/src/lib/components/projectCard.svelte +++ b/src/lib/components/projectCard.svelte @@ -4,23 +4,22 @@ export let projects; -
+
{#each projects as project, index} -
- -
+
+
+ +
-

{project.name}

+

{project.name}

+ {#if project.link} + {/if} + {#if project.github} + {/if}
{#each project.tags as tag} #{tag} {/each} -

{project.description}

+

{project.description}

{/each} -
\ No newline at end of file +
+ + + + + \ No newline at end of file diff --git a/src/lib/components/skillsSliderHorizontal.svelte b/src/lib/components/skillsSliderHorizontal.svelte new file mode 100644 index 0000000..0389bb5 --- /dev/null +++ b/src/lib/components/skillsSliderHorizontal.svelte @@ -0,0 +1,41 @@ + +
+
+ + {#each skills as skill, index} +
+
+ + {skill.name + +
+
+ + + +
+

{skill.name}

+
+
+ + {/each} +
+
+
\ No newline at end of file diff --git a/src/lib/svg/icons/discord-color.svg b/src/lib/svg/icons/discord-color.svg new file mode 100644 index 0000000..ef25142 --- /dev/null +++ b/src/lib/svg/icons/discord-color.svg @@ -0,0 +1 @@ +Discord \ No newline at end of file diff --git a/src/lib/svg/icons/discord.svg b/src/lib/svg/icons/discord.svg new file mode 100644 index 0000000..9d7796b --- /dev/null +++ b/src/lib/svg/icons/discord.svg @@ -0,0 +1 @@ +Discord \ No newline at end of file diff --git a/src/lib/svg/icons/github-white.svg b/src/lib/svg/icons/github-white.svg new file mode 100644 index 0000000..6e3d82f --- /dev/null +++ b/src/lib/svg/icons/github-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/svg/icons/github.svg b/src/lib/svg/icons/github.svg new file mode 100644 index 0000000..538ec5b --- /dev/null +++ b/src/lib/svg/icons/github.svg @@ -0,0 +1 @@ +GitHub \ No newline at end of file diff --git a/src/lib/svg/icons/gmail.svg b/src/lib/svg/icons/gmail.svg new file mode 100644 index 0000000..2d07a69 --- /dev/null +++ b/src/lib/svg/icons/gmail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/svg/icons/linkedin.svg b/src/lib/svg/icons/linkedin.svg new file mode 100644 index 0000000..7e513c6 --- /dev/null +++ b/src/lib/svg/icons/linkedin.svg @@ -0,0 +1 @@ +LinkedIn \ No newline at end of file diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..8f45f52 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,14 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + + export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); + } + + + +export type Contact = { + name: string; + icon: string; + link: string; +}; \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b498b87..3f22958 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -12,6 +12,9 @@ import SkillSlider from '$lib/components/skillSlider.svelte'; import ProjectCard from '$lib/components/projectCard.svelte'; import LatestCommit from '$lib/components/latestCommit.svelte'; + import SkillsSliderHorizontal from '$lib/components/skillsSliderHorizontal.svelte'; + import NewExperience from '$lib/components/newExperience.svelte'; + import ContactCall from '$lib/components/contactCall.svelte'; const toastStore = getToastStore(); let currentSub = 0; @@ -278,6 +281,52 @@ -->
+
+ + + +
+ + + + +
+ + +
+
+ +
+
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+ + +
+ +
+ + +
+ +
+ + + - + - + @@ -351,7 +400,7 @@
- +
@@ -359,7 +408,7 @@
- + -->