├── src ├── components │ ├── Button │ │ ├── Button.jsx │ │ └── Button.scss │ ├── Slider │ │ ├── Carousel.scss │ │ └── Carousel.jsx │ ├── Footer │ │ ├── Footer.scss │ │ └── Footer.jsx │ ├── ParticleBackground │ │ ├── ParticleBackground.scss │ │ └── ParticleBackground.jsx │ ├── Modal │ │ ├── Modal.scss │ │ └── Modal.jsx │ ├── Preloader │ │ ├── Preloader.jsx │ │ └── Preloader.scss │ ├── TopOnLoad │ │ └── ScrollToTopOnLoad.jsx │ ├── CustomCursor │ │ ├── CustomCursor.scss │ │ └── CustomCursor.jsx │ ├── Resume │ │ ├── SingleResume.jsx │ │ ├── Resume.scss │ │ └── ResumeSection.jsx │ ├── SectionHeading │ │ ├── SectionHeading.jsx │ │ └── SectionHeading.scss │ ├── Review │ │ ├── ReviewSection.jsx │ │ ├── SingleReview.jsx │ │ └── Review.scss │ ├── Blog │ │ ├── BlogSection.jsx │ │ ├── Blog.scss │ │ ├── SingleBlog.jsx │ │ ├── Comment.scss │ │ ├── BlogDetails.scss │ │ └── BlogDetails.jsx │ ├── Layout │ │ └── Layout.jsx │ ├── Skill │ │ ├── Skill.scss │ │ └── Skill.jsx │ ├── SocialLinks │ │ └── SocialLinks.jsx │ ├── About │ │ ├── About.scss │ │ └── About.jsx │ ├── Protfolio │ │ ├── SinglePortfolio.jsx │ │ ├── Portfolio.scss │ │ └── PortfolioSection.jsx │ ├── Iconbox │ │ ├── Iconbox.scss │ │ └── Iconbox.jsx │ ├── Hero │ │ ├── Hero.jsx │ │ └── Hero.scss │ ├── Header │ │ ├── Header.jsx │ │ └── Header.scss │ └── Contact │ │ ├── Contact.scss │ │ └── Contact.jsx ├── sass │ ├── style.scss │ └── default │ │ ├── _variable.scss │ │ ├── _general.scss │ │ ├── _typography.scss │ │ └── _spacing.scss ├── main.jsx ├── App.jsx ├── pages │ └── Home.jsx └── HomePageData.json ├── .DS_Store ├── public └── images │ ├── logo.png │ ├── Resume.pdf │ ├── comment1.jpg │ ├── comment2.jpg │ ├── favicon.png │ ├── hero-bg3.jpg │ ├── hero-bg4.jpg │ ├── blog │ ├── blog1.jpg │ ├── blog2.jpg │ └── blog3.jpg │ ├── hero-bg17.jpg │ ├── icon │ ├── icon1.png │ ├── icon2.png │ ├── icon3.png │ ├── icon4.png │ ├── icon5.png │ ├── icon6.png │ ├── quote.png │ ├── resume-icon1.png │ ├── resume-icon2.png │ └── icon1.svg │ ├── section │ ├── about.jpg │ └── hero-img.jpg │ ├── client │ ├── client1.png │ ├── client2.png │ └── client3.png │ ├── background │ └── hero-bg.jpg │ └── portfolio │ ├── portfolio1.jpg │ ├── portfolio2.jpg │ ├── portfolio3.jpg │ ├── portfolio4.jpg │ ├── portfolio5.jpg │ ├── portfolio6.jpg │ ├── portfolio1_lg.jpg │ ├── portfolio2_lg.jpg │ ├── portfolio3_lg.jpg │ ├── portfolio4_lg.jpg │ ├── portfolio5_lg.jpg │ └── portfolio6_lg.jpg ├── vite.config.js ├── README.md ├── index.html ├── davis-documentation ├── assets │ ├── js │ │ ├── custom.js │ │ └── bootstrap.min2.js │ └── css │ │ └── custom.css └── index.html └── package.json /src/components/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/components/Slider/Carousel.scss: -------------------------------------------------------------------------------- 1 | .slick-slider { 2 | .slick-slide { 3 | padding: 0 12px; 4 | } 5 | } -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/logo.png -------------------------------------------------------------------------------- /public/images/Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/Resume.pdf -------------------------------------------------------------------------------- /public/images/comment1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/comment1.jpg -------------------------------------------------------------------------------- /public/images/comment2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/comment2.jpg -------------------------------------------------------------------------------- /public/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/favicon.png -------------------------------------------------------------------------------- /public/images/hero-bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/hero-bg3.jpg -------------------------------------------------------------------------------- /public/images/hero-bg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/hero-bg4.jpg -------------------------------------------------------------------------------- /public/images/blog/blog1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/blog/blog1.jpg -------------------------------------------------------------------------------- /public/images/blog/blog2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/blog/blog2.jpg -------------------------------------------------------------------------------- /public/images/blog/blog3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/blog/blog3.jpg -------------------------------------------------------------------------------- /public/images/hero-bg17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/hero-bg17.jpg -------------------------------------------------------------------------------- /public/images/icon/icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/icon1.png -------------------------------------------------------------------------------- /public/images/icon/icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/icon2.png -------------------------------------------------------------------------------- /public/images/icon/icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/icon3.png -------------------------------------------------------------------------------- /public/images/icon/icon4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/icon4.png -------------------------------------------------------------------------------- /public/images/icon/icon5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/icon5.png -------------------------------------------------------------------------------- /public/images/icon/icon6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/icon6.png -------------------------------------------------------------------------------- /public/images/icon/quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/quote.png -------------------------------------------------------------------------------- /public/images/section/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/section/about.jpg -------------------------------------------------------------------------------- /public/images/client/client1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/client/client1.png -------------------------------------------------------------------------------- /public/images/client/client2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/client/client2.png -------------------------------------------------------------------------------- /public/images/client/client3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/client/client3.png -------------------------------------------------------------------------------- /src/components/Footer/Footer.scss: -------------------------------------------------------------------------------- 1 | .st-copyright-wrap { 2 | height: 72px; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /public/images/background/hero-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/background/hero-bg.jpg -------------------------------------------------------------------------------- /public/images/icon/resume-icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/resume-icon1.png -------------------------------------------------------------------------------- /public/images/icon/resume-icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/icon/resume-icon2.png -------------------------------------------------------------------------------- /public/images/section/hero-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/section/hero-img.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio1.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio2.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio3.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio4.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio5.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio6.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio1_lg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio1_lg.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio2_lg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio2_lg.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio3_lg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio3_lg.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio4_lg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio4_lg.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio5_lg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio5_lg.jpg -------------------------------------------------------------------------------- /public/images/portfolio/portfolio6_lg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/HEAD/public/images/portfolio/portfolio6_lg.jpg -------------------------------------------------------------------------------- /src/components/ParticleBackground/ParticleBackground.scss: -------------------------------------------------------------------------------- 1 | .cs_hero_particle_1 { 2 | height: 100%; 3 | width: 100%; 4 | position: absolute; 5 | top: 0; 6 | left: 0; 7 | } 8 | -------------------------------------------------------------------------------- /src/sass/style.scss: -------------------------------------------------------------------------------- 1 | @import 'default/variable'; 2 | @import 'default/typography'; 3 | @import 'default/spacing'; 4 | @import 'default/general'; 5 | @import '../components/Button/Button.scss'; 6 | 7 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/components/Modal/Modal.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | 3 | 4 | .modal-title, 5 | .modal-subtitle{ 6 | color: $base-color4; 7 | } 8 | 9 | .modal-body img{ 10 | width: 100%; 11 | margin-bottom: 20px; 12 | } 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/Preloader/Preloader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Preloader.scss'; 3 | 4 | const Preloader = () => { 5 | return ( 6 |
7 |
8 |
9 | ); 10 | }; 11 | 12 | export default Preloader; -------------------------------------------------------------------------------- /src/sass/default/_variable.scss: -------------------------------------------------------------------------------- 1 | // Base Color 2 | $base-color1: #fec544; 3 | $base-color2: #a9adb8; 4 | $base-color3: #fdfeff; 5 | $base-color4: #232935; 6 | 7 | // Dark Color 8 | $dark-color1: #151b29; 9 | $dark-color2: #070d1b; 10 | $dark-color3: #0a101e; 11 | $dark-color4: #101624; 12 | $dark-color5: #3f4551; 13 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | import './sass/style.scss' 6 | 7 | 8 | ReactDOM.createRoot(document.getElementById('root')).render( 9 | 10 | 11 | , 12 | ) 13 | -------------------------------------------------------------------------------- /src/components/ParticleBackground/ParticleBackground.jsx: -------------------------------------------------------------------------------- 1 | import Particles from "react-tsparticles"; 2 | import "./ParticleBackground.scss"; 3 | 4 | const ParticleBackground = ({ particleConfig }) => { 5 | return ( 6 | 7 | ) 8 | } 9 | 10 | export default ParticleBackground; 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Davis is the best minimal personal portfolio. This template has creative layout, supper smooth animation, unique features, modern and unique design which make your website more beautiful. 2 | 3 | ![01_preview __large_preview](https://github.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/assets/145067902/0db57385-7d6b-47e5-996e-54719e68c8ff) 4 | 5 | https://github.com/codeplay-code/Davis-Personal-Portfolio-ReactJs-Template/wiki 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Davis - Personal portfolio ReactJs template 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/TopOnLoad/ScrollToTopOnLoad.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { useHistory } from 'react-router-dom'; 3 | 4 | const ScrollToTopOnLoad = () => { 5 | const history = useHistory(); 6 | useEffect(() => { 7 | const unlisten = history.listen(() => { 8 | return () => unlisten(); 9 | }); 10 | window.scrollTo(0, 0); 11 | }, [history]); 12 | return null; 13 | }; 14 | 15 | export default ScrollToTopOnLoad 16 | -------------------------------------------------------------------------------- /src/components/CustomCursor/CustomCursor.scss: -------------------------------------------------------------------------------- 1 | @import "../../sass/default/variable"; 2 | .cs_cursor_sm { 3 | position: fixed; 4 | border-radius: 50%; 5 | transform: translate(-50%, -50%); 6 | mix-blend-mode: difference; 7 | z-index: 9999; 8 | @media (max-width: 991px) { 9 | display: none !important; 10 | } 11 | } 12 | .cs_cursor_sm { 13 | width: 10px; 14 | height: 10px; 15 | background-color: $base-color1; 16 | left: 0; 17 | top: 0; 18 | pointer-events: none; 19 | transition: 0.2s; 20 | } 21 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import './Footer.scss'; 2 | 3 | const Footer = () => { 4 | const currentDate = new Date(); 5 | const currentYear = currentDate.getFullYear(); 6 | return ( 7 | 14 | ) 15 | } 16 | 17 | export default Footer; 18 | -------------------------------------------------------------------------------- /src/components/Resume/SingleResume.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | 3 | const SingleResume = ({ element }) => { 4 | const { title, duration, subTitle, text} = element; 5 | return ( 6 |
7 |

{title}

8 |
{duration}
9 |

{subTitle}

10 |

{text}

