├── .gitignore ├── Gemfile ├── Gemfile.lock ├── README.md ├── _includes └── quotes.html ├── _layouts ├── master.html └── project.html ├── about.html ├── css ├── about.css ├── fonts.css ├── project.css ├── reset.css ├── style.css └── website-fonts │ ├── TTCommons-Black.ttf │ ├── TTCommons-Black.woff │ ├── TTCommons-Black.woff2 │ ├── TTCommons-Bold.ttf │ ├── TTCommons-Bold.woff │ ├── TTCommons-Bold.woff2 │ ├── TTCommons-DemiBold.ttf │ ├── TTCommons-DemiBold.woff │ ├── TTCommons-DemiBold.woff2 │ ├── TTCommons-ExtraBold.ttf │ ├── TTCommons-ExtraBold.woff │ ├── TTCommons-ExtraBold.woff2 │ ├── TTCommons-ExtraLight.ttf │ ├── TTCommons-ExtraLight.woff │ ├── TTCommons-ExtraLight.woff2 │ ├── TTCommons-Italic.ttf │ ├── TTCommons-Italic.woff │ ├── TTCommons-Italic.woff2 │ ├── TTCommons-Light.ttf │ ├── TTCommons-Light.woff │ ├── TTCommons-Light.woff2 │ ├── TTCommons-Medium.ttf │ ├── TTCommons-Medium.woff │ ├── TTCommons-Medium.woff2 │ ├── TTCommons-Regular.ttf │ ├── TTCommons-Regular.woff │ ├── TTCommons-Regular.woff2 │ ├── TTCommons-Thin.ttf │ ├── TTCommons-Thin.woff │ └── TTCommons-Thin.woff2 ├── images ├── branding-icon.png ├── etc-logo.png ├── feature-photo.jpg ├── graphics-icon.png ├── group-waves.svg ├── instagram.svg ├── linked-in.svg ├── stephanie-slater.jpg ├── twitter.svg └── uiux.png ├── index.html ├── js └── main.js └── projects ├── bungalows ├── bungalows.md ├── burgers.jpg ├── burgersandchips.jpg ├── cover.jpg ├── hire.jpg ├── home.jpg ├── insta.jpg └── quiz.jpg ├── grade ├── bottom.jpg ├── grade.md ├── image1.jpg ├── image2.jpg └── main.jpg ├── human-appeal ├── cover.jpg ├── cover.png ├── green-insta.jpg ├── human-appeal.md ├── ipad.jpg ├── mag.jpg ├── main.jpg ├── purple-instagram.jpg ├── report-graphs.jpg └── report.jpg ├── incase ├── DMA-mockup.jpg ├── Mock2.jpg ├── bottom.jpg ├── cover.jpg └── incase.md ├── little-lentil ├── bottom.jpg ├── cover.jpg ├── image1.jpg ├── image2.jpg ├── little-lentil.md └── main.jpg ├── reebok ├── bottom.jpg ├── main.jpg ├── mockup1.jpg ├── mockup2.jpg └── reebok.md ├── sjk-photographical ├── SJK Website Showreel.mp4 ├── bottom.gif ├── cover-large.png ├── cover-large2.png ├── image-1.jpg ├── image-2.jpg └── sjk-photographical.md └── team-up ├── five.jpg ├── four.jpg ├── main.jpg ├── team-up.md ├── three.jpg ├── wireframe-1.png └── wireframe-2.png /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | .jekyll-cache 4 | _site 5 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | source "https://rubygems.org" 4 | 5 | git_source(:github) {|repo_name| "https://github.com/#{repo_name}" } 6 | 7 | # gem "rails" 8 | 9 | gem "jekyll", "~> 3.8" 10 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.6.0) 5 | public_suffix (>= 2.0.2, < 4.0) 6 | colorator (1.1.0) 7 | concurrent-ruby (1.1.4) 8 | em-websocket (0.5.1) 9 | eventmachine (>= 0.12.9) 10 | http_parser.rb (~> 0.6.0) 11 | eventmachine (1.2.7) 12 | ffi (1.10.0) 13 | forwardable-extended (2.6.0) 14 | http_parser.rb (0.6.0) 15 | i18n (0.9.5) 16 | concurrent-ruby (~> 1.0) 17 | jekyll (3.8.5) 18 | addressable (~> 2.4) 19 | colorator (~> 1.0) 20 | em-websocket (~> 0.5) 21 | i18n (~> 0.7) 22 | jekyll-sass-converter (~> 1.0) 23 | jekyll-watch (~> 2.0) 24 | kramdown (~> 1.14) 25 | liquid (~> 4.0) 26 | mercenary (~> 0.3.3) 27 | pathutil (~> 0.9) 28 | rouge (>= 1.7, < 4) 29 | safe_yaml (~> 1.0) 30 | jekyll-sass-converter (1.5.2) 31 | sass (~> 3.4) 32 | jekyll-watch (2.1.2) 33 | listen (~> 3.0) 34 | kramdown (1.17.0) 35 | liquid (4.0.1) 36 | listen (3.1.5) 37 | rb-fsevent (~> 0.9, >= 0.9.4) 38 | rb-inotify (~> 0.9, >= 0.9.7) 39 | ruby_dep (~> 1.2) 40 | mercenary (0.3.6) 41 | pathutil (0.16.2) 42 | forwardable-extended (~> 2.6) 43 | public_suffix (3.0.3) 44 | rb-fsevent (0.10.3) 45 | rb-inotify (0.10.0) 46 | ffi (~> 1.0) 47 | rouge (3.3.0) 48 | ruby_dep (1.5.0) 49 | safe_yaml (1.0.5) 50 | sass (3.7.3) 51 | sass-listen (~> 4.0.0) 52 | sass-listen (4.0.0) 53 | rb-fsevent (~> 0.9, >= 0.9.4) 54 | rb-inotify (~> 0.9, >= 0.9.7) 55 | 56 | PLATFORMS 57 | ruby 58 | 59 | DEPENDENCIES 60 | jekyll (~> 3.8) 61 | 62 | BUNDLED WITH 63 | 1.17.1 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webby 2 | 3 | ## Development 4 | ``` 5 | $ jekyll serve 6 | ``` 7 | ## Build 8 | ``` 9 | $ jekyll build 10 | 11 | -------------------------------------------------------------------------------- /_includes/quotes.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 19 | 20 |
21 | 22 |
-------------------------------------------------------------------------------- /_layouts/master.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Stephanie Slater | Etcetera Design | UX Designer London 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 36 | 37 | 38 | 62 | 63 | {{ content }} 64 | 65 |
66 | 67 |

