1.0.0

.deepsource.toml

@@ -0,0 +1,10 @@
+version = 1
+
+[[analyzers]]
+name = "shell"
+
+[[analyzers]]
+name = "javascript"
+
+  [analyzers.meta]
+  plugins = ["vue"]

.env

@@ -0,0 +1 @@
+VITE_APP_DEFAULT_LANGUAGE = "es"

.gitignore

@@ -0,0 +1,29 @@
+# Git
+.git
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+coverage
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+cypress/videos/*

Dockerfile

@@ -0,0 +1,23 @@
+# Choose the Image which has Node installed already
+FROM node:lts-alpine
+
+# install simple http server for serving static content
+RUN npm install -g http-server
+
+# Make the 'app' folder the current working directory
+WORKDIR /app
+
+# Copy both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+
+# Install project dependencies
+RUN npm install
+
+# Copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+# Build app for production with minification
+RUN npm run build
+
+EXPOSE 3000
+CMD [ "http-server", "dist" ]

Makefile

@@ -0,0 +1,6 @@
+docker-up:
+	docker build -t danieljsaldana-dev . 
+	docker-compose --env-file .env up -d
+
+test:
+	npm test

README.md

@@ -0,0 +1,106 @@
+# Daniel J. Saldaña - Portfolio
+
+## Deployment Guide
+
+For a step-by-step guide on deploying your code, check out [this deployment guide](https://danieljsaldana.dev/despliega-tu-web-facil-con-azure-static-web-apps).
+
+## Overview
+
+This is the repository for Daniel J. Saldaña's portfolio, showcasing his work and projects. The portfolio is built using Vue.js, Vuex for state management, and Sass for styling. The development environment is set up with Vite for fast and efficient development, and TypeScript for type-checking.
+
+## Features
+
+- **Vue.js 3**: Utilizes the latest version of Vue.js for building interactive user interfaces.
+- **Vuex 4**: Manages state in the application to ensure a centralized and predictable state management.
+- **Sass**: Enhances the styling capabilities with the power of Sass for maintainable and modular styles.
+- **Vite**: The build tool for the project, ensuring fast and optimized development.
+- **TypeScript**: Adds static typing to the project, catching errors during development.
+- **Vitest**: Testing library for Vue.js applications, ensuring robust and reliable code.
+- **Cypress**: End-to-end testing tool for a comprehensive testing strategy.
+
+## Getting Started
+
+1. Clone the repository:
+
+```bash
+git clone https://dev.azure.com/danieljsaldana/labs-danieljsaldana/_git/portfolio-vitest
+```
+
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+2. Run the development server:
+
+```bash
+npm run serve
+```
+
+3. Open your browser and navigate to http://localhost:3000 to view the portfolio.
+
+## Scripts
+
+Here are the available scripts for this project:
+
+- **npm run serve**: Starts the development server. Use this for local development.
+- **npm run build**: Builds the project for production. The optimized files will be in the `dist/` directory.
+- **npm run preview**: Previews the production build. This is useful for testing the optimized build locally.
+- **npm test**: Runs tests using Vitest. Ensure your tests are in the `tests/` directory.
+- **npm run coverage**: Generates test coverage using Vitest. The coverage report will be available in the `coverage/` directory.
+- **npm run cypress:open**: Opens the Cypress test runner. Write end-to-end tests in the `cypress/` directory.
+- **npm run cypress:run**: Runs Cypress tests in headless mode.
+
+## Folder Structure
+
+The project follows a standard Vue.js project structure. Here's a brief overview:
+
+- **`src/`**: Contains the main source code of the project.
+  - **`assets/`**: Images, fonts, and other static assets.
+  - **`components/`**: Vue components used in the project.
+  - **`views/`**: Top-level views or pages.
+  - **`styles/`**: Stylesheets, including Sass files.
+  - **`store/`**: Vuex store modules for state management.
+  - **`main.ts`**: Main entry file for the application.
+- **`public/`**: Public assets and HTML files.
+
+Feel free to explore and customize the folder structure to fit your project needs.
+
+## Customization
+
+1. **Update Content**: Replace the existing content in the Vue components and styles to reflect your portfolio information.
+
+2. **Add Projects**: Add your projects to the `views/Projects.vue` component.
+
+3. **Modify Styles**: Customize the styles in the `styles/` folder to match your design preferences.
+
+## Testing
+
+To run tests using Vitest, use the following script:
+
+```bash
+npm test
+``` 
+
+### Deployment
+
+To deploy the project, use the following script:
+
+```bash
+npm run build
+```    
+
+This will generate a production-ready build in the **dist/** directory.
+
+## License
+
+This portfolio is licensed under the [LGPL-3.0-or-later](LICENSE) license. For more details, please see the [LICENSE](LICENSE) file.
+
+## Author
+
+Daniel J. Saldaña | [https://danieljsaldana.dev](https://danieljsaldana.dev)
+
+## Demo
+
+ [Demo web](https://wonderful-bush-0d50b8303.4.azurestaticapps.net)

cypress.config.ts

@@ -0,0 +1,27 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  defaultCommandTimeout: 3000,
+  projectId: 'yv2ztm',
+  retries: 3,
+  video: true,
+  videoCompression: false,
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  pageLoadTimeout: 100000,
+  chromeWebSecurity: false,
+  reporter: 'junit',
+  reporterOptions: {
+    mochaFile: 'cypress/report/results-[hash].xml',
+    toConsole: false,
+  },  
+  e2e: {
+    supportFile: false,    
+    specPattern: 'cypress/integration',
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },   
+  },
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/footer.cy.js

@@ -0,0 +1,9 @@
+describe('Test footer button', () => {
+  it('finds the content "type"', () => {
+    cy.visit('https://wonderful-bush-0d50b8303.4.azurestaticapps.net')
+    cy.get('.footer > a').scrollIntoView()
+    cy.wait(2000)
+    cy.get('.footer > a').scrollIntoView().click()
+    cy.wait(2000)
+  })
+})

cypress/integration/lang.cy.js

@@ -0,0 +1,9 @@
+describe('Test button languages', () => {
+  it('finds the content "type"', () => {
+    cy.visit('https://wonderful-bush-0d50b8303.4.azurestaticapps.net')
+    cy.get('.js-change-lang-en').click()
+    cy.wait(2000)
+    cy.get('.net-and-lang > .switch > :nth-child(1)').click()
+    cy.wait(2000)
+  })
+})

cypress/integration/menu.cy.js

@@ -0,0 +1,9 @@
+describe('Test menu', () => {
+  it('finds the content "type"', () => {
+    cy.visit('https://wonderful-bush-0d50b8303.4.azurestaticapps.net')
+    cy.get('.menu > :nth-child(2) > a').click()
+    cy.wait(2000)
+    cy.get('.menu > :nth-child(3) > a').click()
+    cy.wait(2000)
+  })
+})

cypress/integration/professional_skills.cy.js

@@ -0,0 +1,13 @@
+describe('Test console professional skills', () => {
+  it('finds the content "type"', () => {
+    cy.visit('https://wonderful-bush-0d50b8303.4.azurestaticapps.net')
+    cy.get('.professional_skills').scrollIntoView()
+    cy.wait(1000)
+    cy.get('.terminal > .switch > :nth-child(2)').click()
+    cy.wait(1000)
+    cy.get('.terminal > .switch > :nth-child(3)').click()
+    cy.wait(1000)
+    cy.get('.terminal > .switch > :nth-child(4)').click()
+    cy.wait(1000)
+  })
+})

cypress/integration/spec.cy.js

@@ -0,0 +1,12 @@
+describe('Test page reload', () => {
+  it('passes', () => {
+    cy.visit('https://wonderful-bush-0d50b8303.4.azurestaticapps.net')
+  })
+  it('cy.reload() - reload the page', () => {
+    // https://on.cypress.io/reload
+    cy.reload()
+
+    // reload the page without using the cache
+    cy.reload(true)
+  })    
+})

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Daniel J. Saldaña 💾 | Product Onwer, Software Arquitect, DevOps, SRE</title>
+
+    <link rel="icon" type="image/png" href="/favicon.png" />
+
+    <meta name="description" content="Product Onwer 💻 especializado en Devops/SRE y Software Arquitect ☁️, entusiasta de la automatización y la mejora continua 🚀, pero sobre todo fanático del anime y de la cultura 🇯🇵!">
+
+    <link rel="canonical" href="https://danieljsaldana.dev/">
+
+    <link rel="icon" href="/favicon/favicon.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+
+    <meta name=apple-mobile-web-app-title content="danieljsaldana.dev">
+    <meta name=application-name content="danieljsaldana.dev">
+    <meta name=theme-color content="#000">
+
+    <link rel="alternate" type="application/rss+xml" href="https://danieljsaldana.dev/index.xml" title="Daniel J. Saldaña 💾 | Product Onwer, Software Arquitect, DevOps y SRE">
+    <meta property="og:url" content="https://danieljsaldana.dev/">
+    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:creator" content="@danieljesussp">
+    <meta name="twitter:domain" content="danieljsaldana.dev">
+    <meta name="twitter:image" content="/favicon/apple-touch-icon.png">
+    <meta name="twitter:site" content="@danieljesussp">
+
+  </head>
+  <body>
+    <div id="__vue3"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <script>
+      window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
+    </script>
+  </body>
+</html>