11 |
12 | ) 13 | } 14 | 15 | SingleResume.propTypes = { 16 | element: PropTypes.object, 17 | } 18 | 19 | export default SingleResume; 20 | -------------------------------------------------------------------------------- /src/components/SectionHeading/SectionHeading.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import './SectionHeading.scss'; 3 | 4 | const SectionHeading = ({title}) => { 5 | return ( 6 |
7 |
8 |

{title}

9 |

{title}

10 |
11 |
12 |
13 | ) 14 | } 15 | 16 | SectionHeading.propTypes = { 17 | title: PropTypes.string, 18 | }; 19 | export default SectionHeading; 20 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Route, Routes } from 'react-router-dom'; 2 | import { useEffect } from 'react'; 3 | import Layout from './components/Layout/Layout'; 4 | import Home from './pages/Home'; 5 | import BlogDetails from './components/Blog/BlogDetails'; 6 | import Aos from 'aos'; 7 | import 'aos/dist/aos.css'; 8 | 9 | function App() { 10 | useEffect(() => { 11 | Aos.init({ once: true }); 12 | }, []); 13 | return ( 14 | 15 | 16 | }> 17 | } /> 18 | } /> 19 | 20 | 21 | 22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /src/components/Review/ReviewSection.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import "./Review.scss"; 3 | import SectionHeading from '../SectionHeading/SectionHeading'; 4 | import Carousel from '../Slider/Carousel'; 5 | 6 | const Review = ({ data }) => { 7 | 8 | return ( 9 |
10 |
11 | 12 |
13 | 14 |
15 |
16 |
17 | ) 18 | } 19 | 20 | Review.propTypes = { 21 | data: PropTypes.object 22 | } 23 | 24 | export default Review 25 | -------------------------------------------------------------------------------- /src/components/Blog/BlogSection.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import "./Blog.scss"; 3 | import SectionHeading from '../SectionHeading/SectionHeading'; 4 | import Carousel from '../Slider/Carousel'; 5 | 6 | const Blog = ({ data }) => { 7 | return ( 8 |
9 |
10 | 11 |
12 | 13 |
14 |
15 |
16 | ) 17 | } 18 | 19 | Blog.propTypes = { 20 | variant: PropTypes.string, 21 | data: PropTypes.object 22 | } 23 | 24 | export default Blog 25 | -------------------------------------------------------------------------------- /davis-documentation/assets/js/custom.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('[data-skin]').on('click', function(e) { 4 | e.preventDefault(); 5 | var skin = $(this).data('skin'); 6 | $('#style-skin').attr('href', 'assets/css/skin-'+ skin +'.css'); 7 | }); 8 | 9 | // Sidebar-boxed: Try it section 10 | $('#sb-left-side').on('click', function() { 11 | $('.sidebar-boxed').removeClass('sidebar-right'); 12 | }); 13 | 14 | $('#sb-right-side').on('click', function() { 15 | $('.sidebar-boxed').addClass('sidebar-right'); 16 | }); 17 | 18 | $('#sb-skin-light').on('click', function() { 19 | $('.sidebar-boxed').removeClass('sidebar-dark'); 20 | }); 21 | 22 | $('#sb-skin-dark').on('click', function() { 23 | $('.sidebar-boxed').addClass('sidebar-dark'); 24 | }); 25 | 26 | }); -------------------------------------------------------------------------------- /src/components/Layout/Layout.jsx: -------------------------------------------------------------------------------- 1 | import Header from '../Header/Header'; 2 | import { useEffect, useState } from 'react'; 3 | import { Outlet } from 'react-router-dom'; 4 | import Footer from '../Footer/Footer'; 5 | import Preloader from '../Preloader/Preloader'; 6 | import CustomCursor from '../CustomCursor/CustomCursor'; 7 | 8 | const Layout = () => { 9 | const [isLoading, setIsLoading] = useState(true); 10 | 11 | useEffect(() => { 12 | setTimeout(() => { 13 | setIsLoading(false); 14 | }, 1000); 15 | }, []); 16 | 17 | 18 | return ( 19 | <> 20 | {isLoading ? : ( 21 |
22 | 23 |
24 | 25 |
26 |
27 | ) 28 | } 29 | 30 | ) 31 | } 32 | export default Layout; 33 | -------------------------------------------------------------------------------- /src/components/Blog/Blog.scss: -------------------------------------------------------------------------------- 1 | @import "../../sass/default/variable"; 2 | .st-post-single.st-style1 { 3 | .st-post-thumb { 4 | display: block; 5 | overflow: hidden; 6 | 7 | img { 8 | width: 100%; 9 | } 10 | } 11 | 12 | .st-post-date { 13 | font-size: 14px; 14 | margin-top: 22px; 15 | margin-bottom: 9px; 16 | 17 | .st-post-date-divider { 18 | margin-left: 4px; 19 | margin-right: 4px; 20 | } 21 | 22 | .st-post-author, 23 | .st-post-publish-date { 24 | color: $base-color1; 25 | } 26 | 27 | .st-post-author:hover { 28 | opacity: 0.8; 29 | } 30 | } 31 | 32 | .st-post-title { 33 | font-size: 20px; 34 | font-weight: 400; 35 | line-height: 1.2em; 36 | margin-bottom: 0; 37 | 38 | &:hover { 39 | color: $base-color1; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/Review/SingleReview.jsx: -------------------------------------------------------------------------------- 1 | import './Review.scss'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const SingleReview = ({element}) => { 5 | const {imgLink,title,designation,text} = element; 6 | return ( 7 |
8 |
9 |

{text}

10 |
quote
11 |
12 |
13 |
client1
14 |
15 |

{title}

16 |
{designation}
17 |
18 |
19 |
20 | ) 21 | } 22 | SingleReview.propTypes = { 23 | element: PropTypes.object 24 | } 25 | 26 | export default SingleReview; 27 | -------------------------------------------------------------------------------- /src/components/Button/Button.scss: -------------------------------------------------------------------------------- 1 | @import "../../sass/default/variable"; 2 | .st-btn.st-style1{ 3 | display: inline-flex; 4 | justify-content: center; 5 | align-items: center; 6 | font-size: 16px; 7 | font-family: "Roboto", sans-serif; 8 | line-height: 1.5em; 9 | font-weight: 500; 10 | padding: 12px 1.5em; 11 | border-radius: 50px; 12 | min-width: 170px; 13 | border: none; 14 | outline: none; 15 | transition: all 0.4s ease; 16 | text-transform: capitalize; 17 | } 18 | 19 | .st-btn.st-style1:hover { 20 | transform: translateY(-1px); 21 | box-shadow: 0px 5px 10px 0px #fec64450; 22 | cursor: pointer; 23 | } 24 | 25 | .st-btn.st-style1.st-color1 { 26 | background-color: $base-color1; 27 | color: $dark-color2; 28 | } 29 | 30 | .st-hero-btn-group { 31 | .st-btn:not(:last-child) { 32 | margin-right: 12px; 33 | } 34 | } 35 | 36 | @media screen and (max-width: 991px) { 37 | .st-btn.st-style1 { 38 | font-size: 14px; 39 | padding: 0.72em 1.8em; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/Skill/Skill.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | 3 | .st-skill-title { 4 | font-size: 36px; 5 | font-weight: 400; 6 | margin-bottom: 25px; 7 | } 8 | 9 | .st-progressbar-wrap { 10 | overflow: hidden; 11 | } 12 | 13 | .st-progressbar-heading { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | flex-wrap: wrap; 18 | margin-bottom: 2px; 19 | font-family: 'Roboto', sans-serif; 20 | } 21 | 22 | .st-single-progressbar { 23 | margin-top: -5px; 24 | } 25 | 26 | .st-progressbar-title { 27 | font-size: 16px; 28 | margin-bottom: 0; 29 | } 30 | 31 | .st-progressbar-percentage { 32 | color: $base-color1; 33 | font-weight: 400; 34 | } 35 | 36 | .st-progressbar { 37 | width: 100%; 38 | height: 2px; 39 | background-color: $dark-color5; 40 | } 41 | 42 | .st-progressbar-in { 43 | background-color: $base-color1; 44 | height: 2px; 45 | } 46 | 47 | @media screen and (max-width: 991px) { 48 | .st-skill-title { 49 | font-size: 28px; 50 | } 51 | } 52 | 53 | -------------------------------------------------------------------------------- /src/components/Modal/Modal.jsx: -------------------------------------------------------------------------------- 1 | import './Modal.scss'; 2 | 3 | const Modal = ({ img, title, subTitle, modalClose }) => { 4 | const modalStyle = { 5 | backgroundColor: 'rgba(0,0,0,0.8)', 6 | display: 'block', 7 | }; 8 | return ( 9 |
10 |
11 |
12 |
13 |

{title}

14 | 19 |
20 |
21 |
22 | 23 |
24 |

{subTitle}

25 |
26 |
27 |
28 |
29 | ); 30 | }; 31 | 32 | export default Modal; 33 | -------------------------------------------------------------------------------- /src/components/SocialLinks/SocialLinks.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | import { Icon } from '@iconify/react' 3 | import { useState } from 'react' 4 | import { Link } from 'react-router-dom' 5 | 6 | const SocialLinks = ({ data }) => { 7 | const [activeLink, setActiveLink] = useState(0); 8 | const handleIconHover = (index) => { 9 | setActiveLink(index); 10 | }; 11 | 12 | return ( 13 |
14 | {data.map((item, index) => ( 15 | handleIconHover(index)} 19 | key={index} 20 | > 21 | 22 | {item.title} 23 | 24 | ))} 25 |
26 | ) 27 | } 28 | 29 | SocialLinks.propTypes = { 30 | data: PropTypes.array, 31 | } 32 | 33 | export default SocialLinks; 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "davis-react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "aos": "^2.3.4", 14 | "bootstrap": "^5.3.0", 15 | "gsap": "^3.12.2", 16 | "html-react-parser": "^4.2.0", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "react-router-dom": "^6.14.2", 20 | "react-scroll": "^1.8.9", 21 | "react-slick": "^0.29.0", 22 | "sass": "^1.63.6", 23 | "slick-carousel": "^1.8.1" 24 | }, 25 | "devDependencies": { 26 | "@iconify/react": "^4.1.1", 27 | "@types/react": "^18.2.14", 28 | "@types/react-dom": "^18.2.6", 29 | "@vitejs/plugin-react": "^4.0.1", 30 | "eslint": "^8.44.0", 31 | "eslint-plugin-react": "^7.32.2", 32 | "eslint-plugin-react-hooks": "^4.6.0", 33 | "eslint-plugin-react-refresh": "^0.4.1", 34 | "vite": "^4.4.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/Blog/SingleBlog.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'react-router-dom'; 2 | import './Blog.scss'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const SingleBlog = ({ element }) => { 6 | const { imgLink, title, date, designation, href } = element; 7 | return ( 8 |
9 | 10 | blog1 11 | 12 |
13 |
14 | By: 15 | 16 | {designation} 17 | 18 | | 19 | {date} 20 |
21 |

22 | {title} 23 |

24 |
25 |
26 | ); 27 | }; 28 | 29 | SingleBlog.propTypes = { 30 | element: PropTypes.object, 31 | }; 32 | 33 | export default SingleBlog; 34 | -------------------------------------------------------------------------------- /src/components/About/About.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | 3 | .st-about-img { 4 | min-height: 550px; 5 | } 6 | 7 | .st-about-img-wrap { 8 | padding-right: 30px; 9 | } 10 | 11 | .st-text-block.st-style1 { 12 | .st-text-block-title { 13 | font-size: 36px; 14 | font-weight: 400; 15 | margin-bottom: 18px; 16 | } 17 | 18 | .st-text-block-subtitle { 19 | font-size: 24px; 20 | font-weight: 300; 21 | color: $base-color1; 22 | margin-bottom: 18px; 23 | } 24 | 25 | .st-text-block-text { 26 | p { 27 | margin-bottom: 18px; 28 | } 29 | } 30 | 31 | .st-text-block-btn { 32 | margin-top: 43px; 33 | } 34 | } 35 | 36 | .st-text-block-details li { 37 | margin-bottom: 14px; 38 | 39 | :last-child { 40 | margin-bottom: 0; 41 | } 42 | 43 | span:first-child { 44 | display: inline-block; 45 | width: 108px; 46 | margin-right: -5px; 47 | } 48 | 49 | span:last-child { 50 | margin-left: 7px; 51 | } 52 | } 53 | 54 | @media screen and (max-width: 991px) { 55 | .st-about-img-wrap { 56 | padding-right: 0px; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/Protfolio/SinglePortfolio.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Icon } from '@iconify/react'; 3 | 4 | const SinglePortfolio = ({ data, getData }) => { 5 | const { imgLink, imgLinkLg, title, subTitle, effect, duration, delay } = data; 6 | 7 | return ( 8 |
9 |
getData(imgLinkLg, title, subTitle)}> 10 |
11 |
12 |
13 | portfolio 14 |
15 |
16 | 17 |
{title}
18 |

{subTitle}

19 |
20 |
21 |
22 |
23 |
24 | ) 25 | } 26 | 27 | SinglePortfolio.propTypes = { 28 | data: PropTypes.object 29 | } 30 | 31 | export default SinglePortfolio 32 | -------------------------------------------------------------------------------- /src/components/CustomCursor/CustomCursor.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import gsap from 'gsap'; 3 | import "./CustomCursor.scss" 4 | 5 | const CustomCursor = () => { 6 | useEffect(() => { 7 | const handleMouseMove = (event) => { 8 | cursorMovingAnimation(event); 9 | }; 10 | 11 | const cursorMovingAnimation = (event) => { 12 | try { 13 | const timing = gsap.timeline({ 14 | defaults: { 15 | x: event.clientX, 16 | y: event.clientY, 17 | }, 18 | }); 19 | 20 | timing.to( 21 | '.cs_cursor_sm', 22 | { 23 | x: event.clientX, 24 | y: event.clientY, 25 | ease: 'power2.out', 26 | }, 27 | '-=0.01', 28 | ); 29 | } catch (err) { 30 | console.log(err); 31 | } 32 | }; 33 | 34 | document.addEventListener('mousemove', handleMouseMove); 35 | 36 | return () => { 37 | document.removeEventListener('mousemove', handleMouseMove); 38 | }; 39 | }, []); 40 | 41 | return ( 42 | <> 43 | 44 | 45 | ); 46 | }; 47 | 48 | export default CustomCursor; 49 | -------------------------------------------------------------------------------- /src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import data from '../HomePageData.json'; 2 | import Hero from '../components/Hero/Hero'; 3 | import About from '../components/About/About'; 4 | import Iconbox from '../components/Iconbox/Iconbox'; 5 | import Skill from '../components/Skill/Skill'; 6 | import Resume from '../components/Resume/ResumeSection'; 7 | import BlogSection from '../components/Blog/BlogSection'; 8 | import ReviewSection from '../components/Review/ReviewSection'; 9 | import Contact from "../components/Contact/Contact"; 10 | import PortfolioSection from '../components/Protfolio/PortfolioSection'; 11 | 12 | const Home = () => { 13 | const { heroData, aboutData, serviceData, skillData, portfolioData, blogData, resumeData, reviewData, contactData, socialData } = data; 14 | return ( 15 | <> 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | 30 | export default Home; 31 | -------------------------------------------------------------------------------- /src/components/Iconbox/Iconbox.scss: -------------------------------------------------------------------------------- 1 | @import "../../sass/default/variable"; 2 | .st-iconbox.st-style1 { 3 | text-align: center; 4 | padding: 50px 30px; 5 | border-radius: 3px; 6 | transition: all 0.4s ease; 7 | border: 1px solid $base-color4; 8 | background-color: $dark-color4; 9 | img { 10 | width: 52px; 11 | filter: grayscale(1); 12 | opacity: 0.35; 13 | transition: inherit; 14 | } 15 | 16 | &:hover { 17 | .st-iconbox-icon { 18 | border: 0.5px solid $base-color1; 19 | img { 20 | filter: grayscale(0); 21 | opacity: 1; 22 | } 23 | } 24 | .st-iconbox-title { 25 | color: $base-color1; 26 | } 27 | } 28 | 29 | .st-iconbox-icon { 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | height: 90px; 34 | width: 90px; 35 | border: 0.5px solid $dark-color5; 36 | border-radius: 50%; 37 | background-color: $dark-color2; 38 | margin: auto; 39 | font-size: 50px; 40 | margin-bottom: 28px; 41 | transition: all 0.4s ease; 42 | 43 | svg { 44 | width: 52px; 45 | fill: $dark-color5; 46 | transition: all 0.4s ease; 47 | } 48 | } 49 | 50 | .st-iconbox-title { 51 | font-weight: 400; 52 | line-height: 1.2em; 53 | font-size: 20px; 54 | margin-bottom: 16px; 55 | transition: all 0.4s ease; 56 | } 57 | 58 | .st-iconbox-text { 59 | margin-bottom: -6px; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/Preloader/Preloader.scss: -------------------------------------------------------------------------------- 1 | @import "../../sass/default/variable"; 2 | 3 | .st-preloader { 4 | position: fixed; 5 | z-index: 99999; 6 | top: 0; 7 | width: 100%; 8 | height: 100vh; 9 | background-color: $base-color4; 10 | .st-preloader-in { 11 | width: 120px; 12 | height: 120px; 13 | position: relative; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | padding: 28px; 18 | border: 5px solid rgba($base-color2, 0.3); 19 | border-radius: 50%; 20 | &::after { 21 | content: ""; 22 | border-width: 5px; 23 | border-style: solid; 24 | border-color: transparent; 25 | border-top-color: $base-color1; 26 | border-radius: 50%; 27 | position: absolute; 28 | width: calc(100% + 10px); 29 | height: calc(100% + 10px); 30 | left: 50%; 31 | top: 50%; 32 | animation: spin 1s ease-in-out infinite; 33 | margin-left: -60px; 34 | margin-top: -60px; 35 | @keyframes spin { 36 | 0% { 37 | transform: rotate(0deg); 38 | } 39 | 100% { 40 | transform: rotate(360deg); 41 | } 42 | } 43 | } 44 | &::before { 45 | content: ""; 46 | height: 8px; 47 | width: 8px; 48 | border-radius: 50%; 49 | position: absolute; 50 | left: 50%; 51 | top: 50%; 52 | transform: translate(-50%, -50%); 53 | background-color: $base-color1; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/Iconbox/Iconbox.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | import SectionHeading from '../SectionHeading/SectionHeading' 3 | import './Iconbox.scss'; 4 | 5 | const Iconbox = ({ data }) => { 6 | const { services } = data; 7 | return ( 8 |
9 |
10 | 11 |
12 |
13 | { 14 | services.map((element, index) => ( 15 |
16 |
17 |
18 | Icon 19 |
20 |

{element.title}

21 |
{element.text}
22 |
23 |
24 |
25 | )) 26 | } 27 |
28 |
29 |
30 |
31 | ) 32 | } 33 | 34 | Iconbox.propTypes = { 35 | data: PropTypes.object 36 | } 37 | 38 | export default Iconbox; 39 | -------------------------------------------------------------------------------- /src/components/SectionHeading/SectionHeading.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | 3 | .st-section-heading.st-style1 { 4 | text-align: center; 5 | position: relative; 6 | margin-top: -5px; 7 | margin-bottom: 41px; 8 | 9 | .st-section-heading-title { 10 | font-size: 24px; 11 | font-weight: 500; 12 | text-transform: uppercase; 13 | color: $base-color1; 14 | position: relative; 15 | z-index: 10; 16 | letter-spacing: 1px; 17 | 18 | &::before { 19 | content: ""; 20 | position: absolute; 21 | background-color: $dark-color5; 22 | width: 170px; 23 | height: 2px; 24 | bottom: -16px; 25 | left: 50%; 26 | transform: translateX(-50%); 27 | } 28 | 29 | &::after { 30 | content: ""; 31 | position: absolute; 32 | background-color: $base-color1; 33 | width: 70px; 34 | height: 2px; 35 | bottom: -16px; 36 | left: 50%; 37 | transform: translateX(-50%); 38 | } 39 | } 40 | 41 | .st-section-heading-subtitle { 42 | text-transform: uppercase; 43 | position: absolute; 44 | top: 0; 45 | left: 50%; 46 | transform: translateX(-50%); 47 | font-size: 90px; 48 | font-weight: 700; 49 | color: rgba($dark-color1, 0.5); 50 | margin: 0; 51 | margin-top: -17px; 52 | width: 100%; 53 | } 54 | } 55 | 56 | @media screen and (max-width: 991px) { 57 | .st-section-heading.st-style1 .st-section-heading-subtitle { 58 | display: none; 59 | } 60 | } 61 | 62 | -------------------------------------------------------------------------------- /src/components/Slider/Carousel.jsx: -------------------------------------------------------------------------------- 1 | import Slider from "react-slick"; 2 | import PropTypes from 'prop-types'; 3 | import './Carousel.scss'; 4 | import "slick-carousel/slick/slick.css"; 5 | import "slick-carousel/slick/slick-theme.css"; 6 | import SingleBlog from "../Blog/SingleBlog"; 7 | import SingleReview from "../Review/SingleReview"; 8 | 9 | const Carousel = ({ data }) => { 10 | const { useFor, informations, sliderSetting, sliderImages } = data; 11 | 12 | if (useFor === "blog") { 13 | return ( 14 | 15 | { 16 | informations.map((element, index) => ( 17 | 18 | )) 19 | } 20 | 21 | ) 22 | } else if (useFor === "review") { 23 | return ( 24 | 25 | { 26 | informations.map((element, index) => ( 27 | 28 | )) 29 | } 30 | 31 | ) 32 | } else if (useFor === "image-slider") { 33 | return ( 34 | 35 | { 36 | sliderImages.map((item, index) => ( 37 | 38 | )) 39 | } 40 | 41 | ) 42 | } else { 43 | 44 | 45 | 46 | } 47 | } 48 | 49 | Carousel.propTypes = { 50 | variant: PropTypes.string, 51 | data: PropTypes.object, 52 | settings: PropTypes.object, 53 | } 54 | 55 | export default Carousel 56 | -------------------------------------------------------------------------------- /davis-documentation/assets/css/custom.css: -------------------------------------------------------------------------------- 1 | .glyphicons-list { 2 | list-style:none; 3 | padding:0; 4 | } 5 | 6 | .glyphicons-list li { 7 | display:inline-block; 8 | float:left; 9 | width:12.5%; 10 | height:115px; 11 | background-color:#f8f8f8; 12 | border:1px solid #fff; 13 | transition:.3s ease; 14 | padding:10px; 15 | } 16 | 17 | .glyphicons-list li:hover { 18 | background-color:#eee; 19 | } 20 | 21 | .glyphicons-list .glyphicon { 22 | display:block; 23 | text-align:center; 24 | font-size:25px; 25 | color:#222; 26 | } 27 | 28 | .glyphicons-list .glyphicon-class { 29 | display:block; 30 | text-align:center; 31 | margin-top:10px; 32 | line-height:16px; 33 | font-size:13px; 34 | } 35 | 36 | .fa-page-header { 37 | font-size:20px; 38 | padding-bottom:15px; 39 | border-bottom:1px solid #f1f1f1; 40 | } 41 | 42 | .fontawesome-icon-list .fa-hover { 43 | margin-bottom:5px; 44 | transition:.3s ease; 45 | } 46 | 47 | .fontawesome-icon-list .fa-hover:hover { 48 | background-color:#f8f8f8; 49 | } 50 | 51 | .fontawesome-icon-list .fa-hover .fa { 52 | width:25px; 53 | color:#222; 54 | } 55 | 56 | .prism-languages { 57 | list-style:none; 58 | margin:20px 0; 59 | padding:0; 60 | } 61 | 62 | .prism-languages li { 63 | width:33.3333%; 64 | float:left; 65 | } 66 | 67 | .prism-languages li code { 68 | margin-left:8px; 69 | } 70 | 71 | .window-content .btn { 72 | margin-bottom:6px; 73 | } 74 | 75 | @media max-width767px{ 76 | .glyphicons-list li { 77 | width:25%; 78 | } 79 | } 80 | 81 | @media max-width991px{ 82 | .prism-languages li { 83 | width:50%; 84 | } 85 | } -------------------------------------------------------------------------------- /public/images/icon/icon1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | -------------------------------------------------------------------------------- /src/components/Resume/Resume.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | 3 | .st-resume-heading { 4 | display: flex; 5 | align-items: center; 6 | } 7 | 8 | .st-resume-heading .st-resume-heading-title { 9 | margin: 0; 10 | margin-left: 30px; 11 | font-size: 36px; 12 | font-weight: 400; 13 | } 14 | 15 | .st-resume-timeline { 16 | position: relative; 17 | padding-top: 1px; 18 | margin-bottom: 50px; 19 | display: inline-block; 20 | &:last-child{ 21 | margin-bottom: 0; 22 | } 23 | 24 | &::before { 25 | position: absolute; 26 | content: ""; 27 | border: 2px solid $base-color4; 28 | border-radius: 50%; 29 | background-color: $dark-color4; 30 | width: 13px; 31 | height: 13px; 32 | top: 0px; 33 | left: -47px; 34 | transition: all 0.4s ease; 35 | } 36 | 37 | &:hover { 38 | &::before { 39 | background-color: $base-color1; 40 | } 41 | } 42 | 43 | .st-resume-timeline-title { 44 | font-size: 24px; 45 | font-weight: 400; 46 | color: $base-color1; 47 | margin-top: -7px; 48 | margin-bottom: 8px; 49 | } 50 | 51 | .st-resume-timeline-duration { 52 | font-size: 18px; 53 | margin-bottom: 21px; 54 | } 55 | 56 | .st-resume-timeline-subtitle { 57 | font-size: 20px; 58 | font-weight: 400; 59 | margin-bottom: 19px; 60 | } 61 | 62 | .st-resume-timeline-text p { 63 | margin: 0; 64 | margin-bottom: -7px; 65 | } 66 | } 67 | 68 | .st-resume-timeline-wrap { 69 | padding-left: 40px; 70 | margin-left: 20px; 71 | border-left: 1px solid $base-color4; 72 | } 73 | 74 | @media only screen and (max-width:991px) { 75 | .st-resume-timeline { 76 | margin-bottom: 30px; 77 | } 78 | } -------------------------------------------------------------------------------- /src/components/Review/Review.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | .st-testimonial.st-style1 { 3 | &:hover { 4 | .st-testimonial-name { 5 | color: $base-color1; 6 | } 7 | .st-testimonial-text { 8 | border-color: $base-color1; 9 | &::after { 10 | border-color: $base-color1; 11 | } 12 | } 13 | } 14 | 15 | .st-testimonial-text { 16 | position: relative; 17 | border-radius: 3px; 18 | transition: all 0.4s ease; 19 | background-color: $dark-color4; 20 | padding: 30px 15px; 21 | border: 1px solid $base-color4; 22 | margin-bottom: 40px; 23 | 24 | &::after { 25 | content: ""; 26 | position: absolute; 27 | width: 30px; 28 | height: 30px; 29 | left: 50%; 30 | bottom: -16px; 31 | border: 1px solid $base-color4; 32 | border-width: 0 1px 1px 0; 33 | background: $dark-color4; 34 | transform: translateX(-50%) rotate(45deg); 35 | transition: all 0.4s ease; 36 | } 37 | 38 | p { 39 | text-align: center; 40 | margin-top: -6px; 41 | margin-bottom: -6px; 42 | position: relative; 43 | z-index: 1; 44 | } 45 | 46 | .st-quote { 47 | position: absolute; 48 | top: 1px; 49 | left: 1px; 50 | } 51 | } 52 | 53 | .st-testimonial-info { 54 | align-items: center; 55 | text-align: center; 56 | margin-bottom: -4px; 57 | } 58 | 59 | .st-testimonial-img { 60 | flex: none; 61 | height: 90px; 62 | width: 90px; 63 | border-radius: 50%; 64 | margin: auto; 65 | margin-bottom: 20px; 66 | 67 | img { 68 | height: 100%; 69 | width: 100%; 70 | object-fit: cover; 71 | } 72 | } 73 | 74 | .st-testimonial-name { 75 | font-size: 20px; 76 | font-weight: 400; 77 | margin-bottom: 4px; 78 | transition: all 0.4s ease; 79 | } 80 | 81 | .st-testimonial-designation { 82 | line-height: 1.3em; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/sass/default/_general.scss: -------------------------------------------------------------------------------- 1 | @import './variable.scss'; 2 | .container { 3 | max-width: 1140px; 4 | } 5 | .st-mp0 { 6 | list-style: none; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | .st-flex-center { 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .st-zoom { 18 | position: relative; 19 | overflow: hidden; 20 | 21 | .st-zoom-in { 22 | transition: all 0.4s ease-in-out; 23 | } 24 | 25 | &:hover { 26 | .st-zoom-in { 27 | transform: scale(1.07); 28 | } 29 | } 30 | } 31 | 32 | .st-vertical-middle { 33 | display: flex; 34 | align-items: center; 35 | height: 100%; 36 | 37 | .st-vertical-middle-in { 38 | width: 100%; 39 | } 40 | } 41 | 42 | .st-bg { 43 | background-repeat: no-repeat; 44 | background-position: center center; 45 | background-size: cover; 46 | } 47 | 48 | .st-content { 49 | position: relative; 50 | z-index: 10; 51 | overflow-x: hidden; 52 | } 53 | 54 | .st-sticky-footer { 55 | width: 100%; 56 | position: fixed; 57 | bottom: 0; 58 | left: 0; 59 | overflow: hidden; 60 | } 61 | 62 | .st-dark-bg { 63 | background-color: $dark-color2; 64 | } 65 | 66 | .st-gray-bg { 67 | background-color: #b8b8b8; 68 | } 69 | 70 | .st-gray-overlay { 71 | position: relative; 72 | 73 | &:before { 74 | content: ''; 75 | position: absolute; 76 | left: 0; 77 | top: 0; 78 | height: 100%; 79 | width: 100%; 80 | background-color: rgba(#b8b8b8, 0.86); 81 | } 82 | 83 | .container { 84 | position: relative; 85 | z-index: 1; 86 | } 87 | } 88 | 89 | hr { 90 | margin: 0; 91 | width: 100%; 92 | border-color: #000000; 93 | } 94 | 95 | .st-fixed-bg { 96 | background-attachment: fixed; 97 | } 98 | 99 | @media screen and (max-width: 991px) { 100 | .st-content { 101 | margin: 0 !important; 102 | } 103 | 104 | .st-vertical-middle { 105 | display: block; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/components/Protfolio/Portfolio.scss: -------------------------------------------------------------------------------- 1 | @import "../../sass/default/variable"; 2 | .st-portfolio { 3 | display: block; 4 | position: relative; 5 | margin-bottom: 30px; 6 | &:hover { 7 | cursor: pointer; 8 | } 9 | 10 | &::before { 11 | content: ""; 12 | position: absolute; 13 | width: 100%; 14 | height: 100%; 15 | top: 0; 16 | left: 0; 17 | background-color: $dark-color5; 18 | opacity: 0; 19 | transition: all 0.4s ease; 20 | z-index: 1; 21 | } 22 | 23 | &::after { 24 | content: ""; 25 | position: absolute; 26 | border: 1px solid $base-color3; 27 | width: 90%; 28 | height: 90%; 29 | top: 50%; 30 | left: 50%; 31 | opacity: 0; 32 | transform: translate(-50%, -50%); 33 | z-index: 1; 34 | } 35 | 36 | &:hover { 37 | &::before { 38 | opacity: 0.85; 39 | } 40 | &::after { 41 | opacity: 0.85; 42 | } 43 | .st-portfolio-item-hover { 44 | opacity: 1; 45 | visibility: visible; 46 | } 47 | } 48 | 49 | .st-portfolio-img img { 50 | width: 100%; 51 | } 52 | } 53 | 54 | .st-portfolio-item-hover { 55 | position: absolute; 56 | top: 50%; 57 | left: 50%; 58 | transform: translate(-50%, -50%); 59 | transition: all 0.4s ease; 60 | z-index: 5; 61 | text-align: center; 62 | opacity: 0; 63 | visibility: hidden; 64 | 65 | svg { 66 | border: 0.5px solid $dark-color5; 67 | width: 50px; 68 | height: 50px; 69 | border-radius: 50%; 70 | display: flex; 71 | justify-content: center; 72 | align-items: center; 73 | background: $base-color1; 74 | color: $dark-color1; 75 | opacity: 0.8; 76 | } 77 | 78 | h5 { 79 | position: absolute; 80 | width: 250px; 81 | top: 87px; 82 | left: 50%; 83 | transform: translateX(-50%); 84 | margin: 0; 85 | font-size: 20px; 86 | color: #fdfeff; 87 | } 88 | 89 | p { 90 | position: absolute; 91 | width: 250px; 92 | top: 114px; 93 | left: 50%; 94 | transform: translateX(-50%); 95 | margin: 0; 96 | } 97 | } 98 | 99 | .st-portfolio-btn { 100 | margin-top: 20px; 101 | } 102 | -------------------------------------------------------------------------------- /src/components/About/About.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import './About.scss'; 3 | import SectionHeading from '../SectionHeading/SectionHeading'; 4 | 5 | const About = ({ data }) => { 6 | const { imgLink, title, subtitle, text, details, cvPdf } = data; 7 | return ( 8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |

{title}

24 |

{subtitle}

25 |
26 |

{text}

27 |
28 |
    29 | {details.map((item, index) => ( 30 |
  • 31 | {item.title} : {item.info} 32 |
    • 33 | ))} 34 |
35 |
36 | Download CV 37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | ) 46 | } 47 | 48 | About.propTypes = { 49 | data: PropTypes.object 50 | } 51 | 52 | export default About; 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/components/Skill/Skill.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import './Skill.scss'; 3 | import SectionHeading from '../SectionHeading/SectionHeading'; 4 | 5 | const Skill = ({ data }) => { 6 | const { title, text, skills } = data; 7 | return ( 8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 |
20 |

{title}

21 |
{text}
22 |
23 |
24 |
25 |
26 |
27 |
28 | {skills.map((element, index) => ( 29 |
36 |
37 |

{element.title}

38 |
43 | {element.progress} 44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | ))} 52 |
53 |
54 |
55 |
56 |
57 | ); 58 | }; 59 | 60 | Skill.propTypes = { 61 | data: PropTypes.object, 62 | }; 63 | 64 | export default Skill; 65 | -------------------------------------------------------------------------------- /src/components/Hero/Hero.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import './Hero.scss'; 3 | import parser from 'html-react-parser'; 4 | import SocialLinks from '../SocialLinks/SocialLinks'; 5 | import { Link as ScrollLink } from 'react-scroll'; 6 | import { useEffect } from 'react'; 7 | 8 | const Hero = ({ data, socialData }) => { 9 | const { subTitle, designation, imgLink, title, bgImgLink } = data; 10 | 11 | useEffect(() => { 12 | const handleScroll = () => { 13 | const scrollValue = window.scrollY; 14 | const heroElements = document.querySelector('.st-hero-wrap .st-hero-img'); 15 | if (heroElements) { 16 | heroElements.style.right = `${scrollValue * -0.1}px`; 17 | } 18 | }; 19 | window.addEventListener('scroll', handleScroll); 20 | return () => { 21 | window.removeEventListener('scroll', handleScroll); 22 | }; 23 | }, []); 24 | 25 | return ( 26 |
27 |
28 |
32 |
33 |
34 |

35 | {subTitle} 36 |

37 |

38 | {parser(title)} 39 |

40 |

41 | {designation} 42 |

43 |
49 | 50 | Hire Me 51 | 52 |
53 |
54 |
55 |
56 |
57 | Hero 58 |
59 | 60 |
61 |
62 |
63 | ); 64 | }; 65 | 66 | Hero.propTypes = { 67 | data: PropTypes.object, 68 | socialData: PropTypes.array, 69 | }; 70 | 71 | export default Hero; 72 | -------------------------------------------------------------------------------- /src/components/Resume/ResumeSection.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import SectionHeading from '../SectionHeading/SectionHeading' 3 | import "./Resume.scss"; 4 | import SingleResume from './SingleResume'; 5 | 6 | const ResumeSection = ({ data }) => { 7 | const { educationTitle, education, experienceTitle, experience } = data; 8 | return ( 9 |
10 |
11 | 12 |
14 |
15 |
16 |
17 |
18 |
19 | resume-icon 20 |

{educationTitle}

21 |
22 |
23 | 24 |
25 | { 26 | education.map((education, index) => ( 27 | 28 | )) 29 | } 30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | resume-icon 39 |

{experienceTitle}

40 |
41 |
42 | 43 |
44 | { 45 | experience.map((experience, index) => ( 46 | 47 | )) 48 | } 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | ) 57 | } 58 | 59 | ResumeSection.propTypes = { 60 | data: PropTypes.object 61 | } 62 | 63 | export default ResumeSection; 64 | -------------------------------------------------------------------------------- /src/components/Protfolio/PortfolioSection.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import './Portfolio.scss'; 3 | import SectionHeading from '../SectionHeading/SectionHeading'; 4 | import { useState } from 'react'; 5 | import SinglePortfolio from './SinglePortfolio'; 6 | import Modal from '../Modal/Modal'; 7 | 8 | const PortfolioSection = ({ data }) => { 9 | // Modal 10 | const [modal, setModal] = useState(false); 11 | const [tempData, setTempData] = useState([]); 12 | 13 | const getData = (imgLink, title, subTitle) => { 14 | let tempData = [imgLink, title, subTitle]; 15 | setTempData(item => [1, ...tempData]); 16 | setModal(true); 17 | } 18 | 19 | const modalClose = () => { 20 | setModal(false); 21 | } 22 | 23 | 24 | // Load Items 25 | const { portfolioItems } = data; 26 | const itemsPerPage = 6; 27 | const [visibleItems, setVisibleItems] = useState( 28 | portfolioItems.slice(0, itemsPerPage), 29 | ); 30 | 31 | const [showLoadMore, setShowLoadMore] = useState(true); 32 | 33 | const loadMoreItems = () => { 34 | const currentLength = visibleItems.length; 35 | const nextChunk = portfolioItems.slice( 36 | currentLength, 37 | currentLength + itemsPerPage, 38 | ); 39 | setVisibleItems(prevItems => [...prevItems, ...nextChunk]); 40 | 41 | if (currentLength + itemsPerPage >= portfolioItems.length) { 42 | setShowLoadMore(false); 43 | } 44 | }; 45 | 46 | return ( 47 | <> 48 |
49 |
50 | 51 |
52 |
53 | {visibleItems.map((element, index) => ( 54 | 55 | ))} 56 |
57 |
58 | {showLoadMore && ( 59 | 65 | )} 66 |
67 |
68 |
69 |
70 |
71 |
72 | {modal === true ? : ""} 73 | 74 | ); 75 | }; 76 | 77 | PortfolioSection.propTypes = { 78 | data: PropTypes.object, 79 | }; 80 | 81 | export default PortfolioSection; 82 | 83 | 84 | -------------------------------------------------------------------------------- /src/components/Hero/Hero.scss: -------------------------------------------------------------------------------- 1 | @import "../../sass/default/variable"; 2 | 3 | .st-hero-wrap { 4 | position: relative; 5 | height: 850px; 6 | background-color: #070d1b; 7 | 8 | img { 9 | height: 100%; 10 | width: 100%; 11 | object-fit: cover; 12 | } 13 | 14 | .st-hero-img { 15 | position: absolute; 16 | right: 4%; 17 | top: 0; 18 | height: 100%; 19 | width: 45%; 20 | z-index: 11; 21 | } 22 | } 23 | 24 | .st-hero.st-style1 { 25 | height: inherit; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | flex-wrap: wrap; 30 | overflow: hidden; 31 | z-index: 11; 32 | position: absolute; 33 | width: 100%; 34 | height: 100%; 35 | top: 0; 36 | 37 | .st-hero-text { 38 | h1 { 39 | font-size: 120px; 40 | margin-bottom: 24px; 41 | font-weight: 900; 42 | color: $base-color3; 43 | line-height: 1; 44 | } 45 | 46 | h2 { 47 | font-size: 36px; 48 | margin-bottom: 41px; 49 | font-weight: 300; 50 | color: $base-color2; 51 | } 52 | 53 | h3 { 54 | font-size: 30px; 55 | margin-top: -6px; 56 | margin-bottom: 10px; 57 | font-weight: 300; 58 | color: $base-color1; 59 | } 60 | } 61 | } 62 | 63 | .st-social-group { 64 | background-color: $dark-color4; 65 | border: 1px solid $base-color4; 66 | border-right: 0; 67 | border-radius: 50px 0 0 50px; 68 | height: 80px; 69 | width: 448px; 70 | display: flex; 71 | align-items: center; 72 | position: absolute; 73 | bottom: 30px; 74 | padding-left: 12px; 75 | right: 100%; 76 | } 77 | 78 | // #particles-js { 79 | // position: absolute; 80 | // width: 100%; 81 | // height: 100%; 82 | // opacity: 0.7; 83 | // top: 0; 84 | // left: 0; 85 | // } 86 | 87 | .st-hero-social-links { 88 | display: flex; 89 | justify-content: center; 90 | 91 | .st-social-btn { 92 | height: 44px; 93 | width: 44px; 94 | border-radius: 50%; 95 | border: 2px solid rgba(255, 255, 255, 0.1); 96 | display: flex; 97 | align-items: center; 98 | justify-content: center; 99 | font-size: 16px; 100 | margin: 0 10px; 101 | 102 | &:hover { 103 | border-color: rgba(255, 255, 255, 0.6); 104 | color: rgba(255, 255, 255, 0.9); 105 | } 106 | } 107 | } 108 | 109 | .st-to-right { 110 | transition: all 0.3s ease; 111 | } 112 | 113 | @media screen and (max-width: 991px) { 114 | .st-hero-wrap { 115 | height: 700px; 116 | 117 | .st-hero-img { 118 | display: none; 119 | } 120 | } 121 | } 122 | 123 | @media screen and (max-width: 575px) { 124 | .st-hero.st-style1 { 125 | .st-hero-text h1 { 126 | font-size: 70px; 127 | } 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /src/sass/default/_typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | Theme Name: Davis 3 | Author: Laralink 4 | Version: 1.0.0 5 | */ 6 | 7 | /*Google Fonts*/ 8 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); 9 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); 10 | 11 | /*-------------------------------------------------------------- 12 | >> TABLE OF CONTENTS: 13 | ---------------------------------------------------------------- 14 | 1. Typography 15 | 2. Spacing 16 | 3. General 17 | 4. Preloader 18 | 5. Header 19 | 6. Button 20 | 7. Slider 21 | 8. Section Heading 22 | 9. Icon box 23 | 10. Text Block 24 | 11. Text Block 25 | 12. Video Block 26 | 13. Image Box 27 | 14. Funfact 28 | 15. Isotope 29 | 16. Image Gallery 30 | 17. Skill 31 | 18. Post 32 | 19. Testimonial 33 | 20. Contact Form 34 | 21. Blog Details 35 | 22. Comments 36 | 23. Footer 37 | 38 | --------------------------------------------------------------*/ 39 | 40 | 41 | body, 42 | html { 43 | color: $base-color2; 44 | background-color: $dark-color3; 45 | font-family: "Inter", sans-serif; 46 | font-size: 16px; 47 | font-weight: 400; 48 | line-height: 1.6em; 49 | overflow-x: hidden; 50 | } 51 | 52 | h1, 53 | h2, 54 | h3, 55 | h4, 56 | h3, 57 | h6 { 58 | clear: both; 59 | color: $base-color3; 60 | padding: 0; 61 | margin: 0 0 10px 0; 62 | font-weight: 700; 63 | line-height: 1.2em; 64 | } 65 | 66 | h1 { 67 | font-size: 40px; 68 | } 69 | 70 | h2 { 71 | font-size: 34px; 72 | } 73 | 74 | h3 { 75 | font-size: 26px; 76 | } 77 | 78 | h4 { 79 | font-size: 22px; 80 | } 81 | 82 | h5 { 83 | font-size: 18px; 84 | } 85 | 86 | h6 { 87 | font-size: 15px; 88 | } 89 | 90 | p { 91 | margin-bottom: 12px; 92 | } 93 | 94 | ul { 95 | margin: 0 0 15px 0; 96 | padding-left: 15px; 97 | list-style: square outside none; 98 | } 99 | 100 | ol { 101 | padding-left: 15px; 102 | margin-bottom: 15px; 103 | } 104 | 105 | dfn, 106 | cite, 107 | em, 108 | i { 109 | font-style: italic; 110 | } 111 | 112 | blockquote { 113 | margin: 0 15px; 114 | } 115 | 116 | address { 117 | margin: 0 0 15px; 118 | } 119 | 120 | img { 121 | border: 0; 122 | max-width: 100%; 123 | height: auto; 124 | } 125 | 126 | a { 127 | color: inherit; 128 | text-decoration: none; 129 | -webkit-transition: all 0.3s ease; 130 | -o-transition: all 0.3s ease; 131 | transition: all 0.3s ease; 132 | } 133 | 134 | a:hover { 135 | text-decoration: none; 136 | color: inherit; 137 | } 138 | @media screen and (max-width: 991px) { 139 | body, 140 | html { 141 | font-size: 14px; 142 | } 143 | h1 { 144 | font-size: 30px; 145 | } 146 | 147 | h2 { 148 | font-size: 26px; 149 | } 150 | 151 | h3 { 152 | font-size: 22px; 153 | } 154 | 155 | h4 { 156 | font-size: 18px; 157 | } 158 | 159 | h5 { 160 | font-size: 16px; 161 | } 162 | 163 | h6 { 164 | font-size: 14px; 165 | } 166 | } 167 | -------------------------------------------------------------------------------- /src/components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'react-router-dom'; 2 | import './Header.scss'; 3 | import PropTypes from 'prop-types'; 4 | import { Link as ScrollLink } from 'react-scroll'; 5 | import { useState } from 'react'; 6 | 7 | const Header = () => { 8 | const [mobileToggle, setMobileToggle] = useState(false); 9 | 10 | const handleToggleMenu = () => { 11 | setMobileToggle(!mobileToggle); 12 | } 13 | 14 | return ( 15 |
16 |
17 |
18 |
19 |
20 | Davis 21 |
22 |
23 |
24 |
    25 |
  • setMobileToggle(false)}>Home
    • 26 |
  • setMobileToggle(false)}>About
    • 27 |
  • setMobileToggle(false)}>Resume
    • 28 |
  • setMobileToggle(false)}>Portfolio
    • 29 |
  • setMobileToggle(false)}>Blog
    • 30 |
  • setMobileToggle(false)}>Contact
    • 31 |
32 |
33 | 34 |
35 |
36 | 37 | 38 | 39 |
+1 971 234 1508
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | ) 48 | } 49 | 50 | Header.propTypes = { 51 | data: PropTypes.object 52 | } 53 | 54 | export default Header; 55 | -------------------------------------------------------------------------------- /src/components/Contact/Contact.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | 3 | #st-alert { 4 | font-size: 15px; 5 | font-weight: 300; 6 | } 7 | 8 | .st-contact-title { 9 | font-size: 30px; 10 | font-weight: 400; 11 | margin-top: -6px; 12 | margin-bottom: 22px; 13 | } 14 | 15 | .st-form-field { 16 | width: 100%; 17 | margin-bottom: 30px; 18 | } 19 | 20 | .st-form-field input, 21 | .st-form-field textarea { 22 | display: block; 23 | width: 100%; 24 | color: $base-color2; 25 | padding: 12px 20px; 26 | border: 1px solid $base-color4; 27 | background-color: $dark-color4; 28 | height: 52px; 29 | border-radius: 7px; 30 | transition: all 0.4s ease; 31 | 32 | &::placeholder { 33 | color: $dark-color5; 34 | } 35 | 36 | &:focus { 37 | border-color: $base-color1; 38 | outline: 0; 39 | } 40 | } 41 | 42 | .st-form-field textarea { 43 | height: 150px; 44 | } 45 | 46 | // Contact Info Wrap 47 | 48 | .st-contact-text { 49 | margin-top: -6px; 50 | margin-bottom: 23px; 51 | } 52 | 53 | .st-single-contact-info { 54 | display: flex; 55 | align-items: flex-start; 56 | margin-bottom: 30px; 57 | 58 | &:hover { 59 | .st-icon-wrap { 60 | border-color: $base-color1; 61 | } 62 | } 63 | 64 | .st-icon-wrap { 65 | display: flex; 66 | justify-content: center; 67 | align-items: center; 68 | border: 0.5px solid $dark-color5; 69 | border-radius: 50%; 70 | background-color: $dark-color2; 71 | width: 50px; 72 | height: 50px; 73 | margin-right: 20px; 74 | transition: all 0.4s ease; 75 | svg{ 76 | scale: 1.1; 77 | } 78 | } 79 | } 80 | 81 | .st-single-info-details { 82 | h4 { 83 | font-size: 20px; 84 | font-weight: 400; 85 | margin-top: -4px; 86 | margin-bottom: 6px; 87 | } 88 | } 89 | 90 | .st-single-info-details { 91 | a { 92 | display: block; 93 | margin-bottom: -2px; 94 | 95 | &:hover { 96 | color: $base-color1; 97 | } 98 | 99 | &:last-child { 100 | margin-bottom: -6px; 101 | } 102 | } 103 | } 104 | 105 | .st-single-info-details { 106 | span { 107 | display: block; 108 | margin-bottom: -2px; 109 | } 110 | } 111 | 112 | .st-social-info { 113 | .st-social-text { 114 | margin-top: 0; 115 | margin-bottom: 25px; 116 | font-size: 20px; 117 | font-weight: 500; 118 | padding-top: 5px; 119 | } 120 | } 121 | 122 | .st-social-link { 123 | display: flex; 124 | } 125 | 126 | .st-social-link { 127 | .st-social-btn { 128 | border-radius: 50px; 129 | background-color: $dark-color2; 130 | border: 0.5px solid $dark-color5; 131 | transition: all 0.4s ease; 132 | overflow: hidden; 133 | display: flex; 134 | align-items: center; 135 | 136 | &:not(:last-child) { 137 | margin-right: 20px; 138 | } 139 | 140 | .st-social-icon { 141 | display: flex; 142 | justify-content: center; 143 | align-items: center; 144 | border-radius: 50px; 145 | width: 50px; 146 | height: 50px; 147 | text-align: center; 148 | transition: all 0.4s ease; 149 | 150 | svg { 151 | scale: 1.5; 152 | } 153 | } 154 | 155 | .st-icon-name { 156 | font-weight: 600; 157 | color: #fdfeff; 158 | overflow: hidden; 159 | max-width: 0; 160 | transition: all 0.5s ease; 161 | } 162 | 163 | &:hover, 164 | &.active { 165 | padding-right: 15px; 166 | 167 | .st-icon-name { 168 | max-width: 140px; 169 | } 170 | } 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /src/components/Blog/Comment.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | .comments-title, 3 | .comment-reply-title { 4 | font-size: 18px; 5 | font-weight: 500; 6 | letter-spacing: 0.25px; 7 | margin-bottom: 25px; 8 | } 9 | 10 | .comments-area { 11 | padding-top: 56px; 12 | border-top: 1px solid $base-color4; 13 | } 14 | 15 | .comment-body { 16 | position: relative; 17 | margin-left: 60px; 18 | margin-bottom: 25px; 19 | min-height: 50px; 20 | } 21 | 22 | .comments-area ol { 23 | list-style: none; 24 | padding-left: 0; 25 | } 26 | 27 | .comments-area .children .children { 28 | padding-left: 0px; 29 | } 30 | 31 | .comment-author .avatar { 32 | height: 50px; 33 | width: 50px; 34 | position: absolute; 35 | top: 0; 36 | left: -60px; 37 | border-radius: 6px; 38 | } 39 | 40 | .comment-author { 41 | margin-bottom: -6px; 42 | } 43 | 44 | .comment-author .nm, 45 | .comment-author .nm a { 46 | font-weight: 500; 47 | color: $base-color1; 48 | font-size: 14px; 49 | display: block; 50 | } 51 | 52 | .comment-author .nm { 53 | padding-top: 4px; 54 | } 55 | 56 | .comment-author .nm a:hover, 57 | .comment-author .nm:hover, 58 | .comment-metadata a:hover { 59 | color: #fec544; 60 | } 61 | 62 | .comment-metadata a { 63 | color: $base-color3; 64 | font-weight: 400; 65 | font-size: 13px; 66 | } 67 | 68 | .comment-content { 69 | font-size: 14px; 70 | margin-bottom: 0px; 71 | margin-top: 0px; 72 | } 73 | 74 | .comment-content p { 75 | margin: 0; 76 | color: inherit; 77 | font-size: inherit; 78 | } 79 | 80 | .comment-reply-link { 81 | font-size: 14px; 82 | color: #fec544; 83 | position: relative; 84 | } 85 | 86 | .comment-reply-link:hover, 87 | .comment-reply-link:focus { 88 | color: #fff; 89 | } 90 | 91 | .children .comment-body { 92 | margin-left: 60px; 93 | } 94 | 95 | .children .comment-author .avatar { 96 | left: -60px; 97 | } 98 | 99 | .comment-respond { 100 | display: block; 101 | width: 100%; 102 | margin-top: 56px; 103 | padding-bottom: 0px; 104 | margin-bottom: 0px; 105 | border-top: 1px solid $base-color4; 106 | padding-top: 57px; 107 | } 108 | 109 | .comment-form { 110 | display: flex; 111 | flex-wrap: wrap; 112 | } 113 | 114 | .comment-form-author, 115 | .comment-form-email { 116 | width: 50%; 117 | } 118 | 119 | .comment-form-email { 120 | padding-left: 10px; 121 | } 122 | 123 | .comment-form-comment { 124 | width: 100%; 125 | } 126 | 127 | .comment-form-author { 128 | padding-right: 10px; 129 | } 130 | 131 | .comment-form-url { 132 | padding-left: 0px; 133 | width: 100%; 134 | } 135 | 136 | .form-submit { 137 | margin-bottom: 0; 138 | } 139 | 140 | .comment-form p { 141 | margin: 0; 142 | } 143 | 144 | .comment-form { 145 | textarea, 146 | input { 147 | border: 1px solid $base-color4; 148 | padding: 8px 15px; 149 | width: 100%; 150 | background-color: transparent; 151 | display: block; 152 | margin-bottom: 20px; 153 | transition: all 0.3s ease; 154 | border-radius: 7px; 155 | color: #fff; 156 | 157 | &:focus { 158 | outline: none; 159 | border-color: #fec544; 160 | } 161 | } 162 | } 163 | 164 | .post-navigation { 165 | display: flex; 166 | flex-wrap: wrap; 167 | justify-content: center; 168 | align-items: center; 169 | } 170 | 171 | .post-navigation > div { 172 | display: inline-block; 173 | } 174 | 175 | .nav-previous a:before { 176 | content: "\f100"; 177 | font-family: "FontAwesome"; 178 | margin-right: 4px; 179 | } 180 | 181 | .nav-next a:after { 182 | content: "\f101"; 183 | font-family: "FontAwesome"; 184 | margin-left: 4px; 185 | } 186 | 187 | .nav-all-post { 188 | min-width: 120px; 189 | text-align: center; 190 | margin: 0 25px; 191 | } 192 | -------------------------------------------------------------------------------- /src/components/Contact/Contact.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Link } from 'react-router-dom'; 3 | import './Contact.scss'; 4 | import SectionHeading from '../SectionHeading/SectionHeading'; 5 | import { Icon } from '@iconify/react'; 6 | import SocialLinks from '../SocialLinks/SocialLinks'; 7 | 8 | const Contact = ({ data, socialData }) => { 9 | const { title, text, subTitle } = data; 10 | return ( 11 |
12 |
13 | 14 |
15 |
16 |
17 |

