base working, added images assets, todo random generation

This commit is contained in:
gbrochar 2020-11-21 14:52:21 +01:00
parent dec067d532
commit 1c6a777a36
28 changed files with 548 additions and 100 deletions

View File

@ -23,7 +23,7 @@ module.exports = {
plugins: [
new EsLint({
extensions: ['.ts', '.tsx'],
context: path.join(__dirname, '../src/client'),
context: path.join(__dirname, '../src/server'),
}),
],
};

View File

@ -29,9 +29,93 @@ body {
width: 25%;
}
.tile-child {
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#whoami {
background-color: #1d2021;
color: #ebdbb2;
}
#git {
background-color: #282828;
}
#downloadcv {
background-color: #282828;
color: #8ec07c;
border-color: #8ec07c;
}
#clickme {
background-color: #1d2021;
color: #d3869b;
border-color: #d3869b;
}
#root {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.btn,
.btn:focus,
.btn:active {
outline: none;
box-shadow: none;
background-color: none;
}
.btn-mine {
border-radius: 0;
white-space: normal;
background-color: #1d2021;
color: #ebdbb2;
border-color: #ebdbb2;
transition: none;
}
.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active {
background-color: #3c3638;
color: #fbf1c7;
border-color: #fbf1c7;
}
.btn-clickme,
.btn-clickme:focus {
border-radius: 0;
white-space: normal;
background-color: #1d2021;
color: #ebdbb2;
border-color: #ebdbb2;
transition: none;
}
.btn-clickme:hover,
.btn-clickme:active {
background-color: #3c3638;
color: #fbf1c7;
border-color: #fbf1c7;
animation: clickme 2s infinite;
}
@keyframes clickme {
0% {background-color: #b16286;}
14.28% {background-color: #458588;}
28.57% {background-color: #689d6a;}
42.85% {background-color: #98971a;}
57.14% {background-color: #d79921;}
71.42% {background-color: #d65d0e;}
85.71% {background-color: #cc241d;}
100% {background-color: #b16286;}
}

BIN
public/images/1.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
public/images/10.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
public/images/11.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
public/images/12.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
public/images/2.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
public/images/3.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
public/images/4.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
public/images/5.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
public/images/6.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
public/images/7.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/images/8.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/images/9.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/images/article.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
public/images/carte.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 242 KiB

View File

@ -0,0 +1,14 @@
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/baseLattice';
/**
* @return {jsx} a shader
*/
export default function BaseLattice() {
return (
<ShadertoyReact fs={fs} />
);
};

View File

@ -0,0 +1,39 @@
import React, {useState, useEffect} from 'react';
interface ClickMeProps {
windowSize: number;
setTrigger: any;
}
/**
* @return {jsx} a presentation of me
*/
export default function ClickMe({windowSize, setTrigger}: ClickMeProps) {
const [buttonClass, setButtonClass] = useState('');
useEffect(() => {
if (window.innerWidth > 1200) {
setButtonClass('btn-lg');
} else {
setButtonClass('');
}
}, [windowSize]);
return (
<div
className='
tile-child d-flex
flex-column
align-items-center
justify-content-center'
id='clickme'>
<button
type='button'
onClick={() => setTrigger(Math.random())}
className={'d-inline btn btn-clickme ' + buttonClass}>
Click me !
</button>
<br />
</div>
);
};

View File

@ -1,14 +1,14 @@
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/collapse';
/**
* @return {jsx} a shader
*/
export default function Collapse() {
return (
<ShadertoyReact fs={fs} />
);
};
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/collapse';
/**
* @return {jsx} a shader
*/
export default function Collapse() {
return (
<ShadertoyReact fs={fs} />
);
};

View File

@ -0,0 +1,37 @@
import React, {useState, useEffect} from 'react';
interface DownloadCVProps {
windowSize: number;
}
/**
* @return {jsx} a presentation of me
*/
export default function DownloadCV({windowSize}: DownloadCVProps) {
const [buttonClass, setButtonClass] = useState('');
useEffect(() => {
if (window.innerWidth > 1200) {
setButtonClass('btn-lg');
} else {
setButtonClass('');
}
}, [windowSize]);
return (
<div
className='
tile-child d-flex
flex-column
align-items-center
justify-content-center'
id='downloadcv'>
<a
href='https://git.gaetanbrochard.dev/gbrochar/expo-web'
className={'d-inline btn btn-mine ' + buttonClass}>
Download my CV
</a>
<br />
</div>
);
};

View File

@ -0,0 +1,45 @@
import React, {useState, useEffect} from 'react';
interface GitProps {
windowSize: number;
}
/**
* @return {jsx} a presentation of me
*/
export default function Git({windowSize}: GitProps) {
const [topClass, setTopClass] = useState('');
const [bottomClass, setBottomClass] = useState('');
useEffect(() => {
if (window.innerWidth > 1200) {
setTopClass('btn-lg mb-3');
setBottomClass('btn-lg mt-3');
} else {
setTopClass('mb-1');
setBottomClass('mt-1');
}
}, [windowSize]);
return (
<div
className='
tile-child d-flex
flex-column
align-items-center
justify-content-center'
id='git'>
<a
href='https://git.gaetanbrochard.dev/gbrochar/expo-web'
className={'d-inline btn btn-mine ' + topClass}>
This project&apos;s git
</a>
<br />
<a
href='https://git.gaetanbrochard.dev/gbrochar'
className={'d-inline btn btn-mine ' + bottomClass}>
My git
</a>
</div>
);
};

View File

@ -1,25 +1,86 @@
import React from 'react';
import React, {useState, useEffect, useCallback} from 'react';
import Shader from './Shader';
import WhoAmI from './WhoAmI';
import Git from './Git';
import DownloadCV from './DownloadCV';
import ClickMe from './ClickMe';
/**
* @return {jsx} The root component
*/
export default function Root() {
const [windowSize, setWindowSize] = useState(0);
const [trigger, setTrigger] = useState(0);
const [content, setContent]: any = useState([]);
const Shaders = [
'BaseRaymarching',
'Collapse',
'Droplets',
'Inception',
'Mentstom',
'Menstom',
'Torus',
'Triangle',
'BaseLattice',
];
const handleWindowResize = useCallback((_event) => {
setWindowSize(window.innerWidth);
}, []);
useEffect(() => {
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
}, [handleWindowResize]);
useEffect(() => {
let newContent = [];
let randomContent = [];
let shadersRandom = [];
let imagesRandom = [];
shadersRandom.push(Math.floor(Math.random() * 8));
shadersRandom.push(Math.floor(Math.random() * 8));
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[0]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[1]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[2]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[3]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[4]]} /></div>);
newContent.push(<div className='tile'><WhoAmI /></div>);
newContent.push(<div className='tile'><Git windowSize={windowSize} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[5]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[6]]} /></div>);
newContent.push(<div className='tile'><DownloadCV windowSize={windowSize} /></div>);
newContent.push(<div className='tile'><ClickMe windowSize={windowSize} setTrigger={setTrigger} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[7]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[8]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[9]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[10]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[11]]} /></div>);
setContent(newContent);
}, [trigger]);
return (
<div id='root'>
{content}
{/* <div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[1]} /></div>
<div className='tile'><Shader name={Shaders[2]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><WhoAmI /></div>
<div className='tile'><Git windowSize={windowSize} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><DownloadCV windowSize={windowSize} /></div>
<div className='tile'><ClickMe windowSize={windowSize} setTrigger={setTrigger} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div> */}
</div>
);
}

View File

@ -13,6 +13,8 @@ import Menstom from './Menstom';
import Collapse from './Collapse';
// @ts-ignore
import Torus from './Torus';
// @ts-ignore
import BaseLattice from './BaseLattice';
interface ShaderProps {
name: string;
@ -38,6 +40,8 @@ export default function Shader({name}: ShaderProps) {
Shader = <Collapse />;
} else if (name == 'Torus') {
Shader = <Torus />;
} else if (name == 'BaseLattice') {
Shader = <BaseLattice />;
}
return (

View File

@ -1,14 +1,14 @@
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/torus';
/**
* @return {jsx} a shader
*/
export default function Torus() {
return (
<ShadertoyReact fs={fs} />
);
};
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/torus';
/**
* @return {jsx} a shader
*/
export default function Torus() {
return (
<ShadertoyReact fs={fs} />
);
};

View File

@ -0,0 +1,19 @@
import React from 'react';
/**
* @return {jsx} a presentation of me
*/
export default function WhoAmI() {
return (
<div
className='
tile-child d-flex
flex-column
align-items-center
justify-content-center'
id='whoami'>
<div className='display-4 text-center'>Gaëtan Brochard</div>
<div className='lead text-center'>Developer</div>
</div>
);
};

View File

@ -0,0 +1,106 @@
export default `#define MAX_STEPS 1000
#define MAX_DIST 500.
#define E 0.000001
float sdCapsule(vec3 p, vec3 a, vec3 b, float r)
{
vec3 ab = b - a;
vec3 ap = p - a;
float t = dot(ab, ap) / dot(ab, ab);
t = clamp(t, 0., 1.);
vec3 c = a + t * ab;
return length(p - c) - r;
}
float sdTorus(vec3 p, vec2 r)
{
float x = length(p.xz) - r.x;
return length(vec2(x, p.y)) - r.y;
}
float sdBox(vec3 p, vec3 s)
{
return length(max(abs(p) - s, 0.));
}
float GetDist(vec3 p)
{
vec4 s = vec4(0, 0, 0, 2);
p.x += iTime;
float s_dist = (length(mod(p, 10.) - s.xyz) - s.w);
float b_dist1 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(0., sin(p.x * 0.2) * 2., sin(p.x * 0.2) * 2.), vec3(10., 0.5, 0.5)) * 0.3;
float b_dist2 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(sin(p.y * 0.2) * 2., 0., sin(p.y * 0.2) * 2.), vec3(0.5, 10., 0.5)) * 0.3;
float b_dist3 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(sin(p.z * 0.2) * 2., sin(p.z * 0.2) * 2., 0.), vec3(0.5, 0.5, 10.)) * 0.3;
float d = min(b_dist1, b_dist2);
d = min(d, b_dist3);
return d;
}
float RayMarch(vec3 ro, vec3 rd) {
float dO = 0.;
for (int i = 0; i < MAX_STEPS; i++)
{
vec3 p = ro + rd * dO;
float dS = GetDist(p);
dO += dS;
if (dO > MAX_DIST || dS < E)
break;
}
return dO;
}
vec3 GetNormal(vec3 p)
{
float d = GetDist(p);
vec2 e = vec2(0.3, 0);
vec3 n = d - vec3(
GetDist(p - e.xyy),
GetDist(p - e.yxy),
GetDist(p - e.yyx));
return (normalize(n));
}
float GetLight(vec3 p)
{
vec3 lightPos = vec3(0, 10, iTime* 3.);
lightPos.xz += vec2(sin(iTime), cos(iTime)) * 5.;
vec3 l = normalize(lightPos - p);
vec3 n = GetNormal(p);
float dif = clamp(dot(l, n), 0., 1.);
//float d = RayMarch(p+n*E * 30., l);
//if (d < length(lightPos - p))
// dif *= 0.1;
return (dif);
}
vec2 rotate(vec2 p, float theta)
{
return vec2(cos(p.x) - sin(p.y), sin(p.x) + cos(p.y));
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = ((fragCoord - .5 * iResolution.xy) / iResolution.y);
vec3 up = normalize(vec3(cos(iTime), sin(iTime), 0));
vec3 ro = vec3(5. + cos(iTime), 5. + sin(iTime), iTime* 3.);
vec3 rd = normalize(vec3(uv.x + 1., uv.y + 1., 1 + 1));
float d = RayMarch(ro, rd);
vec3 p = ro + rd * d;
float dif = GetLight(p);
vec3 col = vec3(abs(mod((p.x + sin(iTime))/ 10., 1.) - 0.5) * dif, abs(mod((p.y + sin(iTime)) / 10., 1.) - 0.5) * dif, abs(mod((p.z + sin(iTime)) / 10., 1.) - 0.5) * dif);
//col = myvec;
fragColor = vec4(col,1.0);
}`;

View File

@ -1,106 +1,144 @@
export default `#define MAX_STEPS 1000
#define MAX_DIST 500.
#define E 0.000001
export default `
#define MAX_STEPS 1280
#define MAX_DIST 128.
#define E 0.0001
#define PI 3.141592
float sdCapsule(vec3 p, vec3 a, vec3 b, float r)
vec3 rotX(vec3 v, float a)
{
vec3 ab = b - a;
vec3 ap = p - a;
float t = dot(ab, ap) / dot(ab, ab);
t = clamp(t, 0., 1.);
vec3 c = a + t * ab;
return length(p - c) - r;
return vec3(v.x, v.y * cos(a) - v.z * sin(a), v.y * sin(a) + v.z * cos(a));
}
float sdTorus(vec3 p, vec2 r)
vec3 rotY(vec3 v, float a)
{
return vec3(v.x * cos(a) + v.z * sin(a), v.y, v.z * cos(a) - v.x * sin(a));
}
vec3 rotZ(vec3 v, float a)
{
return vec3(v.x * cos(a) - v.y * sin(a), v.x * sin(a) + v.y * cos(a), v.z);
}
vec3 modSDF(vec3 p, vec3 c)
{
return mod(p + 0.5 * c, c) - 0.5 * c;
}
float sdfTorus(vec3 p, vec2 r)
{
float x = length(p.xz) - r.x;
return length(vec2(x, p.y)) - r.y;
}
float sdBox(vec3 p, vec3 s)
// blackbody by aiekick : https://www.shadertoy.com/view/lttXDn
// -------------blackbody----------------- //
// return color from temperature
//http://www.physics.sfasu.edu/astro/color/blackbody.html
//http://www.vendian.org/mncharity/dir3/blackbody/
//http://www.vendian.org/mncharity/dir3/blackbody/UnstableURLs/bbr_color.html
vec3 blackbody(float Temp)
{
return length(max(abs(p) - s, 0.));
vec3 col = vec3(255.);
col.x = 56100000. * pow(Temp,(-3. / 2.)) + 148.;
col.y = 100.04 * log(Temp) - 623.6;
if (Temp > 6500.) col.y = 35200000. * pow(Temp,(-3. / 2.)) + 184.;
col.z = 194.18 * log(Temp) - 1448.6;
col = clamp(col, 0., 255.)/255.;
if (Temp < 1000.) col *= Temp/1000.;
return col;
}
float GetDist(vec3 p)
// -------------blackbody----------------- //
float scene(vec3 p)
{
vec4 s = vec4(0, 0, 0, 2);
p.x += iTime;
float s_dist = (length(mod(p, 10.) - s.xyz) - s.w);
float b_dist1 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(0., sin(p.x * 0.2) * 2., sin(p.x * 0.2) * 2.), vec3(10., 0.5, 0.5)) * 0.3;
float b_dist2 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(sin(p.y * 0.2) * 2., 0., sin(p.y * 0.2) * 2.), vec3(0.5, 10., 0.5)) * 0.3;
float b_dist3 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(sin(p.z * 0.2) * 2., sin(p.z * 0.2) * 2., 0.), vec3(0.5, 0.5, 10.)) * 0.3;
float d = min(b_dist1, b_dist2);
d = min(d, b_dist3);
float td1 = sdfTorus(
modSDF(
rotX(
p - vec3(3. + cos(p.x * 10. + iTime) / 3., sin(p.y * 10. + iTime) / 3., 6.),
PI / 2.),
vec3(6.)), vec2(2., abs(sin(iTime)) * 0.2 + 0.1)) * 0.1;
float td2 = sdfTorus(
modSDF(
rotZ(
rotX(
p - vec3(3. + cos(p.x * 10. + iTime) / 3., -3. + sin(p.y * 10. + iTime) / 3., 6.), PI / 2.), PI / 2.), vec3(6.)), vec2(2., abs(cos(iTime)) * 0.2 + 0.1))* 0.1;
float td3 = sdfTorus(
modSDF(
rotZ(
p - vec3(cos(p.x * 10. + iTime) / 3., sin(p.y * 10. + iTime) / 3., 3.), PI / 2.), vec3(6.)), vec2(2., abs(sin(iTime)) * 0.2 + 0.1))* 0.1;
float td4 = sdfTorus(modSDF(p + vec3(cos(p.x * 10. + iTime) / 3., sin(p.y * 10. + iTime) / 3., -6.), vec3(6.)), vec2(2., abs(cos(iTime)) * 0.2 + 0.1))* 0.1;
//float td2 = 10000.;
float d = min(td1, td2);
d = min(d, td3);
d = min(d, td4);
return d;
}
float RayMarch(vec3 ro, vec3 rd) {
float march(vec3 ro, vec3 rd)
{
float dO = 0.;
for (int i = 0; i < MAX_STEPS; i++)
for (int steps = 0; steps < MAX_STEPS; steps++)
{
vec3 p = ro + rd * dO;
float dS = GetDist(p);
float dS = scene(p);
dO += dS;
if (dO > MAX_DIST || dS < E)
break;
if (dS < E || dO > MAX_DIST)
break;
}
return dO;
}
vec3 GetNormal(vec3 p)
vec3 normal(vec3 p)
{
float d = GetDist(p);
float d = scene(p);
vec2 e = vec2(0.3, 0);
vec3 n = d - vec3(
GetDist(p - e.xyy),
GetDist(p - e.yxy),
GetDist(p - e.yyx));
scene(p - e.xyy),
scene(p - e.yxy),
scene(p - e.yyx));
return (normalize(n));
}
float GetLight(vec3 p)
float light(vec3 p)
{
vec3 lightPos = vec3(0, 10, iTime* 3.);
lightPos.xz += vec2(sin(iTime), cos(iTime)) * 5.;
vec3 lightPos = vec3(0., 0., 0.);
vec3 l = normalize(lightPos - p);
vec3 n = GetNormal(p);
float dif = clamp(dot(l, n), 0., 1.);
//float d = RayMarch(p+n*E * 30., l);
//if (d < length(lightPos - p))
// dif *= 0.1;
return (dif);
}
vec3 n = normal(p);
vec2 rotate(vec2 p, float theta)
{
return vec2(cos(p.x) - sin(p.y), sin(p.x) + cos(p.y));
float dif = clamp(dot(l, n), 0., 1.);
// float d = march(p+n*E * 30., l);
// if (d < length(lightPos - p))
// dif *= 0.1;
return (dif);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = ((fragCoord - .5 * iResolution.xy) / iResolution.y);
vec3 up = normalize(vec3(cos(iTime), sin(iTime), 0));
vec3 ro = vec3(5. + cos(iTime), 5. + sin(iTime), iTime* 3.);
vec3 rd = normalize(vec3(uv.x + 1., uv.y + 1., 1 + 1));
float d = RayMarch(ro, rd);
vec3 ro = vec3(7., 7., iTime);
vec3 rd = normalize(vec3(uv.x, uv.y, 1));
rd = rotX(rd, iTime * 0.256);
rd = rotY(rd, iTime * 0.314);
rd = rotZ(rd, iTime * 0.1618);
//rd = rotX(rd, PI / 2.);
float d = march(ro, rd);
vec3 p = ro + rd * d;
float dif = GetLight(p);
vec3 col = vec3(abs(mod((p.x + sin(iTime))/ 10., 1.) - 0.5) * dif, abs(mod((p.y + sin(iTime)) / 10., 1.) - 0.5) * dif, abs(mod((p.z + sin(iTime)) / 10., 1.) - 0.5) * dif);
//col = myvec;
fragColor = vec4(col,1.0);
}`;
float dif = light(p);
vec3 col = vec3(dif);
col = blackbody(d * 10.);
col += vec3(abs(mod((p.x + sin(iTime))/ 10., 1.) - 0.5) * dif, abs(mod((p.y + sin(iTime)) / 10., 1.) - 0.5) * dif, abs(mod((p.z + sin(iTime)) / 10., 1.) - 0.5) * dif);
// Output to screen
col = pow(col, vec3(0.454545));
fragColor = vec4(col, 1.0);
}`

View File

@ -6,6 +6,7 @@
<meta name="Description" content="Web version of digital art exhibition">
<title>Web-Expo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>