antonio666917 / jc-angustia-2020 Goto Github PK

Update the font for Futura PT. You gonna need to convert to web font.

Download

Siento que los headlines se ven pequeños en comparación con el diseño en figma. Por favor verifica el tamaño con el que estoy utilizando en Figma.

Ejemplo:

• Section 1: Headline debes verse un poco más grande para que se destaque y moverlo solo un poquito hacia arriba.
• Section 1: Texto de descripción hay que bajarle un punto y haz el area más ancha. Compara como luce en figma
• Simple is better: Veo que en este headline se ve pequeño en comparación. En figma utilizo el mismo tamaño que tengo en el headline de la section 1. También la i de is esta en minuscula. Favor compara con figma.
  Todos los botones deben tener el mismo alto y el texto debe ir en 14pt. Esto tambien aplica al send message button.
• Testimonials: Creo que estas usando extra bold, este quotes debe ir en "Semibold". Tambien agrandar el headline de la sección lo siento pequeño;
• Let's talk: Siento que esto esta pequeño, tambien el copy debe ampliar el ancho compara como esta distribuido en Figma.
• EL texto del footer debe ir más pequeño, compara con figma."Made with by Juan Angustia. Copyright 2020 - All rights reserved."

Nota: Trata de dar QA como si fuera con una lupa, hay detalles visual que le puse tiempo porque hacen una gran diferencia por el figma y lo que tiene en producción al lado y ve comparando parte por parte.

Mira me gusta una transition asi para el copy del

Hello section
https://codepen.io/jcoulterdesign/pen/arQoER
https://digitalbro.net/

Mira que fluido cada elemento aparece.
buton
Cuando el usuario de click on see more me gustaria una transition como esta para traer el dialog.

Dale click al boton rojo de la esquina baja derecha.
https://www.supremo.co.uk/

https://codepen.io/jcoulterdesign/pen/arQoER

Mouse parallax
https://www.kobufoundry.com/

Particula parallax
Mira como se mueven aqui
https://nstudio.io/

Content fade in
https://thecharlesnyc.com/about/

Mira lo smooth que los texto fade in desde la izqueirda aqui. Creo que el ease ease aqui esta mejor pulido.

We need to complete the following meta properties:

• Title
• Description
• Keywords (optional)
• Share Image
• Twitter username (optional)

De ultimo seria super probar alguna transición asi para el dialog. "About me"

• https://codepen.io/Idlework/pen/WvvMEK
• https://codepen.io/Samuel87/pen/VwwYaMO

Aquí los detalles

• Tamaño de los botones Arrow
• Actualizar el Icono de la flecha por el que diseñe
• Centralizar todo el contenido
• Revisar la tipografia y el espacio que esta debajo del nombre de la persona
• Hacer el pagination lines más fluidos
• Faltan agregar dos testimonios más el orden lo tienes en figma y de los que van.
• Animar las letras del quotes como este ejemplo
  https://codepen.io/JavaScriptJunkie/pen/WgRBxw
  https://codepen.io/JavaScriptJunkie/pen/WgRBxw

• Header
• One of the big hero elements
• Rotators
• Footer

Here you can see the type of parallax that I want on the video and the video that we can use for the moment is the one that I have on my current portfolio.

Check contact section:
http://jcagarcia.com/

Final video

Encontre como explicarte que quiero el scroll.

Ejemplo 1: Este es el que tienes que seguir.
https://drive.google.com/file/d/1NvSFvdICiJfXgCdddyovLgALezUwCAEw/view?usp=sharing

Ejemplo 2:
https://drive.google.com/file/d/1CX9_N7IZ6fsj2-6dDv7l24bZqW7oUDIh/view?usp=sharing

Ejemplo 3:
https://drive.google.com/file/d/1quMTnWPmWTf_Ge9N7kX8QzVX88aMC5OV/view?usp=sharing

Here my first visual feedback for the website. Update the font for Futura PT. You gonna need to convert to web font. Download

• 0. Spacing between columns.
• 1. Body max-width. Make sure that all these elements are aligned
• 2. Copy block max-width; Make sure that all this copy has the same width.
• 3. Move this graphic to the right to align more with the computer.
• 4. Images width.
• 5. Add more padding between sections. This is will help with the parallax effect between sections
• 6. Make video height a bit taller, take this as an example.
• 7. Reduce this space to O. I want to alight send button with the “scroll up” FAB button “Circle”.
• 8. Alight this button with the form send button.

Mira necesita que me ponga el dialog que teniamos con el overlay black. Por el momento podemos dejarlo asi en lo que subimos el de la transition circular.

Tenemos que jugar un poco con el espacio que esta entre la descripción de los proyectos y la imagen sin perder el aliniamiento.

Esto aplica a los demás proyectos.

@jangustia estaba en proceso de hacer el estilo de las formas tal y como lo tienes en el Figma file pero por error resultó lo que tengo ahora, donde la forma está opaca hasta que le haces focus al input field, entonces se pone azul.

A mi me parece mejor UX como está ahora, pero lo dejo a tu discreción.

Hacer el cambio de hacerlo siempre azul no me tomará ni 2 minutos, pero quería saber tu opinión.

Global site tag

En el footer falta agregarle hover states a los social media icons, también reduce un poco el espacio entre icons, revisa el figma que lo habia actualizado.

• Twitter
• Instagram
• Behance

Made with heart by Juan Angustia

Anima el SVG del corazón como si estuviera latiendo

Haz que el video tenga la misma altura que el video parallax que tengo en www.jcagarcia.com

Recuerda que el movimiento de los elementos deben ser opuesto al scroll.

