67 |
131 |
68 |
130 |
69 |
129 |
70 |
128 |
71 |
127 |
72 |
112 |
73 |
88 |
77 |
87 |
81 | ![]()
85 |
86 |
89 | {/*
93 | {skill.content}{" "}
94 |
95 | {skill.porcentage}
96 |
97 |
108 | );
109 | })}
110 |
111 | Skill
*/} 90 | {this.state.skills.map(skill => { 91 | return ( 92 |
98 |
106 |
107 |
113 |
126 |
114 |
125 |
115 |
117 | {this.state.about_me.map(content => {
118 | return (
119 | About Me
116 |120 | {content.content} 121 |
122 | ); 123 | })} 124 |
13 |
162 |
172 |
14 |
161 |
15 |
160 |
16 |
159 |
17 |
158 |
18 |
157 |
19 |
100 |
20 |
22 | Send A Message
21 |
23 |
98 |
99 |
101 |
156 |
102 |
104 | Get in Touch
103 |
105 |
118 |
106 | Whether you want to get in touch, talk about a project
107 | collaboration, or just say hi, I'd love to hear from
108 | you.
109 |
110 | Simply fill the from and send me an email.
111 |
119 |
155 | -
120 |
- 121 | 126 | 127 | 128 | 129 | 130 | 131 |
- 132 | 137 | 138 | 139 | 140 | 141 | 142 |
- 143 | 148 | 149 | 150 | 151 | 152 | 153 |
9 |
15 |
398 | );
399 | }
400 | }
401 |
402 | export default Portfolio;
403 |
--------------------------------------------------------------------------------
/src/components/preloader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import $ from 'jquery';
3 |
4 | class Preloader extends React.Component {
5 | componentDidMount(){
6 | $(window).on('load', function () {
7 | if ($('#preloader').length) {
8 | $('#preloader').delay(100).fadeOut('slow', function () {
9 | $(this).remove();
10 | });
11 | }
12 | });
13 | }
14 |
15 | render(){
16 | return ;
17 | }
18 | }
19 |
20 | export default Preloader;
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/img/earth.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/earth.jpg
--------------------------------------------------------------------------------
/src/img/font-awesome/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/font-awesome/fonts/FontAwesome.otf
--------------------------------------------------------------------------------
/src/img/font-awesome/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/font-awesome/fonts/fontawesome-webfont.eot
--------------------------------------------------------------------------------
/src/img/font-awesome/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/font-awesome/fonts/fontawesome-webfont.ttf
--------------------------------------------------------------------------------
/src/img/font-awesome/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/font-awesome/fonts/fontawesome-webfont.woff
--------------------------------------------------------------------------------
/src/img/font-awesome/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/font-awesome/fonts/fontawesome-webfont.woff2
--------------------------------------------------------------------------------
/src/img/icons/fonts/ionicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/icons/fonts/ionicons.eot
--------------------------------------------------------------------------------
/src/img/icons/fonts/ionicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/icons/fonts/ionicons.ttf
--------------------------------------------------------------------------------
/src/img/icons/fonts/ionicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/icons/fonts/ionicons.woff
--------------------------------------------------------------------------------
/src/img/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/image1.jpg
--------------------------------------------------------------------------------
/src/img/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/image2.jpg
--------------------------------------------------------------------------------
/src/img/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/image3.jpg
--------------------------------------------------------------------------------
/src/img/image4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/image4.jpg
--------------------------------------------------------------------------------
/src/img/image5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/image5.jpg
--------------------------------------------------------------------------------
/src/img/image6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/image6.jpg
--------------------------------------------------------------------------------
/src/img/male.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/male.png
--------------------------------------------------------------------------------
/src/img/male1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/male1.png
--------------------------------------------------------------------------------
/src/img/myImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/src/img/myImage.png
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | //import css in order
5 | import 'normalize.css';
6 | import './animate.css';
7 | import 'bootstrap/dist/css/bootstrap.css';
8 | import './img/icons/css/ionicons.css';
9 | import './img/font-awesome/css/font-awesome.css';
10 | import 'lightbox2/dist/css/lightbox.min.css'
11 | import './style.css';
12 |
13 | //import js libraries
14 | import 'jquery/dist/jquery.min.js';
15 | import 'popper.js/dist/popper.min.js';
16 | import 'bootstrap/dist/js/bootstrap.min.js';
17 | import './libs/easing.js';
18 | import 'lightbox2/dist/js/lightbox.min.js';
19 |
20 | import * as serviceWorker from './serviceWorker';
21 |
22 | //import components
23 | import Navbar from './components/navbar.jsx';
24 | import Intro from './components/intro.jsx';
25 | import About from './components/about.jsx';
26 | import Portfolio from './components/portfolio.jsx';
27 | import Contact from './components/contact.jsx';
28 | import BackToTop from './components/back-top.jsx';
29 | import Preloader from './components/preloader';
30 |
31 |
32 |
33 | ReactDOM.render(
34 |
35 | ,
43 | document.getElementById('root'));
44 |
45 | // If you want your app to work offline and load faster, you can change
46 | // unregister() to register() below. Note this comes with some pitfalls.
47 | // Learn more about service workers: https://bit.ly/CRA-PWA
48 | serviceWorker.unregister();
49 |
--------------------------------------------------------------------------------
/src/libs/easing.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
3 | *
4 | * Uses the built in easing capabilities added In jQuery 1.1
5 | * to offer multiple easing options
6 | *
7 | * TERMS OF USE - jQuery Easing
8 | *
9 | * Open source under the BSD License.
10 | *
11 | * Copyright 2008 George McGinley Smith
12 | * All rights reserved.
13 | *
14 | * Redistribution and use in source and binary forms, with or without modification,
15 | * are permitted provided that the following conditions are met:
16 | *
17 | * Redistributions of source code must retain the above copyright notice, this list of
18 | * conditions and the following disclaimer.
19 | * Redistributions in binary form must reproduce the above copyright notice, this list
20 | * of conditions and the following disclaimer in the documentation and/or other materials
21 | * provided with the distribution.
22 | *
23 | * Neither the name of the author nor the names of contributors may be used to endorse
24 | * or promote products derived from this software without specific prior written permission.
25 | *
26 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
27 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
28 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
29 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
30 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
31 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
32 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
33 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
34 | * OF THE POSSIBILITY OF SUCH DAMAGE.
35 | *
36 | */
37 | import $ from 'jquery';
38 | // t: current time, b: begInnIng value, c: change In value, d: duration
39 | $.easing.jswing = $.easing.swing;
40 |
41 | $.extend($.easing,
42 | {
43 | def: 'easeOutQuad',
44 | swing: function (x, t, b, c, d) {
45 | //alert($.easing.default);
46 | return $.easing[$.easing.def](x, t, b, c, d);
47 | },
48 | easeInQuad: function (x, t, b, c, d) {
49 | return c*(t/=d)*t + b;
50 | },
51 | easeOutQuad: function (x, t, b, c, d) {
52 | return -c *(t/=d)*(t-2) + b;
53 | },
54 | easeInOutQuad: function (x, t, b, c, d) {
55 | if ((t/=d/2) < 1) return c/2*t*t + b;
56 | return -c/2 * ((--t)*(t-2) - 1) + b;
57 | },
58 | easeInCubic: function (x, t, b, c, d) {
59 | return c*(t/=d)*t*t + b;
60 | },
61 | easeOutCubic: function (x, t, b, c, d) {
62 | return c*((t=t/d-1)*t*t + 1) + b;
63 | },
64 | easeInOutCubic: function (x, t, b, c, d) {
65 | if ((t/=d/2) < 1) return c/2*t*t*t + b;
66 | return c/2*((t-=2)*t*t + 2) + b;
67 | },
68 | easeInQuart: function (x, t, b, c, d) {
69 | return c*(t/=d)*t*t*t + b;
70 | },
71 | easeOutQuart: function (x, t, b, c, d) {
72 | return -c * ((t=t/d-1)*t*t*t - 1) + b;
73 | },
74 | easeInOutQuart: function (x, t, b, c, d) {
75 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
76 | return -c/2 * ((t-=2)*t*t*t - 2) + b;
77 | },
78 | easeInQuint: function (x, t, b, c, d) {
79 | return c*(t/=d)*t*t*t*t + b;
80 | },
81 | easeOutQuint: function (x, t, b, c, d) {
82 | return c*((t=t/d-1)*t*t*t*t + 1) + b;
83 | },
84 | easeInOutQuint: function (x, t, b, c, d) {
85 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
86 | return c/2*((t-=2)*t*t*t*t + 2) + b;
87 | },
88 | easeInSine: function (x, t, b, c, d) {
89 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
90 | },
91 | easeOutSine: function (x, t, b, c, d) {
92 | return c * Math.sin(t/d * (Math.PI/2)) + b;
93 | },
94 | easeInOutSine: function (x, t, b, c, d) {
95 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
96 | },
97 | easeInExpo: function (x, t, b, c, d) {
98 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
99 | },
100 | easeOutExpo: function (x, t, b, c, d) {
101 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
102 | },
103 | easeInOutExpo: function (x, t, b, c, d) {
104 | if (t==0) return b;
105 | if (t==d) return b+c;
106 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
107 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
108 | },
109 | easeInCirc: function (x, t, b, c, d) {
110 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
111 | },
112 | easeOutCirc: function (x, t, b, c, d) {
113 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
114 | },
115 | easeInOutCirc: function (x, t, b, c, d) {
116 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
117 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
118 | },
119 | easeInElastic: function (x, t, b, c, d) {
120 | var s=1.70158;var p=0;var a=c;
121 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
122 | if (a < Math.abs(c)) { a=c; var s=p/4; }
123 | else var s = p/(2*Math.PI) * Math.asin (c/a);
124 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
125 | },
126 | easeOutElastic: function (x, t, b, c, d) {
127 | var s=1.70158;var p=0;var a=c;
128 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
129 | if (a < Math.abs(c)) { a=c; var s=p/4; }
130 | else var s = p/(2*Math.PI) * Math.asin (c/a);
131 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
132 | },
133 | easeInOutElastic: function (x, t, b, c, d) {
134 | var s=1.70158;var p=0;var a=c;
135 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
136 | if (a < Math.abs(c)) { a=c; var s=p/4; }
137 | else var s = p/(2*Math.PI) * Math.asin (c/a);
138 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
139 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
140 | },
141 | easeInBack: function (x, t, b, c, d, s) {
142 | if (s == undefined) s = 1.70158;
143 | return c*(t/=d)*t*((s+1)*t - s) + b;
144 | },
145 | easeOutBack: function (x, t, b, c, d, s) {
146 | if (s == undefined) s = 1.70158;
147 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
148 | },
149 | easeInOutBack: function (x, t, b, c, d, s) {
150 | if (s == undefined) s = 1.70158;
151 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
152 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
153 | },
154 | easeInBounce: function (x, t, b, c, d) {
155 | return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;
156 | },
157 | easeOutBounce: function (x, t, b, c, d) {
158 | if ((t/=d) < (1/2.75)) {
159 | return c*(7.5625*t*t) + b;
160 | } else if (t < (2/2.75)) {
161 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
162 | } else if (t < (2.5/2.75)) {
163 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
164 | } else {
165 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
166 | }
167 | },
168 | easeInOutBounce: function (x, t, b, c, d) {
169 | if (t < d/2) return $.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
170 | return $.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
171 | }
172 | });
173 |
174 | /*
175 | *
176 | * TERMS OF USE - EASING EQUATIONS
177 | *
178 | * Open source under the BSD License.
179 | *
180 | * Copyright 2001 Robert Penner
181 | * All rights reserved.
182 | *
183 | * Redistribution and use in source and binary forms, with or without modification,
184 | * are permitted provided that the following conditions are met:
185 | *
186 | * Redistributions of source code must retain the above copyright notice, this list of
187 | * conditions and the following disclaimer.
188 | * Redistributions in binary form must reproduce the above copyright notice, this list
189 | * of conditions and the following disclaimer in the documentation and/or other materials
190 | * provided with the distribution.
191 | *
192 | * Neither the name of the author nor the names of contributors may be used to endorse
193 | * or promote products derived from this software without specific prior written permission.
194 | *
195 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
196 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
197 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
198 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
199 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
200 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
201 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
202 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
203 | * OF THE POSSIBILITY OF SUCH DAMAGE.
204 | *
205 | */
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | GENERAL STYLING
3 | */
4 | body {
5 | background-color: #f5f5f5!important;
6 | color: #4e4e4e!important;
7 | }
8 |
9 | h1,
10 | h2,
11 | h3,
12 | h4,
13 | h5,
14 | h6 {
15 | color: #1e1e1e;
16 | }
17 |
18 | a {
19 | color: #1e1e1e;
20 | transition: all 0.5s ease-in-out;
21 | }
22 |
23 | a:hover {
24 | color: #0078ff;
25 | text-decoration: none;
26 | transition: all 0.5s ease-in-out;
27 | }
28 |
29 | .p-r {
30 | position: relative;
31 | }
32 |
33 | .color-a {
34 | color: #0078ff;
35 | }
36 |
37 | .color-d {
38 | color: #f5f5f5;
39 | }
40 |
41 | .color-text-a {
42 | color: #4e4e4e;
43 | }
44 |
45 | .box-shadow,
46 | .paralax-mf,
47 | .service-box,
48 | .work-box,
49 | .card-blog {
50 | box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
51 | }
52 |
53 | .box-shadow-a,
54 | .button:hover {
55 | box-shadow: 0 0 0 4px #cde1f8;
56 | }
57 |
58 | .display-5 {
59 | font-size: 2.5rem;
60 | font-weight: 300;
61 | line-height: 1.1;
62 | }
63 |
64 | .display-6 {
65 | font-size: 2rem;
66 | font-weight: 300;
67 | line-height: 1.1;
68 | }
69 |
70 | .avatar {
71 | width: 32px;
72 | height: 32px;
73 | margin-right: 4px;
74 | overflow: hidden;
75 | }
76 |
77 | .bg-image {
78 | background-repeat: no-repeat;
79 | background-attachment: fixed;
80 | background-size: cover;
81 | background-position: center center;
82 | }
83 |
84 | .overlay-mf {
85 | background-color: #0078ff;
86 | }
87 |
88 | .overlay-mf {
89 | position: absolute;
90 | top: 0;
91 | left: 0px;
92 | padding: 0;
93 | height: 100%;
94 | width: 100%;
95 | opacity: .7;
96 | }
97 |
98 | .paralax-mf {
99 | position: relative;
100 | padding: 8rem 0;
101 | }
102 |
103 | .display-table {
104 | width: 100%;
105 | height: 100%;
106 | display: table;
107 | }
108 |
109 | .table-cell {
110 | display: table-cell;
111 | vertical-align: middle;
112 | }
113 |
114 | /* Sections */
115 |
116 | .sect-4 {
117 | padding: 4rem 0;
118 | }
119 |
120 | .sect-pt4 {
121 | padding-top: 4rem;
122 | }
123 |
124 | .sect-mt4 {
125 | margin-top: 4rem;
126 | }
127 |
128 | /* Title S */
129 |
130 | .title-s {
131 | font-weight: 600;
132 | color: #1e1e1e;
133 | font-size: 1.1rem;
134 | }
135 |
136 | /* Title A */
137 |
138 | .title-box {
139 | margin-bottom: 4rem;
140 | }
141 |
142 | .title-a {
143 | font-size: 3rem;
144 | font-weight: bold;
145 | text-transform: uppercase;
146 | }
147 |
148 | .subtitle-a {
149 | color: #4e4e4e;
150 | }
151 |
152 | .line-mf {
153 | width: 40px;
154 | height: 5px;
155 | background-color: #0078ff;
156 | margin: 0 auto;
157 | }
158 |
159 | /* Title Left */
160 |
161 | .title-box-2 {
162 | margin-bottom: 3rem;
163 | }
164 |
165 | .title-left {
166 | font-size: 2rem;
167 | position: relative;
168 | }
169 |
170 | .title-left:before {
171 | content: '';
172 | position: absolute;
173 | height: 3px;
174 | background-color: #0078ff;
175 | width: 100px;
176 | bottom: -12px;
177 | }
178 |
179 | /* Box */
180 |
181 | .box-pl2 {
182 | padding-left: 2rem;
183 | }
184 |
185 | .box-shadow-full {
186 | padding: 3rem 1.25rem;
187 | position: relative;
188 | background-color: #fff;
189 | margin-bottom: 3rem;
190 | z-index: 2;
191 | box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
192 | }
193 |
194 | /* Socials */
195 |
196 | .socials {
197 | padding: 1.5rem 0;
198 | }
199 |
200 | .socials ul li {
201 | display: inline-block;
202 | }
203 |
204 | .socials .ico-circle {
205 | height: 40px;
206 | width: 40px;
207 | font-size: 1.7rem;
208 | border-radius: 50%;
209 | line-height: 1.4;
210 | margin: 0 15px 0 0;
211 | box-shadow: 0 0 0 3px #0078ff;
212 | transition: all 500ms ease;
213 | }
214 |
215 | .socials .ico-circle:hover {
216 | background-color: #0078ff;
217 | color: #fff;
218 | box-shadow: 0 0 0 3px #cde1f8;
219 | transition: all 500ms ease;
220 | }
221 |
222 | /* Ul resect */
223 |
224 | .ul-resect,
225 | .socials ul,
226 | .list-ico,
227 | .blog-wrapper .post-meta ul,
228 | .box-comments .list-comments,
229 | .widget-sidebar .list-sidebar,
230 | .widget-tags ul {
231 | list-style: none;
232 | padding-left: 0;
233 | margin-bottom: 0;
234 | }
235 |
236 | .list-ico {
237 | line-height: 2;
238 | }
239 |
240 | .list-ico span {
241 | color: #0078ff;
242 | margin-right: 10px;
243 | }
244 |
245 | /* Ico Circle */
246 |
247 | .ico-circle {
248 | height: 100px;
249 | width: 100px;
250 | font-size: 2rem;
251 | border-radius: 50%;
252 | line-height: 1.55;
253 | margin: 0 auto;
254 | text-align: center;
255 | box-shadow: 0 0 0 10px #0078ff;
256 | display: block;
257 | }
258 |
259 | /* Owl Carousel */
260 |
261 | .owl-theme .owl-dots {
262 | text-align: center;
263 | margin-top: 18px;
264 | }
265 |
266 | .owl-theme .owl-dots .owl-dot {
267 | display: inline-block;
268 | }
269 |
270 | .owl-theme .owl-dots .owl-dot span {
271 | width: 18px;
272 | height: 7px;
273 | margin: 5px 5px;
274 | background: #cde1f8;
275 | border: 0px solid #cde1f8;
276 | display: block;
277 | transition: all 0.6s ease-in-out;
278 | cursor: pointer;
279 | }
280 |
281 | .owl-theme .owl-dots .owl-dot:hover span {
282 | background-color: #cde1f8;
283 | }
284 |
285 | .owl-theme .owl-dots .owl-dot.active span {
286 | background-color: #1B1B1B;
287 | width: 25px;
288 | }
289 |
290 | /* Scrolltop S */
291 |
292 | .scrolltop-mf {
293 | position: relative;
294 | display: none;
295 | }
296 |
297 | .scrolltop-mf span {
298 | z-index: 999;
299 | position: fixed;
300 | width: 42px;
301 | height: 42px;
302 | background-color: #0078ff;
303 | opacity: .7;
304 | font-size: 1.6rem;
305 | line-height: 1.5;
306 | text-align: center;
307 | color: #fff;
308 | top: auto;
309 | left: auto;
310 | right: 30px;
311 | bottom: 50px;
312 | cursor: pointer;
313 | border-radius: 50%;
314 | }
315 |
316 | /* Back to top button */
317 |
318 | .back-to-top {
319 | position: fixed;
320 | display: none;
321 | background: #0078ff;
322 | color: #fff;
323 | width: 44px;
324 | height: 44px;
325 | text-align: center;
326 | line-height: 1;
327 | font-size: 16px;
328 | border-radius: 50%;
329 | right: 15px;
330 | bottom: 15px;
331 | transition: background 0.5s;
332 | z-index: 11;
333 | }
334 |
335 | .back-to-top i {
336 | padding-top: 12px;
337 | color: #fff;
338 | }
339 |
340 | /* Prelaoder */
341 |
342 | #preloader {
343 | position: fixed;
344 | top: 0;
345 | left: 0;
346 | right: 0;
347 | bottom: 0;
348 | z-index: 9999;
349 | overflow: hidden;
350 | background: #fff;
351 | }
352 |
353 | #preloader:before {
354 | content: "";
355 | position: fixed;
356 | top: calc(50% - 30px);
357 | left: calc(50% - 30px);
358 | border: 6px solid #f2f2f2;
359 | border-top: 6px solid #0078ff;
360 | border-radius: 50%;
361 | width: 60px;
362 | height: 60px;
363 | -webkit-animation: animate-preloader 1s linear infinite;
364 | animation: animate-preloader 1s linear infinite;
365 | }
366 |
367 | @-webkit-keyframes animate-preloader {
368 | 0% {
369 | -webkit-transform: rotate(0deg);
370 | transform: rotate(0deg);
371 | }
372 |
373 | 100% {
374 | -webkit-transform: rotate(360deg);
375 | transform: rotate(360deg);
376 | }
377 | }
378 |
379 | @keyframes animate-preloader {
380 | 0% {
381 | -webkit-transform: rotate(0deg);
382 | transform: rotate(0deg);
383 | }
384 |
385 | 100% {
386 | -webkit-transform: rotate(360deg);
387 | transform: rotate(360deg);
388 | }
389 | }
390 |
391 | /*
392 | NAVBAR
393 | */
394 |
395 | .navbar-b {
396 | transition: all .5s ease-in-out;
397 | background-color: transparent;
398 | padding-top: 1.563rem;
399 | padding-bottom: 1.563rem;
400 | }
401 |
402 | .navbar-b.navbar-reduce {
403 | box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
404 | }
405 |
406 | .navbar-b.navbar-trans .nav-item,
407 | .navbar-b.navbar-reduce .nav-item {
408 | position: relative;
409 | padding-right: 10px;
410 | padding-left: 0;
411 | }
412 |
413 | .navbar-b.navbar-trans .nav-link,
414 | .navbar-b.navbar-reduce .nav-link {
415 | color: #fff;
416 | text-transform: uppercase;
417 | font-weight: 600;
418 | }
419 |
420 | .navbar-b.navbar-trans .nav-link:before,
421 | .navbar-b.navbar-reduce .nav-link:before {
422 | content: '';
423 | position: absolute;
424 | margin-left: 0px;
425 | width: 0%;
426 | bottom: 0;
427 | left: 0;
428 | height: 2px;
429 | transition: all 500ms ease;
430 | }
431 |
432 | .navbar-b.navbar-trans .nav-link:hover,
433 | .navbar-b.navbar-reduce .nav-link:hover {
434 | color: #1B1B1B;
435 | }
436 |
437 | .navbar-b.navbar-trans .nav-link:hover:before,
438 | .navbar-b.navbar-reduce .nav-link:hover:before {
439 | width: 35px;
440 | }
441 |
442 | .navbar-b.navbar-trans .show > .nav-link:before,
443 | .navbar-b.navbar-trans .active > .nav-link:before,
444 | .navbar-b.navbar-trans .nav-link.show:before,
445 | .navbar-b.navbar-trans .nav-link.active:before,
446 | .navbar-b.navbar-reduce .show > .nav-link:before,
447 | .navbar-b.navbar-reduce .active > .nav-link:before,
448 | .navbar-b.navbar-reduce .nav-link.show:before,
449 | .navbar-b.navbar-reduce .nav-link.active:before {
450 | width: 35px;
451 | }
452 |
453 | .navbar-b.navbar-trans .nav-link:before {
454 | background-color: #fff;
455 | }
456 |
457 | .navbar-b.navbar-trans .nav-link:hover {
458 | color: #fff;
459 | }
460 |
461 | .navbar-b.navbar-trans .show > .nav-link,
462 | .navbar-b.navbar-trans .active > .nav-link,
463 | .navbar-b.navbar-trans .nav-link.show,
464 | .navbar-b.navbar-trans .nav-link.active {
465 | color: #fff;
466 | }
467 |
468 | .navbar-b.navbar-reduce {
469 | transition: all .5s ease-in-out;
470 | background-color: #fff;
471 | padding-top: 15px;
472 | padding-bottom: 15px;
473 | }
474 |
475 | .navbar-b.navbar-reduce .nav-link {
476 | color: #0078ff;
477 | }
478 |
479 | .navbar-b.navbar-reduce .nav-link:before {
480 | background-color: #0078ff;
481 | }
482 |
483 | .navbar-b.navbar-reduce .nav-link:hover {
484 | color: #0078ff;
485 | }
486 |
487 | .navbar-b.navbar-reduce .show > .nav-link,
488 | .navbar-b.navbar-reduce .active > .nav-link,
489 | .navbar-b.navbar-reduce .nav-link.show,
490 | .navbar-b.navbar-reduce .nav-link.active {
491 | color: #0078ff;
492 | }
493 |
494 | .navbar-b.navbar-reduce .navbar-brand {
495 | color: #0078ff;
496 | }
497 |
498 | .navbar-b.navbar-reduce .navbar-toggler span {
499 | background-color: #1B1B1B;
500 | }
501 |
502 | .navbar-b .navbar-brand {
503 | color: #fff;
504 | font-size: 1.6rem;
505 | font-weight: 600;
506 | }
507 |
508 | .navbar-b .navbar-nav .dropdown-item.show .dropdown-menu,
509 | .navbar-b .dropdown.show .dropdown-menu,
510 | .navbar-b .dropdown-btn.show .dropdown-menu {
511 | -webkit-transform: translate3d(0px, 0px, 0px);
512 | transform: translate3d(0px, 0px, 0px);
513 | visibility: visible !important;
514 | }
515 |
516 | .navbar-b .dropdown-menu {
517 | margin: 1.12rem 0 0;
518 | border-radius: 0;
519 | }
520 |
521 | .navbar-b .dropdown-menu .dropdown-item {
522 | padding: .7rem 1.7rem;
523 | transition: all 500ms ease;
524 | }
525 |
526 | .navbar-b .dropdown-menu .dropdown-item:hover {
527 | background-color: #0078ff;
528 | color: #fff;
529 | transition: all 500ms ease;
530 | }
531 |
532 | .navbar-b .dropdown-menu .dropdown-item.active {
533 | background-color: #0078ff;
534 | }
535 |
536 | /* Hamburger Navbar */
537 |
538 | .navbar-toggler {
539 | position: relative;
540 | }
541 |
542 | .navbar-toggler:focus,
543 | .navbar-toggler:active {
544 | outline: 0;
545 | }
546 |
547 | .navbar-toggler span {
548 | display: block;
549 | background-color: #fff;
550 | height: 3px;
551 | width: 25px;
552 | margin-top: 4px;
553 | margin-bottom: 4px;
554 | -webkit-transform: rotate(0deg);
555 | transform: rotate(0deg);
556 | left: 0;
557 | opacity: 1;
558 | }
559 |
560 | .navbar-toggler span:nth-child(1),
561 | .navbar-toggler span:nth-child(3) {
562 | transition: -webkit-transform .35s ease-in-out;
563 | transition: transform .35s ease-in-out;
564 | transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out;
565 | }
566 |
567 | .navbar-toggler:not(.collapsed) span:nth-child(1) {
568 | position: absolute;
569 | left: 12px;
570 | top: 10px;
571 | -webkit-transform: rotate(135deg);
572 | transform: rotate(135deg);
573 | opacity: 0.9;
574 | }
575 |
576 | .navbar-toggler:not(.collapsed) span:nth-child(2) {
577 | height: 12px;
578 | visibility: hidden;
579 | background-color: transparent;
580 | }
581 |
582 | .navbar-toggler:not(.collapsed) span:nth-child(3) {
583 | position: absolute;
584 | left: 12px;
585 | top: 10px;
586 | -webkit-transform: rotate(-135deg);
587 | transform: rotate(-135deg);
588 | opacity: 0.9;
589 | }
590 |
591 | /*
592 | INTRO
593 | */
594 |
595 | .intro {
596 | height: 100vh;
597 | position: relative;
598 | color: #fff;
599 | }
600 |
601 | .intro .intro-content {
602 | text-align: center;
603 | position: absolute;
604 | }
605 |
606 | .intro .overlay-intro {
607 | background-color: rgba(0, 0, 0, 0.6);
608 | position: absolute;
609 | top: 0;
610 | left: 0px;
611 | padding: 0;
612 | height: 100%;
613 | width: 100%;
614 | opacity: .9;
615 | }
616 |
617 | .intro .intro-title {
618 | color: #fff;
619 | font-weight: 600;
620 | font-size: 3rem;
621 | }
622 |
623 | .intro .intro-subtitle {
624 | font-size: 1.5rem;
625 | font-weight: 300;
626 | }
627 |
628 | /* .intro .text-slider-items {
629 | font-weight: bolder;
630 | } */
631 |
632 | .intro-single {
633 | height: 350px;
634 | }
635 |
636 | .intro-single .intro-content {
637 | margin-top: 30px;
638 | }
639 |
640 | .intro-single .intro-title {
641 | text-transform: uppercase;
642 | font-size: 3rem;
643 | }
644 |
645 | .intro-single .breadcrumb {
646 | background-color: transparent;
647 | color: #0078ff;
648 | }
649 |
650 | .intro-single .breadcrumb .breadcrumb-item:before {
651 | color: #cde1f8;
652 | }
653 |
654 | .intro-single .breadcrumb .breadcrumb-item.active {
655 | color: #cde1f8;
656 | }
657 |
658 | .intro-single .breadcrumb a {
659 | color: #fff;
660 | }
661 |
662 | /*
663 | ABOUT
664 | */
665 |
666 | .about-mf .box-shadow-full {
667 | padding-top: 4rem;
668 | padding-bottom: 4rem;
669 | }
670 |
671 | .about-mf .about-img {
672 | margin-bottom: 2rem;
673 | }
674 |
675 | .about-mf .about-img img {
676 | margin-left: 10px;
677 | }
678 |
679 | .skill-mf span {
680 | color: #4e4e4e;
681 | }
682 |
683 | .skill-mf .progress {
684 | background-color: #cde1f8;
685 | margin: .5rem 0 1.2rem 0;
686 | border-radius: 0;
687 | height: .7rem;
688 | }
689 |
690 | .skill-mf .progress .progress-bar {
691 | height: .7rem;
692 | background-color: #0078ff;
693 | }
694 |
695 | /*
696 | PORTFOLIO
697 | */
698 |
699 | .work-box {
700 | margin-bottom: 3rem;
701 | -webkit-backface-visibility: hidden;
702 | backface-visibility: hidden;
703 | background-color: #fff;
704 | }
705 |
706 | .work-box:hover img {
707 | -webkit-transform: scale(1.3);
708 | transform: scale(1.3);
709 | }
710 |
711 | .work-img {
712 | display: block;
713 | overflow: hidden;
714 | }
715 |
716 | .work-img img {
717 | transition: all 1s;
718 | }
719 |
720 | .work-content {
721 | padding: 2rem 3% 1rem 4%;
722 | }
723 |
724 | .work-content .w-more {
725 | color: #4e4e4e;
726 | font-size: .8rem;
727 | }
728 |
729 | .work-content .w-more .w-ctegory {
730 | color: #0078ff;
731 | }
732 |
733 | .work-content .w-like {
734 | font-size: 2.5rem;
735 | color: #0078ff;
736 | float: right;
737 | }
738 |
739 | .work-content .w-like a {
740 | color: #0078ff;
741 | }
742 |
743 | .work-content .w-like .num-like {
744 | font-size: .7rem;
745 | }
746 |
747 | .w-title {
748 | font-size: 1.2rem;
749 | }
750 |
751 | /*
752 | TESTIMONIALS
753 | */
754 |
755 | .testimonials .owl-carousel .owl-item img {
756 | width: auto;
757 | }
758 |
759 | .testimonial-box {
760 | color: #fff;
761 | text-align: center;
762 | }
763 |
764 | .testimonial-box .author-test {
765 | margin-top: 1rem;
766 | }
767 |
768 | .testimonial-box .author-test img {
769 | margin: 0 auto;
770 | }
771 |
772 | .testimonial-box .author {
773 | color: #fff;
774 | text-transform: uppercase;
775 | font-weight: 600;
776 | margin: 1rem 0;
777 | display: block;
778 | font-size: 1.4rem;
779 | }
780 |
781 | .testimonial-box .comit {
782 | font-size: 2rem;
783 | color: #0078ff;
784 | background-color: #fff;
785 | width: 52px;
786 | height: 52px;
787 | display: block;
788 | margin: 0 auto;
789 | border-radius: 50%;
790 | line-height: 1.6;
791 | }
792 |
793 | /*
794 | CONTACT
795 | */
796 |
797 | .footer-paralax {
798 | padding: 4rem 0 0 0;
799 | }
800 |
801 | .contact-mf {
802 | margin-top: 4rem;
803 | }
804 |
805 | /*
806 | FOOTER
807 | */
808 |
809 | footer {
810 | text-align: center;
811 | color: #fff;
812 | padding-bottom: 4rem;
813 | }
814 |
815 | footer .copyright {
816 | margin-bottom: .3rem;
817 | }
818 |
819 | /*
820 | CONTACT
821 | */
822 |
823 | #sendmessage {
824 | color: #0078ff;
825 | border: 1px solid #0078ff;
826 | display: none;
827 | text-align: center;
828 | padding: 15px;
829 | font-weight: 600;
830 | margin-bottom: 15px;
831 | }
832 |
833 | #errormessage {
834 | color: red;
835 | display: none;
836 | border: 1px solid red;
837 | text-align: center;
838 | padding: 15px;
839 | font-weight: 600;
840 | margin-bottom: 15px;
841 | }
842 |
843 | #sendmessage.show,
844 | #errormessage.show,
845 | .show {
846 | display: block;
847 | }
848 |
849 | .validation {
850 | color: red;
851 | display: none;
852 | margin: 0 0 20px;
853 | font-weight: 400;
854 | font-size: 13px;
855 | }
856 |
857 | /*
858 | BUTTON
859 | */
860 |
861 | .button {
862 | display: inline-block;
863 | padding: .3rem .6rem;
864 | text-align: center;
865 | vertical-align: middle;
866 | -webkit-user-select: none;
867 | -moz-user-select: none;
868 | -ms-user-select: none;
869 | user-select: none;
870 | font-size: 1rem;
871 | border-radius: .3rem;
872 | border: 1px solid transparent;
873 | transition: all 500ms ease;
874 | cursor: pointer;
875 | }
876 |
877 | .button:focus {
878 | outline: 0;
879 | }
880 |
881 | .button:hover {
882 | background-color: #0062d3;
883 | color: #fff;
884 | transition: all 500ms ease;
885 | }
886 |
887 | .button-a {
888 | background-color: #0078ff;
889 | color: #fff;
890 | border-color: #cde1f8;
891 | }
892 |
893 | .button-big {
894 | padding: .9rem 2.3rem;
895 | font-size: 1.2rem;
896 | }
897 |
898 | .button-rouded {
899 | border-radius: 5rem;
900 | }
901 |
902 | .btn-lg {
903 | padding: .5rem 1rem;
904 | font-size: 1.25rem;
905 | line-height: 1.5;
906 | border-radius: .3rem;
907 | }
908 |
909 | @media (min-width: 577px) {
910 | .counter-box {
911 | margin-bottom: 1.8rem;
912 | }
913 | }
914 |
915 | @media (min-width: 767px) {
916 | .about-mf .box-pl2 {
917 | margin-top: 3rem;
918 | padding-left: 0rem;
919 | }
920 |
921 | .card-blog {
922 | margin-bottom: 3rem;
923 | }
924 |
925 | .contact-mf .box-pl2 {
926 | margin-top: 3rem;
927 | padding-left: 0rem;
928 | }
929 | }
930 |
931 | @media (min-width: 768px) {
932 | .box-shadow-full {
933 | padding: 3rem;
934 | }
935 |
936 | .navbar-b.navbar-trans .nav-item,
937 | .navbar-b.navbar-reduce .nav-item {
938 | padding-left: 10px;
939 | }
940 |
941 | .navbar-b.navbar-trans .nav-link:before,
942 | .navbar-b.navbar-reduce .nav-link:before {
943 | margin-left: 18px;
944 | }
945 |
946 | .intro .intro-title {
947 | font-size: 4.5rem;
948 | }
949 |
950 | .intro .intro-subtitle {
951 | font-size: 2.5rem;
952 | }
953 |
954 | .intro-single .intro-title {
955 | font-size: 3.5rem;
956 | }
957 |
958 | .testimonial-box .description {
959 | padding: 0 5rem;
960 | }
961 |
962 | .post-box,
963 | .form-comments,
964 | .box-comments,
965 | .widget-sidebar {
966 | padding: 3rem;
967 | }
968 |
969 | .blog-wrapper .article-title {
970 | font-size: 1.9rem;
971 | }
972 |
973 | .box-comments .list-comments .comment-author {
974 | font-size: 1.5rem;
975 | }
976 | }
977 |
978 | @media (min-width: 992px) {
979 | .testimonial-box .description {
980 | padding: 0 8rem;
981 | }
982 | }
983 |
984 | @media (min-width: 1200px) {
985 | .testimonial-box .description {
986 | padding: 0 13rem;
987 | }
988 | }
989 |
990 | @media (max-width: 1024px) {
991 | .bg-image {
992 | background-attachment: scroll;
993 | }
994 | }
995 |
996 | @media (max-width: 768px) {
997 | .back-to-top {
998 | bottom: 15px;
999 | }
1000 | }
--------------------------------------------------------------------------------
/test.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shloksomani/react-portfolio/07ad1f11d9688d8c27bed9ba02c50d7d2be16d7c/test.gif
--------------------------------------------------------------------------------
10 |
11 |
12 |
13 |
14 |
47 | );
48 | }
49 | }
50 |
51 | export default Intro;
52 |
--------------------------------------------------------------------------------
/src/components/navbar.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import $ from "jquery";
3 |
4 | import logo1 from "../img/male1.png";
5 | import logo2 from "../img/male.png";
6 |
7 | class Navbar extends React.Component {
8 | constructor() {
9 | super();
10 | this.state = {
11 | logo: logo1
12 | };
13 | }
14 |
15 | componentDidMount() {
16 | const nav = $("nav");
17 | let navHeight = nav.outerHeight();
18 |
19 | $(".navbar-toggler").on("click", function() {
20 | if (!$("#mainNav").hasClass("navbar-reduce")) {
21 | $("#mainNav").addClass("navbar-reduce");
22 | }
23 | });
24 |
25 | $("body").scrollspy({
26 | target: "#mainNav",
27 | offset: navHeight
28 | });
29 |
30 | $(".js-scroll").on("click", function() {
31 | $(".navbar-collapse").collapse("hide");
32 | });
33 |
34 | window.addEventListener("scroll", () => {
35 | if (window.pageYOffset > 50) {
36 | document
37 | .querySelector(".navbar-expand-md")
38 | .classList.add("navbar-reduce");
39 | document
40 | .querySelector(".navbar-expand-md")
41 | .classList.remove("navbar-trans");
42 | this.setState({ logo: logo2 });
43 | } else {
44 | document
45 | .querySelector(".navbar-expand-md")
46 | .classList.add("navbar-trans");
47 | document
48 | .querySelector(".navbar-expand-md")
49 | .classList.remove("navbar-reduce");
50 | this.setState({ logo: logo1 });
51 | }
52 | });
53 |
54 | $('a.js-scroll[href*="#"]:not([href="#"])').on("click", function() {
55 | if (
56 | window.location.pathname.replace(/^\//, "") ===
57 | this.pathname.replace(/^\//, "") &&
58 | window.location.hostname === this.hostname
59 | ) {
60 | var target = $(this.hash);
61 | target = target.length
62 | ? target
63 | : $("[name=" + this.hash.slice(1) + "]");
64 | if (target.length) {
65 | $("html, body").animate(
66 | {
67 | scrollTop: target.offset().top - navHeight + 5
68 | },
69 | 1000,
70 | "easeInExpo"
71 | );
72 | return false;
73 | }
74 | }
75 | });
76 |
77 | $(".js-scroll").on("click", function() {
78 | $(".navbar-collapse").collapse("hide");
79 | });
80 | }
81 |
82 | render() {
83 | return (
84 |
138 | );
139 | }
140 | }
141 |
142 | export default Navbar;
143 |
--------------------------------------------------------------------------------
/src/components/portfolio.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | //import stock
4 | import stock from "../img/image1.jpg";
5 | import stock1 from "../img/image2.jpg";
6 | import stock2 from "../img/image3.jpg";
7 | import stock3 from "../img/image4.jpg";
8 | import stock4 from "../img/image5.jpg";
9 | import stock5 from "../img/image6.jpg";
10 |
11 | class Portfolio extends React.Component {
12 | render() {
13 | return (
14 |
15 |
46 |
16 |
44 |
45 |
16 |
397 |
17 |
28 |
18 |
27 |
19 |
26 | Portfolio
20 |21 | Incididunt nostrud id aute culpa excepteur pariatur consequat 22 | elit culpa nulla enim anim incididunt. 23 |
24 | 25 |
29 |
396 |
30 |
90 |
31 |
32 |
89 |
33 | 
34 |
35 |
36 |
52 |
53 |
58 | jsx-a11y/anchor-has-content warning
59 |
60 |
65 | jsx-a11y/anchor-has-content warning
66 |
67 |
72 | jsx-a11y/anchor-has-content warning
73 |
74 |
79 | jsx-a11y/anchor-has-content warning
80 |
81 |
86 | jsx-a11y/anchor-has-content warning
87 |
88 |
37 |
51 |
38 |
45 | Lorem Ipsum
39 |
40 |
41 | HTML5 CSS3 Bootstrap ReactJS
42 |
43 |
44 |
46 |
50 |
47 |
48 |
49 |
91 |
152 |
92 |
93 |
151 |
94 |
95 |
96 |
97 |
114 |
115 |
120 | jsx-a11y/anchor-has-content warning
121 |
122 |
127 | jsx-a11y/anchor-has-content warning
128 |
129 |
134 | jsx-a11y/anchor-has-content warning
135 |
136 |
141 | jsx-a11y/anchor-has-content warning
142 |
143 |
148 | jsx-a11y/anchor-has-content warning
149 |
150 |
98 |
113 |
99 |
107 | Lorem Ipsum
100 |
101 |
102 | HTML5 CSS3 Bootstrap Webpack SmoothScrolling
103 | VanillaJS
104 | {" "}
105 |
106 |
108 |
112 |
109 |
110 |
111 |
153 |
214 |
154 |
155 |
213 |
156 |
157 |
158 |
159 |
176 |
177 |
182 | jsx-a11y/anchor-has-content warning
183 |
184 |
189 | jsx-a11y/anchor-has-content warning
190 |
191 |
196 | jsx-a11y/anchor-has-content warning
197 |
198 |
203 | jsx-a11y/anchor-has-content warning
204 |
205 |
210 | jsx-a11y/anchor-has-content warning
211 |
212 |
160 |
175 |
161 |
169 | Lorem Ipsum
162 |
163 |
164 | HTML5 CSS3 Bootstrap Webpack ReactJS
165 |
166 | {/*} / 18 Sep. 2018*/}
167 |
168 |
170 |
174 |
171 |
172 |
173 |
215 |
275 |
216 |
217 |
274 |
218 |
219 |
220 |
221 |
237 |
238 |
243 | jsx-a11y/anchor-has-content warning
244 |
245 |
250 | jsx-a11y/anchor-has-content warning
251 |
252 |
257 | jsx-a11y/anchor-has-content warning
258 |
259 |
264 | jsx-a11y/anchor-has-content warning
265 |
266 |
271 | jsx-a11y/anchor-has-content warning
272 |
273 |
222 |
236 |
223 |
230 | Lorem Ipsum
224 |
225 |
226 | Bootstrap ReactJS GoogleAPI
227 |
228 |
229 |
231 |
235 |
232 |
233 |
234 |
276 |
334 |
277 |
278 |
333 |
279 |
280 |
281 |
282 |
296 |
297 |
302 | jsx-a11y/anchor-has-content warning
303 |
304 |
309 | jsx-a11y/anchor-has-content warning
310 |
311 |
316 | jsx-a11y/anchor-has-content warning
317 |
318 |
323 | jsx-a11y/anchor-has-content warning
324 |
325 |
330 | jsx-a11y/anchor-has-content warning
331 |
332 |
283 |
295 |
284 |
289 | Lorem Ipsum
285 |
286 | MERN
287 |
288 |
290 |
294 |
291 |
292 |
293 |
335 |
395 |
336 |
337 |
394 |
338 |
339 |
340 |
341 |
357 |
358 |
363 | jsx-a11y/anchor-has-content warning
364 |
365 |
370 | jsx-a11y/anchor-has-content warning
371 |
372 |
377 | jsx-a11y/anchor-has-content warning
378 |
379 |
384 | jsx-a11y/anchor-has-content warning
385 |
386 |
391 | jsx-a11y/anchor-has-content warning
392 |
393 |
342 |
356 |
343 |
350 | Lorem Ipsum
344 |
345 |
346 | HTML5 CSS3 Bootstrap MERN
347 |
348 |
349 |
351 |
355 |
352 |
353 |
354 |