Visit the live site here
Visit the live storybook here
This is my portfolio. It contains information about me, my projects, and how to contact me.
Note: This project is under constant development. If you have any suggestions or feedback, please let me know.
Before starting, ensure your system meets the following requirements:
- Node.js: Version 22.15.0 (LTS) or newer. Download Node.js
- npm: Bundled with Node.js (use
npm install -g npm@latestto update if needed). - Modern Browser: Ensure compatibility with recent versions of Chrome, Firefox, or Edge.
- pnpm (optional): For efficient package management, you can use
pnpminstead ofnpm. Learn more about pnpm
Follow these steps to set up the project:
-
Clone the Repository:
git clone <REPOSITORY_URL> cd my-portfolio
-
Install Dependencies:
npm install
-
Start the Development Server:
npm run dev
-
Build the Project:
npm run build
-
Lint and Fix Code:
- Check for linting errors:
npm run lint
- Automatically fix issues:
npm run lint:fix
- Check for linting errors:
-
Optimize SVG Icons:
npm run optimize-svg
| Script | Description |
|---|---|
npm run dev |
Starts the development server with Vite. |
npm run build |
Builds the project for production, including type-checking with vue-tsc. |
npm run preview |
Serves the built project for preview. |
npm run visualize |
Builds the project with visualization mode enabled. |
npm run lint |
Runs ESLint to check for code quality issues. |
npm run lint:fix |
Runs ESLint with auto-fix enabled. |
npm run optimize-svg |
Optimizes SVG files in src/assets/icons using SVGO. |
This project uses the following technologies:
- Vue 3: Reactive and component-based UI framework.
- Vite: High-performance development and build tool.
- TypeScript: Strongly typed programming language for modern JavaScript.
- Tailwind CSS: Utility-first CSS framework for rapid UI development.
- ESLint: Linting for code quality.
This portfolio includes a fully dynamic and reactive SEO setup using @unhead/vue, enabling real-time updates of <head> content based on page data and selected language.
- Dynamic management of
<title>,<meta name="description">,<meta name="keywords">, and Open Graph tags. - Locale-aware Open Graph support via
og:localeandog:locale:alternate. - Computed, reactive meta tags that automatically update with route or data changes.
- Inclusion of
robots,canonical, andauthormeta tags. - Ready for future Twitter Card and JSON-LD structured data integration.
The entire SEO system was designed by Martina Eulogio, using a reactive and modular approach deeply integrated with Vue.
© 2025 Stefano Biddau. All rights reserved.
This project is not open source. See LICENSE for details and usage restrictions.