2 |
--------------------------------------------------------------------------------
/src/partials/footer/footer.html:
--------------------------------------------------------------------------------
1 |
2 |
17 |
18 |
19 |
20 | {{> modals/modals }}
21 |
22 |
23 |
24 | {{> slideout/slideout }}
25 |
--------------------------------------------------------------------------------
/src/partials/footer/scripts.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/partials/header/head/head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 | {{ title-script }} {{ title }}
3 |
4 | {{> svg/svg-doodle-five }}
5 |
6 |
2 |
--------------------------------------------------------------------------------
/src/partials/home/experience.html:
--------------------------------------------------------------------------------
1 |
3 |
5 | I am a multi-discipline graphic designer who enjoys challenges of all shapes and sizes.
4 |
6 |
9 | I create logos and illustrations that stand out in today’s overstimulated world. I use my skill set to study your company culture while strategizing about what you want the audience to think when they see it again in some other capacity.
7 | Ultimately creating graphics with an intelligent tone which bridges that gap between business and consumer interaction for both parties involved. 8 |
2 | {{>
3 | content/subtitle
4 | title-script="My"
5 | title="Experience"
6 | doodle-width="f-w-60"
7 | }}
8 | {{#if (config experience)}}
9 |
--------------------------------------------------------------------------------
/src/partials/home/hero.html:
--------------------------------------------------------------------------------
1 |
10 | {{#each experience.entries}}
11 |
12 |
21 | {{/if}}
22 |
13 |
18 |
19 | {{/each}}
20 |
14 |
16 | {{ title }}
({{ years }}) 15 |{{ description }}
17 |
23 | Download My CV
24 |
25 |
2 |
--------------------------------------------------------------------------------
/src/partials/home/portfolio.html:
--------------------------------------------------------------------------------
1 |
3 |
5 | Ben Lucia
6 |
13 |
17 | 👋 Hello, I’m
4 |
5 | Ben Lucia
6 |
7 | {{> svg/svg-arrow-one }}
8 |
9 |
10 | {{> svg/svg-arrow-two }}
11 |
12 |
13 | Freelance Graphic Designer &
14 | Brand Storyteller.
18 |
19 | 
20 |
21 |
34 |
20 |
22 | {{> svg/svg-doodle-one }}
23 |
24 |
25 | {{> svg/svg-doodle-two }}
26 |
27 |
28 | {{> svg/svg-doodle-three }}
29 |
30 |
31 | {{> svg/svg-doodle-four }}
32 |
33 |
2 | {{>
3 | content/subtitle
4 | title-script="My"
5 | title="Portfolio"
6 | doodle-width="f-w-52"
7 | }}
8 |
9 |
--------------------------------------------------------------------------------
/src/partials/home/skills.html:
--------------------------------------------------------------------------------
1 |
2 |
10 | {{#if (config work)}}
11 | {{#each work.entries}}
12 |
30 |
23 |
24 | 
25 |
26 |
27 | {{/each}}
28 | {{/if}}
29 |
3 | {{>
4 | content/subtitle
5 | title-script="My"
6 | title="Skills"
7 | doodle-width="f-w-40"
8 | }}
9 | {{#if (config skills)}}
10 |
30 |
--------------------------------------------------------------------------------
/src/partials/home/testimonials.html:
--------------------------------------------------------------------------------
1 |
2 |
11 | {{#each skills.entries}}
12 |
13 |
28 | {{/if}}
29 |
14 |
25 |
26 | {{/each}}
27 |
15 |
16 | 
17 |
18 |
20 | {{ skill }}
19 |
21 |
23 |
24 |
3 | {{>
4 | content/subtitle
5 | title-script="Client"
6 | title="Testimonials"
7 | doodle-width="f-w-60"
8 | }}
9 |
10 |
11 | {{> swiper/swiper-testimonials }}
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/partials/logo/logo.html:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/src/partials/modals/modal-portfolio.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/partials/modals/modals.html:
--------------------------------------------------------------------------------
1 |
2 | {{> modals/modal-portfolio }}
3 |
--------------------------------------------------------------------------------
/src/partials/slideout/slideout.html:
--------------------------------------------------------------------------------
1 |
2 |
102 |
--------------------------------------------------------------------------------
/src/partials/svg/svg-arrow-one.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/partials/svg/svg-arrow-two.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/partials/svg/svg-doodle-five.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/partials/svg/svg-doodle-four.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/partials/svg/svg-doodle-one.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/partials/svg/svg-doodle-three.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/partials/svg/svg-doodle-two.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/partials/swiper/swiper-testimonials.html:
--------------------------------------------------------------------------------
1 |
2 |
25 |
42 |
43 |
44 |
26 | {{#if (config testimonials) }}
27 | {{#each testimonials.entries}}
28 |
33 | {{/each}}
34 | {{/if}}
35 |
36 |
37 |
38 |
39 |
40 |
41 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | var glob = require('glob-all');
3 | const webpack = require('webpack');
4 | const HandlebarsPlugin = require('handlebars-webpack-plugin');
5 | const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
7 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
8 | const MinifyPlugin = require('babel-minify-webpack-plugin');
9 | const CopyPlugin = require('copy-webpack-plugin');
10 | const TerserPlugin = require('terser-webpack-plugin');
11 | const mergeJSON = require('handlebars-webpack-plugin/utils/mergeJSON');
12 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
13 |
14 |
15 | // Project config data.
16 | // Go here to change stuff for the whole demo, ie, change the navbar.
17 | // Also go here for the various data loops, ie, category products, slideshows
18 | const projectData = mergeJSON(path.join(__dirname, '/src/data/**/*.json'));
19 |
20 |
21 | //PurgeCSS Paths
22 | const purgeCSSPaths = {
23 | src: path.join(__dirname, 'src', 'html'),
24 | partials: path.join(__dirname, 'src', 'partials')
25 | }
26 |
27 | // paths used in various placed in webpack config
28 | const paths = {
29 | src: {
30 | imgs: './src/assets/images',
31 | scss: './src/assets/scss',
32 | fonts: './src/assets/fonts',
33 | js: './src/assets/js',
34 | favicon: './src/assets/favicon',
35 | },
36 | dist: {
37 | imgs: './assets/images',
38 | css: './assets/css',
39 | fonts: './assets/fonts',
40 | js: './assets/js',
41 | favicon: './assets/favicon',
42 | }
43 | }
44 |
45 |
46 | // Main webpack config options.
47 | const wPackConfig = {
48 | entry: {
49 | 'libs': [paths.src.scss + '/libs.scss'],
50 | 'theme': [paths.src.js + '/theme.js', paths.src.scss + '/theme.scss']
51 | },
52 | output: {
53 | filename: paths.dist.js + '/[name].bundle.js',
54 | },
55 | devtool: 'source-map',
56 | mode: 'development',
57 | module: {
58 | rules: [{
59 | test: /\.(sass|scss|css)$/,
60 | include: path.resolve(__dirname, paths.src.scss.slice(2)),
61 | use: [{
62 | loader: MiniCssExtractPlugin.loader,
63 | },
64 | {
65 | loader: 'css-loader',
66 | options: {
67 | url: false,
68 | // sourceMap: true,
69 | },
70 | },
71 | {
72 | loader: 'postcss-loader'
73 | },
74 | {
75 | loader: 'sass-loader',
76 | // options: {
77 | // sourceMap: true,
78 | // sassOptions: {
79 | // indentWidth: 4,
80 | // outputStyle: 'expanded',
81 | // sourceComments: true
82 | // }
83 | // }
84 | },
85 | ],
86 | }, ]
87 | },
88 | optimization: {
89 | splitChunks: {
90 | cacheGroups: {
91 | vendor: {
92 | test: /[\\/](node_modules)[\\/].+\.js$/,
93 | name: 'vendor',
94 | chunks: 'all'
95 | }
96 | }
97 | },
98 | minimizer: [
99 | new OptimizeCssAssetsPlugin({
100 | cssProcessorOptions: {
101 | map: {
102 | inline: false,
103 | },
104 | },
105 | cssProcessorPluginOptions: {
106 | preset: [
107 | 'default',
108 | {
109 | discardComments: {
110 | removeAll: true,
111 | },
112 | },
113 | ],
114 | },
115 | }),
116 | new TerserPlugin({
117 | extractComments: false,
118 | terserOptions: {
119 | output: {
120 | comments: false,
121 | },
122 | },
123 | }),
124 | ],
125 | },
126 | plugins: [
127 | new webpack.ProgressPlugin(),
128 | new CopyPlugin({
129 | patterns: [{
130 | from: paths.src.fonts,
131 | to: paths.dist.fonts,
132 | noErrorOnMissing: true
133 | },
134 | {
135 | from: paths.src.imgs,
136 | to: paths.dist.imgs,
137 | noErrorOnMissing: true
138 | },
139 | {
140 | from: paths.src.favicon,
141 | to: paths.dist.favicon,
142 | noErrorOnMissing: true
143 | }
144 | ],
145 | }),
146 | new HandlebarsPlugin({
147 | entry: path.join(process.cwd(), 'src', 'html', '**', '*.html'),
148 | output: path.join(process.cwd(), 'dist', '[path]', '[name].html'),
149 | partials: [path.join(process.cwd(), 'src', 'partials', '**', '*.{html,svg}')],
150 | data: projectData,
151 | helpers: {
152 | webRoot: function() {
153 | return '{{webRoot}}';
154 | },
155 | config: function(data) {
156 | return data;
157 | },
158 | ifEquals: function(arg1, arg2, options) {
159 | if (arg1 === arg2) {
160 | return options.fn(this);
161 | }
162 | return options.inverse(this);
163 | },
164 | log: function(data) {
165 | console.log(data);
166 | },
167 | limit: function(arr, limit) {
168 | if (!Array.isArray(arr)) { return []; }
169 | return arr.slice(0, limit);
170 | }
171 | },
172 | onBeforeSave: function(Handlebars, res, file) {
173 | const elem = file.split('//').pop().split('/').length;
174 | return res.split('{{webRoot}}').join('.'.repeat(elem));
175 | },
176 | }),
177 | new FixStyleOnlyEntriesPlugin(),
178 | new MiniCssExtractPlugin({
179 | filename: paths.dist.css + '/[name].bundle.css',
180 | }),
181 | ]
182 | };
183 |
184 | module.exports = wPackConfig;
--------------------------------------------------------------------------------