Subir imágenes a Symfony

La plantilla:

   <form action="areas/imagen" method="post" enctype="multipart/form-data">
        <input type="file" name="imagen"><br/>
        <input type="submit">
    </form>

El controlador:

 /**
     * @Route("/areas/imagen", name="imagen")
     */
    public function imagen() {
        $destino= $this->get('kernel')->getProjectDir()."/public/upload";
        $request = Request::createFromGlobals();
        $archivo = $request->files->get('imagen');
        $archivo->move($destino,$archivo->getClientOriginalName());
        return $this->render('areas/index.html.twig');
    }

Página AMP compleja (1)

Empezamos con la plantilla:

<!doctype html>
<html &#x26a1; lang="es">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Juan Pablo Fuentes - Programador</title>
    <link rel="canonical" href="hola-mundo.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Juan Pablo Fuentes - Programador</h1>
  </body>
</html>

Añado un google font:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <style amp-custom="">
        body{
            font-family: 'Montserrat', sans-serif;
        }
    </style>

La página va a disponer de las siguientes secciones. Cada título nos enlaza al artículo que nos permite crearlo:

Cabecera
Un título y una barra lateral que nos enlaza con las secciones

Foto de entrada
Una imagen con un texto que sirve de instroducción

Datos personales
Sección para poner la foto y los datos personales de la biografía.

Experiencia
Nuestros trabajos

Habilidades
Nuestro nivel en diferenets lenguajes de programación

Portfolio
Se explica solo

Educación
Cursos que tenemos

Referencias

Contacto

Voy a utilizar la siguiente librería CSS, se parece al bootstrap pero es más lite. La tendremos que incluir tal cual en la página:

http://github.com/basscss/bassplate

Queda así:

