Portfolio v3

This is the third iteration of my personal portfolio and blog: https://manosmiras.com/. Built with Nuxt 3 and Nuxt Content v3, this project showcases my game development projects and technical blog posts.

• File-based CMS: Uses Nuxt Content v3 for managing portfolio items and blog posts via Markdown.
• Dynamic Routing: Automatically generates pages for each content file.
• Image Optimization: Automatic conversion to WebP format for improved performance.
• Responsive Design: Fully responsive layout built with tailwind and modern CSS.
• Table of Contents: Automatically generated for long-form blog posts.

• content/: Markdown files for blog posts and portfolio projects.
  • blog/: Technical blog posts.
  • portfolio/: Game development and technical projects.
• components/: Reusable Vue components.
• pages/: Nuxt pages (includes dynamic routes for content).
• public/: Static assets like images.
• scripts/: Custom utility scripts.

1. Create a new .md file in content/portfolio/.
2. Add the required frontmatter (title, description, date, etc.).
3. Add your content in Markdown format.
4. Images should be placed in public/img/portfolio/ and then converted using the image script.

1. Create a new .md file in content/blog/.
2. Follow the same steps as adding a portfolio project.

Make sure to install the dependencies:

# npm
npm install

Start the development server on http://localhost:3000:

# npm
npm run dev

To maintain high performance and small file sizes, all images in public/img should be converted to .webp. The original files (.jpg, .jpeg, .png) are automatically deleted after conversion.

Run the conversion script:

npm run convert-images

Build the application for production:

# npm
npm run build

Locally preview production build:

# npm
npm run preview

Check out the deployment documentation for more information.