El año pasado, Josh Como, autor de tutoriales y tutoriales para desarrolladores, en su cuenta de Twitter se ofreció como voluntario para ver y criticar los sitios de la cartera de todos los interesados. Durante el evento, notó algo interesante: la retroalimentación no fue muy diversa, las deficiencias en el diseño del portafolio para la mayoría de los programadores principiantes resultaron ser aproximadamente las mismas. Entonces Como tuvo la idea de que sería bueno recopilar los comentarios que se repiten con frecuencia en una lista. Como resultado, obtuvo material bastante extenso, que fue formateado en un libro electrónico; está disponible en el sitio web del autor de forma gratuita. Debajo del corte encontrarás las principales tesis, recomendaciones y fuentes que se dan en él.
Asuntos Generales
¿Qué se entiende por cartera de desarrolladores?
En la mayoría de los casos, estamos hablando de un sitio donde se presentan proyectos personales, mediante el cual se puede juzgar su experiencia y habilidades.
¿Es necesario?
No. No todos los desarrolladores incluyen un portafolio en su currículum y no todos los empleadores esperan tal información. Además, hay quienes ni siquiera abrirán el enlace. El portafolio es opcional, pero puede darle una buena ventaja sobre la competencia y mostrarle lo que puede hacer con la mayor claridad posible.
¿No hay otras formas de mostrar tu trabajo?
Hay. El currículum ahora a menudo incluye, por ejemplo, enlaces a LinkedIn o Github, recursos que también se pueden usar para resaltar sus actividades. La ventaja de un sitio de portafolios es que le permite hablar sobre usted de una manera conveniente y beneficiosa para usted. No es necesario seguir un formato predeterminado, puede dar tanto contexto a cada proyecto como crea conveniente.
¿Para quién son estos consejos?
Para los desarrolladores junior, que, por un lado, ya tienen algo que mostrar y, por otro, quieren compensar la falta de experiencia laboral a los ojos del empleador y destacar entre la multitud. El autor se centra principalmente en el front-end y full-stack, pero la mayoría de las recomendaciones también serán útiles para aquellos que se dedican al desarrollo backend o móvil.
¿Cuántos proyectos debería tener el sitio?
La cantidad óptima es de dos a cinco. El enfoque de “cuanto más, mejor” no funciona aquí: el portafolio está diseñado para mostrar los mejores ejemplos de trabajo y no para cubrir la cronología completa. Si realmente quieres mostrar más, al menos clasifícalos; deja que los mejores cuelguen en la página principal y el resto se abre haciendo clic en el gato "Mostrar más" o en la pestaña de archivo.
Si solo hay un proyecto, pero su escala y calidad son decentes, está permitido agregar la cantidad a expensas de algo menos impresionante: hacer un producto simple puramente para la cartera o una pequeña variación en el tema principal (por ejemplo , una extensión basada en una aplicación móvil), indique el proyecto actual con la marca "En curso", indique alguna actividad que no esté directamente relacionada con el código (documentación, organización de eventos para desarrolladores).
¿Qué proyectos no se pueden incluir?
Hay varias categorías de proyectos que deben usarse con mucho cuidado:
- , – , . , , , . . , ( 50% ) .
- . – . , .
- -. – . , - . , , , .
- , . « ». , . , , . , , .
¿Qué proyectos deberías incluir primero?
Además de lo obvio (bueno e interesante), hay varias características que los empleadores tienden a valorar especialmente:
- Diríjase a proyectos que se crearon para resolver un problema particular específico. Demuestran que sabe cómo llevar las habilidades técnicas a la práctica y le permiten evaluar su enfoque de todos los aspectos de la gestión de proyectos, de principio a fin.
- Los proyectos en vivo que tienen usuarios reales, aunque sean pequeños, tienden a generar más interés que las versiones de demostración de productos que se crearon por el proceso en sí.
- Proyectos complejos a gran escala que requirieron mucho tiempo y esfuerzo. No todos los jóvenes, en principio, son capaces de poner fin a algo como esto, por lo que el mero hecho de la existencia hablará a tu favor.
- . , , , . , , , .
En general, puedes agregar una variedad de productos de tu actividad a tu portafolio: proyectos educativos, trofeos de hackatones, pequeños programas que escribiste para tus propias necesidades. A los jóvenes a menudo les preocupa que sus proyectos no sean especiales, no se sienten abrumados por la complejidad y será patético verlos en el portafolio. No eleves el listón demasiado alto. Si tiene algo que contar sobre el proyecto (cómo luchó por la implementación de la función, cómo eligió una solución y luego la abandonó en favor de otra), lo más probable es que tenga suficiente complejidad oculta y refleje adecuadamente su actual nivel.
Estructura y contenido del sitio
Los sitios de cartera no suelen tener una estructura muy extensa. De hecho, se reduce a un conjunto de los siguientes bloques semánticos: sección "Acerca de mí", una lista / cuadrícula de proyectos, con descripciones detalladas de cada uno, contactos. A continuación, veremos cada uno de ellos por separado.
Acerca de mí La
audiencia de los sitios de portafolios se compone de dos grupos: especialistas en contratación y desarrolladores. En diferentes etapas de empleo, es probable que ambos vean su sitio. En consecuencia, debe maniobrar para impresionar a ambos grupos a la vez.
La sección "Acerca de mí" está destinada principalmente a los oficiales de personal. Su tarea principal es hacer que su "negocio personal" sea al menos un poco memorable en el contexto de otros. En opinión del autor, el principal flagelo de los sitios de portafolios ahora es la impersonalidad total, el deseo de encajar en un estilo corporativo que utiliza la misma columna vertebral estructural (graduado de tal o cual universidad, trabajé o trabajo allí, poseo tal y tal tecnología ) y clichés del discurso de contratación.
Si se compromete a escribir un texto detallado para este bloque, intente agregarle algo original, incluso cuando comenzó el desarrollo, al menos qué tipo de filosofía de vida y programación tiene. La barra más baja para evaluar la originalidad es la siguiente: si ves tu texto en el sitio de otra persona, ¿reconocerás inmediatamente el plagio o pensarás en el primer momento que alguien acaba de hablar de sí mismo en los mismos términos?
Los desarrolladores rara vez muestran interés en esta sección, por lo que es mejor que lleven la lista de lenguajes y tecnologías con los que trabaja a un lugar destacado.
Una cosa más a tener en cuenta al elegir el tono de su historia es que RR.HH. y los desarrolladores miran sus habilidades blandas junior a través de diferentes lentes. Es más probable que los oficiales de personal aprecien el entusiasmo y la dedicación a su trabajo. Para los desarrolladores, en primer lugar, la autoestima adecuada es importante; todavía tienen que enseñarte. Por lo tanto, cuando describa su amor por el código, trate de no caer en un aplomo excesivo. Si se imagina a sí mismo como un especialista establecido y un as del desarrollo, RR.HH. puede estar imbuido de su confianza, pero los futuros mentores probablemente pensarán que trabajar con usted será difícil.
Proyectos y sus descripciones
La historia de los proyectos es el bloque semántico central en la estructura del sitio. Por lo general, la página principal contiene una cuadrícula o una lista de proyectos con una breve presentación de cada uno: título, captura de pantalla, un par de líneas descriptivas, pila de tecnología, enlace a la versión de demostración.
Cada una de estas tarjetas debe traducirse necesariamente en una página con una descripción detallada. Si la información se limita a los elementos enumerados, el significado del sitio de la cartera, de hecho, se pierde.
Esperar que un producto hable por sí mismo es un grave error que cometen muchos desarrolladores. "Vender" su trabajo se considera inapropiado, por lo que el asunto se limita a vincular a la versión de demostración y, en un escenario ideal, la base del código: el empleador tiene la oportunidad de emitir una opinión por sí mismo.
Hay dos inconvenientes críticos de este enfoque. En primer lugar, sin su supervisión, la interacción del visitante del sitio con el producto se vuelve impredecible. Será muy difícil para usted adivinar de antemano cómo se desarrollará el viaje del usuario y en qué punto se interrumpirá, especialmente si nunca ha realizado el diseño de UX. Es posible que la persona simplemente no llegue a las cosas de las que usted está más orgulloso y por las que apuesta.
Lo mismo ocurre con el código. No es ningún secreto que, en términos de calidad, las bases de código suelen ser heterogéneas: algunas partes se fabrican con elegancia y elegancia, otras se sujetan a cinta aislante. Por casualidad, el espectador bien puede quedar impresionado por el segundo, y no por el primero.
El segundo inconveniente es que este enfoque, en principio, no funciona bien para el objetivo final. El portafolio sirve para hablar de ti como especialista. Un producto independiente no proporciona mucha información sobre quién lo hizo, especialmente si se considera que el conocimiento de la versión de demostración o el código en nueve de cada diez casos será muy superficial. Al comienzo del artículo, hablamos sobre el hecho de que un sitio personal, a diferencia de otras plataformas, permite aportar más contexto. Se trata de mirar el proyecto desde adentro, de cómo se llevó a cabo el diseño y el desarrollo. Esta información es útil para el empleador e ilumina mejor sus cualidades profesionales.
Como proporciona un plano sobre el que basarse al escribir sobre un proyecto. No tiene que cubrir todos los puntos, concéntrese en los que realmente tienen algo que decir.
Introducción
- Panorama general, esencia del proyecto
- Lista de funciones principales y características distintivas
- Tu rol en el proyecto: ¿trabajaste solo o en grupo, qué tipo de cosas implementaste?
- Tecnologías utilizadas
- Enlace a la demostración y la base de código (si es posible)
Finalidades y motivos
- ¿Por qué emprendiste este proyecto, cuál es su significado para ti personalmente?
- ¿Qué se esperaba al principio, cómo era el producto en la etapa de diseño?
- Cualquier otro comentario sobre la etapa de planificación.
Puntos clave
- ? – , , .
- , .
- , , . , , , .
- ? - , , - .
- , , ? ? ?
- ¿Ha influido la experiencia adquirida en su trabajo futuro? Si puede vincular los dos proyectos, mostrando cómo el conocimiento adquirido en uno ha sido útil en el otro, estará bien.
El estado actual es una sección opcional. Tiene sentido incluirlo si el producto es realmente utilizado por alguien; luego puedes mencionar el tipo de audiencia que tiene y lo que dice la gente. Si el proyecto se hizo específicamente para la cartera, no debe detenerse en él.
Lo más probable es que el texto sea bastante extenso: la descripción de un proyecto puede ocupar dos o tres páginas. Para aumentar las posibilidades de que el lector llegue al final, adáptelo para leer en diagonal: párrafos cortos, encabezados, listas.
Contactos
Como regla general, este bloque contiene un formulario de comentarios. Si le resulta más conveniente comunicarse por correo electrónico, puede limitarse al enlace directo mailto. Los enlaces a páginas en redes sociales y un blog profesional, si tiene uno, también se eliminan aquí. Ahora existe una tendencia a insertar un blog directamente en un sitio de portafolio, pero el autor es escéptico sobre esta idea. El portafolio está diseñado principalmente para comunicarse con el empleador: la probabilidad de que encuentre tiempo para leer publicaciones es extremadamente pequeña. Además, deberá vigilar especialmente de cerca la regularidad de las actualizaciones y la calidad del contenido.
Implementación técnica
Diseño Lo
primero es lo malo: el diseño tiene mucho peso. El contenido es contenido, pero las características de la percepción visual funcionan sin interrupciones, por lo que cuanto más hermoso ( ni más conveniente, es más hermoso ) el sitio, más profesional se verá a los ojos de los visitantes.
No todos los desarrolladores tienen un diseño sólido o pueden permitirse un diseño personalizado, por lo que el uso de plantillas listas para usar parece ser la opción óptima que requiere muchos recursos para el resultado. Lo mejor es seleccionar algunos y mezclarlos para que la interfaz se vea más o menos fresca.
Como señala que en el transcurso de la exploración masiva de su portafolio, se encontró repetidamente con el mismo diseño popular, simplemente copiado píxel por píxel:
Definitivamente esto no es necesario. Incluso si el diseño es de dominio público, deja una desagradable sensación de secundario y plantea interrogantes sobre la legalidad de los préstamos.
Aquí hay una serie de plantillas en las que puede confiar al crear un diseño:
Portfolio Starter
Craig Portfolio
Alex Portfolio
Dexter Portfolio
Novo
Kester
Art Director
Desarrollo de sitios web
Si está solicitando un puesto de desarrollador front-end o full-stack, necesita crear un sitio web por su cuenta, sin soluciones sin código - el puesto obliga ... Puede utilizar cualquier herramienta, preferiblemente aquellas con las que esté familiarizado, para no perder tiempo extra. Opciones a considerar: HTML vanilla / CSS / JS, 11ty, Gatsby , Siguiente , Jekyll . En mi propio nombre, el autor recomienda a Gatsby, sobre todo por el hecho de que se han creado muchos temas y complementos para él, lo que ahorra mucho esfuerzo.
Elementos interactivos, pequeñas animaciones y otras bonificaciones visuales que hacen que la navegación se vea muy ventajosa en los sitios. No tenga miedo de agregar algo gracioso o inesperado de usted mismo.
Nombre de dominio
Idealmente, debería ser algo como firstnamelastnamelatinice.com. Si es necesario (por ejemplo, si el nombre ya está en uso), puede insertar un código o elemento de desarrollo. Nicky no es recomendable a menos que sea una persona destacada en la comunidad en línea.
Los dominios de nivel superior se pueden elegir según su gusto (co, io, dominios específicos de diferentes países). El único punto: debe evitar .info, que muchos asocian con spam y estafadores.
Los
sitios de Hosting Portfolio suelen ser estáticos, por lo que no crean problemas con los servidores. Hay una serie de servicios para alojar sitios estáticos, entre los que Como destaca Vercel , Netlify , Github Pages , Surge .
*
Además de la teoría para mayor claridad, Como ofrece dos ejemplos de carteras con análisis detallado. El primero es el sitio de Charlie Smith, una persona ficticia que el autor hizo él mismo, centrándose en una muestra típica y media de la Web. El segundo es el sitio de Julia Johnson , estudiante y pasante de IBM, que le causó la impresión más agradable en el contexto de otros enviados por suscriptores. Al comparar uno con otro, es fácil ver cómo se comparan con las recomendaciones.
El sitio de Charlie: un diseño inexpresivo sin giros, una historia estereotipada sobre ti mismo, una descripción breve y superficial de los proyectos
del sitio de Julia: un diseño más efectivo, una estructura exitosa, una historia sobria pero no sin rostro sobre ti, muchos elementos que animan la página, descripciones detalladas de cada proyecto