BlukStudio

BlukStudio Portfolio

Este proyecto es un sitio web estático que muestra información, productos o servicios. Está construido con tecnologías web estándar como HTML, CSS (con preprocesamiento SCSS) y JavaScript, utilizando varias librerías para animaciones, carruseles y funcionalidades interactivas.

Tecnologías Utilizadas

HTML5
CSS3
SCSS (Sass)
JavaScript
jQuery
Bootstrap
AOS (Animate On Scroll)
Owl Carousel
Fancybox (para galerías/lightboxes)
ScrollMagic
GSAP (GreenSock Animation Platform - TweenMax)
Isotope (para filtrado y ordenación de layouts)
ImagesLoaded (para detectar cuando las imágenes han terminado de cargar)
Jarallax (para efectos de paralaje)
jQuery Waypoints (para funciones basadas en el scroll)
jQuery Stellar (para efectos de paralaje de fondo)
jQuery Lettering (para control de texto individual)
jQuery AnimateNumber (para animar números)

Instalación y Configuración

Dado que este es un sitio web estático, no requiere una instalación compleja. Simplemente clona este repositorio y abre el archivo index.html en tu navegador o habilita el ‘Live Server’ si usas Visual Studio Code

git clone <URL_DEL_REPOSITORIO>
cd nombre-del-proyecto

Para el desarrollo de SCSS, necesitarás un compilador de SCSS (por ejemplo, Sass). Si tienes Node.js instalado, puedes instalar Sass globalmente:

npm install -g sass

Luego, para compilar tus archivos SCSS a CSS, puedes usar un comando como este (ajusta las rutas según sea necesario):

sass --watch scss/style.scss:css/style.css

Estructura del Proyecto

El proyecto está organizado de la siguiente manera:

1
.
2
├── index.html          # Página principal del sitio
3
├── customers.html      # Página de clientes
4
├── work.html           # Página de trabajos
5
├── css/                # Archivos CSS compilados y librerías de terceros
6
│   ├── _functions.css
7
│   ├── _mixins.css
8
│   ├── _site-blocks.css
9
│   ├── animate.min.css
10
│   ├── aos.css
11
│   ├── bootstrap.min.css
12
│   ├── jquery.fancybox.min.css
13
│   ├── merch.css
14
│   ├── mixins/
15
│   ├── owl.carousel.min.css
16
│   ├── owl.theme.default.min.css
17
│   └── style.css
18
├── js/                 # Archivos JavaScript y librerías de terceros
19
│   ├── aos.js
20
│   ├── bluk-web.js
21
│   ├── bootstrap.min.js
22
│   ├── custom.js
23
│   ├── debug.addIndicators.min.js
24
│   ├── imagesloaded.pkgd.js
25
│   ├── isotope.pkgd.min.js
26
│   ├── jarallax-element.min.js
27
│   ├── jarallax.min.js
28
│   ├── jquery-3.5.1.min.js
29
│   ├── jquery-migrate-3.0.0.min.js
30
│   ├── jquery.animateNumber.min.js
31
│   ├── jquery.fancybox.min.js
32
│   ├── jquery.lettering.js
33
│   ├── jquery.stellar.min.js
34
│   ├── jquery.waypoints.min.js
35
│   ├── owl.carousel.min.js
36
│   ├── popper.min.js
37
│   ├── scrollmagic.animation.gsap.min.js
38
│   ├── ScrollMagic.min.js
39
│   ├── slideMovil.js
40
│   ├── TweenMax.min.js
41
│   └── zoomMerch.js
42
├── scss/               # Archivos fuente SCSS
43
│   ├── _functions.scss
44
│   ├── _mixins.scss
45
│   ├── _site-base.scss
46
│   ├── _site-blocks.scss
47
│   ├── _site-elements.scss
48
│   ├── _site-footer.scss
49
│   ├── _site-navbar.scss
50
│   ├── _site-style.scss
51
│   ├── _variables.scss
52
│   ├── mixins/
53
│   └── style.scss
54
├── fonts/              # Fuentes personalizadas e iconos
55
│   ├── feather/
56
│   ├── flaticon/
57
│   └── icomoon/
58
└── images/             # Archivos de imagen (logos, posters, productos, clips, etc.)
59
    ├── 01_logos_img/
60
    ├── 02_poster_img/
61
    ├── 03_producto_img/
62
    ├── 04_clips/
63
    └── customers/
64

65
## Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.