Cómo Crear un Portfolio Web Minimalista con Astro 4, HTML, CSS

Поділитися
Вставка
  • Опубліковано 30 вер 2024

КОМЕНТАРІ • 86

  • @neociber24
    @neociber24 8 місяців тому +15

    Yo creo que hacer una web con tu CV es lo mejor, el mío lo hice en React y es fácilmente imprimible o para convertir a PDF.

    • @lawliet8803
      @lawliet8803 7 місяців тому +1

      Te guiaste con algún video? Podrías mandar el link de tu página?

  • @fitwilliam8877
    @fitwilliam8877 7 місяців тому +29

    excelente tutorial, sos un pro midu, aca esta el comando en windows del truco en el minuto 13:30 :
    powershell: "Hero", "About", "Experience", "Education", "Skills", "Projects" | ForEach-Object {New-Item -ItemType File -Path ".\src\components\$_.astro"}
    cmd: for %i in (Hero About Experience Education Skills Projects) do echo. > .\src\components\%i.astro

    • @DraketRomero
      @DraketRomero 7 місяців тому +1

      Te amo, llevo 10 min buscando como hacerlo ♥

    • @xiztspike81
      @xiztspike81 5 місяців тому

      thanks so much!

    • @uncalvopelabola
      @uncalvopelabola 2 місяці тому

      Grande men!

    • @juanjzb
      @juanjzb 25 днів тому

      Personalmente, uso windows, pero, me quedo 1000% con touch, y para usarlo, solamente es necesario ejecutarlo en la git bash

  • @oeroweb3988
    @oeroweb3988 7 місяців тому +2

    Solo faltó la parte administrable, para editar el Json...

  • @rubenm.acosta7120
    @rubenm.acosta7120 8 місяців тому +11

    Team Astro🙋‍♂! En unas horas lo aprendí a usar y ahora lo estoy explotando al máximo. Gracias midu por la info y la visión sobre este framework.

  • @JAUSCR
    @JAUSCR 8 місяців тому +2

    Alguien: Con que esta hecha este pagina?
    Yo: con Asteroides!

  • @alejandrogarcia..
    @alejandrogarcia.. 8 місяців тому +10

    Grande Midu, empecé a usar react por qué ví tus videos y que me encantó, ahora estoy en un proyecto super grande 🥳, gracias gracias y muchas gracias para ti 🙆🙇

  • @chpineda
    @chpineda 8 місяців тому +3

    Que grande Midu, con la paja que me da hacer mi cv con los tipicos templates de word 😂😂😂

  • @aalvarca
    @aalvarca 8 місяців тому +2

    Me parto 😂 Del Prat!? Alguna vez me he cruzado por la calle un par de veces con alguien que para mi se parecía mucho a ti, pero decía "En el Prat? Imposible...". Pues sí que serías tu 🤣

  • @marcoadev
    @marcoadev 7 місяців тому +2

    Hola Midu. Gracias a ti estoy utilizando Astro para mis proyectos. Sería super que subas un video sobre cómo configurar el Visual Studio Code como el tuyo. Me encanta la tipografía que usas y la disposición de los elementos de la ventana de vscode (Usualmente la barra de herramientas está al lado izquierdo, pero me parece super eficaz que esté al lado derecho sobre todo si estás aprendiendo gracias a tutoriales.) Saludos desde Perú 🟥⬜

  • @kiwiwiliwi
    @kiwiwiliwi 8 місяців тому +3

    Muy bueno el proyecto... por fin CSS Nativo en un proyecto de Midu.
    Midu animate a hacer mas proyectos con css nativo, Creo que el manejo de css se aprenden mejor con css nativo comparado con tailwind.

    • @kiwiwiliwi
      @kiwiwiliwi 8 місяців тому

      🔥🔥🔥🔥Muerte a Tailwind 🔥🔥🔥🔥 ..... Es coña 🙃

    • @Inbydev
      @Inbydev 8 місяців тому +2

      Pienso lo mismo! Con css nativo se aprende más como funciona cada cosa por mi opinión, a experimentar más y a entender más cosas por parte del front-end sisi, pero para hacer proyectos rápidamente es mejor tailwind jsjdjs (aunque nunca lo he probado, solo lo he visto por midu jskdjsjs)

  • @hector7029
    @hector7029 8 місяців тому +5

    Me gusta , algo simple y eficaz sin tanto colorines ni nada , al final donde se demuestra de verdad si uno sabe son en los proyectos y no en crear un portfolio

  • @jonavillalva1917
    @jonavillalva1917 7 місяців тому +4

    Conocí Astro gracias a tus videos. Cada día descubro la gran potencia que tiene. Su simplicidad me hace feliz al codear. Gracias totales!!! Saludos desde Argentina.

  • @RaulJB
    @RaulJB 5 місяців тому +1

    Gran recurso Midu. Lo seguí paso a paso y tengo mi propio repositorio con el proyecto en GitHub. Sin embargo, oyéndote hablar de Pull Request y demás, cual sería la forma correcta de hacer esto en lugar de empezar mi propio repo desde cero? Gracias por todas tus enseñanzas crack.

  • @joshualg_dev
    @joshualg_dev 8 місяців тому +4

    MIDUGOAT 🐐🐐🐐🐐🐐🐐 Gracias por todo Midu, saludos desde ARG.

  • @mariosandovalluengo3842
    @mariosandovalluengo3842 4 місяці тому +1

    Grande Midu!!, excelente video como siempre. Me ayudaste a redactar mi Curriculum de trabajo de manera creativa y más llamativa. Obviamente hice algunos cambios en diseño y modelos, pero sin duda, estas mencionado en el repo.

  • @elvislinares7662
    @elvislinares7662 7 місяців тому +1

    puedes hacer un tutorial de hosting. Es decir, como elegir el hosting correctamente, como desplegar un sitio en un vps como aws ec2. es mejor vps o cloud? hostinger es bueno para subir tus sitios? como saber cuantos usuarios o peticiones aguanta ese servidor

  • @andresito-001
    @andresito-001 3 місяці тому

    Existe la manera de generar el PDF al usuario con ícono que sean hipervínculos? con la finalidad de no cambiar los íconos por el texto correspondiente

  • @ElClubDelCan
    @ElClubDelCan 4 місяці тому

    Estoy teniendo problemas al querer agregar svg dentro de un .astro, tengo que hacer algo en especial o con solo pegar el svg dentro del .astro ya debería funcionar?

  • @uncalvopelabola
    @uncalvopelabola 2 місяці тому

    IMPORTANTE!! Como me robo los fkin iconos??!

  • @SirGermanR
    @SirGermanR 8 днів тому

    si quisiera que se tradujera a otros idiomas como ingles o aleman o cualquiera como se podria hacer

  • @Enyalon
    @Enyalon 5 місяців тому +1

    Grande Midu, Si lees este mensaje, creo que sería interesante una buena sesión de buenas prácticas de html y css en el diseño de mails. Lo dejó por aquí.

  • @miguelangelsanchez9065
    @miguelangelsanchez9065 8 місяців тому +2

    Hola hace poco empece a ver tus videos y eso de astro de llamo la atencion desde entonces me gusta ver tus videos los entiendo perfectamente muchas gracias por compartir tu conocimiemto con nosotros 🫶🏼

  • @ElClubDelCan
    @ElClubDelCan 4 місяці тому

    esta bueno el video pero aunque copie las cosas me saltan errores por todos lados ,no se si es por la versión de astro o que tenes algo instalado que falto mostrar 🥹🥹🥹

  • @josedelriodiaz7085
    @josedelriodiaz7085 8 місяців тому +3

    Como desarrollador mobile se agradece mucho este tipo de proyectos, gracias midu!!

  • @fr_borda
    @fr_borda Місяць тому

    bro como configurastes antes de q te funcione no da

  • @jsmanriquem
    @jsmanriquem 8 місяців тому +2

    Como siempre el gran midu. ¡Excelente contenido!

  • @ArucardLonferatus
    @ArucardLonferatus 8 місяців тому +1

    genial aun no lo veo pero un translate de idiomas y listo :D

  • @estebanhirzfeld6604
    @estebanhirzfeld6604 8 місяців тому +1

    No puede ser, este era mi idea de projecto pero nunca lo concrete 😭😭 lpm grande midu

  • @jesusmolinacastro3340
    @jesusmolinacastro3340 6 місяців тому

    Puedo hacer el sitio web utilizando next.js ? Tengo problemas para instalar astro 😢

  • @jostinjonimolinahernandez3310
    @jostinjonimolinahernandez3310 8 місяців тому +1

    Y si quisiera eliminar alguna sección? no se adaptaría

    • @dannyquezada.4267
      @dannyquezada.4267 8 місяців тому +1

      Lo que se me ocurre, es que puedes modificar el archivo json y colocar un sections y ahí colocar Hero, About me y todo lo que tú quieras.

  • @devcecode
    @devcecode 7 місяців тому

    jaja 6:33 npm se lo va a copiar, perdona quien copio a quien? pnpm para no ser identico a npm tenia que hacer algo diferent no crees? y sí tambien algo mejor según como lo consideres.

  • @cuervolorenzo6244
    @cuervolorenzo6244 7 місяців тому

    Hola, Midu! Gracias por el video, acabo de empezar con Astro. Te queria preguntar si este tutorial y todo lo que aprendo aca lo podria poner en mi Github obviamente diciendo que segui un tutorial tuyo basandose en el proyecto de otro jajaj eso que pienso hacer esta bien? Es correcto? Gracias, espero la respuesta

  • @EstebanPaz-qu8mx
    @EstebanPaz-qu8mx 5 місяців тому

    Unable to render Icon because it is undefined!
    Did you forget to import the component or is it possible there is a typo?
    Buenas chicos, este error me sale en el 33:45, a la hora de poner los SOCIAL_ICONS. Alguien que me pueda ayudar ? GRACIAS !

    • @iapa
      @iapa 4 місяці тому +1

      Un poco tarde mi respuesta, pero fíjate que en el json del cv los nombres de las redes sociales coincidan completamente con los nombres de los iconos que pusiste en SOCIAL_ICONS. (Presta atención si te falto alguna mayúscula o algo).
      Igual por las dudas mira si podes renderizar los iconos de manera aparte sin hacer la lógica del map, por las dudas.

    • @nazhofaith
      @nazhofaith 3 місяці тому

      @@iapa buenisimo, me habia quedado pegado ahi, no sabia lo que pasaba, si usas el json default, solo viene con "Twitter", el json de midu viene con las 3 redes del video

  • @kmellostreet95
    @kmellostreet95 7 місяців тому

    ¿Como hace para mostrar la la regla (línea vertical y horizontal) cuando quiere comprobar la alineación de los elementos?

  • @andresfelipepizoluligo1471
    @andresfelipepizoluligo1471 8 місяців тому +1

    Que genial, muchas gracias por todo lo que haces midu.

  • @rogeliosuleta3314
    @rogeliosuleta3314 6 місяців тому

    pregunta de ignorante. No se puede hacer un portfolio con react? porque usan nest.js o astro? perdon la ignorancia.

  • @davids828
    @davids828 7 місяців тому +2

    Excelente curso, muchas gracias

    • @midulive
      @midulive  7 місяців тому +2

      Gracias a ti

  • @uzkkishin4192
    @uzkkishin4192 6 місяців тому

    me da error a hacer push a las referencias al instalar astro. En que carpeta debo iniciar astro, la misma donde esta el proyecto git?

  • @Jaycitom
    @Jaycitom 7 місяців тому

    hola!!! alguien sabe de donde puedo obtener svgs de más tecnologías???

  • @gibrancerezo
    @gibrancerezo 8 місяців тому

    Excelente, me gustaría tal vez como crear un formulario para importar/crear info dentro de una base que pueda disponibilizar el json

  • @joaquingarcia7075
    @joaquingarcia7075 3 місяці тому

    Unable to render Icon because it is undefined! Ayuda porfavor jaja, no puedo renderizar el

    • @Macrntree
      @Macrntree 3 місяці тому +1

      Que tal , cuando declaras el SOCIAL_ICONS en el hero y te traes los iconos, al momento de acomodarlos debe tener el mismo orden y el mismo nombre que en el JSON respetando mayusculas minusculas etc

    • @joaquingarcia7075
      @joaquingarcia7075 3 місяці тому

      @@Macrntree Gracias, si era un problema en el json

  • @wb4529
    @wb4529 8 місяців тому +2

    jeje

  • @joseluisosuna5728
    @joseluisosuna5728 8 місяців тому

    ¿Qué fuente usas, Midu? Se ve bien padre. Saludos desde Mexico.

  • @THEITAGAMER
    @THEITAGAMER 8 місяців тому

    Hola Midu. Me aconsejas este tutorial o el que hiciste hace un mes? Ambos me parecen bastante recientes.

  • @nihil_um
    @nihil_um 8 місяців тому

    ¿Tiene Astro algo parecido a ISR de Nextjs?.

  • @chusOP
    @chusOP 8 місяців тому +1

    grande miduuuu! me ayudas mucho!

  • @the__jive
    @the__jive 8 місяців тому +2

    Grandeeee, Miduuu.

  • @alexserver
    @alexserver 7 місяців тому

    De dónde te robaste los íconos ? need to robar más

  • @ramonsorto5107
    @ramonsorto5107 8 місяців тому +1

    esta genial crack

  • @TwoUruzai
    @TwoUruzai 6 місяців тому

    midu, no es astro una liga javascript y html todo junto en un solo sitio. 😂 no tine sentido decir. astro, html y css

    • @midulive
      @midulive  6 місяців тому +1

      Cómo no va a tener sentido. Astro es un framework, no un lenguaje. HTML y CSS son lenguajes. Así que es posible usar las tres cosas a la vez.

    • @TwoUruzai
      @TwoUruzai 6 місяців тому

      ​​@@midulive 😮 gran maestro, gracias retiro lo dicho..

    • @springprogramming
      @springprogramming Місяць тому

      @@midulive html lenguaje????

  • @elmoster1909
    @elmoster1909 8 місяців тому +1

    Yolo

  • @informaticaparaelhogar7153
    @informaticaparaelhogar7153 6 місяців тому

    Eres una maquina Midu te amo 💘💘

  • @pepito7773
    @pepito7773 8 місяців тому

    Cuando lo hiciste? 😮

  • @alexisolivarez9212
    @alexisolivarez9212 8 місяців тому

    6:06 hace gc "Init Proyect" que usa para no escribir git commit -m? 😮

  • @belenrb
    @belenrb 8 місяців тому

    Excelente contenido como siempre!! Gracias

  • @DanielGarcia-n3b
    @DanielGarcia-n3b 8 місяців тому +1

    👍👍👍

  • @asielvalle96
    @asielvalle96 7 місяців тому

    Gracias midu.

  • @SonGoku-pc7jl
    @SonGoku-pc7jl 8 місяців тому +1

    gracias Midu! 33:22 seguramente lo explicarías en la clase de typescript pero cositas tan concretas pido que le des un comentario añadido de qué es y porqué, sinó me peta cabeza y cuesta concentrar en lo otro ;) sin querer ser tikismikis, solo constructivo, todo lo tuyo es de 10! 01:10:05 me resuelves una duda del otro dia, gracias jeje

  • @MarcosCampos-t9m
    @MarcosCampos-t9m 8 місяців тому

    🇺🇾 🇺🇾 🇺🇾 🇺🇾

  • @JoelArguello
    @JoelArguello 8 місяців тому +1

    Amo tu facilidad de entender lo no entendible. JAJAJA Saludos desde argentina.
    CUANDO SEA UN DIOS COMO TU TE DARE UN AVISO !

  • @willguitarplayer4392
    @willguitarplayer4392 8 місяців тому

    Hola intenté correr en mi pc este proyecto y me da este error. Soy nuevo en esto del frontend. Si alguno me pudiera explicar, una vez descargado el proyecto de git como puedo correrlo en mi máquina, sería de gran ayuda. Doy npm run dev y no corre la web. Lo que hice fue crear un proyecto nuevo con npm create astro@latest, sobreescribí los archivos con los del portfolio uno a uno y cuando le doy correr me sale el error que les comparto debajo.
    03:13:30 [ERROR] [vite] Internal server error: Failed to resolve import "ninja-keys" from "src/components/KeyboardManager.astro?astro&type=script&index=0&lang.ts". Does the file exist?
    Plugin: vite:import-analysis
    File: /home/doron/Documents/web programming/minimalist-portfolio-json-main/magical-moon/src/components/KeyboardManager.astro?astro&type=script&index=0&lang.ts:89:9

    • @joakin052001
      @joakin052001 8 місяців тому

      recuerda siempre el 'npm install' antes de iniciar, para que se descarguen todas las depedencias en tu maquina, despues de descargar puedes volver a probar con 'npm run dev'

    • @equiscode4665
      @equiscode4665 7 місяців тому

      abre el proyecto, dale npm install y luego npm run dev y ya lo veras