Project Introduction: Portfolio Developer

#webdev #vue #tailwindcss #nuxt

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.

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 (10)

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

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.