Let's chat

68 | steph@etcetera.design 69 | 74 | 75 |
76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /_layouts/project.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: master 3 | css: /css/project.css 4 | --- 5 |
6 | 7 |
8 | 9 |
10 |
11 |

{{ page.title }}

12 |

{{ page.subtitle }}

13 |

{{ page.description }}

14 |
15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 |
23 |
24 |
25 | 26 |
27 |
28 |
29 | 30 | {% if page.image4 and page.image5 %} 31 | 32 |
33 |
34 |
35 |
36 | 37 | {% endif %} 38 | 39 |
40 | 41 |
42 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: master 3 | permalink: /about 4 | css: /css/about.css 5 | --- 6 | 7 |
8 |

About Steph

9 |
10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |

I'm a multidisciplinary designer who specialises in digital design. As a freelancer, I have had the pleasure of working with top clients in the industry and several exciting startups. Shillington Design College was where my design journey began, and I have a gone on to study Creative Direction at Central Saint Martins, and UX Design through the Interaction Design Foundation and Bloc.io. I am proficient in HTML & CSS and enjoy bridging the gap between front end and design.

18 |

Day to day, I work to find creative solutions that trigger change, improve quality of life, and foster enduring relationships between brands and their clients. Get in touch to find out how we can work together.

19 | contact me 20 |
21 |
22 |
23 |
24 |
25 | 26 | {% include quotes.html %} -------------------------------------------------------------------------------- /css/about.css: -------------------------------------------------------------------------------- 1 | #about-title{ 2 | padding: 18rem 0 10rem 0; 3 | } 4 | 5 | #about{ 6 | min-height: 75vh; 7 | } 8 | 9 | #about .stephanie-slater{ 10 | background-image: url(/images/stephanie-slater.jpg); 11 | background-size: cover; 12 | background-position: center; 13 | height: 100%; 14 | min-height: 400px; 15 | } 16 | 17 | #about .container-fluid{ 18 | min-height: 75vh; 19 | } 20 | 21 | #about .columns{ 22 | min-height: 90vh; 23 | } 24 | 25 | #about .column{ 26 | padding-bottom: 0; 27 | } 28 | 29 | #about-info{ 30 | height: 100%; 31 | display: flex; 32 | flex-direction: column; 33 | justify-content: center; 34 | align-items: flex-start; 35 | padding-left: 3rem; 36 | padding-right: 3rem; 37 | background: #FAFAFA; 38 | } 39 | 40 | #quotes{ 41 | background: white !important; 42 | } 43 | .quotes-container{ 44 | background: white !important; 45 | } 46 | 47 | #contact{ 48 | background: #FAFAFA !important; 49 | } 50 | 51 | @media only screen and (min-width: 768px){ 52 | #about-info{ 53 | padding-left: 5rem; 54 | padding-right: 5rem; 55 | padding-top: 5rem; 56 | } 57 | } 58 | @media only screen and (min-width: 1216px){ 59 | #about-info{ 60 | padding-left: 10rem; 61 | padding-right: 10rem; 62 | padding-top: 5rem; 63 | } 64 | } 65 | 66 | #about-info p{ 67 | margin-bottom: 1rem; 68 | } 69 | 70 | #about-info .button{ 71 | margin-top: 1rem; 72 | } 73 | 74 | .navbar{ 75 | background: transparent; 76 | } 77 | .navbar.fixed{ 78 | background: white; 79 | } 80 | /* @media only screen and (min-width: 768px){ 81 | .navbar-start .navbar-item{ 82 | color: white; 83 | } 84 | .navbar-start .navbar-item:hover{ 85 | color: #eee !important; 86 | } 87 | } */ 88 | -------------------------------------------------------------------------------- /css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'TT Commons'; 3 | src: url('website-fonts/TTCommons-Italic.woff2') format('woff2'), 4 | url('website-fonts/TTCommons-Italic.woff') format('woff'), 5 | url('website-fonts/TTCommons-Italic.ttf') format('truetype'); 6 | font-weight: normal; 7 | font-style: italic; 8 | } 9 | 10 | @font-face { 11 | font-family: 'TT Commons'; 12 | src: url('website-fonts/TTCommons-Black.woff2') format('woff2'), 13 | url('website-fonts/TTCommons-Black.woff') format('woff'), 14 | url('website-fonts/TTCommons-Black.ttf') format('truetype'); 15 | font-weight: 900; 16 | font-style: normal; 17 | } 18 | 19 | @font-face { 20 | font-family: 'TT Commons'; 21 | src: url('website-fonts/TTCommons-ExtraBold.woff2') format('woff2'), 22 | url('website-fonts/TTCommons-ExtraBold.woff') format('woff'), 23 | url('website-fonts/TTCommons-ExtraBold.ttf') format('truetype'); 24 | font-weight: 800; 25 | font-style: normal; 26 | } 27 | 28 | @font-face { 29 | font-family: 'TT Commons'; 30 | src: url('website-fonts/TTCommons-Bold.woff2') format('woff2'), 31 | url('website-fonts/TTCommons-Bold.woff') format('woff'), 32 | url('website-fonts/TTCommons-Bold.ttf') format('truetype'); 33 | font-weight: bold; 34 | font-style: normal; 35 | } 36 | 37 | @font-face { 38 | font-family: 'TT Commons'; 39 | src: url('website-fonts/TTCommons-Thin.woff2') format('woff2'), 40 | url('website-fonts/TTCommons-Thin.woff') format('woff'), 41 | url('website-fonts/TTCommons-Thin.ttf') format('truetype'); 42 | font-weight: 100; 43 | font-style: normal; 44 | } 45 | 46 | @font-face { 47 | font-family: 'TT Commons'; 48 | src: url('website-fonts/TTCommons-DemiBold.woff2') format('woff2'), 49 | url('website-fonts/TTCommons-DemiBold.woff') format('woff'), 50 | url('website-fonts/TTCommons-DemiBold.ttf') format('truetype'); 51 | font-weight: 600; 52 | font-style: normal; 53 | } 54 | 55 | @font-face { 56 | font-family: 'TT Commons'; 57 | src: url('website-fonts/TTCommons-Regular.woff2') format('woff2'), 58 | url('website-fonts/TTCommons-Regular.woff') format('woff'), 59 | url('website-fonts/TTCommons-Regular.ttf') format('truetype'); 60 | font-weight: normal; 61 | font-style: normal; 62 | } 63 | 64 | @font-face { 65 | font-family: 'TT Commons'; 66 | src: url('website-fonts/TTCommons-Light.woff2') format('woff2'), 67 | url('website-fonts/TTCommons-Light.woff') format('woff'), 68 | url('website-fonts/TTCommons-Light.ttf') format('truetype'); 69 | font-weight: 300; 70 | font-style: normal; 71 | } 72 | 73 | @font-face { 74 | font-family: 'TT Commons'; 75 | src: url('website-fonts/TTCommons-Medium.woff2') format('woff2'), 76 | url('website-fonts/TTCommons-Medium.woff') format('woff'), 77 | url('website-fonts/TTCommons-Medium.ttf') format('truetype'); 78 | font-weight: 500; 79 | font-style: normal; 80 | } 81 | 82 | @font-face { 83 | font-family: 'TT Commons'; 84 | src: url('website-fonts/TTCommons-ExtraLight.woff2') format('woff2'), 85 | url('website-fonts/TTCommons-ExtraLight.woff') format('woff'), 86 | url('website-fonts/TTCommons-ExtraLight.ttf') format('truetype'); 87 | font-weight: 200; 88 | font-style: normal; 89 | } 90 | -------------------------------------------------------------------------------- /css/project.css: -------------------------------------------------------------------------------- 1 | #cover{ 2 | height: 100vh; 3 | background-size: cover; 4 | background-position: center; 5 | } 6 | 7 | #info{ 8 | padding-top: 8rem; 9 | padding-bottom: 8rem; 10 | } 11 | 12 | #info h1{ 13 | text-align: left; 14 | font-weight: 300; 15 | line-height: 1.4; 16 | } 17 | #info h2{ 18 | text-align: left; 19 | font-weight: 300; 20 | color: #797979; 21 | line-height: 1; 22 | margin-bottom: 0.5em; 23 | } 24 | #info p{ 25 | color: #1D1D1D; 26 | max-width: 550px; 27 | } 28 | 29 | #images{ 30 | padding-top: 0; 31 | padding-bottom: 0; 32 | } 33 | 34 | #images .project-image{ 35 | background-size: cover; 36 | background-position: center; 37 | height: 400px; 38 | } 39 | 40 | #images .project-image-bottom{ 41 | background-size: cover; 42 | background-position: center; 43 | height: 900px; 44 | } 45 | 46 | .navbar{ 47 | background: transparent; 48 | } 49 | .navbar.fixed{ 50 | background: white; 51 | } 52 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | color: #000000; 4 | /* font-family: "TT Commons"; */ 5 | font-family: "TT Commons", Helvetica, sans-serif; 6 | font-weight: 200; 7 | overflow-x: hidden; 8 | } 9 | 10 | /* nav { 11 | font-size: 100%; 12 | font-weight: medium; 13 | display: flex; 14 | position: fixed; 15 | top: 0; 16 | width: 100%; 17 | background: white; 18 | } 19 | 20 | .nav-tabs { 21 | width: 25%; 22 | display: flex; 23 | flex-direction: row; 24 | align-items: center; 25 | justify-content: space-evenly; 26 | } 27 | 28 | .nav-tabs a{ 29 | text-decoration: none; 30 | color: inherit; 31 | } */ 32 | 33 | /* Navbar height */ 34 | .navbar{ 35 | min-height: 10rem !important; 36 | position: absolute !important; 37 | width: 100% !important; 38 | } 39 | 40 | .navbar.hidden{ 41 | position: fixed !important; 42 | top: -10rem !important; 43 | transition: top 0.2s !important; 44 | } 45 | 46 | .navbar.fixed{ 47 | top: 0 !important; 48 | } 49 | /* Logo */ 50 | .navbar-item img{ 51 | max-height: 7rem !important; 52 | } 53 | .navbar-brand{ 54 | min-height: 10rem; 55 | justify-content: center; 56 | position: absolute; 57 | left: 50%; 58 | transform: translateX(-50%); 59 | width: 100%; 60 | } 61 | .navbar-brand.is-active{ 62 | position: relative; 63 | left: 0; 64 | transform: none; 65 | } 66 | .navbar-burger{ 67 | position: absolute; 68 | right: 0; 69 | height: 10rem; 70 | margin-left: 0; 71 | } 72 | .navbar-start .navbar-item, .navbar-end .navbar-item{ 73 | margin: 0 4rem; 74 | } 75 | .navbar-item{ 76 | font-weight: 500; 77 | text-align: center; 78 | } 79 | .navbar-item:hover{ 80 | background: transparent !important; 81 | color: black !important; 82 | } 83 | .navbar-menu{ 84 | padding: 0; 85 | } 86 | 87 | .button{ 88 | border-radius: 0; 89 | padding-left: 1.5em; 90 | padding-right: 1.5em; 91 | padding-top: calc(0.375em + 1px) 92 | } 93 | 94 | .logo{ 95 | width: 50%; 96 | } 97 | 98 | .landing-page { 99 | height: 100vh; 100 | display: flex; 101 | flex-direction: column; 102 | justify-content: center; 103 | align-items: center; 104 | background: url(/images/group-waves.svg) no-repeat; 105 | background-position: bottom; 106 | background-size: contain; 107 | /* background-size: auto 30%; */ 108 | } 109 | .landing-page .button{ 110 | position: absolute; 111 | bottom: 4em; 112 | } 113 | @media only screen and (min-width: 768px){ 114 | .landing-page .button{ 115 | bottom: 6em; 116 | } 117 | } 118 | 119 | .logofile { 120 | width: 110px; 121 | margin: 2% auto 0% auto; 122 | display: block; 123 | } 124 | 125 | .landing-page h1 { 126 | line-height: 1.5em; 127 | font-weight: 300; 128 | text-align: center; 129 | } 130 | 131 | .bold-blue { 132 | color: #272A7E; 133 | font-weight: 500; 134 | } 135 | 136 | /* Services */ 137 | 138 | #services{ 139 | padding-top: 3rem; 140 | padding-bottom: 2rem; 141 | } 142 | 143 | @media only screen and (min-width: 768px){ 144 | #services{ 145 | padding-top: 17rem; 146 | padding-bottom: 17rem; 147 | } 148 | } 149 | 150 | #services .container { 151 | max-width: 1100px; 152 | 153 | } 154 | 155 | .service{ 156 | background: #FAFAFA; 157 | padding: 40px; 158 | box-sizing: border-box; 159 | height: 100%; 160 | } 161 | 162 | .service .service-icon > img{ 163 | display: block; 164 | width: 100%; 165 | max-width: 150px; 166 | margin-bottom: 35px; 167 | } 168 | 169 | .service h3{ 170 | font-weight: medium; 171 | margin-bottom: 0.5em; 172 | line-height: 1.3em; 173 | } 174 | 175 | .service p{ 176 | font-weight: 300; 177 | } 178 | 179 | /* Projects */ 180 | 181 | #projects{ 182 | padding-top: 4rem; 183 | padding-bottom: 8rem; 184 | } 185 | 186 | #projects .project-cover{ 187 | background-size: cover; 188 | background-position: center; 189 | height: 400px; 190 | } 191 | 192 | #projects .sjk{ 193 | background-image: url(/projects/sjk-photographical/cover-large2.png); 194 | } 195 | 196 | #projects .human-appeal{ 197 | background-image: url(/projects/human-appeal/green-insta.jpg); 198 | } 199 | 200 | #projects .bungalows{ 201 | background-image: url(/projects/bungalows/home.jpg); 202 | } 203 | #projects .grade{ 204 | background-image: url(/projects/grade/main.jpg); 205 | } 206 | #projects .little-lentil{ 207 | background-image: url(/projects/little-lentil/cover.jpg); 208 | } 209 | #projects .incase{ 210 | background-image: url(/projects/incase/cover.jpg); 211 | } 212 | #projects .reebok{ 213 | background-image: url(/projects/reebok/main.jpg); 214 | } 215 | #projects .team-up{ 216 | background-image: url(/projects/team-up/three.jpg); 217 | } 218 | 219 | /* Quotes */ 220 | 221 | #quotes{ 222 | padding-top: 3rem; 223 | padding-bottom: 2rem; 224 | background: #FAFAFA; 225 | } 226 | 227 | @media only screen and (min-width: 768px){ 228 | #quotes{ 229 | padding-top: 12rem; 230 | padding-bottom: 10rem; 231 | } 232 | } 233 | 234 | .quotes-container{ 235 | width: 100%; 236 | max-width: 800px; 237 | margin: 0 auto; 238 | background: #FAFAFA; 239 | } 240 | .quotes-container .bx-wrapper{ 241 | -webkit-box-shadow: none; 242 | box-shadow: none; 243 | background: transparent; 244 | border: 0; 245 | } 246 | .quotes-container .bx-next, .quotes-container .bx-prev{ 247 | display: none; 248 | } 249 | 250 | .quotes-container .bx-wrapper .bx-pager.bx-default-pager a{ 251 | border-radius: 0; 252 | -webkit-border-radius: 0; 253 | background: transparent; 254 | border: 1px solid #707070; 255 | } 256 | .quotes-container .bx-wrapper .bx-pager.bx-default-pager a.active{ 257 | background: #272A7E; 258 | border-color: #272A7E; 259 | } 260 | 261 | .quotes-container p.quote{ 262 | margin: 30px 0; 263 | text-align: center; 264 | color: #272A7E; 265 | line-height: 1.4em; 266 | padding: 0 30px; 267 | } 268 | .quotes-container p.author{ 269 | margin: 20px 0; 270 | text-align: center; 271 | } 272 | 273 | /* Contact */ 274 | 275 | #contact{ 276 | padding-top: 4rem; 277 | padding-bottom: 4rem; 278 | text-align: center; 279 | } 280 | 281 | @media only screen and (min-width: 768px){ 282 | #contact{ 283 | padding-top: 10rem; 284 | padding-bottom: 8rem; 285 | } 286 | } 287 | 288 | #contact p{ 289 | font-weight: 200; 290 | margin-bottom: 0.5em; 291 | } 292 | 293 | #contact a.email{ 294 | display: inline-block; 295 | font-weight: 500; 296 | color: #272A7E; 297 | text-decoration: none; 298 | border-bottom: 3px solid #272A7E; 299 | margin-bottom: 1.3em; 300 | line-height: 1; 301 | } 302 | #contact a.email:hover{ 303 | opacity: 0.75; 304 | } 305 | 306 | #contact ul{ 307 | display: flex; 308 | flex-direction: row; 309 | height: 50px; 310 | max-width: 175px; 311 | margin: 0 auto; 312 | } 313 | 314 | #contact ul li{ 315 | display: flex; 316 | justify-content: center; 317 | align-items: center; 318 | flex: 1; 319 | margin: 0 15px; 320 | } 321 | #contact ul li a:hover{ 322 | opacity: 0.75; 323 | } 324 | 325 | #contact ul li img{ 326 | width: 100%; 327 | height: auto; 328 | } 329 | -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Black.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Black.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Black.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Bold.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Bold.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Bold.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-DemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-DemiBold.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-DemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-DemiBold.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-DemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-DemiBold.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-ExtraBold.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-ExtraBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-ExtraBold.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-ExtraBold.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-ExtraLight.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-ExtraLight.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-ExtraLight.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Italic.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Italic.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Italic.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Light.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Light.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Light.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Medium.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Medium.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Medium.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Regular.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Regular.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Regular.woff2 -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Thin.ttf -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Thin.woff -------------------------------------------------------------------------------- /css/website-fonts/TTCommons-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/css/website-fonts/TTCommons-Thin.woff2 -------------------------------------------------------------------------------- /images/branding-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/images/branding-icon.png -------------------------------------------------------------------------------- /images/etc-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/images/etc-logo.png -------------------------------------------------------------------------------- /images/feature-photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/images/feature-photo.jpg -------------------------------------------------------------------------------- /images/graphics-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/images/graphics-icon.png -------------------------------------------------------------------------------- /images/group-waves.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 20 | 21 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /images/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/linked-in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/stephanie-slater.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/images/stephanie-slater.jpg -------------------------------------------------------------------------------- /images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/uiux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/images/uiux.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: master 3 | --- 4 |
5 |

