Version nueva

resources/assets/sass/_reset-src.scss

@@ -0,0 +1,47 @@
+// http://meyerweb.com/eric/tools/css/reset/
+//  v2.0 | 20110126
+//  License: none (public domain)
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+// HTML5 display-role reset for older browsers
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

resources/assets/sass/_variables.sass

@@ -0,0 +1,10 @@
+$azul_institucional: #10102a
+$verde_1: #8ec63e
+$verde_2: #3bb44a
+$verde_agua: #0ca977
+$celeste_logo: #1686ae
+$azul_logo: #262261
+$naranjo: #d84c35
+$amarillo: #face45
+
+$font_family: Roboto, sans-serif

resources/assets/sass/home.scss

@@ -0,0 +1,5 @@
+@import 'reset-src';
+@import 'variables';
+
+@import 'home/logo';
+@import 'home/menu';

resources/assets/sass/home/_logo.scss

@@ -0,0 +1,6 @@
+#logo {
+  background-color: $azul_institucional;
+  text-align: center;
+  padding-top: 5em;
+  padding-bottom: 3em;
+}

resources/assets/sass/home/_menu.scss

@@ -0,0 +1,28 @@
+#menu {
+  background-color: $azul_institucional;
+  position: relative;
+  height: 15rem;
+  width: 100%;
+  text-align: center;
+
+  nav {
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .semi {
+    position: absolute;
+    bottom: 0;
+    left: 25%;
+    width: 50%;
+    height: 50%;
+    //overflow: hidden;
+
+    img {
+      display: none;
+    }
+  }
+}

resources/assets/scripts/_variables.js

@@ -0,0 +1,10 @@
+colores = {
+  azul_institucional: '#10102a',
+  verde_1: '#8ec63e',
+  verde_2: '#3bb44a',
+  verde_agua: '#0ca977',
+  celeste_logo: '#1686ae',
+  azul_logo: '#262261',
+  naranjo: '#d84c35',
+  amarillo: '#face45'
+}

resources/routes/web.php

@@ -0,0 +1,22 @@
+<?php
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+
+$folder = implode(DIRECTORY_SEPARATOR, [
+  __DIR__,
+  $__environment
+]);
+if (file_exists($folder)) {
+  $files = new DirectoryIterator($folder);
+  foreach ($files as $file) {
+    if ($file->isDir()) {
+      continue;
+    }
+    include_once $file->getRealPath();
+  }
+}
+
+$app->get('/', function(Request $request, Response $response, View $view) {
+  return $view->render($response, 'home');
+});

resources/views/home.blade.php

@@ -0,0 +1,6 @@
+@extends('layout.base')
+
+@section('page_content')
+  @include('home.logo')
+  @include('home.menu')
+@endsection

resources/views/home/logo.blade.php

@@ -0,0 +1,3 @@
+<div id="logo">
+  <img class="logo" src="{{$urls->images}}/logo.svg" />
+</div>

resources/views/home/menu.blade.php