<!doctype html>
<html ⚡ lang="es">
    <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <title>Juan Pablo Fuentes - Programador</title>
        <link rel="canonical" href="programador.html">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

        <style amp-custom="">
            html {
                font-family: sans-serif;
                line-height: 1.15;
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%
            }

            body {
                margin: 0
            }

            article,aside,footer,header,nav,section {
                display: block
            }

            h1 {
                font-size: 2em;
                margin: .67em 0
            }
            .h1b {
                font-size: 1.8em;
                margin: .4em 0;
                color:#3B5998;
            }
            .white{
                background-color: white;
            }
            .grey{
                background-color: #EEEEEE;
            }
            figcaption,figure,main {
                display: block
            }

            figure {
                margin: 1em 40px
            }

            hr {
                box-sizing: content-box;
                height: 0;
                overflow: visible
            }

            pre {
                font-family: monospace,monospace;
                font-size: 1em
            }

            a {
                background-color: transparent;
                -webkit-text-decoration-skip: objects;
                color:white;
            }

            a:active,a:hover {
                outline-width: 0
            }

            abbr[title] {
                border-bottom: none;
                text-decoration: underline;
                text-decoration: underline dotted
            }

            b,strong {
                font-weight: inherit;
                font-weight: bolder
            }

            code,kbd,samp {
                font-family: monospace,monospace;
                font-size: 1em
            }

            dfn {
                font-style: italic
            }

            mark {
                background-color: #ff0;
                color: #000
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            audio,video {
                display: inline-block
            }

            audio:not([controls]) {
                display: none;
                height: 0
            }

            img {
                border-style: none
            }

            svg:not(:root) {
                overflow: hidden
            }

            button,input,optgroup,select,textarea {
                font-family: sans-serif;
                font-size: 100%;
                line-height: 1.15;
                margin: 0
            }

            button,input {
                overflow: visible
            }

            button,select {
                text-transform: none
            }

            [type=reset],[type=submit],button,html [type=button] {
                -webkit-appearance: button
            }

            [type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
                border-style: none;
                padding: 0
            }

            [type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
                outline: 1px dotted ButtonText
            }

            fieldset {
                border: 1px solid silver;
                margin: 0 2px;
                padding: .35em .625em .75em
            }

            legend {
                box-sizing: border-box;
                color: inherit;
                display: table;
                max-width: 100%;
                padding: 0;
                white-space: normal
            }

            progress {
                display: inline-block;
                vertical-align: baseline
            }

            textarea {
                overflow: auto
            }

            [type=checkbox],[type=radio] {
                box-sizing: border-box;
                padding: 0
            }

            [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            details,menu {
                display: block
            }

            summary {
                display: list-item
            }

            canvas {
                display: inline-block
            }

            [hidden],template {
                display: none
            }

            .h1 {
                font-size: 2.25rem;
                color:#3B5998;
            }

            .h2 {
                font-size: 1.25rem
            }

            .h3 {
                font-size: .6875rem
            }

            .h4,.h5 {
                font-size: .875rem
            }

            .h6 {
                font-size: .75rem
            }

            .font-family-inherit {
                font-family: inherit
            }

            .font-size-inherit {
                font-size: inherit
            }

            .text-decoration-none {
                text-decoration: none
            }

            .bold {
                font-weight: 700
            }

            .regular {
                font-weight: 400
            }

            .italic {
                font-style: italic
            }

            .caps {
                text-transform: uppercase;
                letter-spacing: .2em
            }

            .left-align {
                text-align: left
            }

            .center {
                text-align: center
            }

            .right-align {
                text-align: right
            }

            .justify {
                text-align: justify
            }

            .nowrap {
                white-space: nowrap
            }

            .break-word {
                word-wrap: break-word
            }

            .line-height-1 {
                line-height: 1rem
            }

            .line-height-2 {
                line-height: 1.42857
            }

            .line-height-3 {
                line-height: 2.0625
            }

            .line-height-4 {
                line-height: 1.81818
            }

            .list-style-none {
                list-style: none
            }

            .underline {
                text-decoration: underline
            }

            .truncate {
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .list-reset {
                list-style: none;
                padding-left: 0
            }

            .inline {
                display: inline
            }

            .block {
                display: block
            }

            .inline-block {
                display: inline-block
            }

            .table {
                display: table
            }

            .table-cell {
                display: table-cell
            }

            .overflow-hidden {
                overflow: hidden
            }

            .overflow-scroll {
                overflow: scroll
            }

            .overflow-auto {
                overflow: auto
            }

            .clearfix:after,.clearfix:before {
                content: " ";
                display: table
            }

            .clearfix:after {
                clear: both
            }

            .left {
                float: left
            }

            .right {
                float: right
            }

            .fit {
                max-width: 100%
            }

            .max-width-1 {
                max-width: 24rem
            }

            .max-width-2 {
                max-width: 32rem
            }

            .max-width-3 {
                max-width: 48rem
            }

            .max-width-4 {
                max-width: 64rem
            }

            .border-box {
                box-sizing: border-box
            }

            .align-baseline {
                vertical-align: baseline
            }

            .align-top {
                vertical-align: top
            }

            .align-middle {
                vertical-align: middle
            }

            .align-bottom {
                vertical-align: bottom
            }

            .m0 {
                margin: 0
            }

            .mt0 {
                margin-top: 0
            }

            .mr0 {
                margin-right: 0
            }

            .mb0 {
                margin-bottom: 0
            }

            .ml0,.mx0 {
                margin-left: 0
            }

            .mx0 {
                margin-right: 0
            }

            .my0 {
                margin-top: 0;
                margin-bottom: 0
            }

            .m1 {
                margin: .5rem
            }

            .mt1 {
                margin-top: .5rem
            }

            .mr1 {
                margin-right: .5rem
            }

            .mb1 {
                margin-bottom: .5rem
            }

            .ml1,.mx1 {
                margin-left: .5rem
            }

            .mx1 {
                margin-right: .5rem
            }

            .my1 {
                margin-top: .5rem;
                margin-bottom: .5rem
            }

            .m2 {
                margin: 1rem
            }

            .mt2 {
                margin-top: 1rem
            }

            .mr2 {
                margin-right: 1rem
            }

            .mb2 {
                margin-bottom: 1rem
            }

            .ml2,.mx2 {
                margin-left: 1rem
            }

            .mx2 {
                margin-right: 1rem
            }

            .my2 {
                margin-top: 1rem;
                margin-bottom: 1rem
            }

            .m3 {
                margin: 1.5rem
            }

            .mt3 {
                margin-top: 1.5rem
            }

            .mr3 {
                margin-right: 1.5rem
            }

            .mb3 {
                margin-bottom: 1.5rem
            }

            .ml3,.mx3 {
                margin-left: 1.5rem
            }

            .mx3 {
                margin-right: 1.5rem
            }

            .my3 {
                margin-top: 1.5rem;
                margin-bottom: 1.5rem
            }

            .m4 {
                margin: 2rem
            }

            .mt4 {
                margin-top: 2rem
            }

            .mr4 {
                margin-right: 2rem
            }

            .mb4 {
                margin-bottom: 2rem
            }

            .ml4,.mx4 {
                margin-left: 2rem
            }

            .mx4 {
                margin-right: 2rem
            }

            .my4 {
                margin-top: 2rem;
                margin-bottom: 2rem
            }

            .mxn1 {
                margin-left: -.5rem;
                margin-right: -.5rem
            }

            .mxn2 {
                margin-left: -1rem;
                margin-right: -1rem
            }

            .mxn3 {
                margin-left: -1.5rem;
                margin-right: -1.5rem
            }

            .mxn4 {
                margin-left: -2rem;
                margin-right: -2rem
            }

            .ml-auto {
                margin-left: auto
            }

            .mr-auto,.mx-auto {
                margin-right: auto
            }

            .mx-auto {
                margin-left: auto
            }

            .p0 {
                padding: 0
            }

            .pt0 {
                padding-top: 0
            }

            .pr0 {
                padding-right: 0
            }

            .pb0 {
                padding-bottom: 0
            }

            .pl0,.px0 {
                padding-left: 0
            }

            .px0 {
                padding-right: 0
            }

            .py0 {
                padding-top: 0;
                padding-bottom: 0
            }

            .p1 {
                padding: .5rem
            }

            .pt1 {
                padding-top: .5rem
            }

            .pr1 {
                padding-right: .5rem
            }

            .pb1 {
                padding-bottom: .5rem
            }

            .pl1 {
                padding-left: .5rem
            }

            .py1 {
                padding-top: .5rem;
                padding-bottom: .5rem
            }

            .px1 {
                padding-left: .5rem;
                padding-right: .5rem
            }

            .p2 {
                padding: 1rem
            }

            .pt2 {
                padding-top: 1rem
            }

            .pr2 {
                padding-right: 1rem
            }

            .pb2 {
                padding-bottom: 1rem
            }

            .pl2 {
                padding-left: 1rem
            }

            .py2 {
                padding-top: 1rem;
                padding-bottom: 1rem
            }

            .px2 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .p3 {
                padding: 1.5rem
            }

            .pt3 {
                padding-top: 1.5rem
            }

            .pr3 {
                padding-right: 1.5rem
            }

            .pb3 {
                padding-bottom: 1.5rem
            }

            .pl3 {
                padding-left: 1.5rem
            }

            .py3 {
                padding-top: 1.5rem;
                padding-bottom: 1.5rem
            }

            .px3 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .p4 {
                padding: 2rem
            }

            .pt4 {
                padding-top: 2rem
            }

            .pr4 {
                padding-right: 2rem
            }

            .pb4 {
                padding-bottom: 2rem
            }

            .pl4 {
                padding-left: 2rem
            }

            .py4 {
                padding-top: 2rem;
                padding-bottom: 2rem
            }

            .px4 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .col {
                float: left
            }

            .col,.col-right {
                box-sizing: border-box
            }

            .col-right {
                float: right
            }

            .col-1 {
                width: 8.33333%
            }

            .col-2 {
                width: 16.66667%
            }

            .col-3 {
                width: 25%
            }

            .col-4 {
                width: 33.33333%
            }

            .col-5 {
                width: 41.66667%
            }

            .col-6 {
                width: 50%
            }

            .col-7 {
                width: 58.33333%
            }

            .col-8 {
                width: 66.66667%
            }

            .col-9 {
                width: 75%
            }

            .col-10 {
                width: 83.33333%
            }

            .col-11 {
                width: 91.66667%
            }

            .col-12 {
                width: 100%
            }

            @media (min-width:40.06rem) {
                .sm-col {
                    float: left;
                    box-sizing: border-box
                }

                .sm-col-right {
                    float: right;
                    box-sizing: border-box
                }

                .sm-col-1 {
                    width: 8.33333%
                }

                .sm-col-2 {
                    width: 16.66667%
                }

                .sm-col-3 {
                    width: 25%
                }

                .sm-col-4 {
                    width: 33.33333%
                }

                .sm-col-5 {
                    width: 41.66667%
                }

                .sm-col-6 {
                    width: 50%
                }

                .sm-col-7 {
                    width: 58.33333%
                }

                .sm-col-8 {
                    width: 66.66667%
                }

                .sm-col-9 {
                    width: 75%
                }

                .sm-col-10 {
                    width: 83.33333%
                }

                .sm-col-11 {
                    width: 91.66667%
                }

                .sm-col-12 {
                    width: 100%
                }
            }

            @media (min-width:52.06rem) {
                .md-col {
                    float: left;
                    box-sizing: border-box
                }

                .md-col-right {
                    float: right;
                    box-sizing: border-box
                }

                .md-col-1 {
                    width: 8.33333%
                }

                .md-col-2 {
                    width: 16.66667%
                }

                .md-col-3 {
                    width: 25%
                }

                .md-col-4 {
                    width: 33.33333%
                }

                .md-col-5 {
                    width: 41.66667%
                }

                .md-col-6 {
                    width: 50%
                }

                .md-col-7 {
                    width: 58.33333%
                }

                .md-col-8 {
                    width: 66.66667%
                }

                .md-col-9 {
                    width: 75%
                }

                .md-col-10 {
                    width: 83.33333%
                }

                .md-col-11 {
                    width: 91.66667%
                }

                .md-col-12 {
                    width: 100%
                }
            }

            @media (min-width:64.06rem) {
                .lg-col {
                    float: left;
                    box-sizing: border-box
                }

                .lg-col-right {
                    float: right;
                    box-sizing: border-box
                }

                .lg-col-1 {
                    width: 8.33333%
                }

                .lg-col-2 {
                    width: 16.66667%
                }

                .lg-col-3 {
                    width: 25%
                }

                .lg-col-4 {
                    width: 33.33333%
                }

                .lg-col-5 {
                    width: 41.66667%
                }

                .lg-col-6 {
                    width: 50%
                }

                .lg-col-7 {
                    width: 58.33333%
                }

                .lg-col-8 {
                    width: 66.66667%
                }

                .lg-col-9 {
                    width: 75%
                }

                .lg-col-10 {
                    width: 83.33333%
                }

                .lg-col-11 {
                    width: 91.66667%
                }

                .lg-col-12 {
                    width: 100%
                }
            }

            .flex {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex
            }

            @media (min-width:40.06rem) {
                .sm-flex {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex
                }
            }

            @media (min-width:52.06rem) {
                .md-flex {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex
                }
            }

            @media (min-width:64.06rem) {
                .lg-flex {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex
                }
            }

            .flex-column {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column
            }

            .flex-wrap {
                -ms-flex-wrap: wrap;
                flex-wrap: wrap
            }

            .items-start {
                -webkit-box-align: start;
                -ms-flex-align: start;
                align-items: flex-start
            }

            .items-end {
                -webkit-box-align: end;
                -ms-flex-align: end;
                align-items: flex-end
            }

            .items-center {
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }

            .items-baseline {
                -webkit-box-align: baseline;
                -ms-flex-align: baseline;
                align-items: baseline
            }

            .items-stretch {
                -webkit-box-align: stretch;
                -ms-flex-align: stretch;
                align-items: stretch
            }

            .self-start {
                -ms-flex-item-align: start;
                align-self: flex-start
            }

            .self-end {
                -ms-flex-item-align: end;
                align-self: flex-end
            }

            .self-center {
                -ms-flex-item-align: center;
                -ms-grid-row-align: center;
                align-self: center
            }

            .self-baseline {
                -ms-flex-item-align: baseline;
                align-self: baseline
            }

            .self-stretch {
                -ms-flex-item-align: stretch;
                -ms-grid-row-align: stretch;
                align-self: stretch
            }

            .justify-start {
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start
            }

            .justify-end {
                -webkit-box-pack: end;
                -ms-flex-pack: end;
                justify-content: flex-end
            }

            .justify-center {
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center
            }

            .justify-between {
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between
            }

            .justify-around {
                -ms-flex-pack: distribute;
                justify-content: space-around
            }

            .content-start {
                -ms-flex-line-pack: start;
                align-content: flex-start
            }

            .content-end {
                -ms-flex-line-pack: end;
                align-content: flex-end
            }

            .content-center {
                -ms-flex-line-pack: center;
                align-content: center
            }

            .content-between {
                -ms-flex-line-pack: justify;
                align-content: space-between
            }

            .content-around {
                -ms-flex-line-pack: distribute;
                align-content: space-around
            }

            .content-stretch {
                -ms-flex-line-pack: stretch;
                align-content: stretch
            }

            .flex-auto {
                -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
                min-width: 0;
                min-height: 0
            }

            .flex-none {
                -webkit-box-flex: 0;
                -ms-flex: none;
                flex: none
            }

            .order-0 {
                -webkit-box-ordinal-group: 1;
                -ms-flex-order: 0;
                order: 0
            }

            .order-1 {
                -webkit-box-ordinal-group: 2;
                -ms-flex-order: 1;
                order: 1
            }

            .order-2 {
                -webkit-box-ordinal-group: 3;
                -ms-flex-order: 2;
                order: 2
            }

            .order-3 {
                -webkit-box-ordinal-group: 4;
                -ms-flex-order: 3;
                order: 3
            }

            .order-last {
                -webkit-box-ordinal-group: 100000;
                -ms-flex-order: 99999;
                order: 99999
            }

            .relative {
                position: relative
            }

            .absolute {
                position: absolute
            }

            .fixed {
                position: fixed
            }

            .top-0 {
                top: 0
            }

            .right-0 {
                right: 0
            }

            .bottom-0 {
                bottom: 0
            }

            .left-0 {
                left: 0
            }

            .z1 {
                z-index: 1
            }

            .z2 {
                z-index: 2
            }

            .z3 {
                z-index: 3
            }

            .z4 {
                z-index: 4
            }

            .border {
                border-style: solid;
                border-width: 1px
            }

            .border-top {
                border-top-style: solid;
                border-top-width: 1px
            }

            .border-right {
                border-right-style: solid;
                border-right-width: 1px;
                border-color:#BBBBBB;
            }

            .border-bottom {
                border-bottom-style: solid;
                border-bottom-width: 1px
            }

            .border-left {
                border-left-style: solid;
                border-left-width: 1px
            }

            .border-none {
                border: 0
            }

            .rounded {
                border-radius: 3px
            }

            .circle {
                border-radius: 50%
            }

            .rounded-top {
                border-radius: 3px 3px 0 0
            }

            .rounded-right {
                border-radius: 0 3px 3px 0
            }

            .rounded-bottom {
                border-radius: 0 0 3px 3px
            }

            .rounded-left {
                border-radius: 3px 0 0 3px
            }

            .not-rounded {
                border-radius: 0
            }

            .hide {
                position: absolute;
                height: 1px;
                width: 1px;
                overflow: hidden;
                clip: rect(1px,1px,1px,1px)
            }

            @media (max-width:40rem) {
                .xs-hide {
                    display: none
                }
            }

            @media (min-width:40.06rem) and (max-width:52rem) {
                .sm-hide {
                    display: none
                }
            }

            @media (min-width:52.06rem) and (max-width:64rem) {
                .md-hide {
                    display: none
                }
            }

            @media (min-width:64.06rem) {
                .lg-hide {
                    display: none
                }
            }

            .display-none {
                display: none
            }

            body {
                background: #fff;
                color: #252525;
                font-family: Montserrat,san serif;
                min-width: 315px;
                overflow-x: hidden;
                font-smooth: always;
                -webkit-font-smoothing: antialiased
            }

            .ampstart-image-fullpage-hero {
                color: #000
            }

            .ampstart-fullpage-hero-heading-text,.ampstart-image-fullpage-hero .ampstart-image-credit {
                -webkit-box-decoration-break: clone;
                box-decoration-break: clone;
                background: #fff;
                padding: 0 1rem .2rem
            }

            .ampstart-image-fullpage-hero>amp-img {
                max-height: calc(100vh - 3.5rem)
            }


            @media (min-width:52.06rem) {
                .ampstart-image-fullpage-hero>amp-img {
                    height: 60vh
                }
            }
            .ampstart-article-summary header,.ampstart-image-fullpage-hero figcaption {
                background: #fff;
                opacity: .8
            }

            .ampstart-image-fullpage-hero figcaption {
                margin: 1.5rem;
                top: auto
            }
            .ampstart-readmore {
                background: none;
                display: block;
                margin: 0;
                padding: 1rem 0 2rem
            }

            .ampstart-readmore:after {
                content: " ";
                border: 2px solid #000;
                border-width: 0 2px 2px 0;
                bottom: 2rem;
                display: block;
                height: 10px;
                left: calc(50% - 5px);
                position: absolute;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                width: 10px
            }
            .ampstart-image-credit {
                font: 700 .7875rem/1.6 arial,sans-serif;
                letter-spacing: .6px
            }

            .ampstart-image-credit br {
                display: none
            }

            .ampstart-fullpage-hero-heading-text,.ampstart-image-fullpage-hero .ampstart-image-credit {
                background: none;
                padding: 0
            }
            .ampstart-headerbar{background-color:transparent;color:#000;z-index:999;}.ampstart-headerbar+:not(amp-sidebar),.ampstart-headerbar+amp-sidebar+*{margin-top:3.5rem}.ampstart-headerbar-nav .ampstart-nav-item{padding:0 1rem;background:transparent;opacity:.8}.ampstart-headerbar-nav{line-height:3.5rem}.ampstart-nav-item:active,.ampstart-nav-item:focus,.ampstart-nav-item:hover{opacity:1}.ampstart-navbar-trigger:focus{outline:none}.ampstart-nav a,.ampstart-navbar-trigger,.ampstart-sidebar-faq a{cursor:pointer;text-decoration:none}.ampstart-nav .ampstart-label{color:inherit}.ampstart-navbar-trigger{line-height:3.5rem;font-size:1.25rem}.ampstart-headerbar-nav{-webkit-box-flex:1;-ms-flex:1;flex:1}.ampstart-nav-search{-webkit-box-flex:0.5;-ms-flex-positive:0.5;flex-grow:0.5}.ampstart-headerbar .ampstart-nav-search:active,.ampstart-headerbar .ampstart-nav-search:focus,.ampstart-headerbar .ampstart-nav-search:hover{box-shadow:none}.ampstart-nav-search>input{border:none;border-radius:3px;line-height:normal}.ampstart-nav-dropdown{min-width:200px}.ampstart-nav-dropdown amp-accordion header{background-color:#000;border:none}.ampstart-nav-dropdown amp-accordion ul{background-color:#000}.ampstart-nav-dropdown .ampstart-dropdown-item,.ampstart-nav-dropdown .ampstart-dropdown>section>header{background-color:#000;color:#fff}.ampstart-nav-dropdown .ampstart-dropdown-item{color:#fff}.ampstart-sidebar{background-color:#000;color:#fff;min-width:300px;width:300px}.ampstart-sidebar .ampstart-icon{fill:#fff}.ampstart-sidebar-header{line-height:3.5rem;min-height:3.5rem}.ampstart-sidebar .ampstart-dropdown-item,.ampstart-sidebar .ampstart-dropdown header,.ampstart-sidebar .ampstart-faq-item,.ampstart-sidebar .ampstart-nav-item,.ampstart-sidebar .ampstart-social-follow{margin:0 0 2rem}.ampstart-sidebar .ampstart-nav-dropdown{margin:0}.ampstart-sidebar .ampstart-navbar-trigger{line-height:inherit}.ampstart-navbar-trigger svg{pointer-events:none}
        </style>
        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
        <script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async=""></script>
        <script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async=""></script>
        <script custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" async=""></script>

    </head>
    <body>
        <!-- Start Navbar -->
        <header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4 ">
            <div role="button" aria-label="open sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger  pr2  "><span class="white">☰</span>
            </div>

        </header>

        <!-- Start Sidebar -->
    <amp-sidebar id="header-sidebar" class="ampstart-sidebar px3  " layout="nodisplay">
        <div class="flex justify-start items-center ampstart-sidebar-header">
            <div role="button" aria-label="close sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger items-start">✕</div>
        </div>
        
<ul class="ampstart-sidebar-faq list-reset m0">
            <li class="ampstart-faq-item"><a href="#personal" class="text-decoration-none">Datos personales</a></li>
            <li class="ampstart-faq-item"><a href="#experiencia" class="text-decoration-none">Experiencia</a></li>
            <li class="ampstart-faq-item"><a href="#habilidades" class="text-decoration-none">Conocimientos</a></li>
            <li class="ampstart-faq-item"><a href="#portfolio" class="text-decoration-none">Portfolio</a></li>
            <li class="ampstart-faq-item"><a href="#educacion" class="text-decoration-none">Educacion</a></li>
        </ul>
        <ul class="ampstart-social-follow list-reset flex justify-around items-center flex-wrap m0 mb4">
            <li>
                <a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="22.2" viewbox="0 0 53 49"><title>Twitter</title><path d="M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6" class="ampstart-icon ampstart-icon-twitter"></path></svg></a>
            </li>
            <li>
                <a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23.6" viewbox="0 0 56 55"><title>Facebook</title><path d="M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43" class="ampstart-icon ampstart-icon-fb"></path></svg></a>
            </li>
            <li>
                <a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 54 54"><title>instagram</title><path d="M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z" class="ampstart-icon ampstart-icon-instagram"></path></svg></a>
            </li>
            <li>
                <a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML pin trest"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="28.5" viewbox="0 0 43 51"><title>pinterest</title><path d="M8.134 18.748c0-1.6.2-3 .8-4.4.5-1.4 1.2-2.6 2.2-3.6.9-1 2-1.9 3.2-2.6 1.2-.8 2.5-1.3 3.9-1.7 1.5-.4 2.9-.5 4.4-.5 2.2 0 4.3.4 6.2 1.4 1.9.9 3.5 2.3 4.7 4.1 1.2 1.9 1.8 3.9 1.8 6.2 0 1.4-.1 2.7-.4 4-.2 1.3-.7 2.6-1.2 3.8-.6 1.2-1.3 2.3-2.2 3.2-.8.9-1.8 1.7-3.1 2.2-1.2.6-2.5.9-4 .9-1 0-1.9-.3-2.9-.7-.9-.5-1.6-1.1-2-1.9-.1.5-.3 1.4-.6 2.4-.3 1.1-.4 1.7-.5 2-.1.3-.2.9-.4 1.6-.3.7-.4 1.2-.6 1.5-.1.3-.4.7-.7 1.3-.3.6-.6 1.2-1 1.7-.3.5-.7 1.1-1.3 1.8l-.3.1-.2-.2c-.2-2.2-.3-3.6-.3-4 0-1.3.2-2.8.5-4.4.3-1.7.8-3.7 1.4-6.2.6-2.5 1-3.9 1.1-4.4-.5-.9-.7-2.1-.7-3.6 0-1.2.4-2.3 1.1-3.3.8-1.1 1.7-1.6 2.8-1.6.9 0 1.6.3 2.1.9.4.6.7 1.3.7 2.2 0 .9-.3 2.3-1 4.1-.6 1.8-.9 3.1-.9 4 0 .9.3 1.6 1 2.2.6.6 1.4.9 2.3.9.8 0 1.5-.2 2.2-.5.6-.4 1.2-.9 1.6-1.5.5-.6.9-1.3 1.2-2 .4-.8.6-1.5.8-2.4.2-.8.4-1.6.5-2.4.1-.7.1-1.4.1-2.1 0-2.5-.8-4.4-2.3-5.8-1.6-1.4-3.6-2.1-6.1-2.1-2.8 0-5.2 1-7.1 2.8-1.9 1.9-2.9 4.2-2.9 7.1 0 .6.1 1.2.3 1.8.2.6.4 1.1.6 1.4.2.3.4.7.5 1 .2.3.3.5.3.6 0 .4-.1.9-.3 1.6-.2.6-.5 1-.8 1 0 0-.1-.1-.4-.1-.7-.2-1.3-.6-1.9-1.2-.5-.6-1-1.3-1.3-2-.3-.8-.5-1.6-.7-2.4-.2-.7-.2-1.5-.2-2.2z" class="ampstart-icon ampstart-icon-pinterest"></path></svg></a>
            </li>
            <li>
                <a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML E-mail"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="18.4" viewbox="0 0 56 43"><title>email</title><path d="M10.5 6.4C9.1 6.4 8 7.5 8 8.9v21.3c0 1.3 1.1 2.5 2.5 2.5h34.9c1.4 0 2.5-1.2 2.5-2.5V8.9c0-1.4-1.1-2.5-2.5-2.5H10.5zm2.1 2.5h30.7L27.9 22.3 12.6 8.9zm-2.1 1.4l16.6 14.6c.5.4 1.2.4 1.7 0l16.6-14.6v19.9H10.5V10.3z" class="ampstart-icon ampstart-icon-email"></path></svg></a>
            </li>
        </ul>

        
    </amp-sidebar>
    <!-- End Sidebar -->
    <!-- End Navbar -->
    <h1 class="center h1">Juan Pablo Fuentes</h1>
    <figure class="center ampstart-image-fullpage-hero m0 relative mb4">
        <amp-img width="404" height="720" alt="programador" layout="responsive" src="img/code2.jpg" media="(max-width: 415px)"></amp-img>
        <amp-img height="720" alt="programador" layout="fixed-height" src="img/code2.jpg" media="(min-width: 416px)"></amp-img>
        <figcaption class="absolute top-0 right-0 bottom-0 left-0">
            <header class="p3 mb4">
                <h1 class="ampstart-fullpage-hero-heading mb3">
                    <span class="ampstart-fullpage-hero-heading-text">
                        Analista programador | Full stack developer
                    </span>
                </h1>

                <span class="ampstart-image-credit h4">
                    Más de veinte años de experiencia desarrollando software a medida
                </span>
            </header>
            <footer class="absolute left-0 right-0 bottom-0">
                <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content"><span class="ampstart-readmore-text px1"></span></a>
            </footer>
        </figcaption>
    </figure>
    <div id="content">
        <section id="personal">
            <p class="center h1 grey p2"><amp-img width="143" height="20" alt="sidebar"  src="img/lb.png" media="(min-width: 416px)" ></amp-img> Información personal <amp-img width="143" height="20" alt="sidebar"  src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
            <div class="flex flex-wrap">
                <div class="flex-auto px4 col-2" ><amp-img width="450" height="470" alt="programador" layout="responsive" src="img/foto.jpg" ></amp-img> </div>
                <div class="flex-auto flex flex-wrap ">
                    <div class="px4  mx-auto">
                        <p class="center h1">Datos personales</p>
                        <div class="mx-auto max-width-1">
                            <p><b>Nombre:</b> Juan Pablo Fuentes</p>
                            <p><b>Email</b> incidencias@gmail.com</p>
                            <p><b>Teléfono:</b> 666 999 666</p>
                            <p><b>Nacimiento:</b> 13/08/1982</p>
                            <p><b>Dirección:</b> Rda. Sant Antoni, 46</p>
                            <p><b>Web:</b> juanpablofuentes.es</p>
                        </div>
                    </div>
                    <div class="px4 mx-auto">
                        <p class="center h1">Perfil profesional</p>
                        <div class="mx-auto max-width-1">
                            <p>Soy un analista programador, responsable del desarrollo de diferentes proyectos empresariales. En el entorno web soy un full-stack developer, siendo capaz de realizar desarrollos tanto en front como en back-end.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="experiencia" class="grey pt1"> 
            <p class="center h1"><amp-img width="143" height="20" alt="sidebar"  src="img/lb.png" media="(min-width: 416px)" ></amp-img> Experiencia <amp-img width="143" height="20" alt="sidebar"  src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
            <div class="flex-auto flex flex-wrap white mb2" >
                <div class="px4 col-2 mx-auto">
                    <p class="bold center h2">2015 - actualidad</p>
                    <p class="center h1">Deedu</p>

                </div>
                <div class="px4 col-8 ">
                    <p class="bold h1b">Cofundador</p>
                    <div class="mx-auto">
                        <p>Cofundador de la empresa y responsable del desarrollo de los productos. A cargo del equipo de programadores encargados de desarrollar todo.</p>
                    </div>
                </div>
            </div>
            <div class="flex-auto flex flex-wrap white mb2" >
                <div class="px4 col-2 mx-auto">
                    <p class="bold center h2">2010 - 2015</p>
                    <p class="center h1">Intelisen</p>

                </div>
                <div class="px4 col-8 ">
                    <p class="bold h1b">Responsable área técnica</p>
                    <div class="mx-auto">
                        <p>Analista programador en los diferentes proyectos desarrollados por Intelisen</p>
                    </div>
                </div>
            </div>
            <div class="flex-auto flex flex-wrap white mb2" >
                <div class="px4 col-2 mx-auto">
                    <p class="bold center h2">2004 - 2010</p>
                    <p class="center h1">Apeiron</p>

                </div>
                <div class="px4 col-8 ">
                    <p class="bold h1b">Analista programador</p>
                    <div class="mx-auto">
                        <p>Analista programador en los diferentes proyectos desarrollados por Intelisen</p>
                    </div>
                </div>
            </div>

        </section>
        <section id="habilidades" class="grey pt1"> 
            <p class="center h1"><amp-img width="143" height="20" alt="sidebar"  src="img/lb.png" media="(min-width: 416px)" ></amp-img> Conocimientos <amp-img width="143" height="20" alt="sidebar"  src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>

            <div class="flex-auto flex flex-wrap  mb2" >
                <div class="px4 col-2 mx-auto white m1">
                    <p class="bold center h2">JavaScript</p>
                    <p class="center h1 bold">90%</p>

                </div>


                <div class="px4 col-2 mx-auto white m1">
                    <p class="bold center h2">HTML</p>
                    <p class="center h1 bold">90%</p>

                </div>
                <div class="px4 col-2 mx-auto white m1">
                    <p class="bold center h2">PHP</p>
                    <p class="center h1 bold">90%</p>

                </div>


                <div class="px4 col-2 mx-auto white m1">
                    <p class="bold center h2">CSS</p>
                    <p class="center h1 bold">90%</p>

                </div>
                <div class="px4 col-2 mx-auto white m1">
                    <p class="bold center h2">C#</p>
                    <p class="center h1 bold">90%</p>

                </div>


                <div class="px4 col-2 mx-auto white m1">
                    <p class="bold center h2">Java</p>
                    <p class="center h1 bold">90%</p>

                </div>
                <div class="px4 col-2 mx-auto white m1">
                    <p class="bold center h2">Phonegap</p>
                    <p class="center h1 bold">90%</p>

                </div>


                <div class="px4 col-2 mx-auto white m1">
                    <p class="bold center h2">SQL</p>
                    <p class="center h1 bold">90%</p>

                </div>
            </div>

        </section>

        <section id="portfolio" class="grey pt1"> 
            <p class="center h1"><amp-img width="143" height="20" alt="sidebar"  src="img/lb.png" media="(min-width: 416px)" ></amp-img> Portfolio <amp-img width="143" height="20" alt="sidebar"  src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
            <!-- Start carousel -->
            <amp-carousel width="756" height="580" layout="responsive" type="slides" class="mb1">


                <!-- Start Image with Caption -->
                <figure class="ampstart-image-with-caption m0 relative mb4">
                    <amp-img src="img/code1.jpg" width="756" height="520" alt="Misiles" layout="responsive" class=""></amp-img>
                    <figcaption class="h5 mt1 px3">
                        Control de misiles de la nasa.
                    </figcaption>
                </figure>
                <!-- End Image with Caption -->


                <!-- Start Image with Caption -->
                <figure class="ampstart-image-with-caption m0 relative mb4">
                    <amp-img src="img/code2.jpg" width="756" height="520" alt="New York street" layout="responsive" class=""></amp-img>
                    <figcaption class="h5 mt1 px3">
                        Fidelización Spanair
                    </figcaption>
                </figure>
                <!-- End Image with Caption -->
            </amp-carousel>
            <!-- End carousel -->
        </section>
        <section id="educacion" class="grey pt1"> 
            <p class="center h1"><amp-img width="143" height="20" alt="sidebar"  src="img/lb.png" media="(min-width: 416px)" ></amp-img> Educación <amp-img width="143" height="20" alt="sidebar"  src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
            <div class="flex-auto flex flex-wrap white mb2" >
                <div class="px4 col-2 mx-auto border-right">
                    <p class="bold center h2">1996</p>
                    <p class="center h1b">MIT</p>

                </div>
                <div class="px4 col-8 ">
                    <p class="bold h1b">Master IA</p>
                    <div class="mx-auto">
                        <p>Master en Inteligencia artificial cursado junto a Cifuentes y Casadi</p>
                    </div>
                </div>
            </div>
            <div class="flex-auto flex flex-wrap white mb2" >
                <div class="px4 col-2 mx-auto border-right">
                    <p class="bold center h2">1993-1994</p>
                    <p class="center h1b">UAB</p>

                </div>
                <div class="px4 col-8 ">
                    <p class="bold h1b">Doctorado ciencia cognitiva</p>
                    <div class="mx-auto">
                        <p>Doctorado en ciencia cognitiva y lenguaje</p>
                    </div>
                </div>
            </div>
            <div class="flex-auto flex flex-wrap white mb2" >
                <div class="px4 col-2 mx-auto border-right">
                    <p class="bold center h2">1986 - 1992</p>
                    <p class="center h1b">UPV</p>

                </div>
                <div class="px4 col-8 ">
                    <p class="bold h1b">Licenciado en informática</p>
                    <div class="mx-auto">
                        <p>Licenciatura en informa´tica especialdiad intelgiencia articial</p>
                    </div>
                </div>
            </div>

        </section>

    </div>
</body>
</html>

Página AMP (I)

Primero, la plantilla:

<!doctype html>
<html amp lang="es">
    <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <title>Juan Pablo Fuentes</title>
        <link rel="canonical" href="index.html">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    </head>
    <body>
    </body>
</html>

Comprobamos que valida añadiendo ‘#development=1’ al final de la url. Debería salir por consola lo siguiente:

AMP validation successful.

Vamos a añadir antes del amp-boilerplate los metadatos:

  <script type="application/ld+json">
            {
            "@context": "http://schema.org",
            "@type": "WebSite",
            "headline": "Juan Pablo Fuentes WebSite",
            "datePublished": "2018-06-13T12:02:41Z",
            "image": [
            "img/photo.jpg"
            ]
            }
        </script>

El índice va a consistir en tres imágenes una al lado de otra que nos enlazarán con tres secciones. Para ello añadimos el html:

<h1>Juan Pablo Fuentes</h1>
        <div id="contenido">
            <div>
                <a href="#"><amp-img src="img/programador.jpg" alt="Programador" height="512" width="512" layout="responsive" ></amp-img><p>Programador</p></a></div>
            <div>
                <a href="#"><amp-img src="img/profesor.jpg" alt="Profesor" height="512" width="512"layout="responsive" ></amp-img><p>Profesor</p></a></div>
            <div>
                <a href="#"><amp-img src="img/narrador.jpg" alt="Narrador" height="512" width="512" layout="responsive"></amp-img><p>Narrador</p></a></div>
        </div>

Ponemos el css que controlará el comportamiento. En este caso la página canónica y la amp son la misma, así que usamos mediaqueries para controlar posición y tamaño:

<style amp-custom>
            /* Cualquier estilo personalizado va aquí */
            body {
                background: linear-gradient(to right, #00B4DB, #B3E4EB);
                font-family: Verdana;
            }
            #contenido{
                display:flex;
                align-items: center;
                height: 70vh;

            }
            #contenido div{
                margin:50px;
                flex-grow: 1;
                box-shadow: 5px 5px 15px #BBBBBB;
                background-color: white;
                border:1px solid #BBBBBB;
            }
            #contenido div p{
                text-align: center;

            }
            a{text-decoration: none;
              color:#444444;}
            a:hover{
                font-weight: bold;
            }
            h1{
                text-align: center;
                color:#444444;
            }
            @media screen and (max-width: 600px) {
                #contenido {
                    flex-direction: column;
                }
                #contenido div{
                    width:70%;
                }
            }
        </style>

AMP

Para empezar deberíamos ir a la página oficial:

https://www.ampproject.org/es/

Aquí la plantilla básica:

https://www.ampproject.org/es/docs/getting_started/quickstart

Y aquí una lista de componentes:

https://ampbyexample.com/

Un tutorial interesante:

https://webdesign.tutsplus.com/tutorials/how-to-make-a-basic-amp-page-from-scratch–cms-26158

Plantillas:

https://www.ampstart.com/

Plugin para wordpress:

https://es.wordpress.org/plugins/accelerated-mobile-pages/