Linux TypeScript — Ubuntu-style Portfolio

Portfolio web interactivo desarrollado con Vue 3, TypeScript y Vite que recrea una experiencia de escritorio inspirada en Ubuntu.

El proyecto simula distintas aplicaciones del sistema, como una terminal, un explorador de archivos y un lector de información, permitiendo navegar por mis proyectos de una forma diferente a un portfolio tradicional.

✨ Características

• Escritorio inspirado en Ubuntu

• Terminal interactiva simulada

• Explorador de proyectos

• Sistema de ventanas con:

  • Abrir
  • Cerrar
  • Minimizar
  • Maximizar

• Barra lateral con aplicaciones abiertas

• Navegación mediante comandos simulados

• Acceso a otros proyectos desde la terminal

• Diseño responsive

• Componentes reutilizables mediante Vue Composition API

🖥️ Terminal

La aplicación incluye una terminal simulada que permite ejecutar algunos comandos predefinidos.

Algunos ejemplos:

ls
cd proyects
cd gameboycss
cd cv
npm run dev
clear
cd ..

La terminal no ejecuta comandos reales del sistema operativo. Los comandos son interpretados por la aplicación y utilizados para modificar el estado de la interfaz o abrir otros proyectos.

Por ejemplo:

cd gameboycss
npm run dev

abre el proyecto Gameboy CSS.

También puedes usar:

cd cv
npm run dev

para abrir el proyecto CV.

🛠️ Tecnologías

El proyecto está construido con:

• Vue 3
• TypeScript
• Vite
• Vue Router
• Pinia
• Tailwind CSS
• Sass
• Vitest
• ESLint

📁 Estructura del proyecto

src/
├── assets/
├── components/
│   ├── terminal/
│   ├── Desktop.vue
│   ├── FolderLinux.vue
│   ├── ProgramShortcut.vue
│   ├── SideBar.vue
│   ├── SlimReader.vue
│   └── TeleportWrapper.vue
├── composable/
│   ├── useActionFolder.ts
│   ├── useProgram.ts
│   └── useTerminal.ts
├── constants/
├── model/
├── router/
├── services/
├── stores/
├── styles/
├── views/
├── App.vue
└── main.ts

🚀 Instalación

Clona el repositorio:

git clone https://github.com/Zellokr/linux-typescript.git

Entra en el proyecto:

cd linux-typescript

Instala las dependencias:

npm install

💻 Desarrollo

Para ejecutar el proyecto en modo desarrollo:

npm run dev

Vite iniciará el servidor local y mostrará la URL disponible en la terminal.

📦 Build de producción

Para comprobar los tipos y generar la versión de producción:

npm run build

Este comando ejecuta el type-check de TypeScript y posteriormente genera el build con Vite.

🔍 Type checking

npm run type-check

🧹 Lint

npm run lint

🧪 Tests

El proyecto está preparado para utilizar Vitest:

npm run test:unit

🏗️ Arquitectura

Cada aplicación del escritorio mantiene un estado similar a:

{
  open: false,
  minimize: false,
  maximize: false
}

Los componentes se comunican mediante eventos para gestionar la apertura y cierre de aplicaciones y actualizar la barra lateral.

La terminal utiliza un sistema de comandos simulados para representar la navegación por un sistema de archivos ficticio.

El objetivo no es implementar un sistema operativo real, sino recrear su experiencia visual e interactiva dentro del navegador.

🎯 Objetivo del proyecto

Este proyecto nació como una forma diferente de presentar mi portfolio y experimentar con:

• Vue Composition API
• Gestión de estado
• Comunicación entre componentes
• Sistemas basados en eventos
• Interfaces inspiradas en sistemas operativos
• Simulación de terminales
• TypeScript
• Diseño de componentes reutilizables

👤 Autor

Desarrollado por Zellokr.

GitHub: github.com/Zellokr

📄 Licencia

Este proyecto es un proyecto personal de portfolio.