@@ -0,0 +1,146 @@
+<div id="menu">
+  <canvas class="border" width="100" height="100"></canvas>
+  <nav>
+    <a class="diseño" href="{{$urls->base}}/diseño">
+      <img src="{{$urls->images}}/diseño.svg" />
+    </a>
+    <a class="programacion" href="{{$urls->base}}/programacion">
+      <img src="{{$urls->images}}/programacion.svg" />
+    </a>
+    <a class="portafolios" href="{{$urls->base}}/portafolio">
+      <img src="{{$urls->images}}/portafolio.svg" />
+    </a>
+    <a class="contactos" href="{{$urls->base}}/contacto">
+      <img src="{{$urls->images}}/contacto.svg" />
+    </a>
+  </nav>
+  <div class="semi">
+    <canvas class="img_semi" width="100" height="100"></canvas>
+    <img src="{{$urls->images}}/fotos/1.jpg" />
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    let menu = {
+      context: null,
+      width: 0,
+      height: 0,
+      line: 0,
+      segmentos: [
+        'diseño',
+        'programacion',
+        'portafolios',
+        'contactos',
+        'final'
+      ],
+      colors: {
+        diseño: colores.verde_1,
+        programacion: colores.verde_2,
+        portafolios: colores.verde_agua,
+        contactos: colores.celeste_logo,
+        final: colores.azul_logo
+      },
+      angulos: {
+        diseño: [
+          180,
+          180+45+10
+        ],
+        programacion: [
+          180+45+10,
+          180+90-15
+        ],
+        portafolios: [
+          180+90-15,
+          180+90+15
+        ],
+        contactos: [
+          180+90+15,
+          360-45-10
+        ],
+        final: [
+          360-45-10,
+          360
+        ]
+      },
+      images: {
+        diseño: [.25, .4, 1/14],
+        programacion: [.37, .1, 1/14],
+        portafolios: [.55, .1, 1/14],
+        contactos: [.67, .4, 1/14]
+      },
+      setup: function() {
+        let canvas = $('#menu .border').get(0)
+        canvas.width = window.innerWidth
+        canvas.height = Math.max(canvas.height, window.innerWidth/14*3)
+        this.width = canvas.width
+        this.height = canvas.height
+        this.line = canvas.height / 17
+        this.context = canvas.getContext('2d')
+      },
+      drawArc: function(x, y, r, start, end, width, counter, color) {
+        this.context.beginPath()
+        this.context.arc(x, y, r, start*Math.PI/180, end*Math.PI/180, counter)
+        this.context.lineWidth = width
+        this.context.strokeStyle = color
+        this.context.stroke()
+      },
+      draw: function() {
+        $('#menu').height($('#menu .border').height())
+        $.each(menu.segmentos, function(i, el) {
+          if (menu.images[el]) {
+            $('#menu .' + el + ' img').css('left', menu.images[el][0] * menu.width)
+            $('#menu .' + el + ' img').css('top', menu.images[el][1] * menu.height)
+            $('#menu .' + el + ' img').width(menu.images[el][2] * menu.width)
+          }
+          menu.drawArc(menu.width/2, menu.height*1.75, menu.width/3, menu.angulos[el][0], menu.angulos[el][1], menu.line, false, menu.colors[el])
+        })
+      },
+      reDraw: function() {
+        this.context.canvas.width = window.innerWidth
+        this.context.canvas.height = Math.max(100, window.innerWidth/14*3)
+        this.width = this.context.canvas.width
+        this.height = this.context.canvas.height
+        this.line = this.context.canvas.height / 17
+
+        this.draw()
+      }
+    }
+    let semi = {
+      img: '',
+      w: 0,
+      h: 0,
+      ctx: null,
+      setup: function() {
+        this.img = $('#menu .semi img').attr('src')
+        let canvas = $('#menu .semi .img_semi').get(0)
+        canvas.width = $('#menu .semi').width()
+        canvas.height = $('#menu .semi').width()
+        this.w = canvas.width
+        this.h = canvas.height
+        this.ctx = canvas.getContext('2d')
+      },
+      draw: function() {
+        this.ctx.save()
+        this.ctx.beginPath()
+        this.ctx.arc(this.w, this.h, this.w, Math.PI/180*(180+45), Math.PI/180*(360-45), false)
+        this.ctx.closePath()
+        this.strokeStype = colores.amarillo
+        this.lineWidth = 5
+        this.stroke()
+        this.ctx.clip()
+
+        this.ctx.drawImage(this.img, 0, 0, this.w/2, this.h/4)
+        this.ctx.restore()
+      }
+    }
+    $(document).ready(() => {
+      menu.setup()
+      semi.setup()
+      menu.draw()
+      $(window).resize(() => {
+        menu.reDraw()
+      })
+    })
+  </script>
+@endpush

resources/views/layout/base.blade.php

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="{{$page_language}}">
+@include('layout.head')
+@include('layout.body')
+</html>

resources/views/layout/body.blade.php

@@ -0,0 +1,5 @@
+<body>
+  @yield('page_content')
+
+  @include('layout.scripts')
+</body>

resources/views/layout/head.blade.php

@@ -0,0 +1,6 @@
+<head>
+  <meta charset="utf8" />
+  <title>ProVM</title>
+  <meta name="description" content="Web developers" />
+  <link rel="stylesheet" href="{{$urls->styles}}/home.css" />
+</head>

resources/views/layout/scripts.blade.php

@@ -0,0 +1,4 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
+<script type="text/javascript" src="{{$urls->scripts}}/build.js"></script>
+
+@stack('scripts')