├── .eslintrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public └── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── artists-1.jpg │ ├── artists-2.jpg │ ├── artists-3.jpg │ ├── clients.png │ ├── comique-1.jpg │ ├── comique-2.jpg │ ├── comique-3.jpg │ ├── contact-1.jpg │ ├── contact-2.jpg │ ├── contact-3.jpg │ ├── contact-4.jpg │ ├── dice-1.jpg │ ├── dice-2.jpg │ ├── dice-3.jpg │ ├── dice-4.jpg │ ├── email.png │ ├── github.png │ ├── hamburger.png │ ├── miiverse.png │ ├── new-comique-0.jpg │ ├── new-comique-1.jpg │ ├── new-comique-2.jpg │ ├── new-comique-3.jpg │ ├── paintbrush.png │ ├── peaches-1.jpg │ ├── peaches-2.jpg │ ├── peaches-3.jpg │ ├── peaches-4.jpg │ ├── pgn-1.jpg │ ├── pgn-2.jpg │ ├── pgn-3.jpg │ ├── relay-visual-1.jpg │ ├── relay-visual-2.jpg │ ├── sam.png │ ├── talking-text-1.jpg │ ├── talking-text-2.jpg │ ├── tjmd-1.jpg │ ├── tjmd-2.jpg │ ├── tjmd-3.jpg │ ├── tjmd-4.jpg │ ├── tumblr.png │ ├── tusk-1.jpg │ ├── tusk-2.jpg │ └── twitter.png ├── server.js ├── src ├── PageData.js ├── components │ ├── CurriculumVitae.jsx │ ├── CurriculumVitae.scss │ ├── Page.jsx │ ├── Page.scss │ ├── Portfolio.jsx │ ├── Portfolio.scss │ ├── Project.jsx │ ├── Project.scss │ ├── QualityList.jsx │ ├── QualityList.scss │ └── ScaledImage.jsx ├── index.js └── shared │ └── styles │ └── layout.scss ├── webpack.config.js └── webpack.dev.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "babel-eslint", 11 | "rules": { 12 | "quotes": [2, "single"], 13 | "strict": [2, "never"], 14 | "react/jsx-uses-react": 2, 15 | "react/jsx-uses-vars": 2, 16 | "react/react-in-jsx-scope": 2 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | build 4 | 5 | public/images/gwilco.psd 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gwil-react-portfolio 2 | A little CV / Portfolio webpage built with React. 3 | 4 | This portfolio is a single page React app made using Webpack, ES6 and Sass. There’s a few fun things in here: a simple carousel component; an image scaling component (scaling from the image’s dimensions rather than its element’s — good if you want to display retina assets for arbitrary image sizes!); the rest are just dumb components and a bit of Sass. 5 | 6 | ## Webpack dev server 7 | 8 | To start this project up in a Webpack dev server, navigate to this project’s folder and enter `node server`. 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sam Gwilym - Gwilco 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gwilco", 3 | "version": "1.0.0", 4 | "description": "My portfolio/online CV", 5 | "main": "index.js", 6 | "scripts": { 7 | "deploy": "UV_THREADPOOL_SIZE=100 NODE_ENV=production webpack -p --progress --config webpack.config.js", 8 | "hot": "UV_THREADPOOL_SIZE=100 node server" 9 | }, 10 | "keywords": [ 11 | "portfolio" 12 | ], 13 | "author": "Sam Gwilym", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "autoprefixer-core": "^5.2.1", 17 | "babel-core": "^5.2.9", 18 | "babel-jest": "^5.0.1", 19 | "babel-loader": "^5.0.0", 20 | "css-loader": "^0.15.6", 21 | "eslint": "^1.2.1", 22 | "file-loader": "^0.8.1", 23 | "jest-cli": "^0.4.0", 24 | "jsx-loader": "^0.13.2", 25 | "jsxstyle": "0.0.10", 26 | "node-sass": "^3.2.0", 27 | "postcss-loader": "^0.5.1", 28 | "react": "^0.13.2", 29 | "react-a11y": "git://github.com/iam4x/react-a11y#packaged", 30 | "react-hot-loader": "^1.2.6", 31 | "sass-loader": "^1.0.2", 32 | "style-loader": "^0.12.1", 33 | "url-loader": "^0.5.5", 34 | "webpack": "^1.8.11", 35 | "webpack-dev-server": "^1.8.2" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /public/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/1.jpg -------------------------------------------------------------------------------- /public/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/2.jpg -------------------------------------------------------------------------------- /public/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/3.jpg -------------------------------------------------------------------------------- /public/images/artists-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/artists-1.jpg -------------------------------------------------------------------------------- /public/images/artists-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/artists-2.jpg -------------------------------------------------------------------------------- /public/images/artists-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/artists-3.jpg -------------------------------------------------------------------------------- /public/images/clients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/clients.png -------------------------------------------------------------------------------- /public/images/comique-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/comique-1.jpg -------------------------------------------------------------------------------- /public/images/comique-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/comique-2.jpg -------------------------------------------------------------------------------- /public/images/comique-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/comique-3.jpg -------------------------------------------------------------------------------- /public/images/contact-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/contact-1.jpg -------------------------------------------------------------------------------- /public/images/contact-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/contact-2.jpg -------------------------------------------------------------------------------- /public/images/contact-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/contact-3.jpg -------------------------------------------------------------------------------- /public/images/contact-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/contact-4.jpg -------------------------------------------------------------------------------- /public/images/dice-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/dice-1.jpg -------------------------------------------------------------------------------- /public/images/dice-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/dice-2.jpg -------------------------------------------------------------------------------- /public/images/dice-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/dice-3.jpg -------------------------------------------------------------------------------- /public/images/dice-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/dice-4.jpg -------------------------------------------------------------------------------- /public/images/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/email.png -------------------------------------------------------------------------------- /public/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/github.png -------------------------------------------------------------------------------- /public/images/hamburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/hamburger.png -------------------------------------------------------------------------------- /public/images/miiverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/miiverse.png -------------------------------------------------------------------------------- /public/images/new-comique-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/new-comique-0.jpg -------------------------------------------------------------------------------- /public/images/new-comique-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/new-comique-1.jpg -------------------------------------------------------------------------------- /public/images/new-comique-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/new-comique-2.jpg -------------------------------------------------------------------------------- /public/images/new-comique-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/new-comique-3.jpg -------------------------------------------------------------------------------- /public/images/paintbrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/paintbrush.png -------------------------------------------------------------------------------- /public/images/peaches-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/peaches-1.jpg -------------------------------------------------------------------------------- /public/images/peaches-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/peaches-2.jpg -------------------------------------------------------------------------------- /public/images/peaches-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/peaches-3.jpg -------------------------------------------------------------------------------- /public/images/peaches-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/peaches-4.jpg -------------------------------------------------------------------------------- /public/images/pgn-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/pgn-1.jpg -------------------------------------------------------------------------------- /public/images/pgn-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/pgn-2.jpg -------------------------------------------------------------------------------- /public/images/pgn-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/pgn-3.jpg -------------------------------------------------------------------------------- /public/images/relay-visual-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/relay-visual-1.jpg -------------------------------------------------------------------------------- /public/images/relay-visual-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/relay-visual-2.jpg -------------------------------------------------------------------------------- /public/images/sam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/sam.png -------------------------------------------------------------------------------- /public/images/talking-text-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/talking-text-1.jpg -------------------------------------------------------------------------------- /public/images/talking-text-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/talking-text-2.jpg -------------------------------------------------------------------------------- /public/images/tjmd-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/tjmd-1.jpg -------------------------------------------------------------------------------- /public/images/tjmd-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/tjmd-2.jpg -------------------------------------------------------------------------------- /public/images/tjmd-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/tjmd-3.jpg -------------------------------------------------------------------------------- /public/images/tjmd-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/tjmd-4.jpg -------------------------------------------------------------------------------- /public/images/tumblr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/tumblr.png -------------------------------------------------------------------------------- /public/images/tusk-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/tusk-1.jpg -------------------------------------------------------------------------------- /public/images/tusk-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/tusk-2.jpg -------------------------------------------------------------------------------- /public/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgwilym/gwil-react-portfolio/89f8493b1fc6db59e8e0324a6a8625b9fffaaa03/public/images/twitter.png -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var WebpackDevServer = require('webpack-dev-server'); 3 | var config = require('./webpack.dev.config'); 4 | 5 | new WebpackDevServer(webpack(config), { 6 | publicPath: config.output.publicPath, 7 | hot: true, 8 | historyApiFallback: true 9 | }).listen(8080, '0.0.0.0', function (err, result) { 10 | if (err) { 11 | console.log(err); 12 | } 13 | console.log('Listening at 0.0.0.0:8080'); 14 | }); 15 | -------------------------------------------------------------------------------- /src/PageData.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "Sam Gwilym", 3 | icon: "sam.png", 4 | description: "Hello! I'm an artist, programmer and designer. My ambition is making fun, human software that entertains and informs. I like to grow things, to learn (and to learn about learning), and to be a genuinely helpful guy!", 5 | workingOn: "I’m currently available for work!", 6 | qualities: [ 7 | { 8 | title: "Full Stack Developer", 9 | icon: "hamburger", 10 | skills: [ 11 | ["UX", "UI", "Responsive interfaces"], 12 | ["JS", "React", "ES2015", "Flux", "Webpack"], 13 | ["Objective-C", "UIKit", "Core Data"], 14 | ["Ruby", "Sinatra", "Rails"], 15 | ["CSS Modules", "Sass", "SVG Animation"] 16 | ] 17 | }, 18 | { 19 | title: "Born 2 Draw", 20 | icon: "paintbrush", 21 | skills: [ 22 | ["Icons", "Comics", "Illustrations", "Logos"], 23 | ["Photoshop", "Illustrator"], 24 | ["Ink", "Pastel", "Oils", "Pencil"] 25 | ] 26 | } 27 | ], 28 | clients: [ 29 | { 30 | name: 'United Nations', 31 | url: 'http://unmict.org' 32 | }, 33 | { 34 | name: 'Floorplanner', 35 | url: 'http://floorplanner.com' 36 | }, 37 | { 38 | name: 'Housing Anywhere', 39 | url: 'http://housinganywhere.com' 40 | }, 41 | { 42 | name: 'Firmhouse', 43 | url: 'http://firmhouse.com' 44 | }, 45 | { 46 | name: 'Philips', 47 | url: 'http://philips.com' 48 | }, 49 | { 50 | name: 'Kids Against War', 51 | url: 'http://kidsagainstwar.com' 52 | } 53 | ], 54 | links: [ 55 | { 56 | name: "email", 57 | url: "mailto:gwilym@me.com" 58 | }, 59 | { 60 | name: "twitter", 61 | url: "https://twitter.com/sgwil" 62 | }, 63 | { 64 | name: "github", 65 | url: "https://github.com/sgwilym" 66 | }, 67 | { 68 | name: "tumblr", 69 | url: "http://blog.gwil.co" 70 | }, 71 | { 72 | name: "miiverse", 73 | url: "https://miiverse.nintendo.net/users/gwilym" 74 | } 75 | ], 76 | portfolio: [ 77 | { 78 | title: "New Comique", 79 | link: "http://new.comique.co", 80 | description: "This is my app for publishing and reading small comics, Comique, rebuilt and redesigned from the ground up as a React app using Relay and a Rails based GraphQL server. This way it's accessible to anyone with a web browser, offers much improved functionality over the original, and looks great on big and small screens.", 81 | images: ["new-comique-0.jpg", "new-comique-1.jpg", "new-comique-2.jpg", "new-comique-3.jpg"], 82 | color: '#aab6da', 83 | bgColor: '#f1f3f9' 84 | }, 85 | { 86 | title: "Relay for Visual Learners", 87 | link: "http://sgwilym.github.io/relay-visual-learners/", 88 | description: "It’s no secret that I’m a big fan of React, and Relay — a new data fetching framework for React apps — immediately caught my interest. However, initially I was a little overwhelmed by all of Relay’s moving parts, so I made this interactive diagram that represents the structure of Relay and GraphQL, with (hopefully) succinct explanations for each part of the diagram. And it’s made with React, of course.", 89 | images: ["relay-visual-1.jpg", "relay-visual-2.jpg"], 90 | color: "#ffffff", 91 | bgColor: "#f26b00" 92 | }, 93 | { 94 | title: "Comique", 95 | link: "http://comique.co", 96 | description: "Comique is a comic reader and store made specifically for small screens. It’s not just the app that’s made for mobile — it’s the comics too! Comique’s interface is built around letting our catalog’s personality shine through, with actions built around reader’s normal comic-reading gestures. I’m the programmer and designer for all aspects of Comique, from backend to iOS client. I’m currently working on Comique 2!", 97 | images: ["comique-2.jpg", "comique-1.jpg", "comique-3.jpg"], 98 | color: '#ffd743', 99 | bgColor: '#000000' 100 | }, 101 | { 102 | title: "Contact - L5", 103 | description: "Contact - L5 is a commissioned adaptation of a short story of the same name written in 1994 by Dr. Arnold Komisar. It’s a story about ambitious space programmes, alien contact, and a time when world powers had a far more overt animosity for each other. It’s also very, very pulpy. For this project I wanted to capture some of the scrappy spirit of old pulp comics, and challenge myself to finishing the project within a week. Done, and 16 pages long!", 104 | images: ["contact-4.jpg", "contact-1.jpg", "contact-2.jpg", "contact-3.jpg"], 105 | color: '#000000', 106 | bgColor: "#e55060" 107 | }, 108 | { 109 | title: "talking-text", 110 | link: "http://sgwilym.github.io/talking-text/", 111 | description: "Ever played one of those old role-playing games? Pokémon? Zelda? Earthbound? Remember when you’d speak to anyone, the text would kind of type itself out, possibly with a little beepy-boopy sound alongside it? This is that effect but for the web, and it even makes sound too! You have to see (and hear) it for yourself to understand that I’m not completely mental. Available as an open sourced jQuery plugin.", 112 | images: ["talking-text-1.jpg", "talking-text-2.jpg"], 113 | color: '#d40060', 114 | bgColor: '#ffe488' 115 | }, 116 | { 117 | title: "artists.comique.co", 118 | link: "http://artists.comique.co", 119 | description: "The comics sold on Comique are made especially for the phone’s small screen. This requires a fair bit of extra care and effort on the part of the comic creators — so I have to make sure that submitting their comics to Comique is as easy and pleasant as possible. Drag and drop editors, live sales charts, and a few little community features to boot.", 120 | images: ["artists-1.jpg", "artists-2.jpg", "artists-3.jpg"], 121 | color: '#000000', 122 | bgColor: '#ffd743' 123 | }, 124 | { 125 | title: "Death is Certain", 126 | link: "http://dice.gwil.co", 127 | description: "Death is Certain is a project that splices two of my nerdiest interests: comics and video games. In Death is Certain, readers not only follow the exploits of hapless adventurers, but also vote on whether the hero should lose hearts (health) or not, controlling the outcome of the story! This is a Ruby app built on the Sinatra framework featuring a cornucopia of CSS animations and some of my best icon work. We had a great community for a while!", 128 | images: ["dice-1.jpg", "dice-2.jpg", "dice-3.jpg", "dice-4.jpg"], 129 | color: '#ffffff', 130 | bgColor: '#03c364' 131 | }, 132 | { 133 | title: "The Judge Must Die", 134 | link: "http://gwil.co/tjmd", 135 | description: "This is a comic I made for Frank Santoro's Comics Course in back in 2013. Composed of 8 spreads, The Judge Must Die is a hazy, vengeful dream laid over a landowner's story of his best farmhand ever. You can read it in its entirety online. Frank is a fantastic teacher and editor, and I learned an enormous amount about layout and the 'creative process' during this time.", 136 | images: ["tjmd-1.jpg", "tjmd-2.jpg", "tjmd-3.jpg"], 137 | color: '#3382fd', 138 | bgColor: '#f6a8cf' 139 | }, 140 | { 141 | title: "Peaches", 142 | link: "http://gwil.co/peaches", 143 | description: "Peaches is where my interests in digital design and comics first overlapped. The first chapter of Peaches is a story written in the style of a darkly weird fairytale, presented as a self-scrolling banner with accompanying music by Toby Paramore, and narration by yours truly. It’s followed up by a pixelated and chiptune-infused comic in a (slightly more) traditional format. Also features typography from Rob Mientjes. Check it out!", 144 | images: ["peaches-1.jpg", "peaches-2.jpg", "peaches-3.jpg"], 145 | color: '#ff4155', 146 | bgColor: '#262e46' 147 | }, 148 | { 149 | title: "Tusk / Sei-shun", 150 | link: "http://tusktheatre.net", 151 | description: "Tusk International Theatre company was in need of a new logo and a poster for a new production, Sei-shun, a play about the phenomenon of hikikomori, young people who choose to close their windows to the world and live inside their own bedrooms and minds.", 152 | images: ["tusk-2.jpg", "tusk-1.jpg"], 153 | color: '#ffb350', 154 | bgColor: '#3e3e3e' 155 | } 156 | ] 157 | } 158 | -------------------------------------------------------------------------------- /src/components/CurriculumVitae.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import QualityList from './QualityList'; 3 | import ScaledImage from './ScaledImage'; 4 | import styles from './CurriculumVitae.scss'; 5 | 6 | export default class CurriculumVitae extends React.Component { 7 | 8 | render() { 9 | 10 | const { name, description, workingOn, qualities, clients, links, icon } = this.props; 11 | 12 | const qualityNodes = qualities.map((quality) => { 13 | return( 14 | 20 | ); 21 | }); 22 | 23 | const clientNodes = clients.map((client) => { 24 | return( 25 |
  • {client.name}
    • 26 | ); 27 | }); 28 | 29 | const linkNodes = this.props.links.map((link) => { 30 | return( 31 |
  • 32 | 33 |
    • 34 | ); 35 | }); 36 | 37 | return( 38 |
    39 | 40 |
    41 | 42 |

    {name}

    43 |

    {description}

    44 |

    {workingOn}

    45 |
    46 | 47 | {qualityNodes} 48 | 49 |

    50 | 52 | Some clients 53 |

    54 | 55 | 58 | 59 | 62 | 63 |

    This is a React app! Check out the source on GitHub.

    64 | 65 |
    66 | ); 67 | } 68 | 69 | } 70 | -------------------------------------------------------------------------------- /src/components/CurriculumVitae.scss: -------------------------------------------------------------------------------- 1 | @import '../shared/styles/layout.scss'; 2 | 3 | .root { 4 | $padding: 2.5em; 5 | width: calc(25em - (#{$padding} * 2)); 6 | display: flex; 7 | flex-direction: column; 8 | flex-shrink: 0; 9 | -webkit-flex-shrink: 0; 10 | padding: $padding; 11 | text-align: right; 12 | @media screen and (max-width: $small-screen-size) { 13 | text-align: left; 14 | padding: 1em; 15 | } 16 | } 17 | 18 | .header { 19 | margin: 0 0 1.5em 0; 20 | } 21 | 22 | .header h1 { 23 | font-size: 2em; 24 | margin: .25em 0; 25 | } 26 | 27 | .header p { 28 | margin: 0 0 .5em 0; 29 | } 30 | 31 | .header img { 32 | @media screen and (max-width: $small-screen-size) { 33 | transform: scaleX(-1); 34 | filter: FlipH; 35 | -ms-filter: "FlipH"; 36 | } 37 | } 38 | 39 | .workingOn { 40 | font-weight: bold; 41 | } 42 | 43 | .clientList { 44 | composes: asideList from '../shared/styles/layout.scss'; 45 | } 46 | 47 | .clientItem { 48 | composes: asideListLineItem from '../shared/styles/layout.scss'; 49 | } 50 | 51 | .links { 52 | margin: 2em 0 0 0; 53 | padding: 0; 54 | } 55 | 56 | .link { 57 | display: inline-block; 58 | margin: 0 0 0 .75em; 59 | vertical-align: middle; 60 | transition: all 100ms; 61 | &:hover { 62 | transform: scale(1.1, 1.1) rotate(9deg); 63 | } 64 | } 65 | 66 | .subHeader { 67 | composes: asideHeader from '../shared/styles/layout.scss'; 68 | } 69 | 70 | .note { 71 | font-size: 0.8em; 72 | margin: 2em 0 0 0; 73 | a { 74 | color: #3651b5; 75 | text-decoration: none; 76 | transition: all 100ms; 77 | &:hover { 78 | transform: scale(1.1, 1.1); 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/components/Page.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CurriculumVitae from './CurriculumVitae'; 3 | import Portfolio from './Portfolio'; 4 | import styles from './Page.scss'; 5 | 6 | export default class Page extends React.Component { 7 | 8 | render() { 9 | 10 | const { portfolio } = this.props; 11 | 12 | return( 13 |
    14 | 16 | 17 |
    18 | ); 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/components/Page.scss: -------------------------------------------------------------------------------- 1 | @import '../shared/styles/layout.scss'; 2 | 3 | .root { 4 | display: flex; 5 | align-content: stretch; 6 | font-size: 0.85em; 7 | background: red; 8 | background-color: #ffffff; 9 | @media screen and (max-width: $small-screen-size) { 10 | flex-direction: column; 11 | align-items: center; 12 | } 13 | } 14 | 15 | .root h1, h2, h3, h4, h5 { 16 | font-family: 'calluna-sans', sans-serif; 17 | font-weight: 700; 18 | } 19 | 20 | .root p, .root li { 21 | font-family: 'lato', sans-serif; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Portfolio.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Project from './Project'; 3 | import styles from './Portfolio.scss'; 4 | 5 | export default class Portfolio extends React.Component { 6 | 7 | render() { 8 | 9 | const workNodes = this.props.portfolio.map(function (work, i) { 10 | return( 11 | 20 | ); 21 | }); 22 | 23 | return( 24 | 27 | ); 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/components/Portfolio.scss: -------------------------------------------------------------------------------- 1 | .root { 2 | flex: 1 1 auto; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Project.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import styles from './Project.scss'; 3 | 4 | export default class Project extends React.Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | currentImage: 0, 10 | carouselInterval: null 11 | }; 12 | 13 | this.handleClick = this.handleClick.bind(this); 14 | } 15 | 16 | handleClick() { 17 | const newState = React.addons.update(this.state, { 18 | currentImage: {$apply: (i) => { 19 | return i < this.props.images.length - 1 ? i + 1 : 0; 20 | }} 21 | }); 22 | this.setState(newState); 23 | } 24 | 25 | render() { 26 | 27 | const { title, description, link, images, color, backgroundColor } = this.props; 28 | 29 | const imageNodes = images.map((image, i) => { 30 | let className = (i == this.state.currentImage ? styles.visibleSlide : styles.invisibleSlide ); 31 | let src = require(`../../public/images/${image}`); 32 | return( 33 |
    • 34 | ); 35 | }); 36 | 37 | const style = { 38 | color: this.props.color, 39 | backgroundColor: this.props.backgroundColor 40 | }; 41 | 42 | return( 43 |
    44 |
      47 | {imageNodes} 48 |
    49 |
    50 |

    {title}

    51 |

    52 | {link} 53 |

    54 |

    {description}

    55 |
    56 |
    57 | ); 58 | 59 | } 60 | 61 | } 62 | -------------------------------------------------------------------------------- /src/components/Project.scss: -------------------------------------------------------------------------------- 1 | @import '../shared/styles/layout.scss'; 2 | 3 | .root { 4 | overflow: auto; 5 | font-size: 0; 6 | margin: 0 0 35px 0; 7 | } 8 | 9 | .carousel { 10 | width: 100%; 11 | display: inline-block; 12 | position: relative; 13 | cursor: pointer; 14 | padding: 0; 15 | &:before { 16 | content: ""; 17 | display: block; 18 | margin-top: 56%; 19 | } 20 | } 21 | 22 | .slide { 23 | transition: all 300ms; 24 | width: 100%; 25 | position: absolute; 26 | top: 0; right: 0; bottom: 0; left: 0; 27 | img { 28 | width: 100%; 29 | height: 100%; 30 | } 31 | } 32 | 33 | .visibleSlide { 34 | composes: slide; 35 | opacity: 1; 36 | } 37 | 38 | .invisibleSlide { 39 | composes: slide; 40 | opacity: 0; 41 | } 42 | 43 | .projectDescription { 44 | columns: 4 13em; 45 | color: #d9d9d9; 46 | background-color: #2f2f2f; 47 | padding: 1.5em; 48 | font-size: 14px; 49 | } 50 | 51 | .projectHeader { 52 | font-size: 1.5em; 53 | margin: 0 0 .25em 0; 54 | line-height: 1em; 55 | } 56 | 57 | .projectLink { 58 | margin: 0 0 .5em 0; 59 | -webkit-column-break-after: always; 60 | -webkit-page-break-after: always; 61 | column-break-after: always; 62 | page-break-after: always; 63 | -moz-column-break-after: always; 64 | -moz-page-break-after: always; 65 | font-size: 1em; 66 | a { 67 | text-decoration: none; 68 | } 69 | @media screen and (max-width: $small-screen-size) { 70 | column-break-after: auto; 71 | -webkit-break-after: auto; 72 | -moz-break-after: auto; 73 | } 74 | } 75 | 76 | .description { 77 | margin: 0; 78 | } 79 | -------------------------------------------------------------------------------- /src/components/QualityList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ScaledImage from './ScaledImage'; 3 | import styles from './QualityList.scss'; 4 | 5 | export default class QualityList extends React.Component { 6 | 7 | render() { 8 | 9 | const { icon, title, skills } = this.props; 10 | 11 | const skillNodes = skills.map((skillSet) => { 12 | let line = skillSet.map((skill) => { 13 | return(
  • {skill}
    • ); 14 | }); 15 | return( 16 |
  • 17 |
      18 | {line} 19 |
    20 |
    • 21 | ); 22 | }); 23 | 24 | return( 25 | 33 | ); 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /src/components/QualityList.scss: -------------------------------------------------------------------------------- 1 | .root { 2 | margin: 0 0 1.5em 0; 3 | padding: 0; 4 | } 5 | 6 | .heading { 7 | composes: asideHeader from '../shared/styles/layout.scss'; 8 | } 9 | 10 | .skills { 11 | composes: asideList from '../shared/styles/layout.scss'; 12 | } 13 | 14 | .skillSet { 15 | composes: asideListLine from '../shared/styles/layout.scss'; 16 | } 17 | 18 | .skill { 19 | composes: asideListLineItem from '../shared/styles/layout.scss'; 20 | } 21 | -------------------------------------------------------------------------------- /src/components/ScaledImage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | 3 | export default class ScaledImage extends React.Component { 4 | 5 | constructor(props) { 6 | super(props); 7 | 8 | this.state = { 9 | width: 0, 10 | height: 0, 11 | loaded: false 12 | }; 13 | 14 | this.handleLoaded = this.handleLoaded.bind(this); 15 | } 16 | 17 | handleLoaded(e) { 18 | const { scale } = this.props; 19 | var img = new Image(); 20 | img.src = e.target.src; 21 | 22 | img.onload = () => { 23 | const nextState = { 24 | width: img.width * scale, 25 | height: img.height * scale, 26 | loaded: true 27 | }; 28 | 29 | this.setState(nextState); 30 | }; 31 | } 32 | 33 | render() { 34 | 35 | const { width, height } = this.state; 36 | const { src } = this.props; 37 | 38 | return ( 39 | 40 | ); 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Page from './components/Page'; 3 | import PageData from './PageData'; 4 | 5 | React.render( 6 | , 7 | document.body 8 | ); 9 | -------------------------------------------------------------------------------- /src/shared/styles/layout.scss: -------------------------------------------------------------------------------- 1 | $small-screen-size: 760px; 2 | 3 | .asideHeader { 4 | margin: 0 0 .3em 0; 5 | img { 6 | vertical-align: sub; 7 | margin: 0 .2em 0 0; 8 | } 9 | } 10 | 11 | .asideListLine { 12 | list-style-type: none; 13 | } 14 | 15 | .asideList { 16 | margin: 0; 17 | padding: 0; 18 | list-style-type: none; 19 | } 20 | 21 | .asideListLineItem { 22 | display: inline-block; 23 | &:after { 24 | color: #bcbcbc; 25 | content: '•'; 26 | margin: 0 .3em; 27 | } 28 | &:last-child { 29 | &:after { 30 | content: ''; 31 | margin: 0; 32 | } 33 | } 34 | a { 35 | color: #3651b5; 36 | text-decoration: none; 37 | transition: all 100ms; 38 | &:hover { 39 | transform: scale(1.1, 1.1); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | target: "web", 6 | entry: ["./src/index"], 7 | output: { 8 | path: path.join(__dirname, "build"), 9 | filename: "bundle.js", 10 | publicPath: "http://gwil.co/build/" 11 | }, 12 | plugins: [ 13 | new webpack.optimize.DedupePlugin(), 14 | new webpack.optimize.OccurenceOrderPlugin(), 15 | new webpack.optimize.UglifyJsPlugin() 16 | ], 17 | resolve: { 18 | extensions: ['', '.js', '.jsx'] 19 | }, 20 | postcss: [ 21 | require('autoprefixer-core') 22 | ], 23 | module: { 24 | loaders: [ 25 | { 26 | test: /\.jsx?$/, 27 | loaders: ['babel-loader'], 28 | include: path.join(__dirname, 'src') 29 | }, 30 | { 31 | test: /\.scss$/, loaders: ['style-loader', 'css-loader?modules&importLoaders=2&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass'] 32 | }, 33 | { 34 | test: /\.(png|jpg)$/, 35 | loader: 'url-loader?limit=8192' 36 | } 37 | ] 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | devtool: 'eval', 6 | entry: [ 7 | "webpack-dev-server/client?http://localhost:8080", 8 | "webpack/hot/only-dev-server", 9 | "./src/index" 10 | ], 11 | output: { 12 | path: path.join(__dirname, 'build'), 13 | filename: "bundle.js", 14 | publicPath: '/build/' 15 | }, 16 | plugins: [ 17 | new webpack.HotModuleReplacementPlugin(), 18 | new webpack.NoErrorsPlugin() 19 | ], 20 | resolve: { 21 | extensions: ['', '.js', '.jsx'] 22 | }, 23 | postcss: [ 24 | require('autoprefixer-core') 25 | ], 26 | module: { 27 | loaders: [ 28 | { 29 | test: /\.jsx?$/, 30 | loaders: ['react-hot', 'babel-loader'], 31 | include: path.join(__dirname, 'src') 32 | }, 33 | { 34 | test: /\.scss$/, loaders: ['style-loader', 'css-loader?modules&importLoaders=2&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass'] 35 | }, 36 | { 37 | test: /\.(png|jpg)$/, 38 | loader: 'url-loader?limit=8192' 39 | } 40 | ] 41 | } 42 | }; 43 | --------------------------------------------------------------------------------