Stephanie Slater is a UX, branding and
web designer from London

6 | tell me more 7 |
8 | 9 |
10 |
11 | 45 |
46 | 47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 | 72 | {% include quotes.html %} 73 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $('#quotes ul').bxSlider(); 4 | 5 | // Mobile nav bar 6 | $(".navbar-burger").click(function() { 7 | $(".navbar-burger").toggleClass("is-active"); 8 | $(".navbar-menu").toggleClass("is-active"); 9 | $(".navbar-brand").toggleClass("is-active"); 10 | }); 11 | 12 | $("a[href^=#]").click(function(e) { 13 | e.preventDefault(); 14 | var dest = $(this).attr('href'); 15 | $('html,body') 16 | .animate({ 17 | scrollTop: $(dest).offset().top 18 | }, 19 | 'slow' 20 | ); 21 | }); 22 | 23 | $(window).scroll(function(){ 24 | if($(window).scrollTop() === 0){ 25 | $(".navbar").removeClass("fixed") 26 | $(".navbar").removeClass("hidden") 27 | } 28 | }) 29 | 30 | $(window).scroll(_.debounce(function(){ 31 | if($(window).scrollTop() >= $(window).height()) { 32 | $(".navbar").addClass("hidden") 33 | setTimeout(function(){ 34 | $(".navbar").addClass("fixed"); 35 | }, 50) 36 | } else { 37 | $(".navbar").removeClass("fixed") 38 | setTimeout(function(){ 39 | $(".navbar").removeClass("hidden"); 40 | }, 200) 41 | } 42 | }, 50)); 43 | 44 | 45 | 46 | }); -------------------------------------------------------------------------------- /projects/bungalows/bungalows.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: project 3 | permalink: /bungalows-and-bears 4 | cover_image: /projects/bungalows/cover.jpg 5 | title: Bungalows and Bears 6 | subtitle: Print and Social Media Graphics 7 | description: Poster and digital campaign designed for a bar and venue on the iconic Division Street in Sheffield. 8 | image1: /projects/bungalows/hire.jpg 9 | image2: /projects/bungalows/quiz.jpg 10 | image3: /projects/bungalows/insta.jpg 11 | image4: /projects/bungalows/burgersandchips.jpg 12 | image5: /projects/bungalows/burgers.jpg 13 | --- 14 | -------------------------------------------------------------------------------- /projects/bungalows/burgers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/bungalows/burgers.jpg -------------------------------------------------------------------------------- /projects/bungalows/burgersandchips.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/bungalows/burgersandchips.jpg -------------------------------------------------------------------------------- /projects/bungalows/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/bungalows/cover.jpg -------------------------------------------------------------------------------- /projects/bungalows/hire.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/bungalows/hire.jpg -------------------------------------------------------------------------------- /projects/bungalows/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/bungalows/home.jpg -------------------------------------------------------------------------------- /projects/bungalows/insta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/bungalows/insta.jpg -------------------------------------------------------------------------------- /projects/bungalows/quiz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/bungalows/quiz.jpg -------------------------------------------------------------------------------- /projects/grade/bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/grade/bottom.jpg -------------------------------------------------------------------------------- /projects/grade/grade.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: project 3 | permalink: /grade 4 | cover_image: /projects/grade/main.jpg 5 | title: Grade Barbers 6 | subtitle: Presentation Showcase 7 | description: Brand identity and website creation for a luxury barbers in Manchester. 8 | image1: /projects/grade/image1.jpg 9 | image2: /projects/grade/image2.jpg 10 | image3: /projects/grade/bottom.jpg 11 | --- 12 | -------------------------------------------------------------------------------- /projects/grade/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/grade/image1.jpg -------------------------------------------------------------------------------- /projects/grade/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/grade/image2.jpg -------------------------------------------------------------------------------- /projects/grade/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/grade/main.jpg -------------------------------------------------------------------------------- /projects/human-appeal/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/cover.jpg -------------------------------------------------------------------------------- /projects/human-appeal/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/cover.png -------------------------------------------------------------------------------- /projects/human-appeal/green-insta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/green-insta.jpg -------------------------------------------------------------------------------- /projects/human-appeal/human-appeal.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: project 3 | permalink: /human-appeal 4 | cover_image: /projects/human-appeal/main.jpg 5 | title: Human Appeal 6 | subtitle: Contract Designer 7 | description: A selection of deliverables created whilst working as a contractor for the international relief charity, Human Appeal. 8 | nav_text_color: "#FFFFFF" 9 | nav_text_color_hover: "#DDDDDD" 10 | image1: /projects/human-appeal/purple-instagram.jpg 11 | image2: /projects/human-appeal/green-insta.jpg 12 | image3: /projects/human-appeal/report.jpg 13 | image4: /projects/human-appeal/mag.jpg 14 | image5: /projects/human-appeal/ipad.jpg 15 | --- 16 | -------------------------------------------------------------------------------- /projects/human-appeal/ipad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/ipad.jpg -------------------------------------------------------------------------------- /projects/human-appeal/mag.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/mag.jpg -------------------------------------------------------------------------------- /projects/human-appeal/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/main.jpg -------------------------------------------------------------------------------- /projects/human-appeal/purple-instagram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/purple-instagram.jpg -------------------------------------------------------------------------------- /projects/human-appeal/report-graphs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/report-graphs.jpg -------------------------------------------------------------------------------- /projects/human-appeal/report.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/human-appeal/report.jpg -------------------------------------------------------------------------------- /projects/incase/DMA-mockup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/incase/DMA-mockup.jpg -------------------------------------------------------------------------------- /projects/incase/Mock2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/incase/Mock2.jpg -------------------------------------------------------------------------------- /projects/incase/bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/incase/bottom.jpg -------------------------------------------------------------------------------- /projects/incase/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/incase/cover.jpg -------------------------------------------------------------------------------- /projects/incase/incase.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: project 3 | permalink: /incase 4 | cover_image: /projects/incase/cover.jpg 5 | title: inCase 6 | subtitle: UX Design 7 | description: Mobile app design for inCase, a service which allows law clients to receive updates on their case, view progress and updates, send photos, and sign documents. 8 | image1: /projects/incase/Mock2.jpg 9 | image2: /projects/incase/DMA-mockup.jpg 10 | image3: /projects/incase/bottom.jpg 11 | --- 12 | -------------------------------------------------------------------------------- /projects/little-lentil/bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/little-lentil/bottom.jpg -------------------------------------------------------------------------------- /projects/little-lentil/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/little-lentil/cover.jpg -------------------------------------------------------------------------------- /projects/little-lentil/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/little-lentil/image1.jpg -------------------------------------------------------------------------------- /projects/little-lentil/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/little-lentil/image2.jpg -------------------------------------------------------------------------------- /projects/little-lentil/little-lentil.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: project 3 | permalink: /little-lentil 4 | cover_image: /projects/little-lentil/main.jpg 5 | title: The Little Lentil 6 | subtitle: Branding Design 7 | description: 'Blog logo and branding design for The Little Lentil, a vegan food and lifestyle Instagram page. See the brand in action here: @the_little_lentil_' 8 | image1: /projects/little-lentil/image1.jpg 9 | image2: /projects/little-lentil/image2.jpg 10 | image3: /projects/little-lentil/bottom.jpg 11 | --- 12 | -------------------------------------------------------------------------------- /projects/little-lentil/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/little-lentil/main.jpg -------------------------------------------------------------------------------- /projects/reebok/bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/reebok/bottom.jpg -------------------------------------------------------------------------------- /projects/reebok/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/reebok/main.jpg -------------------------------------------------------------------------------- /projects/reebok/mockup1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/reebok/mockup1.jpg -------------------------------------------------------------------------------- /projects/reebok/mockup2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/reebok/mockup2.jpg -------------------------------------------------------------------------------- /projects/reebok/reebok.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: project 3 | permalink: /reebok 4 | cover_image: /projects/reebok/main.jpg 5 | title: Reebok 6 | subtitle: Presentation Showcase 7 | description: Design for a presentation on sexism in sport. The concept evolved from the idea of women ‘breaking’ and ‘tearing’ away from previous stereotypes that have caused their subordination in sports. 8 | image1: /projects/reebok/mockup1.jpg 9 | image2: /projects/reebok/mockup2.jpg 10 | image3: /projects/reebok/bottom.jpg 11 | --- 12 | -------------------------------------------------------------------------------- /projects/sjk-photographical/SJK Website Showreel.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/sjk-photographical/SJK Website Showreel.mp4 -------------------------------------------------------------------------------- /projects/sjk-photographical/bottom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/sjk-photographical/bottom.gif -------------------------------------------------------------------------------- /projects/sjk-photographical/cover-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/sjk-photographical/cover-large.png -------------------------------------------------------------------------------- /projects/sjk-photographical/cover-large2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/sjk-photographical/cover-large2.png -------------------------------------------------------------------------------- /projects/sjk-photographical/image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/sjk-photographical/image-1.jpg -------------------------------------------------------------------------------- /projects/sjk-photographical/image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/sjk-photographical/image-2.jpg -------------------------------------------------------------------------------- /projects/sjk-photographical/sjk-photographical.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: project 3 | permalink: /sjk-photographical 4 | cover_image: /projects/sjk-photographical/cover-large.png 5 | title: SJK Photographical 6 | subtitle: Photography portfolio website 7 | description: Web design for a photography agency, to showcase their latest work and style. 8 | nav_text_color: "#FFFFFF" 9 | nav_text_color_hover: "#DDDDDD" 10 | image1: /projects/sjk-photographical/image-1.jpg 11 | image2: /projects/sjk-photographical/image-2.jpg 12 | image3: /projects/sjk-photographical/bottom.gif 13 | --- 14 | -------------------------------------------------------------------------------- /projects/team-up/five.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/team-up/five.jpg -------------------------------------------------------------------------------- /projects/team-up/four.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/team-up/four.jpg -------------------------------------------------------------------------------- /projects/team-up/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/team-up/main.jpg -------------------------------------------------------------------------------- /projects/team-up/team-up.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: project 3 | permalink: /team-up 4 | cover_image: /projects/team-up/main.jpg 5 | title: TeamUp 6 | subtitle: Mobile App UX Design 7 | description: User centred approach to the design of an innovative sports app. TeamUp allows users to organise football matches, book pitches and connect with other team members. The product design involved an extensive discovery phase, including user stories, profiling, wireframing, and prototyping. 8 | nav_text_color: "#FFFFFF" 9 | nav_text_color_hover: "#DDDDDD" 10 | image1: /projects/team-up/wireframe-1.png 11 | image2: /projects/team-up/wireframe-2.png 12 | image3: /projects/team-up/three.jpg 13 | image4: /projects/team-up/four.jpg 14 | image5: /projects/team-up/five.jpg 15 | --- 16 | -------------------------------------------------------------------------------- /projects/team-up/three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/team-up/three.jpg -------------------------------------------------------------------------------- /projects/team-up/wireframe-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/team-up/wireframe-1.png -------------------------------------------------------------------------------- /projects/team-up/wireframe-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etceteradesign/website/f0957dbef5d38e7e730d5b147658a795e108e63b/projects/team-up/wireframe-2.png --------------------------------------------------------------------------------