DEV Community

Project Introduction: Portfolio Developer

Lê Vĩnh Tuyến on October 23, 2024

1. Project Objective: This project is designed to create an online space for developers to showcase their skills, expertise, and past pr...

Read full post

Mac Long • Oct 28

The tech stack icons seem to take a second or so to load in, something I have found that helps with this is to create components within your framework that export the SVG code inline; this works because you are no longer fetching the asset on load it is inlined as standard html and therefor processed with the rest of your site.

An example of how that would look

<template>
  <svg 
    :width="props.size" 
    :height="props.size"
    viewBox="0 0 24 24" 
    :aria-label="props.label"
    :role="props.label ? 'img' : 'presentation'"
    :class="[
      'inline-block align-middle',
      props.color ? `text-${props.color}` : '',
      props.className
    ]"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <!-- Example paths for a "bookmark" icon -->
    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />

    <!-- Slot for custom paths -->
    <slot></slot>
  </svg>
</template>

<script setup lang="ts">
interface IconProps {
  // Icon size in pixels
  size?: number | string;
  // Tailwind color class (e.g. 'blue-500')
  color?: string;
  // Additional classes
  className?: string;
  // Accessibility label
  label?: string;
}

const props = withDefaults(defineProps<IconProps>(), {
  size: 24,
  color: '',
  className: '',
  label: ''
})
</script>

<style scoped>
svg {
  flex-shrink: 0;
}
</style>

Lê Vĩnh Tuyến • Oct 28

Thank you for sharing, it’s really helpful to me

Mac Long • Oct 28

No worries!

THAKRA JUTT • Nov 1

when i do with page insights

on mobile

Lê Vĩnh Tuyến • Nov 1

That's right, on the detail page, the score depends heavily on the content of your article. With different content, the score will vary. That's why it's essential to write detailed, SEO-friendly content.

Anthony Lombardi • Oct 31 • Edited

Nice job. Looks similar to my blog: t0nylombardi.dev/ I used Astrojs to make this

Nguyen Hoach • Oct 31

Looks great

HANA • Dec 18

It looks so cool! good job

Krzysztof • Nov 2

The page looks very nice and clean. You can also use i18n or some other translation and be consistent with one type of language throughout the app. Nevertheless, great job.

Stéphane • Nov 6

Thanks guys

Lê Vĩnh Tuyến • Dec 12

update package pdfjs-dist and page mycv, load file CV pdf

Lê Vĩnh Tuyến • Nov 11

added multilingual functionality and back-to-top feature