DEV Community

Cover image for Project Introduction: Portfolio Developer
Lê Vĩnh Tuyến
Lê Vĩnh Tuyến

Posted on • Updated on

Project Introduction: Portfolio Developer

1. Project Objective:

This project is designed to create an online space for developers to showcase their skills, expertise, and past projects. Additionally, an integrated blog helps share programming experiences and knowledge. Make an impression on the employer. The site acts as both a personal branding platform and a hub for interacting with the developer community.

2. Technologies Used:

  • Nuxt 3: A powerful Vue.js-based framework that helps build high-performance web applications. Nuxt 3 supports Server-Side Rendering (SSR) and Static Site Generation (SSG), enhancing loading speed and improving SEO.

  • TailwindCSS: A utility-first CSS framework that makes it easy to create responsive and mobile-optimized layouts without writing extensive custom CSS. TailwindCSS offers a modern, customizable, and flexible design.

3. Key Features:

  • Personal Portfolio Page: A detailed introduction of the developer, including skills, work experience, and education. Highlighted projects are displayed with brief descriptions, images, and demo links.

  • Project Showcase: Each project is detailed with technology stacks used, illustrative images, and an overview of key functions. Users can explore projects for more in-depth information.

  • Experience Sharing Blog: The blog allows developers to write articles on programming, tech trends, and web development tips. The blog is organized into categories for easy search and navigation.

  • Dark Mode: A built-in dark mode feature allows users to switch between light and dark themes based on their preference or environment. This enhances visual comfort and saves energy on OLED displays.

  • SEO Optimization: Using Nuxt 3 and SEO techniques like dynamic meta tags, sitemaps, URL optimization, and well-structured headings, the site is designed to rank higher on search engines and reach a wider audience.

SEO Optimization

  • High Performance: Nuxt 3 optimizes project performance through SSG and SSR techniques, ensuring faster load times, particularly on first visits.

  • Markdown Content Management: Blog posts and project details are managed via markdown files, simplifying the process of editing and updating content without needing back-end involvement.

  • Responsive Design

  • ✨  Link demo

  • 📦  Create avatar 3D

  • 👀  Source

  • 📚  Structure: Use Nuxt 3 Awesome Starter V2

Top comments (9)

Collapse
 
mac_long_a43b605abdf6242d profile image
Mac Long

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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
letuyen profile image
Lê Vĩnh Tuyến

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

Collapse
 
mac_long_a43b605abdf6242d profile image
Mac Long

No worries!

Collapse
 
juttthakra profile image
THAKRA JUTT

when i do with page insights
Image description
on mobile

Image description

Collapse
 
letuyen profile image
Lê Vĩnh Tuyến

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.

Collapse
 
t0nylombardi profile image
Anthony Lombardi • Edited

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

Collapse
 
hoachlinux profile image
Nguyen Hoach

Looks great

Collapse
 
poziom profile image
Krzysztof

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.

Collapse
 
stphane_31 profile image
Stéphane

Thanks guys