Si hago scroll hacia abajo la pagina va hacia arriba el video debe ir en dirección contraria.

• Hero Component fixes
  • Remove paddigs on all corners
• Project Component fixes
  • Fix image widths on the project comopnents
  • Move the TV image under the text
• MagicVideo component fix

Hey @jangustia para los mobile devices tenemos que diseñar unos fallbacks para donde estarán los videos animados.

Please add this hyperlink on the words.

• Google
• aspiring writing
• fashion lover

El anclaje cuando le doy click en el header a projects esta roto. Mira lo que pasa cuando le doy click en projecto.

Me manda entre projects Intro y el primer proyecto Duo.

Un ejemplo de como visualizo la transition del dialog.
https://drive.google.com/file/d/1z8LHPFR-tkrEVON4M3WjMKsWvFWzLtdM/view?usp=sharing

We need a favicon and web application icons in the following sizes:

• 64x64
• 192x192
• 512x512

Check the scrolling parallax on this website. This is close to my vision when you scroll I want the element floating the particulars, the text, and devices. Also on the left, you can see a custom scroll bar. I was thinking about having something like that but on the right and with the brand blue color.

Observation:

• When you scroll you can see the text floating and the image.
• The scroll bar on the left, check how to feel the scroll bar and the floating effect when you scroll.
• Each scroll move jump to the next section, this feels so smooth. "Subtle"

Olvidaste agregar el selected state. El menu debe estar morado para mostrar la sección seleccionada.

Manin los botones tienen los states wrong.

Mira en figma hay 3 diferente states. Enable, Hover "Donde tienes que aplicar la elavación"

Aquí una idea de como funciona el elevation

https://codepen.io/nw/pen/rVdPQW

`Position

It's currently fixed to the right of the page, but we have a container max-width size.

• fix the arrows to appear as in the figma file
• add transition animations to the rotator

• validation
• submit
• reply user with a thank you email (?)
• send email to JC's email

Manin los botones tienen los states wrong.

Mira en figma hay 3 diferente states. Enable, Hover "Donde tienes que aplicar la elavación"

Aquí una idea de como funciona el elevation. Esto tambien aplica al Scroll up button.

https://codepen.io/nw/pen/rVdPQW

Otro ejemplos
https://codepen.io/andytran/details/yYMobm

Elevation documentations
https://codepen.io/owens/details/ZKeevY
Enable button elevation: 2dp
Hover button elevation: 4dp

Add Vevo Music video on top of the device.
https://drive.google.com/file/d/0B4w4e7p0QG5ROEVUSmVhX0RteU0/view?usp=sharing

• Let's change Maximum width from 1280 to 1220px
• Also move the image a bit to the right. I touched the code to see how look. Check attached file.

Hey aquí esta un ejemplo de como animar la imagen cuando uno haga scroll.

• Sutilmente cuando uno haga scroll down mueve los tres elementos de esta manera, aquí esta un poco rápido pero la idea es hacerlo sutil.

https://drive.google.com/file/d/1taKDNFIM42HieG9kZQ4CBd5964C4NekV/view?usp=sharing

Aquí tienes el copy final de la biograíia junto con los hyperlink

https://docs.google.com/document/d/1ehUjzXxGU_Ejb0xzcHeLtf0JdF_gFpBgkbBr-7sSnHM/edit?usp=sharing

Aquí te deje el parallax del pagination y el animation entre lineas.

Necesito ya lanzar el website. Tengo una conferencia en la otra semana. Vamos hacer una pre launch.

Google duo button link
https://duo.google.com/about/

Xfinity Stream button link
https://www.behance.net/gallery/49381923/XFINITY-Stream-App-(Roku)

Vevo Music button link
https://www.behance.net/gallery/41882415/Vevo-Music-Personalize-Your-Music-Experience

Luego podemos hacer los case study pages.

Hey mira lo que encontré en Chrome Canary, esto puede ser algo interesante animar las particula así como hace Chrome Canary

https://drive.google.com/file/d/1H6nz4REFV-rTspPCrAtBrNgQGkED15pT/view?usp=sharing

Siento que el video aun tiene un bug. Mira encontré el parallax que quiero, toma el código.

Demo

Asegurate que el scroll sea snap scroll por secciones.

Aquí tienes cada scroll donde debe parar

Projects section:

Google Duo

Xfinity Stream

Vevo music

From Vevo music to testimonials lo puedes dejar manual para que la gente pueda ver el video.

Testimonilals

Let's talk

@jangustia pónmelo aquí

Me decidí por el momento hacer el Lightbox design para el About me, me parece más sencillo y intuintivo.

• Aquí tienes el copy
  https://docs.google.com/document/d/1ehUjzXxGU_Ejb0xzcHeLtf0JdF_gFpBgkbBr-7sSnHM/edit?usp=sharing

Es un poco largo asi que vas a tener que agregarle un scroll bar sutil.

• Transition:
  Me gusta la transition circular, creo que podemos hacerla similar con el color azul del button. Lo unico que no me gusta es como aparece el white box. Yo preferia algo mas sencillo como de arriba hacia abajo y fade in.
  https://codepen.io/Bo-Duke/pen/oXrmBg

Como hacer el transition
Al hacer click expande el color azul del boton circular hasta que en fade in desde arriba aparece en efecto cascada el dialog con black overlay tay y como lo diceñé. Solo usamos el colro azul para traer los elementos del lightbox.

Otro ejemplo
https://codepen.io/cda/pen/baMBdZ

Cambiar el headline por este y hazlo tal y cual lo puse aquí
Hello there!
I'm Juan Angustia.

maybe use lodash to add some throttling so that this is not redrawn every frame