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 '24

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 '24

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

Mac Long • Oct 28 '24

No worries!

THAKRA JUTT • Nov 1 '24

when i do with page insights

on mobile

Lê Vĩnh Tuyến • Nov 1 '24

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 '24 • Edited

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

Nguyen Hoach • Oct 31 '24

Looks great

HANA • Dec 18 '24

It looks so cool! good job

Krzysztof • Nov 2 '24

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 '24

Thanks guys

Maksym Tymofeiev • Jan 30

No reactivity There is minimal information presented, and there is no clear reason to use Nuxt here. Using static HTML would likely be better in terms of performance and simplicity. Nuxt's features are unnecessary if they're not utilized properly.
Improper use of SVG files SVG files are being used via <img> tags. A better approach would be to inline the SVG to define it once in the code and reference it with <use href="#mySvgPart" />. This eliminates additional server requests and significantly improves loading speed.
Icons without labels hurt UX Using icons to represent the tech stack without accompanying labels is poor user experience, especially if the target audience includes HR managers or non-technical users. They may not recognize what the icons represent. It’s fine to use icons, but they should always be accompanied by text descriptions.
The CV must be downloadable Users should be able to download the CV directly. This is a standard feature and improves usability.
Inconsistent languages If you include a language switcher, ensure that the content is actually translated. Right now, it seems like the page only provides partial translations, rendering the switcher meaningless. Ideally, use a simple script to detect the user's preferred language and display the appropriate content automatically. For a project already burdened with many modules, adding this short feature (only a few lines of JS) would have been much more meaningful.

PS: All technologies are for different purpose. It is a bad idea to make an online casino using WP, it is a bad idea to make a resume site using Nuxt.

Lê Vĩnh Tuyến • Feb 2

I completely agree. I build projects with Nuxt because it has a blog section where I can share my experiences and thoughts. Another reason is that I want to explore new job opportunities through it.

Lê Vĩnh Tuyến • Dec 12 '24

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

Lê Vĩnh Tuyến • Nov 11 '24

added multilingual functionality and back-to-top feature