Just say Hello

18 |
19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |
38 |

{title}

39 |
{text}
40 |
41 |
42 |
43 | 44 |
45 |
46 |

Email

47 | devis@example.com 48 | info@support.com 49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 |

Phone

57 | +1 876-369-9009 58 | +1 213-519-1786 59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 |

Address

67 | 2661 High Meadow Lane Bear Creek,
Olancha, KY 93544 68 |
69 |
70 |
71 |
{subTitle}
72 | 73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | ) 81 | } 82 | 83 | Contact.propTypes = { 84 | data: PropTypes.object, 85 | socialData: PropTypes.array, 86 | } 87 | 88 | export default Contact; 89 | -------------------------------------------------------------------------------- /src/sass/default/_spacing.scss: -------------------------------------------------------------------------------- 1 | 2 | @media screen and (min-width: 992px) { 3 | .st-height-b0 { 4 | height: 0px 5 | } 6 | 7 | .st-height-b5 { 8 | height: 5px 9 | } 10 | 11 | .st-height-b10 { 12 | height: 10px 13 | } 14 | 15 | .st-height-b15 { 16 | height: 15px 17 | } 18 | 19 | .st-height-b20 { 20 | height: 20px 21 | } 22 | 23 | .st-height-b25 { 24 | height: 25px 25 | } 26 | 27 | .st-height-b30 { 28 | height: 30px 29 | } 30 | 31 | .st-height-b35 { 32 | height: 35px 33 | } 34 | 35 | .st-height-b40 { 36 | height: 40px 37 | } 38 | 39 | .st-height-b45 { 40 | height: 45px 41 | } 42 | 43 | .st-height-b50 { 44 | height: 50px 45 | } 46 | 47 | .st-height-b55 { 48 | height: 55px 49 | } 50 | 51 | .st-height-b60 { 52 | height: 60px 53 | } 54 | 55 | .st-height-b65 { 56 | height: 65px 57 | } 58 | 59 | .st-height-b70 { 60 | height: 70px 61 | } 62 | 63 | .st-height-b75 { 64 | height: 75px 65 | } 66 | 67 | .st-height-b80 { 68 | height: 80px 69 | } 70 | 71 | .st-height-b85 { 72 | height: 85px 73 | } 74 | 75 | .st-height-b90 { 76 | height: 90px 77 | } 78 | 79 | .st-height-b95 { 80 | height: 95px 81 | } 82 | 83 | .st-height-b100 { 84 | height: 100px 85 | } 86 | 87 | .st-height-b105 { 88 | height: 105px 89 | } 90 | 91 | .st-height-b110 { 92 | height: 110px 93 | } 94 | 95 | .st-height-b115 { 96 | height: 115px 97 | } 98 | 99 | .st-height-b120 { 100 | height: 120px 101 | } 102 | 103 | .st-height-b125 { 104 | height: 125px 105 | } 106 | 107 | .st-height-b130 { 108 | height: 130px 109 | } 110 | 111 | .st-height-b135 { 112 | height: 135px 113 | } 114 | 115 | .st-height-b140 { 116 | height: 140px 117 | } 118 | 119 | .st-height-b145 { 120 | height: 145px 121 | } 122 | 123 | .st-height-b150 { 124 | height: 150px 125 | } 126 | 127 | .st-height-b155 { 128 | height: 155px 129 | } 130 | 131 | .st-height-b160 { 132 | height: 160px 133 | } 134 | 135 | .st-height-b165 { 136 | height: 165px 137 | } 138 | 139 | .st-height-b170 { 140 | height: 170px 141 | } 142 | 143 | .st-height-b175 { 144 | height: 175px 145 | } 146 | 147 | .st-height-b180 { 148 | height: 180px 149 | } 150 | 151 | .st-height-b185 { 152 | height: 185px 153 | } 154 | 155 | .st-height-b190 { 156 | height: 190px 157 | } 158 | 159 | .st-height-b195 { 160 | height: 195px 161 | } 162 | 163 | .st-height-b200 { 164 | height: 200px 165 | } 166 | 167 | .st-height-b205 { 168 | height: 205px 169 | } 170 | 171 | .st-height-b210 { 172 | height: 210px 173 | } 174 | } 175 | 176 | @media screen and (max-width: 991px) { 177 | .st-height-lg-b0 { 178 | height: 0px 179 | } 180 | 181 | .st-height-lg-b5 { 182 | height: 5px 183 | } 184 | 185 | .st-height-lg-b10 { 186 | height: 10px 187 | } 188 | 189 | .st-height-lg-b15 { 190 | height: 15px 191 | } 192 | 193 | .st-height-lg-b20 { 194 | height: 20px 195 | } 196 | 197 | .st-height-lg-b25 { 198 | height: 25px 199 | } 200 | 201 | .st-height-lg-b30 { 202 | height: 30px 203 | } 204 | 205 | .st-height-lg-b35 { 206 | height: 35px 207 | } 208 | 209 | .st-height-lg-b40 { 210 | height: 40px 211 | } 212 | 213 | .st-height-lg-b45 { 214 | height: 45px 215 | } 216 | 217 | .st-height-lg-b50 { 218 | height: 50px 219 | } 220 | 221 | .st-height-lg-b55 { 222 | height: 55px 223 | } 224 | 225 | .st-height-lg-b60 { 226 | height: 60px 227 | } 228 | 229 | .st-height-lg-b65 { 230 | height: 65px 231 | } 232 | 233 | .st-height-lg-b70 { 234 | height: 70px 235 | } 236 | 237 | .st-height-lg-b75 { 238 | height: 75px 239 | } 240 | 241 | .st-height-lg-b80 { 242 | height: 80px 243 | } 244 | 245 | .st-height-lg-b85 { 246 | height: 85px 247 | } 248 | 249 | .st-height-lg-b90 { 250 | height: 90px 251 | } 252 | 253 | .st-height-lg-b95 { 254 | height: 95px 255 | } 256 | 257 | .st-height-lg-b100 { 258 | height: 100px 259 | } 260 | 261 | .st-height-lg-b105 { 262 | height: 105px 263 | } 264 | 265 | .st-height-lg-b110 { 266 | height: 110px 267 | } 268 | 269 | .st-height-lg-b115 { 270 | height: 115px 271 | } 272 | 273 | .st-height-lg-b120 { 274 | height: 120px 275 | } 276 | 277 | .st-height-lg-b125 { 278 | height: 125px 279 | } 280 | 281 | .st-height-lg-b130 { 282 | height: 130px 283 | } 284 | 285 | .st-height-lg-b135 { 286 | height: 135px 287 | } 288 | 289 | .st-height-lg-b140 { 290 | height: 140px 291 | } 292 | 293 | .st-height-lg-b145 { 294 | height: 145px 295 | } 296 | 297 | .st-height-lg-b150 { 298 | height: 150px 299 | } 300 | 301 | .st-height-lg-b155 { 302 | height: 155px 303 | } 304 | 305 | .st-height-lg-b160 { 306 | height: 160px 307 | } 308 | 309 | .st-height-lg-b165 { 310 | height: 165px 311 | } 312 | 313 | .st-height-lg-b170 { 314 | height: 170px 315 | } 316 | 317 | .st-height-lg-b175 { 318 | height: 175px 319 | } 320 | 321 | .st-height-lg-b180 { 322 | height: 180px 323 | } 324 | 325 | .st-height-lg-b185 { 326 | height: 185px 327 | } 328 | 329 | .st-height-lg-b190 { 330 | height: 190px 331 | } 332 | 333 | .st-height-lg-b195 { 334 | height: 195px 335 | } 336 | 337 | .st-height-lg-b200 { 338 | height: 200px 339 | } 340 | 341 | .st-height-lg-b205 { 342 | height: 205px 343 | } 344 | 345 | .st-height-lg-b210 { 346 | height: 210px 347 | } 348 | } -------------------------------------------------------------------------------- /src/components/Blog/BlogDetails.scss: -------------------------------------------------------------------------------- 1 | @import '../../sass/default/variable'; 2 | 3 | .st-page-heading { 4 | height: 650px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | position: relative; 9 | padding-top: 120px; 10 | background-size: cover; 11 | background-attachment: fixed; 12 | 13 | &.st-size-md { 14 | height: 450px; 15 | } 16 | 17 | &:before { 18 | content: ""; 19 | position: absolute; 20 | height: 100%; 21 | width: 100%; 22 | left: 0; 23 | top: 0; 24 | background-color: rgba(0, 0, 0, 0.6); 25 | } 26 | 27 | > div { 28 | position: relative; 29 | z-index: 1; 30 | } 31 | } 32 | 33 | .st-page-heading-title { 34 | color: #fff; 35 | font-size: 48px; 36 | text-align: center; 37 | margin-bottom: 7px; 38 | } 39 | 40 | .st-breadcamp { 41 | list-style: none; 42 | display: flex; 43 | flex-wrap: wrap; 44 | justify-content: center; 45 | padding: 0; 46 | margin: 0; 47 | 48 | li { 49 | color: rgba(255, 255, 255, 0.7); 50 | list-style: none; 51 | 52 | &:not(:last-child):after { 53 | content: "/"; 54 | padding-right: 6px; 55 | margin-left: 6px; 56 | } 57 | } 58 | 59 | a { 60 | &:hover { 61 | color: #fff; 62 | } 63 | } 64 | } 65 | .st-page-heading.st-style1 { 66 | padding-top: 0; 67 | height: 320px; 68 | } 69 | .st-widget { 70 | border: 1px solid $base-color4; 71 | border-radius: 7px; 72 | padding: 30px; 73 | 74 | .st-widget-title { 75 | font-size: 16px; 76 | position: relative; 77 | padding-bottom: 0; 78 | margin-bottom: 17px; 79 | margin-top: -3px; 80 | overflow: hidden; 81 | 82 | span { 83 | position: relative; 84 | display: inline-block; 85 | padding-right: 15px; 86 | 87 | &:before { 88 | content: ""; 89 | background-color: $base-color4; 90 | position: absolute; 91 | left: 100%; 92 | bottom: 50%; 93 | height: 1px; 94 | width: 1000px; 95 | } 96 | } 97 | } 98 | } 99 | 100 | .st-widget-list { 101 | padding: 0; 102 | margin: 0; 103 | list-style: none; 104 | margin-top: -16px; 105 | margin-bottom: -16px; 106 | font-size: 14px; 107 | 108 | li:not(:last-child) { 109 | border-bottom: 1px solid $base-color4; 110 | } 111 | 112 | a { 113 | display: block; 114 | padding: 10px 0; 115 | 116 | &:hover { 117 | color: #fec544; 118 | } 119 | } 120 | } 121 | 122 | .st-tagcloud { 123 | margin-bottom: -10px; 124 | 125 | .st-tag { 126 | display: inline-block; 127 | font-size: 13px; 128 | padding: 2px 10px; 129 | border: 1px solid $base-color4; 130 | border-radius: 7px; 131 | margin-right: 6px; 132 | margin-bottom: 10px; 133 | 134 | &:hover { 135 | color: #fff; 136 | background-color: #fec544; 137 | border-color: #fec544; 138 | } 139 | } 140 | } 141 | 142 | .st-sidebar-social-btn { 143 | display: flex; 144 | flex-wrap: wrap; 145 | align-items: center; 146 | margin-top: -4px; 147 | margin-bottom: -5px; 148 | 149 | a:not(:last-child) { 150 | margin-right: 15px; 151 | } 152 | } 153 | 154 | .st-post-details.st-style1 { 155 | font-weight: 300; 156 | font-size: 18px; 157 | line-height: 1.8em; 158 | 159 | .slick-slide { 160 | line-height: 0; 161 | } 162 | 163 | .st-post-thumb { 164 | margin-bottom: 25px; 165 | 166 | img { 167 | width: 100%; 168 | } 169 | } 170 | 171 | .st-post-title { 172 | font-size: 28px; 173 | margin-bottom: 9px; 174 | } 175 | 176 | blockquote { 177 | background-color: rgba(255, 255, 255, 0.02); 178 | margin: 0; 179 | padding: 30px 40px 27px; 180 | font-size: 24px; 181 | line-height: 1.6em; 182 | border-left: 5px solid #fec544; 183 | color: $base-color1; 184 | border-radius: 7px; 185 | font-weight: 400; 186 | margin: 20px 0; 187 | 188 | small { 189 | display: block; 190 | line-height: inherit; 191 | margin-top: 4px; 192 | color: #a9adb8; 193 | font-size: inherit; 194 | font-size: 16px; 195 | 196 | span { 197 | color: #fec544; 198 | } 199 | } 200 | } 201 | 202 | .st-post-label { 203 | margin-bottom: 15px; 204 | } 205 | 206 | .st-post-text p { 207 | margin-bottom: 15px; 208 | } 209 | 210 | .st-post-meta { 211 | display: flex; 212 | justify-content: space-between; 213 | padding: 25px 0; 214 | line-height: 1.6em; 215 | font-size: 15px; 216 | border-top: 1px solid $base-color4; 217 | border-bottom: 1px solid $base-color4; 218 | } 219 | 220 | h2 { 221 | font-size: 28px; 222 | margin-bottom: 10px; 223 | } 224 | 225 | p { 226 | margin-bottom: 15px; 227 | } 228 | 229 | img { 230 | margin-bottom: 20px; 231 | border-radius: 7px; 232 | margin-top: 5px; 233 | } 234 | 235 | .embed-responsive { 236 | margin-top: 15px; 237 | margin-bottom: 15px; 238 | } 239 | } 240 | 241 | .st-post-label { 242 | > span { 243 | display: inline-block; 244 | position: relative; 245 | 246 | &:not(:last-child) { 247 | padding-right: 15px; 248 | margin-right: 15px; 249 | 250 | &:before { 251 | content: ""; 252 | position: absolute; 253 | height: 16px; 254 | width: 1px; 255 | background-color: $base-color4; 256 | right: 0; 257 | top: 3px; 258 | } 259 | } 260 | } 261 | 262 | a:hover { 263 | color: #fec544; 264 | } 265 | } 266 | 267 | .st-post-tage-list { 268 | display: flex; 269 | flex-wrap: wrap; 270 | font-size: 15px; 271 | font-weight: 400; 272 | 273 | li { 274 | margin-right: 5px; 275 | 276 | &:not(:last-child):after { 277 | content: ","; 278 | } 279 | 280 | a { 281 | &:hover { 282 | color: #fec544; 283 | } 284 | } 285 | } 286 | } 287 | 288 | .st-post-tages, 289 | .st-post-share { 290 | display: flex; 291 | 292 | .st-post-tage-title, 293 | .st-post-share-title { 294 | margin: 0; 295 | font-size: 16px; 296 | margin-right: 10px; 297 | line-height: 1.6em; 298 | font-weight: 500; 299 | } 300 | } 301 | 302 | .st-post-share-btn-list { 303 | display: flex; 304 | flex-wrap: wrap; 305 | font-size: 15px; 306 | 307 | a { 308 | &:not(:last-child) { 309 | margin-right: 12px; 310 | } 311 | 312 | &:hover { 313 | color: #fec544; 314 | } 315 | } 316 | } 317 | 318 | .st-post-btn-gropu { 319 | display: flex; 320 | justify-content: space-between; 321 | 322 | .st-btn { 323 | min-width: 170px; 324 | justify-content: center; 325 | } 326 | } 327 | 328 | .st-page-heading-in { 329 | .st-post-label { 330 | color: rgba(255, 255, 255, 0.75); 331 | display: flex; 332 | justify-content: center; 333 | margin-top: 6px; 334 | } 335 | 336 | .st-post-label > span:not(:last-child):before { 337 | background-color: rgba(255, 255, 255, 0.15); 338 | } 339 | 340 | .st-post-label > span:not(:last-child) { 341 | color: rgba(255, 255, 255, 0.75); 342 | } 343 | 344 | .st-post-label a:hover { 345 | color: #fff; 346 | } 347 | } 348 | 349 | .st-page-heading-subtitle { 350 | color: rgba(255, 255, 255, 0.7); 351 | font-size: 18px; 352 | font-weight: 300; 353 | margin-top: 7px; 354 | } 355 | 356 | 357 | @media screen and (max-width: 991px) { 358 | .st-page-heading-title { 359 | font-size: 38px; 360 | } 361 | 362 | .st-page-heading-subtitle { 363 | font-size: 16px; 364 | } 365 | 366 | .st-page-heading.st-size-md { 367 | height: 350px; 368 | padding-top: 80px; 369 | } 370 | 371 | .st-page-heading-title br { 372 | display: none; 373 | } 374 | 375 | .st-page-heading { 376 | height: 500px; 377 | padding-top: 80px; 378 | } 379 | .st-post-details.st-style1 { 380 | font-size: 16px; 381 | } 382 | .st-post-details.st-style1 blockquote { 383 | padding: 20px 20px 17px; 384 | font-size: 20px; 385 | } 386 | } 387 | 388 | @media screen and (max-width: 767px) { 389 | .st-post-details.st-style1 .st-post-meta { 390 | display: block; 391 | } 392 | .st-post-btn-gropu .st-btn { 393 | min-width: 140px; 394 | justify-content: center; 395 | padding: 0.6em 1.5em; 396 | } 397 | } 398 | -------------------------------------------------------------------------------- /src/components/Header/Header.scss: -------------------------------------------------------------------------------- 1 | @import "../../sass/default/variable.scss"; 2 | 3 | .st-site-header.st-style1 { 4 | background-color: rgba($dark-color2, 0.9); 5 | box-shadow: 0 10px 10px -10px rgba($dark-color2, 0.1); 6 | transition: all 0.4s ease; 7 | 8 | .st-main-header-in { 9 | display: flex; 10 | align-items: center; 11 | flex-wrap: wrap; 12 | justify-content: space-between; 13 | height: 80px; 14 | } 15 | &.st-transparent-header { 16 | background-color: transparent; 17 | box-shadow: none; 18 | } 19 | 20 | &.st-sticky-active { 21 | background-color: $dark-color2; 22 | box-shadow: 0 10px 10px -10px rgba($dark-color2, 0.1); 23 | } 24 | } 25 | 26 | @media screen and (max-width: 991px) { 27 | .st-main-header .container { 28 | max-width: 100%; 29 | } 30 | 31 | .st-site-header.st-style1 { 32 | background-color: $dark-color2; 33 | } 34 | } 35 | 36 | @media screen and (max-width: 1199px) { 37 | .st-nav .st-nav-list li { 38 | margin-right: 30px; 39 | } 40 | } 41 | 42 | // ======== Main Menu Style ======== 43 | .st-nav ul { 44 | margin: 0; 45 | padding: 0; 46 | list-style: none; 47 | } 48 | 49 | .st-main-header { 50 | position: relative; 51 | } 52 | 53 | @media screen and (min-width: 992px) { 54 | .st-nav { 55 | display: flex; 56 | 57 | .st-nav-list { 58 | display: flex !important; 59 | flex-wrap: wrap; 60 | 61 | > li { 62 | margin-right: 40px; 63 | 64 | &:last-child { 65 | margin-right: 45px; 66 | } 67 | 68 | > a { 69 | padding: 15px 0; 70 | font-size: 15px; 71 | display: inline-block; 72 | color: $base-color3; 73 | text-transform: uppercase; 74 | font-family: "Roboto", sans-serif; 75 | font-weight: 500; 76 | cursor: pointer; 77 | 78 | &.active { 79 | color: $base-color1; 80 | } 81 | } 82 | } 83 | } 84 | 85 | .sp-phone { 86 | display: flex; 87 | align-items: center; 88 | padding-left: 45px; 89 | position: relative; 90 | 91 | &::before { 92 | content: ""; 93 | position: absolute; 94 | height: 11px; 95 | width: 1px; 96 | background: white; 97 | left: 0px; 98 | } 99 | 100 | svg { 101 | fill: #ffffff; 102 | width: 15px; 103 | } 104 | 105 | .sp-phone-no { 106 | padding-left: 15px; 107 | color: $base-color1; 108 | } 109 | } 110 | } 111 | 112 | .st-munu-toggle, 113 | .st-munu-dropdown-toggle { 114 | display: none; 115 | } 116 | } 117 | @media screen and (max-width: 1199px) { 118 | .st-nav { 119 | .st-nav-list li:last-child{ 120 | margin-right: 0; 121 | } 122 | .sp-phone { 123 | display: none; 124 | } 125 | } 126 | } 127 | 128 | 129 | @media screen and (max-width: 991px) { 130 | .st-munu-dropdown-toggle { 131 | position: absolute; 132 | height: 30px; 133 | width: 30px; 134 | right: 20px; 135 | top: 5px; 136 | 137 | &:before, 138 | &:after { 139 | content: ""; 140 | display: block; 141 | position: absolute; 142 | left: 50%; 143 | top: 50%; 144 | transform: translate(-50%, -50%); 145 | height: 2px; 146 | width: 10px; 147 | background-color: $base-color3; 148 | transition: all 0.3s ease; 149 | } 150 | 151 | &:before { 152 | transform: translate(-50%, -50%) rotate(90deg); 153 | } 154 | 155 | &.active { 156 | &:before { 157 | transform: translate(-50%, -50%) rotate(0deg); 158 | } 159 | } 160 | } 161 | 162 | .st-nav { 163 | .st-nav-list { 164 | position: absolute; 165 | width: 100vw; 166 | left: 0; 167 | background-color: #070d1b; 168 | padding: 10px 0; 169 | display: none; 170 | top: 100%; 171 | border-top: 1px solid #101624; 172 | border-bottom: 1px solid #101624; 173 | overflow: auto; 174 | max-height: calc(100vh - 80px); 175 | 176 | ul { 177 | padding-left: 15px; 178 | display: none; 179 | } 180 | 181 | a { 182 | display: block; 183 | padding: 8px 20px; 184 | } 185 | } 186 | 187 | .menu-item-has-children { 188 | position: relative; 189 | } 190 | 191 | .sp-phone { 192 | display: none; 193 | } 194 | } 195 | 196 | /*Mobile Menu Button*/ 197 | .st-munu-toggle { 198 | position: relative; 199 | display: inline-block; 200 | width: 28px; 201 | height: 27px; 202 | margin: 15px 0px 15px 0px; 203 | cursor: pointer; 204 | 205 | span, 206 | span:before, 207 | span:after { 208 | width: 100%; 209 | height: 2px; 210 | background-color: #666; 211 | display: block; 212 | } 213 | 214 | span { 215 | margin: 0 auto; 216 | position: relative; 217 | top: 12px; 218 | transition-duration: 0s; 219 | transition-delay: 0.2s; 220 | 221 | &:before { 222 | content: ""; 223 | position: absolute; 224 | margin-top: -8px; 225 | transition-property: margin, transform; 226 | transition-duration: 0.2s; 227 | transition-delay: 0.2s, 0s; 228 | } 229 | 230 | &:after { 231 | content: ""; 232 | position: absolute; 233 | margin-top: 8px; 234 | transition-property: margin, transform; 235 | transition-duration: 0.2s; 236 | transition-delay: 0.2s, 0s; 237 | } 238 | } 239 | } 240 | 241 | .st-toggle-active { 242 | span { 243 | background-color: rgba(0, 0, 0, 0); 244 | transition-delay: 0.2s; 245 | 246 | &:before { 247 | margin-top: 0; 248 | transform: rotate(45deg); 249 | transition-delay: 0s, 0.2s; 250 | } 251 | 252 | &:after { 253 | margin-top: 0; 254 | transform: rotate(-45deg); 255 | transition-delay: 0s, 0.2s; 256 | } 257 | } 258 | } 259 | } 260 | 261 | // ======== End Main Menu Style ======== 262 | .st-sticky-header { 263 | position: fixed; 264 | z-index: 200; 265 | width: 100%; 266 | top: 0; 267 | left: 0; 268 | } 269 | 270 | .st-site-header.st-style2 { 271 | .st-header-author { 272 | height: 190px; 273 | width: 190px; 274 | border-radius: 50%; 275 | border: 6px solid rgba(255, 255, 255, 0.1); 276 | margin: auto; 277 | 278 | img { 279 | border-radius: inherit; 280 | height: 100%; 281 | width: 100%; 282 | object-fit: cover; 283 | } 284 | } 285 | } 286 | 287 | @media screen and (min-width: 991px) { 288 | .st-site-header.st-style2 { 289 | width: 300px; 290 | background: $dark-color2; 291 | height: 100vh; 292 | border-right: 1px solid $dark-color4; 293 | overflow: auto; 294 | 295 | .st-nav { 296 | flex-direction: column; 297 | 298 | .st-nav-list { 299 | flex-direction: column; 300 | 301 | > li { 302 | margin-right: 0; 303 | 304 | > a { 305 | padding: 10px 0; 306 | } 307 | } 308 | } 309 | } 310 | 311 | .st-main-header { 312 | position: relative; 313 | padding: 40px 25px 80px; 314 | 315 | &:after { 316 | content: ""; 317 | position: fixed; 318 | height: 80px; 319 | width: 299px; 320 | left: 0; 321 | bottom: 0; 322 | background-color: $dark-color2; 323 | } 324 | } 325 | 326 | .st-social-btn.st-style1 { 327 | position: fixed; 328 | bottom: 40px; 329 | left: 40px; 330 | 331 | li { 332 | color: $dark-color3; 333 | margin-right: 20px; 334 | font-size: 18px; 335 | 336 | &:last-child { 337 | margin-right: 0; 338 | } 339 | 340 | a { 341 | &:hover { 342 | color: $dark-color2; 343 | } 344 | } 345 | } 346 | } 347 | 348 | .st-main-header-left { 349 | margin-bottom: 24px; 350 | } 351 | 352 | .st-btn.st-style1 { 353 | margin-top: 20px; 354 | font-size: 14px; 355 | padding: 0.6em 1.3em; 356 | } 357 | 358 | .st-hero-btn { 359 | margin-top: 22px; 360 | } 361 | 362 | .st-main-header-left { 363 | margin-left: -40px; 364 | margin-right: -40px; 365 | border-bottom: 1px solid #101624; 366 | padding-bottom: 40px; 367 | } 368 | } 369 | 370 | .st-get-sidebar { 371 | padding-left: 300px; 372 | 373 | .st-sticky-footer { 374 | left: 300px; 375 | max-width: calc(100% - 300px); 376 | } 377 | } 378 | } 379 | 380 | @media screen and (max-width: 991px) { 381 | .st-site-header .st-btn, 382 | .st-site-header.st-style2 .st-opening-hr, 383 | .st-site-header.st-style2 .st-social-btn.st-style1 { 384 | display: none !important; 385 | } 386 | 387 | .st-site-header.st-style2 { 388 | background-color: $dark-color2; 389 | border-bottom: 1px solid #101624; 390 | 391 | .st-nav { 392 | display: flex; 393 | } 394 | 395 | .st-main-header-in { 396 | display: flex; 397 | align-items: center; 398 | justify-content: space-between; 399 | height: 70px; 400 | } 401 | } 402 | 403 | .st-site-header.st-style2 .st-header-author { 404 | height: 50px; 405 | width: 50px; 406 | border: 2px solid rgba(255, 255, 255, 0.1); 407 | } 408 | } 409 | -------------------------------------------------------------------------------- /davis-documentation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Davis – Personal Portfolio ReactJs Template 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 41 | 42 | 43 |
44 | 45 | 56 | 57 |
58 | 59 |
60 | 61 |
62 |
63 |
64 |

Setup Development Environment

65 |
66 |

67 | In order to kickstart the development of your web app with Davis, 68 | the very first thing you need to do is to setup a react development 69 | environment. 70 |

71 |

Following tools are needed to setup a react dev environment:

72 |
    73 |
  • Node JS
    • 74 |

    75 | NodeJS works as a node package manager behind the scene. It is 76 | recommended to download and install the latest version of Node JS 77 | from its official site 78 | http://nodejs.org/ 79 |

    80 |
81 |
82 |
83 |
84 |

Introduction

85 |
86 |

87 | To install Davis on your local matchin, download the files from Themeforest and unzip them to the local disk 88 | on your computer.
Inside the extracted folder you will see two folders named 'Davis-documentation' and 89 | 'Davis-react'.
90 | Open 'Davis-react' with a code editor like vscode. And follow the 91 | stapes below- 92 |

93 | For npm:
94 |

95 | Open vscode terminal
96 | Then run : npm install
97 | Then run : npm run dev
98 | Now in the browser go http://localhost:5173/ 99 |

100 | If you want to use yarn: 101 |

102 | Open vscode terminal
103 | Then run : yarn install
104 | Then run : yarn dev
105 | Now in the browser go http://localhost:5173/ 106 |

107 |
108 |
109 |
110 |

Introduction

111 |
112 |
    113 | 114 |
  • public - All static files 115 |
      116 |
    • images - All images for this template
      • 117 |
    118 |
    • 119 |
  • src - Content all the react file 120 |
      121 |
    • components - All components with relevant SCSS
      • 122 |
    • pages - All pages on that template
      • 123 |
    • scss - Common SCSS file
      • 124 |
    • data - All content (data) of the template
      • 125 |
    • app.jsx - Starting poing of react components
      • 126 |
    • main.jsx - Entry poing of react app
      • 127 |
    128 |
    • 129 |
  • index.html - Static index page.
    • 130 |
  • package.json - All packages have information
    • 131 |
  • node_modules - After install Davis you can see this folder, this folder content all 132 | installed package.
    • 133 |
134 |
135 | 136 |
137 |
138 |

Template Data

139 |
140 | 141 |
142 |

We are creating a JSON file called HomePageData.json, all data comes from that JSON file
If you want to 143 | change any type of content please open HomePageData.json file and change or update your data.
On that 144 | file, we separate all sections of data, like hero, socialBtns, brands, etc. Just open it you will understand. 145 |

146 |
147 |
148 |
149 |

Pages and Components Info

150 |
151 | 152 |
153 |
    154 |
  • Home (/pages/Home.jsx)
    • 155 |
156 |
Common Components:
157 |
    158 |
  • Header (/components/Header)
    • 159 |
  • Footer (/components/Footer)
    • 160 |
161 | 162 |
Template Features:
163 |
    164 |
  • ES6+
    • 165 |
  • React JS 18.2.0+
    • 166 |
167 | 168 | 169 |

170 |
171 | 172 |
173 |
174 |

Dependencies

175 |
176 |

177 | Here are the dependencies list which being used in 178 | the Davis React Template: 179 |

180 | 
181 |            
182 |             "dependencies": {
183 |               "aos": "^2.3.4",
184 |               "bootstrap": "^5.3.0",
185 |               "gsap": "^3.12.2",
186 |               "html-react-parser": "^4.2.0",
187 |               "react": "^18.2.0",
188 |               "react-dom": "^18.2.0",
189 |               "react-router-dom": "^6.14.2",
190 |               "react-scroll": "^1.8.9",
191 |               "react-slick": "^0.29.0",
192 |               "sass": "^1.63.6",
193 |               "slick-carousel": "^1.8.1"
194 |             },
195 |             "devDependencies": {
196 |               "@iconify/react": "^4.1.1",
197 |               "@types/react": "^18.2.14",
198 |               "@types/react-dom": "^18.2.6",
199 |               "@vitejs/plugin-react": "^4.0.1",
200 |               "eslint": "^8.44.0",
201 |               "eslint-plugin-react": "^7.32.2",
202 |               "eslint-plugin-react-hooks": "^4.6.0",
203 |               "eslint-plugin-react-refresh": "^0.4.1",
204 |               "vite": "^4.4.0"
205 |             }
206 |           
207 |
208 |
209 | 210 |
211 |
212 |

Fonts

213 |
214 |

215 | By default, the template loads Inter and Open Sans font from 217 | Google Web Font Services, you can change the font with the one that 218 | suits you best. 219 |

220 |

221 | You will find the font code in the "scss/default/_typography.scss 222 |

223 | 
224 | 
225 |   @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
226 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
227 | 
228 |
229 |
230 |
231 |
232 |

Icons

233 |
234 |

235 | We use Iconify package for icon.
236 | For use Iconify, go to Iconify site, search your icon, select react and use that react 238 | component. 239 |

240 |
241 |
242 |
243 |

Deploy

244 |
245 |

246 | For deploy first run the command npm run build or yarn build
248 | Now you will get build folder.
249 | Using an FTP Client (such as Filezilla or Total Commander), you will need to upload all of the contents of the 250 | 'build' folder to your server. 251 |

252 |
253 |
254 |
255 |

Credits

256 |
257 | Images
258 | Freepick
259 | Unsplash
260 | 261 |
262 | 263 | Packages
264 | aos
265 | bootstrap
266 | gsap
267 | html-react-parser
268 | react
269 | react-dom
270 | react-router-dom
271 | react-scroll
272 | react-slick
273 | sass
274 | slick-carousel
275 | @iconify/react
276 | 277 |
278 | 279 |
280 |
281 |

Support

282 |
283 |

284 | If you have any questions, please use our profile contact form on 285 | Envato ( 286 | https://themeforest.net/user/Laralink 287 | ) Or direct email us on laralink007@Laralink.com.
288 | We aim to answer all questions within 5 days . In 289 | some cases the waiting time can be extended to 290 | 7 days. 291 |

292 |
293 |
294 | 295 |
296 | 297 | 298 |
299 |
300 | 301 |
302 |
303 |

304 | Copyright © All right reserved by 305 | Laralink 306 |

307 |
308 |
309 | 312 |
313 |
314 |
315 |
316 | 317 | 318 | 319 | -------------------------------------------------------------------------------- /src/components/Blog/BlogDetails.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'react-router-dom'; 2 | import { Icon } from '@iconify/react'; 3 | import { useEffect } from 'react'; 4 | import './BlogDetails.scss'; 5 | import './Blog.scss'; 6 | import './Comment.scss'; 7 | import '../Contact/Contact.scss'; 8 | import Carousel from '../Slider/Carousel'; 9 | 10 | const BlogDetails = () => { 11 | const blogDetails = { 12 | heroBg: '/images/hero-bg17.jpg', 13 | useFor: 'image-slider', 14 | sliderSetting: { 15 | infinite: true, 16 | speed: 500, 17 | slidesToShow: 1, 18 | slidesToScroll: 1, 19 | dots: true, 20 | arrows: false, 21 | }, 22 | sliderImages: [ 23 | { 24 | imgLink: '/images/hero-bg3.jpg', 25 | }, 26 | { 27 | imgLink: '/images/hero-bg4.jpg', 28 | }, 29 | ], 30 | }; 31 | 32 | useEffect(() => { 33 | window.scrollTo(0, 0); 34 | }, []); 35 | 36 | return ( 37 |
38 |
42 |
43 |
44 |

45 | Dynamically procrastinate B2C users
46 | after installed base benefits.. 47 |

48 |
49 | 50 | By Mary Neo 51 | 52 | Mar 15, 2020 53 |
54 |
55 |
56 |
57 | {/* .st-page-heading */} 58 |
59 |
60 |
61 |
62 |
63 |

64 | Bring to the table win-win survival strategies to ensure 65 | proactive domination. At the end of the day, going forward, a 66 | new normal that has evolved from generation X is on the runway 67 | heading towards a streamlined cloud solution. User generated 68 | content in real-time will have multiple touchpoints for 69 | offshoring. 70 |

71 |

72 | Capitalize on low hanging fruit to identify a ballpark value 73 | added activity to beta test. Override the digital divide with 74 | additional clickthroughs from DevOps. 75 |

76 | blog1 81 |

Collaboratively administrate empowered.

82 |
83 |
84 |

85 | Podcasting operational change management inside of workflows 86 | to establish a framework. Taking seamless key performance 87 | indicators offline to maximise the long tail. Keeping your 88 | eye on the ball while performing a deep dive on the start-up 89 | mentality to derive convergence on cross-platform 90 | integration. 91 |

92 |

93 | Collaboratively administrate empowered markets via 94 | plug-and-play networks. Dynamically procrastinate B2C users 95 | after installed base benefits. Dramatically visualize 96 | customer directed convergence without revolutionary ROI. 97 |

98 |

99 | Podcasting operational change management inside of workflows 100 | to establish a framework. Taking seamless key performance 101 | indicators offline to maximise the long tail. 102 |

103 |

Blog video post can also added.

104 | {/* For Youtube */} 105 |
106 | 113 |
114 | {/* For Vimeo */} 115 | {/*
116 | 117 |
*/} 118 |

119 | Completely synergize resource taxing relationships via 120 | premier niche markets. Professionally cultivate one-to-one 121 | customer service with robust ideas. Dynamically innovate 122 | resource-leveling customer service for state of the art 123 | customer service. 124 |

125 |
126 | Integer accumsan arcu ligula, eget dictum augue egestas sed. 127 | Curabitur bibendum, lorem ac dapibus pellentesque, justo 128 | lectus bibendum enim. 129 | 130 | by: Mark Parker 131 | 132 |
133 |

134 | There are many variations of passages of Lorem Ipsum 135 | available, but the majority have suffered alteration some 136 | even slightly believable. If you are going to use passage of 137 | Lorem Ipsum. 138 |

139 |

Phosfluorescently engage worldwide?

140 |

141 | Proactively envisioned multimedia based expertise and 142 | cross-media growth strategies. Seamlessly visualize quality 143 | intellectual capital without superior collaboration and 144 | idea-sharing. Holistically pontificate installed base 145 | portals after maintainable products. 146 |

147 | 148 | {/* .st-slider */} 149 |
150 |

151 | Capitalize on low hanging fruit to identify a ballpark value 152 | added activity to beta test. Override the digital divide 153 | with additional clickthroughs from DevOps. Nanotechnology 154 | immersion along the information highway will close the loop 155 | on focusing solely on the bottom line. 156 |

157 |
158 |
159 |
160 |
161 |

Tags:

162 |
    163 |
  • 164 | App 165 |
    • 166 |
  • 167 | php 168 |
    • 169 |
  • 170 | web 171 |
    • 172 |
  • 173 | business 174 |
    • 175 |
  • 176 | agency 177 |
    • 178 |
  • 179 | development 180 |
    • 181 |
182 |
183 |
184 |

Share:

185 |
186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 |
202 |
203 |
204 |
205 |
206 |
207 | 211 | Previous Post 212 | 213 | 217 | Next Post 218 | 219 |
220 |
221 |
222 |
223 |
224 |

Comments(3)

225 |
    226 |
  1. 227 |
    228 |
    229 |
    230 | comment1 235 | 236 | Smith Jhon 237 | 238 |
    239 | {/* .comment-author */} 240 |
    241 | 242 | 15 Jan, 2020 243 | 244 |
    245 | {/* .comment-metadata */} 246 |
    247 | {/* .comment-meta */} 248 |
    249 |

    250 | Lorem ipsum dolor sit amet, consectetuer adipiscing 251 | elit. 252 |

    253 |
    254 |
    255 | 256 | Reply 257 | 258 |
    259 |
    260 |
      261 |
    1. 262 |
      263 |
      264 |
      265 | comment1 270 | 271 | Robat Newman 272 | 273 |
      274 | {/* .comment-author */} 275 |
      276 | 277 | 15 Jan, 2020 278 | 279 |
      280 | {/* .comment-metadata */} 281 |
      282 | {/* .comment-meta */} 283 |
      284 |

      285 | Consectetuer adipiscing elit. Lorem ipsum dolor 286 | sit amet, consectetuer. 287 |

      288 |
      289 |
      290 | 291 | Reply 292 | 293 |
      294 |
      295 |
      2. 296 |
    297 | {/* .children */} 298 |
    2. 299 |
  2. 300 |
    301 |
    302 |
    303 | comment1 308 | 309 | Hannibal Lecter 310 | 311 |
    312 | {/* .comment-author */} 313 |
    314 | 315 | 26 Jan, 2016 316 | 317 |
    318 | {/* .comment-metadata */} 319 |
    320 | {/* .comment-meta */} 321 |
    322 |

    323 | Lorem ipsum dolor sit amet. Lorem ipsum adipiscing 324 | elit. 325 |

    326 |
    327 |
    328 | 329 | Reply 330 | 331 |
    332 |
    333 |
    3. 334 |
335 | {/* .comment-list */} 336 |
337 | {/* .comment-list-outer */} 338 |
339 |

Add your comment

340 |
341 |

342 | 348 |

349 |

350 | 356 |

357 |

358 | 364 |

365 |

366 |