├── favicon.ico ├── .gitignore ├── postcss.config.js ├── src ├── assets │ ├── fonts │ │ ├── pnb.ttf │ │ ├── pnb.woff2 │ │ ├── pnr.woff │ │ ├── pnr.woff2 │ │ ├── proxima_nova_thin.woff │ │ └── proxima_nova_thin.woff2 │ ├── images │ │ ├── js.png │ │ ├── php.png │ │ ├── sass.png │ │ ├── adobe.png │ │ ├── cypress.png │ │ ├── reactjs.png │ │ ├── saturn.png │ │ ├── shopify.png │ │ ├── webpack.png │ │ ├── prestashop.png │ │ ├── face.svg │ │ └── saturn.svg │ ├── scss │ │ ├── _variables.scss │ │ ├── base.scss │ │ ├── _fonts.scss │ │ ├── sections │ │ │ ├── _about.scss │ │ │ ├── _home.scss │ │ │ ├── _contact.scss │ │ │ └── _skills.scss │ │ └── partials │ │ │ ├── _layout.scss │ │ │ ├── _utilities.scss │ │ │ ├── _footer.scss │ │ │ └── _header.scss │ ├── sounds │ │ ├── cursor-loot.mp3 │ │ ├── laser-beam.mp3 │ │ ├── asteroid-spawn.mp3 │ │ ├── cursor-damage.mp3 │ │ └── asteroid-explode.mp3 │ ├── javascripts │ │ ├── classes │ │ │ ├── space.js │ │ │ ├── ball.js │ │ │ ├── ui.js │ │ │ ├── loot.js │ │ │ ├── explosion.js │ │ │ ├── skill.js │ │ │ ├── gravity.js │ │ │ ├── cursor.js │ │ │ └── asteroid.js │ │ ├── skills.js │ │ ├── common │ │ │ └── utils.js │ │ ├── controllers │ │ │ ├── balls.js │ │ │ ├── loots.js │ │ │ ├── explosions.js │ │ │ ├── scores.js │ │ │ ├── levels.js │ │ │ ├── sounds.js │ │ │ ├── bullets.js │ │ │ └── asteroids.js │ │ ├── footer.js │ │ ├── about.js │ │ ├── header.js │ │ ├── components │ │ │ └── SkillsComponent.js │ │ └── main.js │ └── stylesheets │ │ └── base.css ├── index.js └── index.html ├── repository-open-graph-template.png ├── config ├── webpack.dev.config.js ├── webpack.prod.config.js └── webpack.common.config.js ├── README.md ├── webpack.config.js ├── .github └── workflows │ └── static.yml ├── package.json └── LICENSE /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .thumbs 3 | .DS_STORE 4 | .idea 5 | node_modules 6 | dist/ 7 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /src/assets/fonts/pnb.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/fonts/pnb.ttf -------------------------------------------------------------------------------- /src/assets/images/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/js.png -------------------------------------------------------------------------------- /src/assets/fonts/pnb.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/fonts/pnb.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/pnr.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/fonts/pnr.woff -------------------------------------------------------------------------------- /src/assets/fonts/pnr.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/fonts/pnr.woff2 -------------------------------------------------------------------------------- /src/assets/images/php.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/php.png -------------------------------------------------------------------------------- /src/assets/images/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/sass.png -------------------------------------------------------------------------------- /src/assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | $primary: #fff; 3 | $secondary: red; 4 | 5 | $easing: ease 0.2s all; 6 | 7 | -------------------------------------------------------------------------------- /src/assets/images/adobe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/adobe.png -------------------------------------------------------------------------------- /src/assets/images/cypress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/cypress.png -------------------------------------------------------------------------------- /src/assets/images/reactjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/reactjs.png -------------------------------------------------------------------------------- /src/assets/images/saturn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/saturn.png -------------------------------------------------------------------------------- /src/assets/images/shopify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/shopify.png -------------------------------------------------------------------------------- /src/assets/images/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/webpack.png -------------------------------------------------------------------------------- /repository-open-graph-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/repository-open-graph-template.png -------------------------------------------------------------------------------- /src/assets/images/prestashop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/images/prestashop.png -------------------------------------------------------------------------------- /src/assets/sounds/cursor-loot.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/sounds/cursor-loot.mp3 -------------------------------------------------------------------------------- /src/assets/sounds/laser-beam.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/sounds/laser-beam.mp3 -------------------------------------------------------------------------------- /src/assets/sounds/asteroid-spawn.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/sounds/asteroid-spawn.mp3 -------------------------------------------------------------------------------- /src/assets/sounds/cursor-damage.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/sounds/cursor-damage.mp3 -------------------------------------------------------------------------------- /src/assets/fonts/proxima_nova_thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/fonts/proxima_nova_thin.woff -------------------------------------------------------------------------------- /src/assets/sounds/asteroid-explode.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/sounds/asteroid-explode.mp3 -------------------------------------------------------------------------------- /src/assets/fonts/proxima_nova_thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/francoispeyret/portfolio-2020/HEAD/src/assets/fonts/proxima_nova_thin.woff2 -------------------------------------------------------------------------------- /config/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const webpackBaseConfig = require('./webpack.common.config.js') 3 | 4 | module.exports = merge(webpackBaseConfig, {}) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![François PEYRET Preview](https://github.com/francoispeyret/portfolio-2020/blob/master/repository-open-graph-template.png) 2 | 3 | # François PEYRET - Portfolio 2020 4 | 5 | Website available on https://www.francoispeyret.fr/ 6 | 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import '@scss/base.scss'; 2 | 3 | import '@/assets/javascripts/main'; 4 | import '@/assets/javascripts/header'; 5 | import '@/assets/javascripts/footer'; 6 | import '@/assets/javascripts/about'; 7 | import '@/assets/javascripts/skills'; 8 | 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const environment = (process.env.NODE_ENV || 'development').trim(); 2 | 3 | if (environment === 'development') { 4 | module.exports = require('./config/webpack.dev.config.js'); 5 | } else { 6 | console.log('In PROD') 7 | module.exports = require('./config/webpack.prod.config.js'); 8 | } -------------------------------------------------------------------------------- /src/assets/javascripts/classes/space.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class Space extends React.Component { 4 | 5 | render() { 6 | return ( 7 |
  • 10 | ); 11 | } 12 | } 13 | 14 | export default Space; 15 | -------------------------------------------------------------------------------- /src/assets/scss/base.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "variables"; 3 | @import "fonts"; 4 | 5 | @import "partials/utilities"; 6 | @import "partials/layout"; 7 | @import "partials/header"; 8 | @import "partials/footer"; 9 | 10 | @import "sections/about"; 11 | @import "sections/contact"; 12 | @import "sections/home"; 13 | @import "sections/skills"; 14 | -------------------------------------------------------------------------------- /src/assets/javascripts/skills.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import loadable from '@loadable/component' 4 | 5 | const App = loadable(() => import('./components/SkillsComponent')); 6 | 7 | const rootElement = document.getElementById("skill-root"); 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | rootElement 13 | ); 14 | -------------------------------------------------------------------------------- /src/assets/scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Proxima'; 3 | src: url('../fonts/pnr.woff2') format('woff2'), 4 | url('../fonts/pnr.woff') format('woff'); 5 | font-weight: 400; 6 | font-display: swap; 7 | } 8 | @font-face { 9 | font-family: 'Proxima'; 10 | src: url('../fonts/pnb.woff2') format('woff2'), 11 | url('../fonts/pnb.ttf') format('ttf'); 12 | font-weight: 800; 13 | font-display: swap; 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/images/face.svg: -------------------------------------------------------------------------------- 1 | astronaught 2 | -------------------------------------------------------------------------------- /src/assets/javascripts/common/utils.js: -------------------------------------------------------------------------------- 1 | function objectNoLimit(object) { 2 | if (object.pos.x < 0 - object.w * 4) { 3 | object.pos.x = object._.width + object.w; 4 | } else if (object.pos.x > object._.width + object.w * 4) { 5 | object.pos.x = 0 - object.w; 6 | } 7 | 8 | if (object.pos.y < 0 - object.w * 4) { 9 | object.pos.y = object._.height + object.w; 10 | } else if (object.pos.y > object._.height + object.w * 4) { 11 | object.pos.y = 0 - object.w; 12 | } 13 | } 14 | 15 | export default objectNoLimit; 16 | -------------------------------------------------------------------------------- /src/assets/javascripts/controllers/balls.js: -------------------------------------------------------------------------------- 1 | 2 | import Ball from "../classes/ball"; 3 | 4 | class BallsController { 5 | constructor(_) { 6 | this.balls = []; 7 | for (let i = 0; i < 33; i++) { 8 | this.balls[i] = new Ball(_); 9 | } 10 | } 11 | 12 | show() { 13 | for (let i = 0; i < this.balls.length; i++) { 14 | this.balls[i].show(); 15 | } 16 | } 17 | 18 | update() { 19 | for (let i = 0; i < this.balls.length; i++) { 20 | this.balls[i].update(); 21 | } 22 | } 23 | 24 | } 25 | 26 | export default BallsController; -------------------------------------------------------------------------------- /config/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 3 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 4 | const webpackBaseConfig = require('./webpack.common.config.js'); 5 | 6 | 7 | module.exports = merge(webpackBaseConfig, { 8 | optimization: { 9 | minimizer: [ 10 | new UglifyJsPlugin(), 11 | new OptimizeCSSAssetsPlugin() 12 | ] 13 | } 14 | }); 15 | module.exports = merge(webpackBaseConfig, { 16 | plugins: [ 17 | new HTMLInlineCSSWebpackPlugin({ 18 | replace: { 19 | removeTarget: true, 20 | target: '', 21 | }, 22 | }), 23 | ] 24 | }); -------------------------------------------------------------------------------- /src/assets/javascripts/controllers/loots.js: -------------------------------------------------------------------------------- 1 | 2 | import Loot from "../classes/loot"; 3 | 4 | class LootsController { 5 | constructor(_) { 6 | this._ = _; 7 | this.loots = []; 8 | } 9 | 10 | show() { 11 | 12 | for (let o = 0; o < this.loots.length; o++) { 13 | this.loots[o].show(); 14 | } 15 | } 16 | 17 | update() { 18 | 19 | for (let o = 0; o < this.loots.length; o++) { 20 | this.loots[o].update(); 21 | } 22 | } 23 | 24 | lootRemove(index) { 25 | this.loots.splice(index, 1); 26 | } 27 | 28 | lootCreate(position) { 29 | if(this._.random(0,5) > 2) { 30 | this.loots.push( 31 | new Loot(this._, position) 32 | ); 33 | } 34 | } 35 | } 36 | 37 | export default LootsController; 38 | -------------------------------------------------------------------------------- /src/assets/javascripts/classes/ball.js: -------------------------------------------------------------------------------- 1 | 2 | import objectNoLimit from "../common/utils"; 3 | 4 | class Ball { 5 | constructor(_) { 6 | this._ = _; 7 | this.pos = this._.createVector( 8 | this._.random(0, this._.width), 9 | this._.random(0, this._.height) 10 | ); 11 | this.w = Math.floor(this._.random(2, 12)); 12 | this.vel = this._.createVector( 13 | this._.randomGaussian(.75, -.75), 14 | this._.randomGaussian(.75, -.75) 15 | ); 16 | } 17 | 18 | show() { 19 | this._.stroke(255, this._.map(this.w, 2, 16, 15, 70)); 20 | this._.strokeWeight(this.w); 21 | this._.point(this.pos.x, this.pos.y); 22 | } 23 | 24 | update() { 25 | this.pos.add(this.vel); 26 | objectNoLimit(this); 27 | } 28 | } 29 | 30 | export default Ball; 31 | -------------------------------------------------------------------------------- /src/assets/javascripts/controllers/explosions.js: -------------------------------------------------------------------------------- 1 | import Explosion from '../classes/explosion'; 2 | 3 | class ExplosionsController { 4 | constructor(_) { 5 | this._ = _; 6 | this.explosions = []; 7 | } 8 | 9 | show() { 10 | for (let i = 0; i < this.explosions.length; i++) { 11 | this.explosions[i].show(); 12 | } 13 | } 14 | 15 | update() { 16 | for (let i = 0; i < this.explosions.length; i++) { 17 | this.explosions[i].update(); 18 | if(this.explosions[i].lifeAnimation < -100) { 19 | this.explosions.splice(i, 1); 20 | } 21 | } 22 | } 23 | 24 | createExplosion(position, size) { 25 | this.explosions.push( 26 | new Explosion(this._, position, size) 27 | ); 28 | } 29 | 30 | } 31 | 32 | export default ExplosionsController; -------------------------------------------------------------------------------- /src/assets/javascripts/classes/ui.js: -------------------------------------------------------------------------------- 1 | class Ui { 2 | constructor(_) { 3 | this._ = _; 4 | } 5 | 6 | show(cursor, levelsController, scoresController) { 7 | 8 | // SCORING $$$ 9 | this._.noStroke(); 10 | this._.fill(255); 11 | this._.textAlign(this._.LEFT); 12 | this._.textSize(28); 13 | this._.text('€' + scoresController.scoring, 25, 110); 14 | this._.textSize(14); 15 | this._.text('LVL' + levelsController.level, 25, 160); 16 | 17 | // LIFEs 18 | this._.noFill(); 19 | this._.stroke(255); 20 | for (let o = 0; o < 3; o++) { 21 | if (o < cursor.life) { 22 | this._.fill(255); 23 | } else { 24 | this._.noFill(); 25 | } 26 | this._.rect(25 + (o * 15), 121, 8, 18); 27 | } 28 | this._.stroke(255); 29 | this._.noFill(); 30 | 31 | } 32 | } 33 | 34 | export default Ui; -------------------------------------------------------------------------------- /src/assets/javascripts/footer.js: -------------------------------------------------------------------------------- 1 | import Typewriter from "typewriter-effect/dist/core"; 2 | 3 | let launched = false; 4 | window.addEventListener('scroll', windowFooterScroll); 5 | 6 | function windowFooterScroll() { 7 | const windowScrollTop = document.getElementsByTagName('html')[0].scrollTop; 8 | const windowHeight = document.getElementsByTagName('html')[0].offsetHeight; 9 | 10 | if(windowScrollTop + window.innerHeight - windowHeight > - 50 && launched === false) { 11 | launched = true; 12 | new Typewriter('.bravo', { 13 | strings: `Bravo!
    14 | You made it
    to the footer.
    15 | Here's a 🍰 and now you can take a rest.`, 16 | autoStart: true, 17 | delay: 25 18 | }).callFunction(cakeIsALie); 19 | } 20 | } 21 | 22 | function cakeIsALie() { 23 | document.querySelector('.cake').addEventListener('click', function(){ 24 | new Typewriter('.bravo', { 25 | strings: 'The Cake is a lie...', 26 | autoStart: true 27 | }); 28 | }); 29 | } 30 | -------------------------------------------------------------------------------- /src/assets/javascripts/classes/loot.js: -------------------------------------------------------------------------------- 1 | 2 | import objectNoLimit from "../common/utils"; 3 | 4 | class Loot { 5 | constructor(_, pos) { 6 | this._ = _; 7 | this.pos = this._.createVector( 8 | pos.x, 9 | pos.y 10 | ); 11 | this.vel = this._.createVector( 12 | this._.randomGaussian(.3, -.3), 13 | this._.randomGaussian(.3, -.3) 14 | ); 15 | this.angle = this._.random(0, this._.TWO_PI); 16 | this.angleVel = this._.random(-this._.QUARTER_PI / 30, this._.QUARTER_PI / 30); 17 | this.w = 30; 18 | this.width = 30; 19 | } 20 | 21 | show() { 22 | this._.noFill(); 23 | this._.stroke(255); 24 | this._.strokeWeight(2); 25 | this._.push(); 26 | this._.translate(this.pos.x, this.pos.y); 27 | this._.rotate(this.angle); 28 | this._.rect(-15, -15, 30, 30); 29 | this._.rect(-8, -15, 16, 30); 30 | this._.pop(); 31 | } 32 | 33 | update() { 34 | this.angle += this.angleVel; 35 | this.pos.add(this.vel); 36 | objectNoLimit(this); 37 | } 38 | } 39 | 40 | export default Loot; 41 | -------------------------------------------------------------------------------- /src/assets/javascripts/classes/explosion.js: -------------------------------------------------------------------------------- 1 | 2 | class Explosion { 3 | constructor(_,pos,w) { 4 | this._ = _; 5 | this.pos = this._.createVector( 6 | pos.x, 7 | pos.y 8 | ); 9 | this.lifeAnimation = 50; 10 | this.dots = []; 11 | for(let i = 0; i < 9; i++) { 12 | this.dots.push({ 13 | x:this._.sin(i)*this.lifeAnimation, 14 | y:this._.cos(i)*this.lifeAnimation, 15 | alpha: this._.random(200,255), 16 | vel: this._.random(-1-w/30,-6-w/30), 17 | life: w/2 18 | }) 19 | } 20 | } 21 | 22 | show() { 23 | this._.strokeWeight(5); 24 | for(let i = 0; i < this.dots.length; i++) { 25 | this._.stroke(255, this.dots[i].alpha); 26 | this._.point(this.pos.x-this.dots[i].x, this.pos.y-this.dots[i].y); 27 | } 28 | } 29 | 30 | update() { 31 | this.lifeAnimation = this.lifeAnimation - 5; 32 | for(let i = 0; i < this.dots.length; i++) { 33 | this.dots[i].life = this.dots[i].life - this.dots[i].vel; 34 | this.dots[i].x = this._.sin(i)*this.dots[i].life; 35 | this.dots[i].y = this._.cos(i)*this.dots[i].life; 36 | this.dots[i].alpha -= this._.random(3,10); 37 | } 38 | } 39 | } 40 | 41 | export default Explosion; 42 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["master"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v5 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /src/assets/scss/sections/_about.scss: -------------------------------------------------------------------------------- 1 | #about { 2 | max-width: 640px; 3 | margin-left: 20vw; 4 | @media (max-width: 769px) { 5 | margin-left: 10vw; 6 | max-width: 260px; 7 | } 8 | 9 | h2 { 10 | font-size: 3.6rem; 11 | position: relative; 12 | @media (max-width: 769px) { 13 | font-size: 2.2rem; 14 | } 15 | 16 | .face { 17 | fill: white; 18 | width: 48px; 19 | height: 48px; 20 | display: block; 21 | position: absolute; 22 | left: -64px; 23 | top: 8px; 24 | @media (max-width: 769px) { 25 | height: 32px; 26 | width: 32px; 27 | top: 4px; 28 | left: -48px; 29 | } 30 | } 31 | } 32 | 33 | p { 34 | text-transform: uppercase; 35 | font-size: 2rem; 36 | line-height: 1; 37 | @media (max-width: 769px) { 38 | font-size: 1.8rem; 39 | } 40 | } 41 | 42 | .tags { 43 | svg { 44 | padding: 5px; 45 | width: 32px; 46 | height: 32px; 47 | cursor: pointer; 48 | fill: #fff; 49 | opacity: 0.3; 50 | transition: $easing; 51 | margin: 0; 52 | 53 | &:hover { 54 | opacity: 1; 55 | } 56 | 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /src/assets/javascripts/about.js: -------------------------------------------------------------------------------- 1 | import { createPopper } from '@popperjs/core'; 2 | 3 | const buttons = document.querySelectorAll('.tooltip-button'); 4 | 5 | let popperInstance = []; 6 | 7 | function create(button,tooltip) { 8 | popperInstance[tooltip.id] = createPopper(button, tooltip, { 9 | placement: 'bottom', 10 | modifiers: [ 11 | { 12 | name: 'offset', 13 | options: { 14 | offset: [0, 8], 15 | }, 16 | }, 17 | ], 18 | }); 19 | } 20 | 21 | function destroy(tooltip) { 22 | if (popperInstance[tooltip.id]) { 23 | popperInstance[tooltip.id].destroy(); 24 | popperInstance[tooltip.id] = null; 25 | } 26 | } 27 | 28 | function show() { 29 | const tooltip = document.querySelector('#'+this.dataset.tooltipTarget); 30 | tooltip.setAttribute('data-show', ''); 31 | create(this,tooltip); 32 | } 33 | 34 | function hide() { 35 | const tooltip = document.querySelector('#'+this.dataset.tooltipTarget); 36 | tooltip.removeAttribute('data-show'); 37 | destroy(tooltip); 38 | } 39 | 40 | const showEvents = ['mouseenter', 'focus']; 41 | const hideEvents = ['mouseleave', 'blur']; 42 | 43 | showEvents.forEach(event => { 44 | for(let button of buttons) { 45 | button.addEventListener(event, show); 46 | } 47 | }); 48 | 49 | hideEvents.forEach(event => { 50 | for(let button of buttons) { 51 | button.addEventListener(event, hide); 52 | } 53 | }); 54 | -------------------------------------------------------------------------------- /src/assets/scss/partials/_layout.scss: -------------------------------------------------------------------------------- 1 | main, 2 | footer, 3 | header { 4 | padding: 1.5rem; 5 | } 6 | 7 | main { 8 | padding-top: 0; 9 | 10 | @media (max-width: 769px) { 11 | opacity: 1; 12 | filter: none; 13 | transition: ease-in-out 0.2s all; 14 | &.menu-active { 15 | opacity: 0.15; 16 | filter: blur(5px); 17 | } 18 | } 19 | } 20 | 21 | header { 22 | position: fixed; 23 | z-index: 99; 24 | top: 0; 25 | right: 0; 26 | left: 0; 27 | > * { 28 | position: relative; 29 | z-index: 1; 30 | } 31 | } 32 | 33 | main { 34 | .heading { 35 | text-align: center; 36 | margin-top: calc(3rem + 100px); 37 | h1 { 38 | font-size: 3.6rem; 39 | @media (max-width: 769px) { 40 | font-size: 2.2rem; 41 | } 42 | 43 | } 44 | svg { 45 | display: inline-block; 46 | fill: #fff; 47 | height: 48px; 48 | width: 48px; 49 | position: relative; 50 | top: 0.25rem; 51 | @media (max-width: 769px) { 52 | height: 32px; 53 | width: 32px; 54 | } 55 | } 56 | 57 | .seat { 58 | transform: scaleX(-1) translateX(-0.5rem); 59 | } 60 | } 61 | 62 | section { 63 | min-height: calc(100vh - 100px); 64 | padding-top: 100px; 65 | padding-bottom: 100px; 66 | } 67 | } -------------------------------------------------------------------------------- /src/assets/javascripts/controllers/scores.js: -------------------------------------------------------------------------------- 1 | class ScoresController { 2 | constructor(_) { 3 | this._ = _; 4 | this.scores = []; 5 | this.scoring = 0; 6 | } 7 | 8 | show() { 9 | for (let s = 0; s < this.scores.length; s++) { 10 | const amoutFontSize = this._.map(this.scores[s].amount, 40, 100, 14, 22); 11 | this._.noStroke(); 12 | this._.fill(255, this.scores[s].life/2); 13 | this._.textSize(amoutFontSize); 14 | this._.text('+' + this.scores[s].amount, this.scores[s].pos.x, this.scores[s].pos.y); 15 | } 16 | } 17 | 18 | update() { 19 | for (let s = 0; s < this.scores.length; s++) { 20 | this.scores[s].pos.add(this._.createVector(0, -0.5)); 21 | this.scores[s].life-=6; 22 | if (this.scores[s].life <= 0) { 23 | this.scoreRemove(s); 24 | s--; 25 | } 26 | } 27 | } 28 | 29 | scoreCreate(amount, position) { 30 | if (amount > 0) { 31 | this.scoring += amount; 32 | let scoreTextPos = this._.createVector(position.x, position.y); 33 | scoreTextPos.add(this._.createVector(this._.random(-40, 40), this._.random(40, -40))) 34 | this.scores.push({ 35 | pos: scoreTextPos, 36 | amount: amount, 37 | life: 505 38 | }); 39 | } 40 | } 41 | 42 | scoreRemove(index) { 43 | this.scores.splice(index, 1); 44 | } 45 | 46 | 47 | } 48 | 49 | export default ScoresController -------------------------------------------------------------------------------- /src/assets/javascripts/classes/skill.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class Skill extends React.Component { 4 | state = { 5 | hover: false 6 | } 7 | 8 | constructor() { 9 | super(); 10 | this.handleMouseEnter = this.handleMouseEnter.bind(this); 11 | this.handleMouseLeave = this.handleMouseLeave.bind(this); 12 | } 13 | 14 | handleMouseEnter() { 15 | this.setState({ 16 | hover: true 17 | }) 18 | } 19 | handleMouseLeave() { 20 | this.setState({ 21 | hover: false 22 | }) 23 | } 24 | 25 | render() { 26 | const name = 27 | this.props.sort === 'grid' ? 28 | this.props.name.slice(0, 2) : 29 | this.props.name; 30 | return ( 31 |
  • 37 |
    38 | {this.props.i} 39 |
    40 |
    41 | {name} 42 |
    43 |
    44 |
    45 | {this.props.name} 46 |
    47 |
    48 | {this.props.w} 49 |
    50 |
    51 |
    • 52 | ); 53 | } 54 | } 55 | 56 | export default Skill; 57 | -------------------------------------------------------------------------------- /src/assets/javascripts/controllers/levels.js: -------------------------------------------------------------------------------- 1 | import BulletsController from './bullets'; 2 | 3 | class LevelsController { 4 | constructor(_) { 5 | this._ = _; 6 | this.level = 1; 7 | this.introAnimation = 90; 8 | this.startingAnimation = 90; 9 | } 10 | 11 | show() { 12 | if (this.animationInProgress()) { 13 | this._.fill(255); 14 | //const levelTextSize = this._.map(this.introAnimation, 90, 1, 0, 48); 15 | this._.textSize(48); 16 | this._.textAlign(this._.CENTER); 17 | this._.text('LEVEL' + this.level, this._.width / 2, this._.height / 2); 18 | } 19 | 20 | if (this.startingAnimation > 1 && !this.animationInProgress()) { 21 | this.startingAnimation--; 22 | const scalingAnimation = this._.map(this.startingAnimation, 90, 1, 0, 1), 23 | translateAnimationX = this._.map(this.startingAnimation, 90, 1, this._.width / 2, 0), 24 | translateAnimationY = this._.map(this.startingAnimation, 90, 1, this._.height / 2, 0); 25 | 26 | this._.translate(translateAnimationX, translateAnimationY); 27 | this._.scale(scalingAnimation, scalingAnimation); 28 | } 29 | } 30 | 31 | update(asteroidsController) { 32 | if (this.animationInProgress()) { 33 | this.introAnimation--; 34 | if (this.introAnimation <= 1) { 35 | asteroidsController.asteroidsSpawn(this); 36 | } 37 | return; 38 | } 39 | } 40 | 41 | animationInProgress() { 42 | return this.introAnimation > 1; 43 | } 44 | 45 | getAsteroidsMaximum() { 46 | return this._.map(this.level, 1, 3, 8, 25); 47 | } 48 | 49 | levelUpStage(bulletsController) { 50 | this.level++; 51 | this.introAnimation = 90; 52 | this.startingAnimation = 90; 53 | this.levelAsteroidsMaximum = this.getAsteroidsMaximum(); 54 | bulletsController = new BulletsController(this._); 55 | } 56 | } 57 | 58 | export default LevelsController; -------------------------------------------------------------------------------- /src/assets/javascripts/controllers/sounds.js: -------------------------------------------------------------------------------- 1 | 2 | class SoundController { 3 | constructor(_) { 4 | this._ = _; 5 | _.soundFormats('mp3', 'ogg'); 6 | this.cursorFireSound = _.loadSound('/assets/sounds/laser-beam.mp3'); 7 | this.cursorDamageSound = _.loadSound('/assets/sounds/cursor-damage.mp3'); 8 | this.cursorLootSound = _.loadSound('/assets/sounds/cursor-loot.mp3'); 9 | this.asteroidSpawnSound = _.loadSound('/assets/sounds/asteroid-spawn.mp3'); 10 | this.asteroidCrashSound = _.loadSound('/assets/sounds/asteroid-explode.mp3'); 11 | 12 | this.sound = false; 13 | 14 | this.initControl(); 15 | } 16 | 17 | 18 | soundInit() { 19 | // CURSOR LASER SOUND 20 | this.cursorFireSound.amp(0.5); 21 | // CURSOR DAMAGE 22 | this.cursorDamageSound.amp(0.1); 23 | // CURSOR LOOT 24 | this.cursorLootSound.amp(0.33); 25 | // ASTEROID SPAWN 26 | this.asteroidSpawnSound.amp(1); 27 | // ASTEROID CRASH 28 | this.asteroidCrashSound.amp(0.5); 29 | } 30 | 31 | soundMute() { 32 | // CURSOR LASER SOUND 33 | this.cursorFireSound.amp(0); 34 | // CURSOR DAMAGE 35 | this.cursorDamageSound.amp(0); 36 | // CURSOR LOOT 37 | this.cursorLootSound.amp(0); 38 | // ASTEROID SPAWN 39 | this.asteroidSpawnSound.amp(0); 40 | // ASTEROID CRASH 41 | this.asteroidCrashSound.amp(0); 42 | } 43 | 44 | initControl() { 45 | let soundController = this; 46 | document.querySelector('.sound').addEventListener('click', () => { 47 | if(soundController.sound) { 48 | soundController.soundMute(); 49 | document.querySelector('.sound').classList.remove('active'); 50 | } else { 51 | soundController.soundInit(); 52 | document.querySelector('.sound').classList.add('active'); 53 | } 54 | soundController.sound = !soundController.sound; 55 | }); 56 | } 57 | } 58 | 59 | export default SoundController; 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio-2020", 3 | "version": "1.0.0", 4 | "description": "Portofilio of 2020", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --mode development", 8 | "build:dev": "cross-env NODE_ENV=development webpack --mode development", 9 | "build:prod": "cross-env NODE_ENV=production webpack --mode production", 10 | "test": "test" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/francoispeyret/portfolio-2020.git" 15 | }, 16 | "keywords": [ 17 | "p5js" 18 | ], 19 | "author": "François Peyret", 20 | "license": "GPL-3.0", 21 | "bugs": { 22 | "url": "https://github.com/francoispeyret/portfolio-2020/issues" 23 | }, 24 | "homepage": "https://github.com/francoispeyret/portfolio-2020#readme", 25 | "devDependencies": { 26 | "@babel/core": "^7.8.4", 27 | "@babel/plugin-proposal-class-properties": "^7.8.3", 28 | "@babel/preset-env": "^7.8.4", 29 | "@babel/preset-react": "^7.9.4", 30 | "autoprefixer": "^9.7.4", 31 | "babel-loader": "^8.0.6", 32 | "clean-webpack-plugin": "^3.0.0", 33 | "copy-webpack-plugin": "^5.1.1", 34 | "cross-env": "^7.0.0", 35 | "css-loader": "^3.4.2", 36 | "file-loader": "^5.0.2", 37 | "html-inline-css-webpack-plugin": "^1.8.0", 38 | "html-webpack-plugin": "^4.3.0", 39 | "mini-css-extract-plugin": "^0.9.0", 40 | "node-sass": "^4.14.1", 41 | "optimize-css-assets-webpack-plugin": "^5.0.3", 42 | "postcss-loader": "^3.0.0", 43 | "sass-loader": "^8.0.2", 44 | "style-loader": "^1.1.3", 45 | "uglifyjs-webpack-plugin": "^2.2.0", 46 | "webpack": "^4.41.6", 47 | "webpack-cli": "^3.3.11", 48 | "webpack-dev-server": "^3.11.0", 49 | "webpack-merge": "^4.2.2" 50 | }, 51 | "browserslist": [ 52 | "> 1%", 53 | "last 2 versions", 54 | "not ie <= 6" 55 | ], 56 | "dependencies": { 57 | "@loadable/component": "^5.13.1", 58 | "@popperjs/core": "^2.4.0", 59 | "gsap": "^3.2.6", 60 | "p5": "0.9.0", 61 | "react": "^16.13.1", 62 | "react-dom": "^16.13.1", 63 | "typewriter-effect": "^2.13.1" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/assets/javascripts/header.js: -------------------------------------------------------------------------------- 1 | import { gsap } from "gsap"; 2 | 3 | //-----------------------// 4 | // HEADER // 5 | //----------------------// 6 | 7 | gsap.from("#header", { 8 | opacity:0, 9 | y: -100, 10 | duration: .6, 11 | delay: 1 12 | }); 13 | 14 | gsap.from(".mouse-invit", { 15 | opacity:0, 16 | y: 100, 17 | duration: .6, 18 | delay: 1 19 | }); 20 | 21 | let headerArrow = { 22 | el: document.querySelector('header .arrow'), 23 | step: 0 24 | }; 25 | 26 | let main = { 27 | el: document.querySelector('main') 28 | }; 29 | 30 | let menu = { 31 | el: document.querySelector('.header-menu'), 32 | linksEls: document.querySelectorAll('.header-menu a'), 33 | active: false 34 | }; 35 | 36 | window.addEventListener('scroll', windowScroll); 37 | window.addEventListener('resize', windowScroll); 38 | 39 | function windowScroll() { 40 | 41 | const windowScrollTop = document.getElementsByTagName('html')[0].scrollTop; 42 | const documentHeight = document.getElementsByTagName('body')[0].offsetHeight; 43 | const menuWidth = main.el.offsetWidth - 50; 44 | const arrowPos = Math.floor((windowScrollTop ) * menuWidth / (documentHeight - window.innerHeight)); 45 | 46 | gsap.to(headerArrow.el, { 47 | x: arrowPos, 48 | duration: .2, 49 | delay: .1 50 | }); 51 | 52 | if(windowScrollTop > 50) { 53 | gsap.to(".mouse-invit", { 54 | opacity:0, 55 | y: 100, 56 | duration: 1 57 | }); 58 | } 59 | } 60 | 61 | document.querySelector('#toggle-mobile').addEventListener('click', () => { 62 | mobileMenu(); 63 | }); 64 | 65 | for (let e = 0; e < menu.linksEls.length; e++) { 66 | menu.linksEls[e].addEventListener('click', () => { 67 | mobileMenu(); 68 | }); 69 | } 70 | 71 | function mobileMenu() { 72 | if (menu.active === true) { 73 | menu.el.classList.remove('active'); 74 | main.el.classList.remove('menu-active'); 75 | } else { 76 | menu.el.classList.add('active'); 77 | main.el.classList.add('menu-active'); 78 | } 79 | menu.active = !menu.active; 80 | } 81 | -------------------------------------------------------------------------------- /src/assets/javascripts/classes/gravity.js: -------------------------------------------------------------------------------- 1 | class Gravity { 2 | constructor(_) { 3 | this._ = _; 4 | this.G = .05; 5 | this.initSpaceTime(); 6 | } 7 | 8 | initSpaceTime() { 9 | this.spaceTime = []; 10 | for(let y = 0; y < this._.height/100; y++) { 11 | this.spaceTime[y] = []; 12 | for(let x = 0; x < this._.width/100; x++) { 13 | this.spaceTime[y][x] = { 14 | pos: this._.createVector( 15 | x*100, 16 | y*100 17 | ), 18 | g: 3 19 | }; 20 | } 21 | } 22 | } 23 | 24 | show(_) { 25 | _.fill(255, 25); 26 | for(let y = 0; y < this.spaceTime.length; y++) { 27 | for(let x = 0; x < this.spaceTime[y].length; x++) { 28 | const spaceTimeItem = this.spaceTime[y][x]; 29 | _.circle(spaceTimeItem.pos.x, spaceTimeItem.pos.y, spaceTimeItem.g); 30 | } 31 | } 32 | } 33 | 34 | update(asteroids, cursor) { 35 | for(let y = 0; y < this.spaceTime.length; y++) { 36 | for(let x = 0; x < this.spaceTime[y].length; x++) { 37 | let spaceTimeItem = this.spaceTime[y][x]; 38 | spaceTimeItem.g = 0; 39 | for(let a = 0; a < asteroids.length; a++) { 40 | const distance = this._.dist(spaceTimeItem.pos.x, spaceTimeItem.pos.y, asteroids[a].pos.x, asteroids[a].pos.y) 41 | spaceTimeItem.g += 25 * (asteroids[a].w / 1.5) / this._.constrain(distance, 30, 999); 42 | this.attract(asteroids[a], cursor); 43 | } 44 | const distance = this._.dist(spaceTimeItem.pos.x, spaceTimeItem.pos.y, cursor.pos.x, cursor.pos.y) 45 | spaceTimeItem.g += 25 * (140 / 1.5) / this._.constrain(distance, 30, 999); 46 | } 47 | } 48 | } 49 | 50 | attract(mover, cursor) { 51 | let force = this._.createVector( 52 | cursor.pos.x - mover.pos.x, 53 | cursor.pos.y - mover.pos.y 54 | ); 55 | let distanceSq = this._.constrain(force.magSq(), 100, 1000); 56 | let strengh = this.G * (cursor.w * mover.w) / distanceSq; 57 | force.setMag(strengh); 58 | mover.applyForce(force); 59 | } 60 | 61 | resize(_) { 62 | this.initSpaceTime(); 63 | } 64 | 65 | } 66 | 67 | export default Gravity; 68 | -------------------------------------------------------------------------------- /src/assets/scss/sections/_home.scss: -------------------------------------------------------------------------------- 1 | #home { 2 | min-height: 100vh; 3 | margin: 0 -1.5rem; 4 | padding: 100px 3rem; 5 | .resume-screen, 6 | .content { 7 | transition: ease-in all 0.33s; 8 | //transform: translateY(0); 9 | } 10 | 11 | .resume-screen { 12 | opacity: 0; 13 | pointer-events: none; 14 | 15 | svg { 16 | fill: #fff; 17 | display: block; 18 | height: 64px; 19 | width: 64px; 20 | margin: 0 auto; 21 | position: fixed; 22 | top: calc(50% - 32px); 23 | left: calc(50% - 32px); 24 | } 25 | } 26 | 27 | &.started { 28 | .content { 29 | transform: translateY(-100%); 30 | opacity: 0; 31 | pointer-events: none; 32 | } 33 | } 34 | 35 | &.resumed { 36 | .resume-screen { 37 | opacity: 1; 38 | } 39 | #p5-holder { 40 | filter: blur(5px); 41 | } 42 | } 43 | 44 | #p5-holder { 45 | position: fixed; 46 | z-index: 100; 47 | pointer-events: none; 48 | left: 0; 49 | right: 0; 50 | top: 0; 51 | bottom: 0; 52 | transition: ease-in all 0.33s; 53 | } 54 | 55 | #play-start { 56 | margin: 3rem auto; 57 | display: block; 58 | text-transform: uppercase; 59 | font-size: 2.4rem; 60 | font-weight: 800; 61 | padding: 0.75rem 2.5rem 0.7rem; 62 | color: #fff; 63 | background: none; 64 | border: 3px solid #fff; 65 | appearance: none; 66 | outline: none; 67 | 68 | transition: all 0.25s cubic-bezier(0.71,-0.29, 0.63, 2.11); 69 | 70 | &:focus, 71 | &:active, 72 | &:hover { 73 | background: #fff; 74 | color: #000; 75 | letter-spacing: 0.396em; 76 | cursor: pointer; 77 | } 78 | } 79 | } 80 | 81 | .mouse-invit { 82 | width: 30px; 83 | height: 50px; 84 | border: 3px solid #fff; 85 | border-radius: 20px; 86 | position: fixed; 87 | top: calc(100% - 65px); 88 | left: calc(50% - 15px); 89 | 90 | .scroll { 91 | display: block; 92 | height: 4px; 93 | width: 4px; 94 | border-radius: 3px; 95 | background-color: #fff; 96 | margin: 8px auto 0; 97 | 98 | animation: scrollInvit ease-in-out 1.5s infinite; 99 | 100 | @keyframes scrollInvit { 101 | 0%,70%,100% { 102 | transform: none; 103 | } 104 | 80% { 105 | transform: translateY(5px); 106 | } 107 | } 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/assets/javascripts/classes/cursor.js: -------------------------------------------------------------------------------- 1 | class Cursor { 2 | constructor(_) { 3 | this._ = _; 4 | this.pos = this._.createVector(this._.width / 2, this._.height / 2); 5 | this.w = 15; 6 | this.wMax = 15; 7 | this.life = 3; 8 | this.dammageAnimationCount = 0; 9 | 10 | this.smoke = []; 11 | } 12 | 13 | show() { 14 | let angle = this._.createVector(this._.width / 2, 0).heading(); 15 | let vel = this._.createVector(this._.mouseX - this.pos.x, this._.mouseY - this.pos.y).div(45); 16 | const mag = (vel.mag() / 3).toFixed(1); 17 | 18 | if (this.w - mag > 5) { 19 | this.w -= mag; 20 | } 21 | if (this.w < this.wMax) { 22 | this.w += .5; 23 | } 24 | if (this.pos.dist(this._.createVector(this._.mouseX, this._.mouseY)) > 25) { 25 | this.pos.add(vel); 26 | } 27 | 28 | angle = this._.createVector(this._.mouseX - this.pos.x, this._.mouseY - this.pos.y).heading(); 29 | 30 | 31 | this.smokeShow(); 32 | const thrust = this._.map(mag, 0, 3, 0, 45); 33 | this.smokeCreate(thrust); 34 | this.smokeUpdate(); 35 | 36 | this._.noStroke(); 37 | const thisOpacity = this._.map(this._.sin(this.dammageAnimationCount / 2), 0, 1, 255, 55); 38 | this._.fill(255, thisOpacity); 39 | 40 | this._.push(); 41 | this._.translate(this.pos.x, this.pos.y); 42 | this._.rotate(angle); 43 | 44 | this._.beginShape(); 45 | this._.vertex(20, 0); 46 | this._.vertex(0, 10); 47 | this._.vertex(0, -10); 48 | this._.endShape(this._.CLOSE); 49 | 50 | /*this._.beginShape(); 51 | this._.vertex(-5, 5); 52 | this._.vertex(-5, -5); 53 | this._.vertex(thrust , 0); 54 | this._.endShape(this._.CLOSE); 55 | */ 56 | this._.pop(); 57 | 58 | 59 | } 60 | 61 | smokeShow() { 62 | this._.noStroke(); 63 | for(let s = 0; s < this.smoke.length; s++) { 64 | const smokeItem = this.smoke[s]; 65 | const alpha = this._.map(smokeItem.life, 30, 0, 12, 0); 66 | this._.fill(255, alpha); 67 | this._.circle(smokeItem.pos.x, smokeItem.pos.y, smokeItem.w); 68 | } 69 | } 70 | 71 | smokeUpdate() { 72 | for(let s = 0; s < this.smoke.length; s++) { 73 | this.smoke[s].life--; 74 | this.smoke[s].w++; 75 | 76 | if(this.smoke[s].life <= 0) { 77 | this.smoke.splice(s, 1); 78 | s--; 79 | } 80 | } 81 | } 82 | 83 | 84 | smokeCreate(thrust) { 85 | if(thrust > 3) { 86 | this.smoke.push({ 87 | pos: { 88 | x: this.pos.x, 89 | y: this.pos.y 90 | }, 91 | w: thrust*0.66, 92 | life: 30 93 | }); 94 | } 95 | } 96 | } 97 | 98 | export default Cursor; 99 | -------------------------------------------------------------------------------- /src/assets/scss/partials/_utilities.scss: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | font-family: 'Proxima', arial, sans-serif; 7 | -webkit-font-smoothing: antialiased; /* Chrome, Safari */ 8 | -moz-osx-font-smoothing: grayscale; /* Firefox */ 9 | } 10 | 11 | html { 12 | scroll-behavior: smooth; 13 | cursor: crosshair; 14 | 15 | scrollbar-color: #fff rgba(#000,0.3); 16 | scrollbar-width: thin; 17 | } 18 | 19 | @media (max-width: 769px) { 20 | html, body { 21 | width: 100%; 22 | overflow-x: hidden; 23 | } 24 | } 25 | 26 | ::-moz-selection { background: transparent; } 27 | ::selection { background: transparent; } 28 | 29 | body { 30 | color: white; 31 | background-color: #2d325a; 32 | animation: backgroundAnimation ease-in-out 15s infinite; 33 | 34 | @keyframes backgroundAnimation { 35 | 0%, 100% { 36 | background-color: #2d325a; 37 | } 38 | 33% { 39 | background-color: #2d5a3e; 40 | } 41 | 66% { 42 | background-color: #5a2d3e; 43 | } 44 | } 45 | 46 | &::-webkit-scrollbar { 47 | width: 4px; 48 | } 49 | &::-webkit-scrollbar-track { 50 | box-shadow: inset 0 0 6px rgba(#000,0.3); 51 | -webkit-box-shadow: inset 0 0 6px rgba(#000,0.3); 52 | } 53 | &::-webkit-scrollbar-thumb { 54 | background-color: #fff; 55 | outline: 1px solid slategrey; 56 | } 57 | } 58 | 59 | a { 60 | color: white; 61 | text-decoration: none; 62 | position: relative; 63 | 64 | &:not(.no-hover) { 65 | &::before { 66 | content:""; 67 | display: block; 68 | position: absolute; 69 | left: 0; 70 | right: 0; 71 | bottom: 10%; 72 | height: 0; 73 | background-color: #fff7; 74 | transition: height ease 0.3s; 75 | } 76 | 77 | &:hover::before { 78 | height: 20%; 79 | } 80 | } 81 | } 82 | 83 | .tooltip { 84 | border: 2px solid #fff; 85 | background: transparent; 86 | color: white; 87 | padding: 4px 8px 5px; 88 | font-size: 13px; 89 | display: none; 90 | position: absolute; 91 | opacity: 0; 92 | &[data-show] { 93 | display: block; 94 | animation: fadeIn ease-in-out .5s; 95 | opacity: 1; 96 | 97 | @keyframes fadeIn { 98 | 0%{ 99 | opacity: 0; 100 | } 101 | 100% { 102 | opacity: 1; 103 | } 104 | } 105 | 106 | } 107 | } 108 | 109 | .arrow, 110 | .arrow::before { 111 | position: absolute; 112 | width: 0px; 113 | height: 0px; 114 | z-index: -1; 115 | top: -6px; 116 | left: -6px; 117 | } 118 | 119 | .arrow::before { 120 | content: ''; 121 | border: 6px solid transparent; 122 | border-bottom-color: #fff; 123 | } 124 | -------------------------------------------------------------------------------- /src/assets/javascripts/controllers/bullets.js: -------------------------------------------------------------------------------- 1 | import Explosion from '../classes/explosion'; 2 | 3 | class BulletsController { 4 | constructor(_, soundController) { 5 | this._ = _; 6 | this.bullets = []; 7 | this.soundController = soundController; 8 | } 9 | 10 | show() { 11 | this._.fill(255); 12 | this._.noStroke(); 13 | for (let b = 0; b < this.bullets.length; b++) { 14 | this._.rect(this.bullets[b].pos.x-3, this.bullets[b].pos.y-3, 6, 6); 15 | } 16 | } 17 | 18 | update(asteroidsController, lootsController, explosionsController, scoresController) { 19 | for (let b = 0; b < this.bullets.length; b++) { 20 | 21 | this.bullets[b].pos.add(this.bullets[b].target); 22 | 23 | if (this.bulletOutOfView(this.bullets[b])) { 24 | this.bulletRemove(b); 25 | b--; 26 | } 27 | 28 | let asteroids = asteroidsController.asteroids; 29 | 30 | for (let a = 0; a < asteroids.length; a++) { 31 | if (typeof this.bullets[b] !== 'undefined') { 32 | if (asteroids[a].pos.dist(this.bullets[b].pos) <= asteroids[a].w / 2) { 33 | explosionsController.createExplosion(asteroids[a].pos,asteroids[a].w); 34 | asteroidsController.asteroidSubdivide(asteroids[a], lootsController); 35 | scoresController.scoreCreate(asteroids[a].w, asteroids[a].pos); 36 | //scoreAddAmount(asteroids[a].w, asteroids[a].pos); 37 | asteroidsController.asteroidRemove(a); 38 | this.bulletRemove(b); 39 | break; 40 | } 41 | } 42 | } 43 | 44 | let loots = lootsController.loots; 45 | 46 | for (let o = 0; o < loots.length; o++) { 47 | if (typeof this.bullets[b] !== 'undefined') { 48 | if (loots[o].pos.dist(this.bullets[b].pos) <= loots[o].w / 1.5) { 49 | explosionsController.createExplosion(loots[o].pos,loots[o].w); 50 | this.soundController.asteroidCrashSound.play(); 51 | scoresController.scoreCreate(125, loots[o].pos); 52 | //scoreAddAmount(125, loots[o].pos); 53 | lootsController.lootRemove(o); 54 | this.bulletRemove(b); 55 | break; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | 62 | bulletOutOfView(bullet) { 63 | return bullet.pos.x + 6 < 0 || 64 | bullet.pos.x - 6 > this._.width || 65 | bullet.pos.y + 6 < 0 || 66 | bullet.pos.y - 6 > this._.height; 67 | } 68 | 69 | bulletRemove(index) { 70 | this.bullets.splice(index, 1); 71 | } 72 | 73 | fire(cursor) { 74 | this.bullets.push({ 75 | pos: 76 | this._.createVector(cursor.pos.x, cursor.pos.y), 77 | target: 78 | this._.createVector( 79 | this._.mouseX - cursor.pos.x, 80 | this._.mouseY - cursor.pos.y 81 | ).limit(20) 82 | }); 83 | } 84 | 85 | } 86 | 87 | export default BulletsController; -------------------------------------------------------------------------------- /src/assets/scss/partials/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | padding-bottom: 2.5rem; 3 | padding-top: 75vh; 4 | 5 | position: relative; 6 | 7 | &::before, 8 | &::after { 9 | content:""; 10 | display: block; 11 | position: absolute; 12 | left: 1.5rem; 13 | bottom: 1.5rem; 14 | height: 90px; 15 | border-right: 2px solid #fff; 16 | @media (max-width: 769px) { 17 | display: none; 18 | } 19 | } 20 | 21 | &::after { 22 | left: auto; 23 | right: 1.5rem; 24 | height: 150px; 25 | } 26 | 27 | .row { 28 | display: flex; 29 | flex-wrap: wrap; 30 | align-items: flex-end; 31 | padding: 0 1.5rem; 32 | } 33 | 34 | .col { 35 | flex: 0 0 33.33%; 36 | max-width: 33.333%; 37 | 38 | @media (max-width: 769px) { 39 | flex: 0 0 100%; 40 | max-width: 100%; 41 | margin-bottom: .5rem; 42 | margin-top: .5rem; 43 | text-align: center; 44 | } 45 | } 46 | 47 | ul { 48 | list-style: none; 49 | li { 50 | display: inline-block; 51 | margin-right: 2rem; 52 | letter-spacing: 0.2em; 53 | a { 54 | font-weight: 700; 55 | } 56 | @media (max-width: 769px) { 57 | margin: 0 .5rem; 58 | a { 59 | padding: 0.5rem; 60 | display: block; 61 | } 62 | } 63 | } 64 | } 65 | 66 | .bravo { 67 | font-size: 2.4rem; 68 | line-height: 1; 69 | max-width: 320px; 70 | position: absolute; 71 | bottom: 40px; 72 | @media (max-width: 769px) { 73 | text-align: left; 74 | bottom: 220px; 75 | } 76 | } 77 | 78 | .copyrights { 79 | text-align: right; 80 | font-size: 0.75rem; 81 | font-weight: 800; 82 | text-transform: uppercase; 83 | @media (max-width: 769px) { 84 | text-align: center; 85 | } 86 | } 87 | 88 | .back-to-top { 89 | position: absolute; 90 | right: 0.8rem; 91 | bottom: calc(3rem + 150px - 20px); 92 | 93 | svg { 94 | display: block; 95 | width: 24px; 96 | height: 24px; 97 | fill: #fff; 98 | transition: $easing; 99 | } 100 | 101 | a { 102 | padding: 0.75rem; 103 | margin: -0.75rem; 104 | display: block; 105 | 106 | &:hover { 107 | svg { 108 | transform: translateY(-10px); 109 | } 110 | } 111 | } 112 | } 113 | 114 | .cake { 115 | cursor: pointer; 116 | display: inline-block; 117 | animation: cake ease-in-out 1.5s infinite; 118 | 119 | @keyframes cake { 120 | 0%, 15%, 100% { 121 | transform: translateX(0); 122 | } 123 | 5% { 124 | transform: translateX(-4px); 125 | } 126 | 10% { 127 | transform: translateX(4px); 128 | } 129 | } 130 | } 131 | 132 | 133 | } 134 | -------------------------------------------------------------------------------- /config/webpack.common.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default; 5 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 6 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 7 | 8 | module.exports = { 9 | entry: { 10 | index:'./src/index' 11 | }, 12 | output: { 13 | path: path.resolve(__dirname, '../dist'), 14 | filename: '[name].[chunkhash].js' 15 | }, 16 | devServer: { 17 | contentBase: path.join(__dirname, 'dist'), 18 | compress: true, 19 | port: 9000 20 | }, 21 | 22 | module: { 23 | rules: [ 24 | { 25 | test: [/.js$/], 26 | use: { 27 | loader: 'babel-loader', 28 | options: { 29 | presets: [ 30 | '@babel/preset-env', 31 | "@babel/preset-react" 32 | ], 33 | plugins: [ 34 | "@babel/plugin-proposal-class-properties", 35 | ] 36 | } 37 | } 38 | }, 39 | { 40 | test: [/.css$|.scss$/], 41 | use: [ 42 | MiniCssExtractPlugin.loader, 43 | 'css-loader', 44 | 'sass-loader', 45 | 'postcss-loader' 46 | ] 47 | }, 48 | { 49 | test: /\.(png|jpg|jpeg|gif|svg|woff2|woff|ttf)$/, 50 | use: [ 51 | { 52 | loader: 'file-loader', 53 | options: { 54 | name: '[name].[ext]', 55 | outputPath: 'assets/' 56 | } 57 | } 58 | ] 59 | } 60 | ] 61 | }, 62 | 63 | resolve: { 64 | alias: { 65 | '@scss': path.resolve(__dirname, '../src/assets/scss'), 66 | '@img': path.resolve(__dirname, '../src/assets/images'), 67 | '@': path.resolve(__dirname, '../src') 68 | }, 69 | modules: [ 70 | 'node_modules', 71 | path.resolve(__dirname, 'src') 72 | ], 73 | extensions: ['.js'] 74 | }, 75 | 76 | plugins: [ 77 | new MiniCssExtractPlugin({ 78 | filename: 'style.[chunkhash].css', 79 | chunkFilename: "[id].css" 80 | }), 81 | new HtmlWebpackPlugin({ 82 | title: 'François Peyret - Web Front Developer', 83 | template: './src/index.html', 84 | inject: true, 85 | scriptLoading: 'defer', 86 | minify: { 87 | removeComments: true, 88 | collapseWhitespace: true 89 | } 90 | }), 91 | new CopyWebpackPlugin([{ 92 | from: './src/assets/images', 93 | to: 'assets/images' 94 | }]), 95 | new CopyWebpackPlugin([{ 96 | from: './src/assets/sounds', 97 | to: 'assets/sounds' 98 | }]), 99 | new CopyWebpackPlugin([{ 100 | from: './src/assets/fonts', 101 | to: 'assets/fonts' 102 | }]), 103 | new CleanWebpackPlugin() 104 | ] 105 | } 106 | -------------------------------------------------------------------------------- /src/assets/scss/sections/_contact.scss: -------------------------------------------------------------------------------- 1 | #contact { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | max-width: 360px; 6 | margin-left: 50vw; 7 | @media (max-width: 769px) { 8 | margin-left: 10vw; 9 | max-width: 260px; 10 | } 11 | 12 | h2 { 13 | margin-bottom: 1rem; 14 | font-size: 3.6rem; 15 | position: relative; 16 | @media (max-width: 769px) { 17 | font-size: 2.2rem; 18 | } 19 | 20 | .send { 21 | fill: white; 22 | width: 48px; 23 | height: 48px; 24 | display: block; 25 | position: absolute; 26 | left: -64px; 27 | top: 8px; 28 | @media (max-width: 769px) { 29 | height: 32px; 30 | width: 32px; 31 | top: 4px; 32 | left: -48px; 33 | } 34 | } 35 | } 36 | 37 | p { 38 | text-transform: uppercase; 39 | font-size: 0.75rem; 40 | line-height: 1; 41 | @media (max-width: 769px) { 42 | font-size: 1.8rem; 43 | } 44 | } 45 | 46 | #loader { 47 | height: 40px; 48 | width: 40px; 49 | display: block; 50 | border-radius: 40px; 51 | border: 2px solid #fff; 52 | border-left-color: #fff3; 53 | border-right-color: #fff3; 54 | border-left-style: dotted; 55 | border-right-style: dotted; 56 | animation: rotate ease-in-out 0.75s infinite; 57 | transition: $easing; 58 | @keyframes rotate { 59 | 0% { 60 | transform: rotate(0deg); 61 | } 62 | 100% { 63 | transform: rotate(180deg); 64 | } 65 | } 66 | 67 | opacity: 0; 68 | 69 | &.active { 70 | opacity: 1; 71 | } 72 | } 73 | 74 | form { 75 | display: flex; 76 | flex-wrap: wrap; 77 | p { 78 | flex: 0 0 100%; 79 | max-width: 100%; 80 | display: block; 81 | label,input,textarea { 82 | display: block; 83 | width: 100%; 84 | } 85 | } 86 | 87 | label { 88 | margin-bottom: 0.33rem; 89 | } 90 | 91 | input,textarea { 92 | letter-spacing: 0.1em; 93 | } 94 | 95 | input,textarea,button { 96 | background: none; 97 | color: #fff; 98 | outline: none; 99 | border: 2px solid #fff3; 100 | padding: 0.5rem 0.5rem; 101 | margin-bottom: 1rem; 102 | transition: border ease 0.25s, color ease 0.25s; 103 | 104 | &::placeholder { 105 | color: #fff3; 106 | } 107 | 108 | &:active, 109 | &:focus, 110 | &:hover { 111 | border-color: #fff; 112 | } 113 | } 114 | 115 | button { 116 | text-transform: uppercase; 117 | font-weight: 800; 118 | padding: 0.5rem 1.5rem; 119 | font-size: 1.45rem; 120 | 121 | transition: all 0.25s cubic-bezier(0.71,-0.29, 0.63, 2.11); 122 | 123 | &:focus, 124 | &:active, 125 | &:hover { 126 | background: #fff; 127 | color: #000; 128 | letter-spacing: 0.396em; 129 | cursor: pointer; 130 | } 131 | } 132 | } 133 | 134 | } -------------------------------------------------------------------------------- /src/assets/scss/partials/_header.scss: -------------------------------------------------------------------------------- 1 | header { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: space-between; 5 | align-content: space-between; 6 | 7 | .header-slide { 8 | flex: 0 0 100%; 9 | max-width: 100%; 10 | position: relative; 11 | 12 | .arrow { 13 | display: block; 14 | position: absolute; 15 | left: -5px; 16 | top: -17px; 17 | border: 5px solid transparent; 18 | border-top-color: #fff3; 19 | } 20 | 21 | &::after { 22 | content:""; 23 | display: block; 24 | position: absolute; 25 | top: -10px; 26 | left: 0; 27 | right: 0; 28 | border-bottom: 1px dashed #fff3; 29 | } 30 | } 31 | 32 | .header-side, 33 | .header-menu { 34 | flex: 0 0 auto; 35 | max-width: none; 36 | display: flex; 37 | } 38 | 39 | .logo { 40 | text-transform: uppercase; 41 | font-size: 0.75rem; 42 | font-weight: 800; 43 | line-height: 1; 44 | border-left: 2px solid #fff; 45 | padding: 0.1rem 1.5rem 0; 46 | display: flex; 47 | align-items: center; 48 | } 49 | 50 | .header-menu { 51 | align-items: center; 52 | justify-content: flex-end; 53 | ul { 54 | height: 100%; 55 | list-style: none; 56 | text-align: right; 57 | border-right: 2px solid #fff; 58 | } 59 | li { 60 | display: inline-block; 61 | vertical-align: middle; 62 | padding: 0 1.5rem 0 0; 63 | text-transform: uppercase; 64 | a { 65 | display: block; 66 | padding: 0.95rem 0.5rem; 67 | } 68 | 69 | &.sound { 70 | cursor: pointer; 71 | svg { 72 | margin: 0.95rem 0; 73 | height: 26px; 74 | width: 26px; 75 | fill: #fff; 76 | display: inline-block; 77 | vertical-align: middle; 78 | &.on { 79 | display: none; 80 | } 81 | } 82 | 83 | &.active { 84 | svg.off { 85 | display: none; 86 | } 87 | svg.on { 88 | display: inline-block; 89 | } 90 | } 91 | } 92 | } 93 | 94 | #toggle-mobile { 95 | display: none; 96 | } 97 | @media (max-width: 769px) { 98 | 99 | &.active { 100 | ul { 101 | right: 0; 102 | opacity: 1; 103 | } 104 | } 105 | 106 | #toggle-mobile { 107 | display: block; 108 | padding: 0.5rem 1rem; 109 | border-right: 2px solid #fff; 110 | cursor: pointer; 111 | svg { 112 | display: block; 113 | height: 32px; 114 | width: 32px; 115 | fill: #fff; 116 | } 117 | } 118 | ul { 119 | transition: cubic-bezier(0.71,-0.29, 0.63, 2.11) all 0.5s; 120 | position: absolute; 121 | top: 4rem; 122 | right: -100%; 123 | opacity: 0; 124 | height: auto; 125 | } 126 | li { 127 | display: block; 128 | font-size: 1.6rem; 129 | font-weight: 800; 130 | } 131 | } 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /src/assets/javascripts/components/SkillsComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Skill from "@/assets/javascripts/classes/skill"; 3 | import Space from "@/assets/javascripts/classes/space"; 4 | 5 | class App extends React.Component { 6 | 7 | state = { 8 | sort: 'grid', 9 | loading: false 10 | } 11 | 12 | constructor() { 13 | super(); 14 | 15 | this.timing = 750; 16 | 17 | this.handleClickSortGrid = this.handleClickSortGrid.bind(this); 18 | this.handleClickSortList = this.handleClickSortList.bind(this); 19 | this.handleLoading = this.handleLoading.bind(this); 20 | } 21 | 22 | handleClickSortGrid() { 23 | if(this.state.sort==='grid') 24 | return; 25 | this.setState({ 26 | loading: true 27 | }); 28 | let _ = this; 29 | setTimeout(function(){ 30 | _.setState({ 31 | sort: 'grid' 32 | }); 33 | _.handleLoading(); 34 | },this.timing); 35 | } 36 | 37 | handleClickSortList() { 38 | if(this.state.sort==='list') 39 | return; 40 | 41 | this.setState({ 42 | loading: true 43 | }); 44 | let _ = this; 45 | setTimeout(function(){ 46 | _.setState({ 47 | sort: 'list' 48 | }); 49 | _.handleLoading(); 50 | },this.timing); 51 | } 52 | 53 | handleLoading() { 54 | let _ = this; 55 | setTimeout(function(){ 56 | _.setState({ 57 | loading: false 58 | }); 59 | },this.timing); 60 | } 61 | 62 | render() { 63 | const elements = [ 64 | {el: 'skill', name: 'Sass', color: '#a53364'}, 65 | {el: 'Space', value: 3}, 66 | {el: 'skill', name: 'Svg', color: '#87a533'}, 67 | {el: 'skill', name: 'Html5', color: '#afafaf'}, 68 | {el: 'skill', name: 'Javascript ES6', color: '#807d00'}, 69 | {el: 'Space', value: 1}, 70 | {el: 'skill', name: 'Php', color: '#4F5B93'}, 71 | {el: 'skill', name: 'Webpack', color: '#004280'}, 72 | {el: 'skill', name: 'React', color: '#3997b1'}, 73 | {el: 'skill', name: 'Unreal Engine', color: '#111'}, 74 | {el: 'skill', name: 'Adobe', color: '#c00606'}, 75 | {el: 'skill', name: 'Prestashop', color: '#7c1b4c'}, 76 | {el: 'skill', name: 'Cypress.io', color: '#04c38e'}, 77 | {el: 'skill', name: 'Shopify', color: '#07ad23'}, 78 | {el: 'skill', name: 'Git / Gitflow', color: '#222'}, 79 | {el: 'skill', name: 'Canvas', color: '#b3af00'}, 80 | ]; 81 | let items = []; 82 | let i = 1; 83 | for(let [index, el] of elements.entries()) { 84 | if(el.el === 'skill') { 85 | items.push( 86 | 94 | ); 95 | i++; 96 | } 97 | if(el.el === 'Space' && this.state.sort === 'grid') { 98 | items.push( 99 | 103 | ); 104 | } 105 | } 106 | return ( 107 |
    108 |
    109 |
    111 |
    112 |
    113 |
    114 |
    115 |
    116 |
    118 |
    119 |
    120 |
    121 |
    122 |
    123 |
      124 | {items} 125 |
    126 |
    127 | ); 128 | } 129 | } 130 | 131 | export default App; 132 | -------------------------------------------------------------------------------- /src/assets/javascripts/controllers/asteroids.js: -------------------------------------------------------------------------------- 1 | 2 | import Asteroid from "../classes/asteroid"; 3 | 4 | class AsteroidsController { 5 | constructor(_, soundController) { 6 | this._ = _; 7 | this.soundController = soundController; 8 | this.asteroids = []; 9 | this.levelAsteroidsMaximum = 12; 10 | } 11 | 12 | show() { 13 | for (let a = 0; a < this.asteroids.length; a++) { 14 | this.asteroids[a].show(); 15 | } 16 | } 17 | 18 | update(cursor, levelsController, bulletsController) { 19 | for (let a = 0; a < this.asteroids.length; a++) { 20 | this.asteroids[a].update(); 21 | } 22 | // ASTEROIDS SPAWN 23 | if(cursor.life > 0) { 24 | if (this._.frameCount % 360 === 0) { 25 | if (this.asteroids.length > 0) { 26 | 27 | // Fix the asteroids jam if player is inactive 28 | if (this.asteroids.length < this.levelAsteroidsMaximum) { 29 | this.asteroidCreate(100); 30 | this.soundController.asteroidSpawnSound.play(); 31 | } 32 | } else { 33 | // LEVEL STAGE UP 34 | levelsController.levelUpStage(bulletsController); 35 | } 36 | } 37 | } 38 | } 39 | 40 | asteroidCreate(size, origin, velocity) { 41 | if(typeof size === 'undefined') 42 | return console.error('asteroidCreate has size undefined'); 43 | 44 | let position; 45 | if (typeof origin !== 'undefined') { 46 | position = this._.createVector(origin.x, origin.y); 47 | } else { 48 | const borderSpawn = Math.floor(this._.random(0,4)); 49 | const offsetDiv = 3; // high is less 50 | 51 | position = this._.createVector(0,0); 52 | switch (borderSpawn) { 53 | case 0: 54 | position.set( 55 | this._.random(this._.width, this._.width + this._.width/offsetDiv), 56 | this._.random(0, this._.height) 57 | ); 58 | break; 59 | case 1: 60 | position.set( 61 | this._.random(-this._.width/offsetDiv, 0), 62 | this._.random(0, this._.height) 63 | ); 64 | break; 65 | case 2: 66 | position.set( 67 | this._.random(0, this._.width), 68 | this._.random(-this._.height/offsetDiv, 0) 69 | ); 70 | break; 71 | case 3: 72 | position.set( 73 | this._.random(0, this._.width), 74 | this._.random(this._.height, this._.height + this._.height/offsetDiv) 75 | ); 76 | break; 77 | } 78 | } 79 | this.asteroids.push( 80 | new Asteroid(this._, size, position, velocity) 81 | ); 82 | } 83 | 84 | asteroidRemove(index) { 85 | if(typeof index === 'undefined') 86 | return console.error('asteroidRemove has index undefined'); 87 | this.asteroids.splice(index, 1); 88 | } 89 | 90 | asteroidSubdivide(asteroidBefore, lootsController) { 91 | this.soundController.asteroidCrashSound.play(); 92 | 93 | let randShape; 94 | if (asteroidBefore.w === 30) { 95 | // pouf 96 | return; 97 | } else if (asteroidBefore.w === 50) { 98 | randShape = 30; 99 | } else if (asteroidBefore.w === 100) { 100 | randShape = 50; 101 | } 102 | 103 | lootsController.lootCreate(asteroidBefore.pos); 104 | 105 | this.asteroidCreate(randShape, asteroidBefore.pos, asteroidBefore.vel), 106 | this.asteroidCreate(randShape, asteroidBefore.pos, asteroidBefore.vel); 107 | } 108 | 109 | asteroidsSpawn(levelController) { 110 | const asteroidsLength = this._.map(levelController.level, 1, 3, 2, 6); 111 | for (let a = 0; a < asteroidsLength; a++) { 112 | let randShape, rand = Math.floor(this._.random(1, 4)); 113 | 114 | switch (rand) { 115 | case 1: 116 | randShape = 30; 117 | break; 118 | case 2: 119 | randShape = 50; 120 | break; 121 | case 3: 122 | randShape = 100; 123 | break; 124 | } 125 | this.asteroidCreate(randShape); 126 | } 127 | } 128 | 129 | } 130 | 131 | export default AsteroidsController; 132 | -------------------------------------------------------------------------------- /src/assets/javascripts/classes/asteroid.js: -------------------------------------------------------------------------------- 1 | 2 | import objectNoLimit from "../common/utils"; 3 | 4 | class Asteroid { 5 | constructor(_, size, position, velocity) { 6 | this._ = _; 7 | this.pos = position; 8 | this.seed = Math.floor(this._.random(1, 4)); 9 | this.vel = velocity || this._.createVector(this._.random(1.8, -1.8), this._.random(1.8, -1.8)); 10 | this.w = size; 11 | this.spawnAnimation = 20; 12 | this.angle = this._.random(0, this._.TWO_PI); 13 | this.angleVel = this._.random(-this._.QUARTER_PI / 30, this._.QUARTER_PI / 30); 14 | } 15 | 16 | applyForce(force) { 17 | let f = this._.createVector( 18 | this._.constrain(force.x / (this.w*2), -1, 1), 19 | this._.constrain(force.y / (this.w*2), -1, 1) 20 | ); 21 | this.vel.add(f); 22 | 23 | } 24 | 25 | update() { 26 | this.angle += this.angleVel; 27 | 28 | if (this.spawnAnimation > 1) 29 | this.spawnAnimation--; 30 | 31 | this.pos.add(this.vel.limit(7)); 32 | 33 | objectNoLimit(this); 34 | } 35 | 36 | show() { 37 | this._.push(); 38 | this._.translate(this.pos.x, this.pos.y); 39 | this._.rotate(this.angle); 40 | this.asteroidShape(); 41 | this._.pop(); 42 | } 43 | 44 | asteroidShape() { 45 | const alpha = this._.map(this.spawnAnimation, 20, 1, 0, 255); 46 | this._.stroke(255, alpha); 47 | this._.strokeWeight(2); 48 | this._.noFill(); 49 | 50 | this._.push(); 51 | this._.beginShape(); 52 | this._.translate(-this.w / 2, -this.w / 2); 53 | if (this.w == 30) { 54 | if (this.seed == 1) { 55 | this._.vertex(4, 7); 56 | this._.vertex(20, 5); 57 | this._.vertex(23, 15); 58 | this._.vertex(15, 25); 59 | this._.vertex(5, 20); 60 | } else if (this.seed == 2) { 61 | this._.vertex(0, 7); 62 | this._.vertex(6, 2); 63 | this._.vertex(20, 5); 64 | this._.vertex(23, 15); 65 | this._.vertex(18, 18); 66 | this._.vertex(12, 22); 67 | this._.vertex(5, 20); 68 | } else if (this.seed == 3) { 69 | this._.vertex(1, 4); 70 | this._.vertex(6, 2); 71 | this._.vertex(20, 5); 72 | this._.vertex(20, 10); 73 | this._.vertex(15, 18); 74 | this._.vertex(12, 22); 75 | this._.vertex(5, 18); 76 | this._.vertex(0, 18); 77 | } 78 | } else if (this.w == 50) { 79 | if (this.seed == 1) { 80 | this._.vertex(8, 10); 81 | this._.vertex(22, 13); 82 | this._.vertex(40, 9); 83 | this._.vertex(50, 15); 84 | this._.vertex(40, 25); 85 | this._.vertex(45, 35); 86 | this._.vertex(45, 45); 87 | this._.vertex(30, 45); 88 | this._.vertex(16, 40); 89 | this._.vertex(5, 25); 90 | } else if (this.seed == 2) { 91 | this._.vertex(8, 7); 92 | this._.vertex(20, 5); 93 | this._.vertex(40, 9); 94 | this._.vertex(50, 25); 95 | this._.vertex(45, 45); 96 | this._.vertex(30, 35); 97 | this._.vertex(16, 40); 98 | this._.vertex(5, 25); 99 | } else if (this.seed == 3) { 100 | this._.vertex(3, 2); 101 | this._.vertex(15, 5); 102 | this._.vertex(42, 7); 103 | this._.vertex(44, 23); 104 | this._.vertex(42, 48); 105 | this._.vertex(25, 36); 106 | this._.vertex(12, 30); 107 | this._.vertex(5, 15); 108 | } 109 | } else if (this.w == 100) { 110 | if (this.seed == 1) { 111 | this._.vertex(22, 7); 112 | this._.vertex(40, 12); 113 | this._.vertex(60, 9); 114 | this._.vertex(75, 35); 115 | this._.vertex(65, 65); 116 | this._.vertex(40, 80); 117 | this._.vertex(20, 80); 118 | this._.vertex(14, 60); 119 | this._.vertex(16, 40); 120 | this._.vertex(10, 19); 121 | } else if (this.seed == 2) { 122 | this._.vertex(60, 9); 123 | this._.vertex(75, 35); 124 | this._.vertex(80, 75); 125 | this._.vertex(55, 70); 126 | this._.vertex(40, 75); 127 | this._.vertex(14, 60); 128 | this._.vertex(16, 40); 129 | this._.vertex(22, 5); 130 | } else if (this.seed == 3) { 131 | this._.vertex(40, 9); 132 | this._.vertex(70, 30); 133 | this._.vertex(82, 45); 134 | this._.vertex(50, 75); 135 | this._.vertex(43, 80); 136 | this._.vertex(10, 55); 137 | this._.vertex(18, 35); 138 | this._.vertex(15, 8); 139 | } 140 | } 141 | this._.endShape(this._.CLOSE); 142 | this._.pop(); 143 | } 144 | } 145 | 146 | export default Asteroid; 147 | -------------------------------------------------------------------------------- /src/assets/scss/sections/_skills.scss: -------------------------------------------------------------------------------- 1 | #skills { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | text-align: center; 6 | 7 | .content { 8 | display: block; 9 | } 10 | 11 | h2 { 12 | font-size: 2.4rem; 13 | } 14 | 15 | p { 16 | text-transform: uppercase; 17 | font-size: 0.66rem; 18 | } 19 | 20 | #skill-root { 21 | max-width: 1080px; 22 | min-height: 772px; 23 | margin-right: auto; 24 | margin-left: auto; 25 | @media (max-width: 1132px) { 26 | max-width: 800px; 27 | } 28 | ul { 29 | display: flex; 30 | flex-wrap: wrap; 31 | align-items: flex-end; 32 | transition: all ease-in-out .3s; 33 | @media (max-width: 832px) { 34 | justify-content: center; 35 | } 36 | } 37 | li { 38 | display: flex; 39 | flex-direction: column; 40 | justify-content: space-between; 41 | min-height: 160px; 42 | max-width: 160px; 43 | flex: 0 0 160px; 44 | border: 2px solid #fff; 45 | margin: 10px; 46 | padding: 10px; 47 | text-transform: uppercase; 48 | font-size: 22px; 49 | box-sizing: border-box; 50 | transition: background-color ease-in-out .2s; 51 | @media (max-width: 1132px) { 52 | min-height: 110px; 53 | max-width: 110px; 54 | flex: 0 0 110px; 55 | } 56 | 57 | &.space { 58 | @media (max-width: 832px) { 59 | display: none; 60 | } 61 | &:nth-child(2) { 62 | max-width: 520px; 63 | flex: 0 0 520px; 64 | @media (max-width: 1132px) { 65 | max-width: 370px; 66 | flex: 0 0 370px; 67 | } 68 | } 69 | } 70 | 71 | .id { 72 | font-size: 12px; 73 | } 74 | 75 | .ref { 76 | font-size: 62px; 77 | font-weight: 800; 78 | text-transform: capitalize; 79 | @media (max-width: 1132px) { 80 | font-size: 42px; 81 | } 82 | } 83 | .name { 84 | font-size: 14px; 85 | text-transform: capitalize; 86 | display: flex; 87 | @media (max-width: 1132px) { 88 | font-size: 9px; 89 | } 90 | .left { 91 | text-align: left; 92 | } 93 | .right { 94 | flex-grow: 1; 95 | text-align: right; 96 | } 97 | } 98 | } 99 | 100 | ul.list { 101 | li { 102 | flex: 0 0 auto; 103 | max-width: none; 104 | text-align: left; 105 | min-height: 60px; 106 | padding: 10px 20px; 107 | 108 | .ref { 109 | font-size: 32px; 110 | @media (max-width: 769px) { 111 | font-size: 22px; 112 | } 113 | } 114 | 115 | .name, 116 | .id { 117 | display: none; 118 | } 119 | 120 | } 121 | } 122 | 123 | .loading { 124 | ul { 125 | opacity: 0; 126 | transform: translateY(50px); 127 | } 128 | } 129 | } 130 | .sort { 131 | display: flex; 132 | max-width: 164px; 133 | margin: 2rem auto; 134 | justify-content: center; 135 | 136 | > div { 137 | padding: 11.5px 10px; 138 | cursor: pointer; 139 | position: relative; 140 | display: flex; 141 | flex-wrap: wrap; 142 | max-width: 56px; 143 | transition: all ease-in-out .2s; 144 | 145 | &.active { 146 | .carret { 147 | background-color: #fff; 148 | &:nth-child(4) { 149 | background-color: transparent; 150 | } 151 | } 152 | .tiret:first-child, 153 | .tiret:last-child { 154 | flex: 0 0 28px; 155 | } 156 | .tiret:nth-child(2) { 157 | flex: 0 0 20px; 158 | } 159 | .circle { 160 | background-color: #fff; 161 | width: 32px; 162 | height: 32px; 163 | margin: 0; 164 | &.small { 165 | width: 8px; 166 | height: 8px; 167 | } 168 | } 169 | } 170 | 171 | .carret { 172 | margin: 2px; 173 | flex: 0 0 12px; 174 | height: 12px; 175 | width: 12px; 176 | border: 2px solid #fff; 177 | transition: all ease-in-out .2s; 178 | } 179 | .tiret { 180 | margin: 4px 2px; 181 | flex: 0 0 28px; 182 | width: 28px; 183 | border-bottom: 3px solid #fff; 184 | transition: all ease-in-out .2s; 185 | &:last-child { 186 | flex: 0 0 20px; 187 | } 188 | &:first-child { 189 | flex: 0 0 16px; 190 | } 191 | } 192 | .circle { 193 | width: 28px; 194 | height: 28px; 195 | border-radius: 20px; 196 | border: 3px solid #fff; 197 | transition: all ease-in-out .2s; 198 | margin: 4px 4px 0 0; 199 | &.small { 200 | margin: 0; 201 | position: absolute; 202 | width: 4px; 203 | height: 4px; 204 | left: 37px; 205 | top: 7px; 206 | } 207 | } 208 | } 209 | 210 | &:hover { 211 | > div { 212 | opacity: 0.4; 213 | 214 | &:hover { 215 | opacity: 1; 216 | } 217 | } 218 | } 219 | } 220 | } 221 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 | 14 | 15 | 38 | 39 |
    40 |
    41 |
    42 |
    43 |

    44 | 45 | WebDeveloper 46 | 47 | Ekypia 48 | suitcase 49 |

    50 |
    51 | 52 | 53 |
    54 | 55 |
    56 | 57 |
    58 | 59 |
    60 | 61 |
    62 | 63 | 64 |
    65 | 66 |
    67 |
    68 |

    69 | astronaught 70 | About me 71 |

    72 |

    73 | WebDeveloper living in france.
    74 | I love to test things, discover new methods and constantly improve in the way of a craftsman.
    75 | I work at Ekypia agency.
    76 |

    77 |
    78 |
    79 |
    80 |

    81 | Skills 82 |

    83 |

    84 | I work on the creation and redesign of e-commerce services.
    85 | Here is a non-exhaustive list of my daily tools : 86 |

    87 |
    88 |
    89 |
    90 |
    91 |
    92 |
    93 |
    94 | 99 |
    100 |
    101 |

    102 | 103 |

    104 |
    105 |
    106 |

    107 | François Peyret - 2020 108 |

    109 |
    110 |
    111 |
    112 | 113 | 114 | 115 |
    116 |
    117 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /src/assets/javascripts/main.js: -------------------------------------------------------------------------------- 1 | import * as p5 from "p5"; 2 | import * as p5moduleSound from "p5/lib/addons/p5.sound"; 3 | 4 | import Cursor from "./classes/cursor"; 5 | import Gravity from "./classes/gravity"; 6 | import Ui from "./classes/ui"; 7 | 8 | import AsteroidsController from './controllers/asteroids'; 9 | import BallsController from "./controllers/balls"; 10 | import BulletsController from "./controllers/bullets"; 11 | import ExplosionsController from './controllers/explosions'; 12 | import LootsController from './controllers/loots'; 13 | import ScoresController from './controllers/scores'; 14 | import SoundController from './controllers/sounds'; 15 | import LevelsController from './controllers/levels'; 16 | 17 | let s = (_) => { 18 | //----------------------------// 19 | // GAME OVERLAY // 20 | //----------------------------// 21 | let debug = false, 22 | cursor = null, 23 | gravity = null, 24 | ui = null, 25 | 26 | ballsController = null, 27 | bulletsController = null, 28 | asteroidsController = null, 29 | explosionsController = null, 30 | lootsController = null, 31 | soundController = null, 32 | scoresController = null, 33 | levelsController = null, 34 | 35 | gameStarted = false, 36 | gameResume = false, 37 | lifeMax = 3; 38 | 39 | document.querySelector('#play-start').addEventListener('click', () => { 40 | gameStarted = true; 41 | document.querySelector('#home').classList.add('started'); 42 | if(soundController.sound) 43 | soundController.soundInit(); 44 | else 45 | soundController.soundMute(); 46 | }); 47 | 48 | 49 | _.preload = () => { 50 | soundController = new SoundController(_); 51 | }; 52 | 53 | _.setup = () => { 54 | let canvas = _.createCanvas(_.windowWidth - 20, _.windowHeight); 55 | canvas.parent('p5-holder'); 56 | _.frameRate(60); 57 | 58 | cursor = new Cursor(_), 59 | gravity = new Gravity(_), 60 | ui = new Ui(_), 61 | ballsController = new BallsController(_), 62 | bulletsController = new BulletsController(_, soundController), 63 | asteroidsController = new AsteroidsController(_, soundController), 64 | explosionsController = new ExplosionsController(_), 65 | lootsController = new LootsController(_), 66 | scoresController = new ScoresController(_), 67 | levelsController = new LevelsController(_); 68 | 69 | }; 70 | 71 | _.draw = () => { 72 | // game not init or BREAKPOINT for Mobile Devices 73 | if (!gameStarted || _.width < 769) { 74 | return; 75 | } 76 | 77 | _.clear(); 78 | _.textFont('Proxima'); 79 | 80 | // INTERFACE 81 | if(cursor.life > 0) { 82 | 83 | // SCORING $$$ 84 | ui.show(cursor, levelsController, scoresController); 85 | 86 | // \\ INTERFACE 87 | // STAGE ANNONCEMENT 88 | levelsController.show(); 89 | levelsController.update(asteroidsController); 90 | if (levelsController.animationInProgress()) { 91 | return; 92 | } 93 | } 94 | _.push(); 95 | 96 | // BALLS 97 | if ( _.width < 769) { 98 | ballsController.show(); 99 | ballsController.update(); 100 | } 101 | 102 | _.noFill(); 103 | 104 | // CURSOR 105 | cursor.show(); 106 | 107 | if(cursor.life > 0) { 108 | // CURSOR - CHECK COLISION 109 | if (cursor.dammageAnimationCount < 1) { 110 | for (let a = 0; a < asteroidsController.asteroids.length; a++) { 111 | if (cursor.pos.dist(asteroidsController.asteroids[a].pos) < asteroidsController.asteroids[a].w / 2) { 112 | cursor.life--; 113 | cursor.dammageAnimationCount = 90; 114 | soundController.cursorDamageSound.play(); 115 | 116 | explosionsController.createExplosion( 117 | asteroidsController.asteroids[a].pos, 118 | asteroidsController.asteroids[a].w 119 | ); 120 | 121 | asteroidsController.asteroidSubdivide(asteroidsController.asteroids[a],lootsController); 122 | asteroidsController.asteroids.splice(a, 1); 123 | break; 124 | } 125 | } 126 | for (let o = 0; o < lootsController.loots.length; o++) { 127 | if (cursor.pos.dist(lootsController.loots[o].pos) < lootsController.loots[o].w) { 128 | soundController.cursorLootSound.play(); 129 | scoresController.scoreCreate(250, lootsController.loots[o].pos); 130 | lootsController.loots.splice(o, 1); 131 | 132 | if(cursor.life < lifeMax) { 133 | cursor.life++; 134 | } 135 | break; 136 | } 137 | } 138 | } else { 139 | cursor.dammageAnimationCount--; 140 | } 141 | } else { 142 | if (_.frameCount % 20 === 0 && asteroidsController.asteroids.length) { 143 | 144 | explosionsController.createExplosion( 145 | asteroidsController.asteroids[0].pos, 146 | asteroidsController.asteroids[0].w 147 | ); 148 | asteroidsController.asteroidSubdivide(asteroidsController.asteroids[0],lootsController); 149 | asteroidsController.asteroids.splice(0, 1); 150 | } 151 | if (_.frameCount % 20 === 10 && lootsController.loots.length) { 152 | explosionsController.createExplosion( 153 | lootsController.loots[0].pos, 154 | lootsController.loots[0].w 155 | ); 156 | soundController.asteroidCrashSound.play(); 157 | lootsController.loots.splice(0, 1); 158 | } 159 | } 160 | 161 | gravity.show(_); 162 | gravity.update(asteroidsController.asteroids, cursor); 163 | 164 | 165 | // LOOTS 166 | lootsController.show(); 167 | lootsController.update(); 168 | 169 | // ASTEROIDS 170 | asteroidsController.show(); 171 | asteroidsController.update(cursor, levelsController, bulletsController); 172 | 173 | // BULLETS 174 | bulletsController.show(); 175 | bulletsController.update(asteroidsController, lootsController, explosionsController, scoresController); 176 | 177 | // EXPLOSIONS 178 | explosionsController.show(); 179 | explosionsController.update(); 180 | 181 | // SCORES 182 | scoresController.show(); 183 | scoresController.update(); 184 | 185 | _.pop(); 186 | 187 | if (gameResume === true) { 188 | _.fill(255, 50); 189 | _.rect(0, 0, _.width, _.height); 190 | } 191 | }; 192 | 193 | window.addEventListener('mousedown', (e) => { 194 | if (gameStarted === false) { 195 | return; 196 | } 197 | if (gameResume === true) { 198 | resumeGame(); 199 | return; 200 | } 201 | if (cursor.dammageAnimationCount > 1) { 202 | return; 203 | } 204 | if (levelsController.animationInProgress()) { 205 | return; 206 | } 207 | e.preventDefault(); 208 | soundController.cursorFireSound.play(); 209 | cursor.clickedAnimationCount = 45; 210 | 211 | bulletsController.fire(cursor); 212 | }); 213 | 214 | window.addEventListener('blur', (e) => { 215 | resumeGame(); 216 | }); 217 | 218 | function resumeGame() { 219 | if (gameStarted) { 220 | gameResume = !gameResume; 221 | document.querySelector('#home').classList.add('resumed'); 222 | if (gameResume === true) { 223 | document.querySelector('#home').classList.add('resumed'); 224 | _.noLoop(); 225 | } else { 226 | document.querySelector('#home').classList.remove('resumed'); 227 | _.loop(); 228 | } 229 | _.resizeCanvas(_.windowWidth - 20, _.windowHeight); 230 | } 231 | } 232 | 233 | window.addEventListener('resize',() => { 234 | _.resizeCanvas(_.windowWidth - 20, _.windowHeight); 235 | gravity.resize(_); 236 | }); 237 | }; 238 | 239 | const P5 = new p5(s); 240 | -------------------------------------------------------------------------------- /src/assets/images/saturn.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/stylesheets/base.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Proxima'; 3 | src: url("../fonts/pnr.woff2") format("woff2"), url("../fonts/pnr.woff") format("woff"); 4 | font-weight: 400; 5 | } 6 | @font-face { 7 | font-family: 'Proxima'; 8 | src: url("../fonts/pnb.woff2") format("woff2"), url("../fonts/proxima_nova_extrabold.woff") format("woff"); 9 | font-weight: 800; 10 | } 11 | /* line 2, ../sass/partials/_utilities.scss */ 12 | * { 13 | box-sizing: border-box; 14 | padding: 0; 15 | margin: 0; 16 | font-family: 'Proxima', arial, sans-serif; 17 | -webkit-font-smoothing: antialiased; 18 | /* Chrome, Safari */ 19 | -moz-osx-font-smoothing: grayscale; 20 | /* Firefox */ 21 | } 22 | 23 | /* line 11, ../sass/partials/_utilities.scss */ 24 | html { 25 | scroll-behavior: smooth; 26 | cursor: crosshair; 27 | } 28 | 29 | @media (max-width: 769px) { 30 | /* line 17, ../sass/partials/_utilities.scss */ 31 | html, body { 32 | width: 100%; 33 | overflow-x: hidden; 34 | } 35 | } 36 | /* line 23, ../sass/partials/_utilities.scss */ 37 | ::-moz-selection { 38 | background: transparent; 39 | } 40 | 41 | /* line 24, ../sass/partials/_utilities.scss */ 42 | ::selection { 43 | background: transparent; 44 | } 45 | 46 | /* line 26, ../sass/partials/_utilities.scss */ 47 | body { 48 | color: white; 49 | background-color: #2d325a; 50 | animation: backgroundAnimation ease-in-out 15s infinite; 51 | } 52 | @keyframes backgroundAnimation { 53 | 0%, 100% { 54 | background-color: #2d325a; 55 | } 56 | 33% { 57 | background-color: #2d5a3e; 58 | } 59 | 66% { 60 | background-color: #5a2d3e; 61 | } 62 | } 63 | /* line 43, ../sass/partials/_utilities.scss */ 64 | body::-webkit-scrollbar { 65 | width: 4px; 66 | } 67 | /* line 46, ../sass/partials/_utilities.scss */ 68 | body::-webkit-scrollbar-track { 69 | box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 70 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 71 | } 72 | /* line 50, ../sass/partials/_utilities.scss */ 73 | body::-webkit-scrollbar-thumb { 74 | background-color: #fff; 75 | outline: 1px solid slategrey; 76 | } 77 | 78 | /* line 56, ../sass/partials/_utilities.scss */ 79 | a { 80 | color: white; 81 | text-decoration: none; 82 | } 83 | 84 | /* line 1, ../sass/partials/_layout.scss */ 85 | main, 86 | footer, 87 | header { 88 | padding: 1.5rem; 89 | } 90 | 91 | /* line 7, ../sass/partials/_layout.scss */ 92 | main { 93 | padding-top: 0; 94 | } 95 | @media (max-width: 769px) { 96 | /* line 7, ../sass/partials/_layout.scss */ 97 | main { 98 | opacity: 1; 99 | filter: none; 100 | transition: ease-in-out 0.2s all; 101 | } 102 | /* line 14, ../sass/partials/_layout.scss */ 103 | main.menu-active { 104 | opacity: 0.15; 105 | filter: blur(5px); 106 | } 107 | } 108 | 109 | /* line 21, ../sass/partials/_layout.scss */ 110 | header { 111 | position: fixed; 112 | z-index: 99; 113 | top: 0; 114 | right: 0; 115 | left: 0; 116 | } 117 | /* line 27, ../sass/partials/_layout.scss */ 118 | header::after { 119 | content: ""; 120 | display: block; 121 | position: absolute; 122 | z-index: 0; 123 | left: -30px; 124 | right: -30px; 125 | bottom: 0; 126 | top: -40px; 127 | height: calc(100% + 40px); 128 | opacity: 0.92; 129 | animation: backgroundAnimation ease-in-out 15s infinite; 130 | filter: blur(12px); 131 | pointer-events: none; 132 | } 133 | @media (max-width: 769px) { 134 | /* line 27, ../sass/partials/_layout.scss */ 135 | header::after { 136 | display: none; 137 | } 138 | } 139 | /* line 46, ../sass/partials/_layout.scss */ 140 | header > * { 141 | position: relative; 142 | z-index: 1; 143 | } 144 | 145 | /* line 53, ../sass/partials/_layout.scss */ 146 | main .heading { 147 | text-align: center; 148 | margin-top: calc(3rem + 100px); 149 | } 150 | /* line 56, ../sass/partials/_layout.scss */ 151 | main .heading h1 { 152 | font-size: 3.6rem; 153 | } 154 | @media (max-width: 769px) { 155 | /* line 56, ../sass/partials/_layout.scss */ 156 | main .heading h1 { 157 | font-size: 2.2rem; 158 | } 159 | } 160 | /* line 63, ../sass/partials/_layout.scss */ 161 | main .heading svg { 162 | display: inline-block; 163 | fill: #fff; 164 | height: 48px; 165 | width: 48px; 166 | position: relative; 167 | top: 0.25rem; 168 | } 169 | @media (max-width: 769px) { 170 | /* line 63, ../sass/partials/_layout.scss */ 171 | main .heading svg { 172 | height: 32px; 173 | width: 32px; 174 | } 175 | } 176 | /* line 76, ../sass/partials/_layout.scss */ 177 | main .heading .seat { 178 | transform: scaleX(-1) translateX(-0.5rem); 179 | } 180 | /* line 81, ../sass/partials/_layout.scss */ 181 | main section { 182 | min-height: calc(100vh - 100px); 183 | padding-top: 100px; 184 | padding-bottom: 100px; 185 | } 186 | 187 | /* line 1, ../sass/partials/_header.scss */ 188 | header { 189 | display: flex; 190 | flex-wrap: wrap; 191 | justify-content: space-between; 192 | align-content: space-between; 193 | } 194 | /* line 7, ../sass/partials/_header.scss */ 195 | header .header-slide { 196 | flex: 0 0 100%; 197 | max-width: 100%; 198 | position: relative; 199 | } 200 | /* line 12, ../sass/partials/_header.scss */ 201 | header .header-slide .arrow { 202 | display: block; 203 | position: absolute; 204 | left: -5px; 205 | top: -17px; 206 | border: 5px solid transparent; 207 | border-top-color: #fff3; 208 | } 209 | /* line 21, ../sass/partials/_header.scss */ 210 | header .header-slide::after { 211 | content: ""; 212 | display: block; 213 | position: absolute; 214 | top: -10px; 215 | left: 0; 216 | right: 0; 217 | border-bottom: 1px dashed #fff3; 218 | } 219 | /* line 32, ../sass/partials/_header.scss */ 220 | header .header-side, 221 | header .header-menu { 222 | flex: 0 0 auto; 223 | max-width: none; 224 | display: flex; 225 | } 226 | /* line 39, ../sass/partials/_header.scss */ 227 | header .logo { 228 | text-transform: uppercase; 229 | font-size: 0.75rem; 230 | font-weight: 800; 231 | line-height: 1; 232 | border-left: 2px solid #fff; 233 | padding: 0.1rem 1.5rem 0; 234 | display: flex; 235 | align-items: center; 236 | } 237 | /* line 50, ../sass/partials/_header.scss */ 238 | header .header-menu { 239 | align-items: center; 240 | justify-content: flex-end; 241 | } 242 | /* line 53, ../sass/partials/_header.scss */ 243 | header .header-menu ul { 244 | height: 100%; 245 | list-style: none; 246 | text-align: right; 247 | border-right: 2px solid #fff; 248 | } 249 | /* line 59, ../sass/partials/_header.scss */ 250 | header .header-menu li { 251 | display: inline-block; 252 | padding: 0 1.5rem 0 0; 253 | } 254 | /* line 62, ../sass/partials/_header.scss */ 255 | header .header-menu li a { 256 | display: block; 257 | padding: 0.95rem 0.5rem; 258 | } 259 | /* line 68, ../sass/partials/_header.scss */ 260 | header .header-menu #toggle-mobile { 261 | display: none; 262 | } 263 | @media (max-width: 769px) { 264 | /* line 74, ../sass/partials/_header.scss */ 265 | header .header-menu.active ul { 266 | right: 0; 267 | } 268 | /* line 79, ../sass/partials/_header.scss */ 269 | header .header-menu #toggle-mobile { 270 | display: block; 271 | padding: 0.5rem 1rem; 272 | border-right: 2px solid #fff; 273 | cursor: pointer; 274 | } 275 | /* line 84, ../sass/partials/_header.scss */ 276 | header .header-menu #toggle-mobile svg { 277 | display: block; 278 | height: 32px; 279 | width: 32px; 280 | fill: #fff; 281 | } 282 | /* line 91, ../sass/partials/_header.scss */ 283 | header .header-menu ul { 284 | transition: cubic-bezier(0.71, -0.29, 0.63, 2.11) all 0.5s; 285 | position: absolute; 286 | top: 4rem; 287 | right: -100%; 288 | height: auto; 289 | } 290 | /* line 98, ../sass/partials/_header.scss */ 291 | header .header-menu li { 292 | display: block; 293 | font-size: 1.6rem; 294 | font-weight: 800; 295 | } 296 | } 297 | 298 | /* line 1, ../sass/partials/_footer.scss */ 299 | footer { 300 | padding-bottom: 3rem; 301 | padding-top: 50vh; 302 | position: relative; 303 | } 304 | /* line 6, ../sass/partials/_footer.scss */ 305 | footer::before, footer::after { 306 | content: ""; 307 | display: block; 308 | position: absolute; 309 | left: 1.5rem; 310 | bottom: 1.5rem; 311 | height: 90px; 312 | border-right: 2px solid #fff; 313 | } 314 | @media (max-width: 769px) { 315 | /* line 6, ../sass/partials/_footer.scss */ 316 | footer::before, footer::after { 317 | display: none; 318 | } 319 | } 320 | /* line 20, ../sass/partials/_footer.scss */ 321 | footer::after { 322 | left: auto; 323 | right: 1.5rem; 324 | height: 150px; 325 | } 326 | /* line 26, ../sass/partials/_footer.scss */ 327 | footer .row { 328 | display: flex; 329 | flex-wrap: wrap; 330 | align-items: flex-end; 331 | padding: 0 1.5rem; 332 | } 333 | /* line 33, ../sass/partials/_footer.scss */ 334 | footer .col { 335 | flex: 0 0 33.33%; 336 | max-width: 33.333%; 337 | } 338 | @media (max-width: 769px) { 339 | /* line 33, ../sass/partials/_footer.scss */ 340 | footer .col { 341 | flex: 0 0 100%; 342 | max-width: 100%; 343 | margin-bottom: 2rem; 344 | margin-top: 2rem; 345 | text-align: center; 346 | } 347 | } 348 | /* line 46, ../sass/partials/_footer.scss */ 349 | footer ul { 350 | list-style: none; 351 | } 352 | /* line 48, ../sass/partials/_footer.scss */ 353 | footer ul li { 354 | display: inline-block; 355 | margin-right: 2rem; 356 | letter-spacing: 0.2em; 357 | } 358 | @media (max-width: 769px) { 359 | /* line 48, ../sass/partials/_footer.scss */ 360 | footer ul li { 361 | margin: 0 .5rem; 362 | } 363 | /* line 54, ../sass/partials/_footer.scss */ 364 | footer ul li a { 365 | padding: 0.5rem; 366 | display: block; 367 | } 368 | } 369 | /* line 62, ../sass/partials/_footer.scss */ 370 | footer .bravo { 371 | font-size: 2.4rem; 372 | line-height: 1; 373 | max-width: 240px; 374 | } 375 | @media (max-width: 769px) { 376 | /* line 62, ../sass/partials/_footer.scss */ 377 | footer .bravo { 378 | margin: 0 auto; 379 | } 380 | } 381 | /* line 71, ../sass/partials/_footer.scss */ 382 | footer .copyrights { 383 | text-align: right; 384 | font-size: 0.75rem; 385 | font-weight: 800; 386 | text-transform: uppercase; 387 | } 388 | @media (max-width: 769px) { 389 | /* line 71, ../sass/partials/_footer.scss */ 390 | footer .copyrights { 391 | text-align: center; 392 | } 393 | } 394 | /* line 81, ../sass/partials/_footer.scss */ 395 | footer .back-to-top { 396 | position: absolute; 397 | right: 0.8rem; 398 | bottom: calc(3rem + 150px - 20px); 399 | } 400 | /* line 86, ../sass/partials/_footer.scss */ 401 | footer .back-to-top svg { 402 | display: block; 403 | width: 24px; 404 | height: 24px; 405 | fill: #fff; 406 | transition: ease 0.2s all; 407 | } 408 | /* line 94, ../sass/partials/_footer.scss */ 409 | footer .back-to-top a { 410 | padding: 0.75rem; 411 | margin: -0.75rem; 412 | display: block; 413 | } 414 | /* line 100, ../sass/partials/_footer.scss */ 415 | footer .back-to-top a:hover svg { 416 | transform: translateY(-10px); 417 | } 418 | 419 | /* line 1, ../sass/sections/_about.scss */ 420 | #about { 421 | max-width: 340px; 422 | margin-left: 20vw; 423 | } 424 | @media (max-width: 769px) { 425 | /* line 1, ../sass/sections/_about.scss */ 426 | #about { 427 | margin-left: 10vw; 428 | max-width: 260px; 429 | } 430 | } 431 | /* line 9, ../sass/sections/_about.scss */ 432 | #about h2 { 433 | font-size: 3.6rem; 434 | position: relative; 435 | } 436 | @media (max-width: 769px) { 437 | /* line 9, ../sass/sections/_about.scss */ 438 | #about h2 { 439 | font-size: 2.2rem; 440 | } 441 | } 442 | /* line 16, ../sass/sections/_about.scss */ 443 | #about h2 .face { 444 | fill: white; 445 | width: 48px; 446 | height: 48px; 447 | display: block; 448 | position: absolute; 449 | left: -64px; 450 | top: 8px; 451 | } 452 | @media (max-width: 769px) { 453 | /* line 16, ../sass/sections/_about.scss */ 454 | #about h2 .face { 455 | height: 32px; 456 | width: 32px; 457 | top: 4px; 458 | left: -48px; 459 | } 460 | } 461 | /* line 33, ../sass/sections/_about.scss */ 462 | #about p { 463 | text-transform: uppercase; 464 | font-size: 2.8rem; 465 | line-height: 1; 466 | } 467 | @media (max-width: 769px) { 468 | /* line 33, ../sass/sections/_about.scss */ 469 | #about p { 470 | font-size: 1.8rem; 471 | } 472 | } 473 | /* line 43, ../sass/sections/_about.scss */ 474 | #about .tags svg { 475 | fill: #fff; 476 | opacity: 0.3; 477 | transition: ease 0.2s all; 478 | } 479 | /* line 48, ../sass/sections/_about.scss */ 480 | #about .tags svg:hover { 481 | opacity: 1; 482 | } 483 | 484 | /* line 1, ../sass/sections/_contact.scss */ 485 | #contact { 486 | display: flex; 487 | align-items: center; 488 | justify-content: center; 489 | max-width: 360px; 490 | margin-left: 50vw; 491 | } 492 | @media (max-width: 769px) { 493 | /* line 1, ../sass/sections/_contact.scss */ 494 | #contact { 495 | margin-left: 10vw; 496 | max-width: 260px; 497 | } 498 | } 499 | /* line 12, ../sass/sections/_contact.scss */ 500 | #contact h2 { 501 | margin-bottom: 1rem; 502 | font-size: 3.6rem; 503 | position: relative; 504 | } 505 | @media (max-width: 769px) { 506 | /* line 12, ../sass/sections/_contact.scss */ 507 | #contact h2 { 508 | font-size: 2.2rem; 509 | } 510 | } 511 | /* line 20, ../sass/sections/_contact.scss */ 512 | #contact h2 .send { 513 | fill: white; 514 | width: 48px; 515 | height: 48px; 516 | display: block; 517 | position: absolute; 518 | left: -64px; 519 | top: 8px; 520 | } 521 | @media (max-width: 769px) { 522 | /* line 20, ../sass/sections/_contact.scss */ 523 | #contact h2 .send { 524 | height: 32px; 525 | width: 32px; 526 | top: 4px; 527 | left: -48px; 528 | } 529 | } 530 | /* line 37, ../sass/sections/_contact.scss */ 531 | #contact p { 532 | text-transform: uppercase; 533 | font-size: 0.75rem; 534 | line-height: 1; 535 | } 536 | @media (max-width: 769px) { 537 | /* line 37, ../sass/sections/_contact.scss */ 538 | #contact p { 539 | font-size: 1.8rem; 540 | } 541 | } 542 | /* line 46, ../sass/sections/_contact.scss */ 543 | #contact #loader { 544 | height: 40px; 545 | width: 40px; 546 | display: block; 547 | border-radius: 40px; 548 | border: 2px solid #fff; 549 | border-left-color: #fff3; 550 | border-right-color: #fff3; 551 | border-left-style: dotted; 552 | border-right-style: dotted; 553 | animation: rotate ease-in-out 0.75s infinite; 554 | transition: ease 0.2s all; 555 | opacity: 0; 556 | } 557 | @keyframes rotate { 558 | 0% { 559 | transform: rotate(0deg); 560 | } 561 | 100% { 562 | transform: rotate(180deg); 563 | } 564 | } 565 | /* line 69, ../sass/sections/_contact.scss */ 566 | #contact #loader.active { 567 | opacity: 1; 568 | } 569 | /* line 74, ../sass/sections/_contact.scss */ 570 | #contact form { 571 | display: flex; 572 | flex-wrap: wrap; 573 | } 574 | /* line 77, ../sass/sections/_contact.scss */ 575 | #contact form p { 576 | flex: 0 0 100%; 577 | max-width: 100%; 578 | display: block; 579 | } 580 | /* line 81, ../sass/sections/_contact.scss */ 581 | #contact form p label, #contact form p input, #contact form p textarea { 582 | display: block; 583 | width: 100%; 584 | } 585 | /* line 87, ../sass/sections/_contact.scss */ 586 | #contact form label { 587 | margin-bottom: 0.33rem; 588 | } 589 | /* line 91, ../sass/sections/_contact.scss */ 590 | #contact form input, #contact form textarea { 591 | letter-spacing: 0.1em; 592 | } 593 | /* line 95, ../sass/sections/_contact.scss */ 594 | #contact form input, #contact form textarea, #contact form button { 595 | background: none; 596 | color: #fff; 597 | outline: none; 598 | border: 2px solid #fff3; 599 | padding: 0.5rem 0.5rem; 600 | margin-bottom: 1rem; 601 | transition: border ease 0.25s, color ease 0.25s; 602 | } 603 | /* line 104, ../sass/sections/_contact.scss */ 604 | #contact form input::placeholder, #contact form textarea::placeholder, #contact form button::placeholder { 605 | color: #fff3; 606 | } 607 | /* line 108, ../sass/sections/_contact.scss */ 608 | #contact form input:active, #contact form input:focus, #contact form input:hover, #contact form textarea:active, #contact form textarea:focus, #contact form textarea:hover, #contact form button:active, #contact form button:focus, #contact form button:hover { 609 | border-color: #fff; 610 | } 611 | /* line 115, ../sass/sections/_contact.scss */ 612 | #contact form button { 613 | text-transform: uppercase; 614 | font-weight: 800; 615 | padding: 0.5rem 1.5rem; 616 | font-size: 1.45rem; 617 | transition: all 0.25s cubic-bezier(0.71, -0.29, 0.63, 2.11); 618 | } 619 | /* line 123, ../sass/sections/_contact.scss */ 620 | #contact form button:focus, #contact form button:active, #contact form button:hover { 621 | background: #fff; 622 | color: #000; 623 | letter-spacing: 0.396em; 624 | cursor: pointer; 625 | } 626 | 627 | /* line 1, ../sass/sections/_home.scss */ 628 | #home { 629 | min-height: 100vh; 630 | margin: 0 -1.5rem; 631 | padding: 100px 3rem; 632 | } 633 | /* line 5, ../sass/sections/_home.scss */ 634 | #home .resume-screen, 635 | #home .content { 636 | transition: ease-in all 0.33s; 637 | } 638 | /* line 11, ../sass/sections/_home.scss */ 639 | #home .resume-screen { 640 | transform: translateY(-100%); 641 | opacity: 0; 642 | pointer-events: none; 643 | } 644 | /* line 16, ../sass/sections/_home.scss */ 645 | #home .resume-screen svg { 646 | fill: #fff; 647 | display: block; 648 | height: 64px; 649 | width: 64px; 650 | margin: 0 auto; 651 | } 652 | /* line 26, ../sass/sections/_home.scss */ 653 | #home.started .content { 654 | transform: translateY(-100%); 655 | opacity: 0; 656 | pointer-events: none; 657 | } 658 | /* line 34, ../sass/sections/_home.scss */ 659 | #home.resumed .resume-screen { 660 | transform: translateY(0); 661 | opacity: 1; 662 | } 663 | /* line 38, ../sass/sections/_home.scss */ 664 | #home.resumed #p5-holder { 665 | filter: blur(5px); 666 | } 667 | /* line 43, ../sass/sections/_home.scss */ 668 | #home #p5-holder { 669 | position: fixed; 670 | z-index: 100; 671 | pointer-events: none; 672 | left: 0; 673 | right: 0; 674 | top: 0; 675 | bottom: 0; 676 | transition: ease-in all 0.33s; 677 | } 678 | /* line 54, ../sass/sections/_home.scss */ 679 | #home #play-start { 680 | margin: 3rem auto; 681 | display: block; 682 | text-transform: uppercase; 683 | font-size: 2.4rem; 684 | font-weight: 800; 685 | padding: 0.75rem 2.5rem 0.7rem; 686 | color: #fff; 687 | background: none; 688 | border: 3px solid #fff; 689 | appearance: none; 690 | outline: none; 691 | transition: all 0.25s cubic-bezier(0.71, -0.29, 0.63, 2.11); 692 | } 693 | /* line 69, ../sass/sections/_home.scss */ 694 | #home #play-start:focus, #home #play-start:active, #home #play-start:hover { 695 | background: #fff; 696 | color: #000; 697 | letter-spacing: 0.396em; 698 | cursor: pointer; 699 | } 700 | 701 | /* line 1, ../sass/sections/_skills.scss */ 702 | #skills { 703 | display: flex; 704 | align-items: center; 705 | justify-content: center; 706 | text-align: center; 707 | } 708 | /* line 7, ../sass/sections/_skills.scss */ 709 | #skills .content { 710 | display: block; 711 | } 712 | /* line 11, ../sass/sections/_skills.scss */ 713 | #skills h2 { 714 | font-size: 2.4rem; 715 | } 716 | /* line 15, ../sass/sections/_skills.scss */ 717 | #skills p { 718 | text-transform: uppercase; 719 | font-size: 0.66rem; 720 | } 721 | /* line 20, ../sass/sections/_skills.scss */ 722 | #skills ul { 723 | margin-top: 2rem; 724 | list-style: none; 725 | display: flex; 726 | flex-wrap: wrap; 727 | justify-content: center; 728 | max-width: 1160px; 729 | } 730 | /* line 28, ../sass/sections/_skills.scss */ 731 | #skills ul li { 732 | position: relative; 733 | display: inline-block; 734 | transition: ease 0.2s all; 735 | } 736 | /* line 33, ../sass/sections/_skills.scss */ 737 | #skills ul li strong { 738 | display: block; 739 | transition: ease 0.2s all; 740 | display: block; 741 | font-size: 1.8rem; 742 | padding: 0.65rem 1.15rem; 743 | border: 2px solid #fff; 744 | margin-right: -2px; 745 | margin-bottom: -2px; 746 | } 747 | /* line 44, ../sass/sections/_skills.scss */ 748 | #skills ul li strong::before { 749 | content: "#"; 750 | font-weight: 300; 751 | font-size: 1rem; 752 | } 753 | /* line 53, ../sass/sections/_skills.scss */ 754 | #skills ul li.prestashop strong:hover { 755 | background: #7c1b4c; 756 | } 757 | /* line 58, ../sass/sections/_skills.scss */ 758 | #skills ul li.shopify strong:hover { 759 | background: #07ad23; 760 | } 761 | /* line 63, ../sass/sections/_skills.scss */ 762 | #skills ul li.adobe strong:hover { 763 | background: #c00606; 764 | } 765 | /* line 68, ../sass/sections/_skills.scss */ 766 | #skills ul li.sass strong:hover { 767 | background: #c00682; 768 | } 769 | /* line 73, ../sass/sections/_skills.scss */ 770 | #skills ul li.javascript strong:hover { 771 | background: #807d00; 772 | } 773 | /* line 78, ../sass/sections/_skills.scss */ 774 | #skills ul li.webpack strong:hover { 775 | background: #004280; 776 | } 777 | /* line 83, ../sass/sections/_skills.scss */ 778 | #skills ul li.php strong:hover { 779 | background: #4F5B93; 780 | } 781 | /* line 88, ../sass/sections/_skills.scss */ 782 | #skills ul li.react strong:hover { 783 | background: #3997b1; 784 | } 785 | /* line 93, ../sass/sections/_skills.scss */ 786 | #skills ul li.cypress strong:hover { 787 | background: #04c38e; 788 | } 789 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | --------------------------------------------------------------------------------