Refactor Icons
This commit is contained in:
parent
cb287c0e51
commit
199463fd21
GPG key ID:
3D64A2E70F58D07C
9 changed files with 24 additions and 20 deletions
7
bun.lock
7
bun.lock
|
|
@ -5,8 +5,9 @@
|
|||
"": {
|
||||
"name": "portfolio",
|
||||
"dependencies": {
|
||||
"@nychthemeron/library": "^0.0.3",
|
||||
"@nychthemeron/library": "^0.0.5",
|
||||
"@unhead/vue": "^3.1.8",
|
||||
"lucide-vue-next": "^1.0.0",
|
||||
"vue": "^3.5.40",
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -210,7 +211,7 @@
|
|||
|
||||
"@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
|
||||
|
||||
"@nychthemeron/library": ["@nychthemeron/library@0.0.3", "https://git.mcpeakdev.com/api/packages/McPeakDev/npm/%40nychthemeron%2Flibrary/-/0.0.3/library-0.0.3.tgz", { "dependencies": { "@fontsource/cinzel": "^5.2.8", "@fontsource/ibm-plex-mono": "^5.2.7", "@fontsource/ibm-plex-sans": "^5.2.8", "@lucide/vue": "^1.24.0", "@tailwindcss/vite": "^4.3.2", "@vueuse/core": "^14.3.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "shadcn-vue": "^2.7.4", "tailwind-merge": "^3.6.0", "tailwindcss": "^4.3.2", "tw-animate-css": "^1.4.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-UV5ehTgefJ2qY78XIEy/vPL2jLuT2SyMewi9hUcrGhsVJLYJxNE80I4PklN2Mc14kpLfpTM3JvpDwvfnpk0DzA=="],
|
||||
"@nychthemeron/library": ["@nychthemeron/library@0.0.5", "https://git.mcpeakdev.com/api/packages/McPeakDev/npm/%40nychthemeron%2Flibrary/-/0.0.5/library-0.0.5.tgz", { "dependencies": { "@fontsource/cinzel": "^5.2.8", "@fontsource/ibm-plex-mono": "^5.2.7", "@fontsource/ibm-plex-sans": "^5.2.8", "@lucide/vue": "^1.24.0", "@tailwindcss/vite": "^4.3.2", "@vueuse/core": "^14.3.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "shadcn-vue": "^2.7.4", "tailwind-merge": "^3.6.0", "tailwindcss": "^4.3.2", "tw-animate-css": "^1.4.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-iJgyO8qBbRZRILULAJXyL10WMo5XR1a7WIq1463rET2SOtwlrk+GMyvmQ5enDVEcr8hYawv36sUPkNTdnzgQuQ=="],
|
||||
|
||||
"@one-ini/wasm": ["@one-ini/wasm@0.1.1", "", {}, "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw=="],
|
||||
|
||||
|
|
@ -990,6 +991,8 @@
|
|||
|
||||
"lru-cache": ["lru-cache@11.5.1", "", {}, "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A=="],
|
||||
|
||||
"lucide-vue-next": ["lucide-vue-next@1.0.0", "", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-V6SPvx1IHTj/UY+FrIYWV5faISsPSb8BnWSFDxAtezWKvWc9ZZ40PDrdu1/Qb5vg4lHWr1hs1BAMGVGm6V1Xdg=="],
|
||||
|
||||
"magic-regexp": ["magic-regexp@0.11.0", "", { "dependencies": { "magic-string": "^0.30.21", "regexp-tree": "^0.1.27", "type-level-regexp": "~0.1.17", "unplugin": "^3.0.0" } }, "sha512-LG77Z/gVnwz7oaDpD4heX6ryl+lcr4l1B2gnP4MMvt2pGhGC1Dfj7dl1pXpP4ih+VQFLuAadeKVa+lARAzfW+Q=="],
|
||||
|
||||
"magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/mark.svg" />
|
||||
|
|
|
|||
|
|
@ -17,8 +17,9 @@
|
|||
"format": "oxfmt src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nychthemeron/library": "^0.0.3",
|
||||
"@nychthemeron/library": "^0.0.5",
|
||||
"@unhead/vue": "^3.1.8",
|
||||
"lucide-vue-next": "^1.0.0",
|
||||
"vue": "^3.5.40"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,6 @@
|
|||
portfolio template
|
||||
============================================================ */
|
||||
|
||||
/* PrimeIcons — used directly by portfolio markup (nav, social links,
|
||||
chevron); not part of @nychthemeron/library's own component classes. */
|
||||
@import url('https://cdn.jsdelivr.net/npm/primeicons/primeicons.css');
|
||||
|
||||
/* Portfolio-only tokens not covered by @nychthemeron/library's theme. */
|
||||
:root {
|
||||
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.18);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ImageIcon } from 'lucide-vue-next'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
src?: string
|
||||
|
|
@ -19,7 +21,7 @@ withDefaults(
|
|||
>
|
||||
<img v-if="src" :src="src" :alt="alt" class="nych-image-slot-img" />
|
||||
<div v-else class="nych-image-slot-placeholder">
|
||||
<i class="pi pi-image" aria-hidden="true" />
|
||||
<ImageIcon aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Github, Linkedin, Mail } from 'lucide-vue-next'
|
||||
import LaurelDivider from '@/components/design/LaurelDivider.vue'
|
||||
import type { ComponentProps } from '@/data/portfolio'
|
||||
|
||||
const { portfolioData } = defineProps<ComponentProps>()
|
||||
|
||||
const socialLinks = computed(() => [
|
||||
{ icon: 'github', label: 'GitHub', href: portfolioData?.social.github },
|
||||
{ icon: 'linkedin', label: 'LinkedIn', href: portfolioData?.social.linkedin },
|
||||
{ icon: Github, label: 'GitHub', href: portfolioData?.social.github },
|
||||
{ icon: Linkedin, label: 'LinkedIn', href: portfolioData?.social.linkedin },
|
||||
{
|
||||
icon: 'envelope',
|
||||
icon: Mail,
|
||||
label: portfolioData?.social.email,
|
||||
href: `mailto:${portfolioData?.social.email}`,
|
||||
},
|
||||
|
|
@ -26,11 +27,11 @@ const socialLinks = computed(() => [
|
|||
<div class="port-contact-links">
|
||||
<a
|
||||
v-for="link in socialLinks"
|
||||
:key="link.icon"
|
||||
:key="link.label"
|
||||
:href="link.href"
|
||||
class="port-contact-link"
|
||||
>
|
||||
<i :class="`pi pi-${link.icon}`" class="port-contact-link-icon" />
|
||||
<component :is="link.icon" :size="16" class="port-contact-link-icon" />
|
||||
<span>{{ link.label }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -94,9 +95,6 @@ const socialLinks = computed(() => [
|
|||
|
||||
.port-contact-link-icon {
|
||||
color: var(--primary);
|
||||
font-size: 16px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { ChevronDown } from 'lucide-vue-next'
|
||||
import { Button } from '@nychthemeron/library'
|
||||
|
||||
import LaurelSpinner from '@/components/design/LaurelSpinner.vue'
|
||||
|
|
@ -55,7 +56,7 @@ watch(
|
|||
<LaurelDivider />
|
||||
</div>
|
||||
<div class="port-hero-chevron" :class="{ 'port-hero-chevron--visible': visible }">
|
||||
<i class="pi pi-chevron-down" style="font-size: 18px; color: var(--text-dim)" />
|
||||
<ChevronDown :size="18" style="color: var(--text-dim)" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Moon, Sun } from 'lucide-vue-next'
|
||||
import { Button } from '@nychthemeron/library'
|
||||
|
||||
import type { Theme } from '@/composables/useTheme'
|
||||
|
|
@ -41,7 +42,8 @@ const surname = computed(() => props.portfolioData?.name.toUpperCase())
|
|||
>
|
||||
</span>
|
||||
<Button class="port-nav-toggle" @click="$emit('toggle')">
|
||||
<i :class="`pi pi-${night ? 'moon' : 'sun'}`" style="font-size: 12px" />
|
||||
<Moon v-if="night" :size="12" />
|
||||
<Sun v-else :size="12" />
|
||||
<span class="port-toggle-text">{{ night ? 'Hades' : 'Apollo' }}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge, Card, CardHeader, CardTitle, CardContent, CardFooter } from '@nychthemeron/library'
|
||||
import { ExternalLink } from 'lucide-vue-next'
|
||||
|
||||
import LaurelDivider from '@/components/design/LaurelDivider.vue'
|
||||
import ImageSlot from '@/components/design/ImageSlot.vue'
|
||||
|
|
@ -45,7 +46,7 @@ const { portfolioData } = defineProps<ComponentProps>()
|
|||
class="port-work-view"
|
||||
:style="{ color: ACCENT[project.color] }"
|
||||
>
|
||||
View <i class="pi pi-external-link" style="font-size: 10px" />
|
||||
View <ExternalLink :size="10" />
|
||||
</a>
|
||||
</CardTitle>
|
||||
{{ project.description }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue