├── public ├── favicon.ico ├── robots.txt ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── manifest.json └── index.html ├── src ├── assets │ ├── frank.webp │ ├── pfp-1.webp │ ├── pfp-2.webp │ ├── yarman.webp │ ├── logo.svg │ ├── dots-bg.svg │ ├── price-2.svg │ ├── price-3.svg │ ├── service-2.svg │ ├── price-1.svg │ ├── service-3.svg │ ├── work-2.svg │ ├── work-5.svg │ ├── work-6.svg │ ├── service-1.svg │ ├── work-1.svg │ └── avatar-3.svg ├── App.css ├── setupTests.js ├── App.test.js ├── index.js ├── components │ ├── resume │ │ ├── Card.jsx │ │ ├── Resume.jsx │ │ ├── Data.jsx │ │ └── resume.css │ ├── home │ │ ├── ScrollDown.jsx │ │ ├── Home.jsx │ │ ├── HeaderSocials.jsx │ │ ├── home.css │ │ └── Shapes.jsx │ ├── portfolio │ │ ├── Menu.jsx │ │ ├── Portfolio.jsx │ │ └── portfolio.css │ ├── about │ │ ├── AboutBox.jsx │ │ ├── About.jsx │ │ └── about.css │ ├── sidebar │ │ ├── sidebar.css │ │ └── Sidebar.jsx │ ├── contact │ │ ├── Contact.jsx │ │ └── contact.css │ ├── testimonials │ │ ├── testimonials.css │ │ └── Testimonials.jsx │ ├── services │ │ ├── services.css │ │ └── Services.jsx │ ├── blog │ │ ├── blog.css │ │ └── Blog.jsx │ └── pricing │ │ ├── Pricing.jsx │ │ └── pricing.css ├── reportWebVitals.js ├── App.js └── index.css ├── .gitignore ├── package.json └── README.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/geeky/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/frank.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/geeky/HEAD/src/assets/frank.webp -------------------------------------------------------------------------------- /src/assets/pfp-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/geeky/HEAD/src/assets/pfp-1.webp -------------------------------------------------------------------------------- /src/assets/pfp-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/geeky/HEAD/src/assets/pfp-2.webp -------------------------------------------------------------------------------- /src/assets/yarman.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/geeky/HEAD/src/assets/yarman.webp -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/geeky/HEAD/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/geeky/HEAD/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/geeky/HEAD/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .main{ 4 | margin-left: 110px; 5 | user-select: none; 6 | } 7 | 8 | @media screen and (max-width: 1024px){ 9 | .main{ 10 | margin-left: 0; 11 | } 12 | } -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /src/components/resume/Card.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | 4 | const Card = (props) => { 5 | return ( 6 |
7 | 8 | {props.year} 9 |

{props.title}

10 |

{props.desc}

11 |
12 | ) 13 | } 14 | 15 | export default Card 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/home/ScrollDown.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' 4 | 5 | const ScrollDown = () => { 6 | return ( 7 |
8 | 9 | Scroll Down 10 | 11 | 12 | 13 | 14 |
15 | ) 16 | } 17 | 18 | export default ScrollDown 19 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Geeky", 3 | "name": "Geeky Web App", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "android-chrome-192x192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "android-chrome-512x512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/home/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from "react"; 3 | import "./home.css" 4 | import Me from "../../assets/pfp-1.webp" 5 | import HeaderSocials from "./HeaderSocials"; 6 | import ScrollDown from "./ScrollDown"; 7 | import Shapes from "./Shapes"; 8 | 9 | const Home = ()=>{ 10 | return( 11 |
12 |
13 | Misha Kaiser 14 |

Misha Kaiser

15 | React developer 16 | 17 | 18 | 19 | Contact Me 20 | 21 | 22 | 23 |
24 | 25 | 26 |
27 | ) 28 | } 29 | 30 | export default Home -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Geeky Web App 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geeky", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "cra-template": "1.2.0", 7 | "react": "^19.0.0", 8 | "react-dom": "^19.0.0", 9 | "react-scripts": "5.0.1", 10 | "swiper": "^11.2.1" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": [ 20 | "react-app", 21 | "react-app/jest" 22 | ] 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | }, 36 | "devDependencies": { 37 | "web-vitals": "^4.2.4" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Sidebar from './components/sidebar/Sidebar'; 3 | import Home from './components/home/Home'; 4 | import About from './components/about/About'; 5 | import Services from './components/services/Services'; 6 | import Resume from './components/resume/Resume'; 7 | import Portfolio from './components/portfolio/Portfolio'; 8 | import Pricing from './components/pricing/Pricing'; 9 | import Testimonials from './components/testimonials/Testimonials'; 10 | import Blog from './components/blog/Blog'; 11 | import Contact from './components/contact/Contact'; 12 | 13 | function App() { 14 | return ( 15 | <> 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | ); 30 | } 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /src/components/home/HeaderSocials.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | 4 | const HeaderSocials = () => { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | ) 28 | } 29 | 30 | export default HeaderSocials 31 | -------------------------------------------------------------------------------- /src/components/portfolio/Menu.jsx: -------------------------------------------------------------------------------- 1 | 2 | import Work1 from "../../assets/work-1.svg" 3 | import Work2 from "../../assets/work-2.svg" 4 | import Work3 from "../../assets/work-3.svg" 5 | import Work4 from "../../assets/work-4.svg" 6 | import Work5 from "../../assets/work-5.svg" 7 | import Work6 from "../../assets/work-6.svg" 8 | 9 | 10 | 11 | const Menu = [ 12 | { 13 | id: 1, 14 | image: Work1, 15 | title: "Project Management Illustration", 16 | category: "Design", 17 | }, 18 | { 19 | id: 2, 20 | image: Work2, 21 | title: "Guest App Walkthrough Screens", 22 | category: "Art", 23 | }, 24 | { 25 | id: 3, 26 | image: Work3, 27 | title: "Delivery App Wireframe", 28 | category: "Branding", 29 | }, 30 | , 31 | { 32 | id: 4, 33 | image: Work4, 34 | title: "Onboarding Motivation", 35 | category: "Design", 36 | }, 37 | , 38 | { 39 | id: 5, 40 | image: Work5, 41 | title: "iMac Mockup Design", 42 | category: "Creative", 43 | }, 44 | , 45 | { 46 | id: 6, 47 | image: Work6, 48 | title: "Game Store App Concept", 49 | category: "Art", 50 | }, 51 | ]; 52 | 53 | export default Menu -------------------------------------------------------------------------------- /src/components/resume/Resume.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from "react"; 3 | import "./resume.css" 4 | import Data from "./Data"; 5 | import Card from "./Card"; 6 | 7 | const Resume = ()=>{ 8 | return( 9 |
10 |

Experience

11 | 12 |
13 |
14 | {Data.map((val, id) =>{ 15 | if(val.category === "education"){ 16 | return ( 17 | 23 | ) 24 | } 25 | })} 26 |
27 | 28 |
29 | {Data.map((val, index) =>{ 30 | if(val.category === "experience"){ 31 | return ( 32 | 38 | ) 39 | } 40 | })} 41 |
42 |
43 |
44 | ) 45 | } 46 | 47 | export default Resume -------------------------------------------------------------------------------- /src/components/about/AboutBox.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | 4 | const AboutBox = () => { 5 | return ( 6 |
7 |
8 | 9 |
10 | 11 |

34

12 | Project completed 13 |
14 |
15 | 16 |
17 | 18 |
19 | 20 |

2532

21 | Cup of coffee 22 |
23 |
24 | 25 |
26 | 27 |
28 | 29 |

143

30 | Satisfied clients 31 |
32 |
33 | 34 |
35 | 36 |
37 | 38 |

21

39 | Nominees winner 40 |
41 |
42 |
43 | ) 44 | } 45 | 46 | export default AboutBox 47 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .aside{ 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-between; 7 | z-index: 10; 8 | position: fixed; 9 | left: 0; 10 | top: 0; 11 | background-color: var(--body-color); 12 | border-right: 1px solid rgba(0, 0, 0, 0.05); 13 | padding: 2.5rem; 14 | width: 110px; 15 | min-height: 100vh; 16 | transition: .3s; 17 | } 18 | 19 | .nav__list{ 20 | display: flex; 21 | flex-direction: column; 22 | row-gap: 1rem; 23 | } 24 | 25 | .nav__link{ 26 | font-size: 1.5rem; 27 | color: var(--title); 28 | font-weight: var(--font-bold); 29 | transition: ease .3s; 30 | } 31 | 32 | .nav__link:hover{ 33 | color: hsl(43, 100%, 68%); 34 | } 35 | 36 | .copyright{ 37 | color: hsl(245, 15%, 65%); 38 | font-size: var(--small-font-size); 39 | transform: rotate(-180deg); 40 | writing-mode: vertical-rl; 41 | } 42 | 43 | .nav__toggle{ 44 | display: none; 45 | position: fixed; 46 | justify-content: center; 47 | align-items: center; 48 | top: 1.25rem; 49 | left: 1.875rem; 50 | cursor: pointer; 51 | height: 40px; 52 | width: 45px; 53 | background-color: var(--body-color); 54 | border: 1px solid #e8dfec; 55 | z-index: 1; 56 | transition: .3s; 57 | } 58 | 59 | @media screen and (max-width: 1024px){ 60 | .aside{ 61 | left: -110px; 62 | } 63 | 64 | .nav__toggle{ 65 | display: flex; 66 | } 67 | 68 | .nav__toggle-open{ 69 | left: 140px; 70 | } 71 | 72 | .show-menu{ 73 | left: 0; 74 | } 75 | } -------------------------------------------------------------------------------- /src/components/contact/Contact.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from "react"; 3 | import "./contact.css" 4 | 5 | const Contact = ()=>{ 6 | return( 7 |
8 |

Get In Touch

9 | 10 |
11 |
12 |

Let's talk about everything!

13 |

Don't like forms? Send me an email. 👋

14 |
15 | 16 |
17 |
18 |
19 | 21 |
22 | 23 |
24 | 26 |
27 |
28 | 29 |
30 | 32 |
33 | 34 |
35 | 37 |
38 | 39 | 40 |
41 |
42 |
43 | ) 44 | } 45 | 46 | export default Contact -------------------------------------------------------------------------------- /src/components/testimonials/testimonials.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .testimonials__container{ 4 | max-width: 700px; 5 | margin: auto; 6 | } 7 | 8 | .testimonial__item{ 9 | text-align: center; 10 | padding: 0 1.25rem 1.25rem; 11 | } 12 | 13 | .thumb{ 14 | height: 17.6rem; 15 | width: 17.6rem; 16 | margin: 0 auto; 17 | } 18 | 19 | .thumb__img{ 20 | height: 17.6rem; 21 | width: 17.6rem; 22 | 23 | 24 | } 25 | 26 | .testimonials__title{ 27 | margin-top: 0.75rem; 28 | } 29 | 30 | .subtitle{ 31 | color: #8b88b1; 32 | font-size: var(--small-font-size); 33 | } 34 | 35 | .comment{ 36 | position: relative; 37 | background-color: var(--container-color); 38 | padding: 1.875rem; 39 | margin-top: 1.5rem; 40 | box-shadow: var(--shadow); 41 | border-radius: var(--border-radius); 42 | margin-bottom: 3rem; 43 | } 44 | 45 | .comment::before{ 46 | content: ""; 47 | position: absolute; 48 | left: 49.5%; 49 | top: -0.625rem; 50 | width: 0; 51 | height: 0; 52 | border-left: 10px solid transparent; 53 | border-right: 10px solid transparent; 54 | border-bottom: 10px solid var(--container-color); 55 | transform: translateY(-7.5px); 56 | 57 | } 58 | 59 | .swiper-pagination-bullet{ 60 | width: 0.5rem !important; 61 | height: 0.375rem !important; 62 | background-color: var(--first-color) !important; 63 | opacity: 1; 64 | } 65 | 66 | .swiper-pagination-horizontal.swoper-pagination-bullets .swiper-pagination-bullet{ 67 | margin: 0 0.2rem !important; 68 | } 69 | 70 | .swiper-pagination-bullet-active{ 71 | width: 1.2rem !important; 72 | height: 0.375rem !important; 73 | border-radius: 0.5rem !important; 74 | } -------------------------------------------------------------------------------- /src/components/resume/Data.jsx: -------------------------------------------------------------------------------- 1 | 2 | const Data = [ 3 | { 4 | id: 1, 5 | category: "education", 6 | icon: "icon-graduation", 7 | year: "2019 - present", 8 | title: "Academic Degree", 9 | desc: "Lorem ipsum dolor sit amet quo ei simul congue exerci ad nec admodum perfecto.", 10 | }, 11 | { 12 | id: 2, 13 | category: "education", 14 | icon: "icon-graduation", 15 | year: "2013 - 2017", 16 | title: "Bachelor's Degree", 17 | desc: "Lorem ipsum dolor sit amet quo ei simul congue exerci ad nec admodum perfecto.", 18 | }, 19 | { 20 | id: 3, 21 | category: "education", 22 | icon: "icon-graduation", 23 | year: "2009 - 2013", 24 | title: "Honours Degree", 25 | desc: "Lorem ipsum dolor sit amet quo ei simul congue exerci ad nec admodum perfecto.", 26 | }, 27 | { 28 | id: 4, 29 | category: "experience", 30 | icon: "icon-briefcase", 31 | year: "2019 - present", 32 | title: "Web Designer", 33 | desc: "Lorem ipsum dolor sit amet quo ei simul congue exerci ad nec admodum perfecto.", 34 | }, 35 | { 36 | id: 5, 37 | category: "experience", 38 | icon: "icon-briefcase", 39 | year: "2013 - 2017", 40 | title: "Front-End Developer", 41 | desc: "Lorem ipsum dolor sit amet quo ei simul congue exerci ad nec admodum perfecto.", 42 | }, 43 | { 44 | id: 6, 45 | category: "experience", 46 | icon: "icon-briefcase", 47 | year: "2009 - 2013", 48 | title: "Back-End Developer", 49 | desc: "Lorem ipsum dolor sit amet quo ei simul congue exerci ad nec admodum perfecto.", 50 | }, 51 | ]; 52 | 53 | export default Data 54 | -------------------------------------------------------------------------------- /src/components/services/services.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .services__container{ 4 | grid-template-columns: repeat(3, 1fr); 5 | column-gap: 1.875rem; 6 | 7 | } 8 | 9 | .services__card{ 10 | text-align: center; 11 | padding: 1.875rem; 12 | border-radius: var(--border-radius); 13 | background-color: var(--container-color); 14 | transition: all .3s ease-in-out; 15 | } 16 | 17 | .services__card:hover{ 18 | transform: translateY(-10px); 19 | } 20 | 21 | .services__card:nth-child(1){ 22 | background-color: rgb(108, 108, 229); 23 | box-shadow: 0px 5px 20px 0px rgb(108, 108, 229 / 50%); 24 | } 25 | 26 | .services__card:nth-child(2){ 27 | background-color: rgb(249, 215, 76); 28 | box-shadow: 0px 5px 20px 0px rgb(249, 215, 76 / 50%); 29 | } 30 | 31 | .services__card:nth-child(3){ 32 | background-color: rgb(249, 123, 139); 33 | box-shadow: 0px 5px 20px 0px rgb(249, 123, 139 / 50%); 34 | } 35 | 36 | .services__img{ 37 | margin-bottom: 1.25rem; 38 | } 39 | 40 | .services__title{ 41 | font-size: var(--h3-font-size); 42 | margin-bottom: 1rem; 43 | color: #fff; 44 | } 45 | 46 | .services__description{ 47 | color: #f8f9fa; 48 | } 49 | 50 | .services__card:nth-child(2) .services__title{ 51 | color: var(--title-color); 52 | } 53 | 54 | .services__card:nth-child(2) .services__description{ 55 | color: var(--text-color); 56 | } 57 | 58 | @media screen and (max-width: 1024px){ 59 | .services__container{ 60 | grid-template-columns: repeat(2, 330px); 61 | justify-content: center; 62 | row-gap: 1.875rem; 63 | } 64 | } 65 | 66 | @media screen and (max-width: 768px){ 67 | .services__container{ 68 | grid-template-columns: 310px; 69 | 70 | } 71 | } -------------------------------------------------------------------------------- /src/components/blog/blog.css: -------------------------------------------------------------------------------- 1 | 2 | .blog__container{ 3 | grid-template-columns: repeat(3, 1fr); 4 | column-gap: 1.875rem; 5 | } 6 | 7 | .blog__card{ 8 | box-shadow: var(--shadow); 9 | border-radius: var(--border-radius); 10 | overflow: hidden; 11 | } 12 | 13 | .blog__thumb{ 14 | position: relative; 15 | overflow: hidden; 16 | } 17 | 18 | .blog__img{ 19 | transform: scale(1); 20 | transition: .3s; 21 | } 22 | 23 | .blog__thumb:hover .blog__img{ 24 | transform: scale(1.1); 25 | } 26 | 27 | .blog__category{ 28 | display: inline-block; 29 | position: absolute; 30 | top: 0; 31 | left: 1.25rem; 32 | padding: 0.125rem 0.5rem; 33 | color: #fff; 34 | background-color: var(--first-color); 35 | border-bottom-left-radius: 0.9375rem; 36 | border-bottom-right-radius: 0.9375rem; 37 | font-size: var(--small-font-size); 38 | transition: .3s; 39 | z-index: 1; 40 | } 41 | 42 | .blog__details{ 43 | background-color: var(--container-color); 44 | padding: 1.25rem; 45 | } 46 | 47 | .blog__title{ 48 | font-size: var(--h3-font-size); 49 | margin-bottom: 0.5rem; 50 | } 51 | 52 | .blog__meta{ 53 | display: flex; 54 | column-gap: 0.6rem; 55 | font-size: var(--small-font-size); 56 | color: #8b88b1; 57 | } 58 | 59 | .blog__dot{ 60 | font-weight: var(--font-bold); 61 | } 62 | 63 | @media screen and (max-width: 1024px){ 64 | .blog__container{ 65 | grid-template-columns: repeat(2, 330px); 66 | justify-content: center; 67 | row-gap: 1.875rem; 68 | } 69 | } 70 | 71 | @media screen and (max-width: 768px){ 72 | .blog__container{ 73 | grid-template-columns: 310px; 74 | 75 | } 76 | } 77 | 78 | @media screen and (max-width: 350px){ 79 | .blog__container{ 80 | grid-template-columns: 1fr; 81 | } 82 | } -------------------------------------------------------------------------------- /src/components/contact/contact.css: -------------------------------------------------------------------------------- 1 | 2 | .contact.section{ 3 | padding-bottom: 6.25rem; 4 | } 5 | 6 | .contact__container{ 7 | grid-template-columns: 4fr 8fr; 8 | column-gap: 1.875rem; 9 | } 10 | 11 | .contact__title{ 12 | font-size: var(--h3-font-size); 13 | margin-bottom: .5rem; 14 | } 15 | 16 | .contact__form-group{ 17 | display: grid; 18 | grid-template-columns: repeat(2, 1fr); 19 | column-gap: 1.5rem; 20 | } 21 | 22 | .contact__form-div{ 23 | position: relative; 24 | margin-bottom: 1.875rem; 25 | height: 3.75rem; 26 | } 27 | 28 | .contact__form-input{ 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | width: 100%; 33 | height: 100%; 34 | box-shadow: var(--shadow); 35 | background-color: var(--container-color); 36 | color: var(--text-color); 37 | border: none; 38 | outline: none; 39 | border-radius: 1.875rem; 40 | padding: 0.625rem; 41 | z-index: 1; 42 | 43 | } 44 | 45 | .contact__form-input::placeholder{ 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | padding-left: 1rem; 50 | } 51 | 52 | .contact__form-area{ 53 | height: 10.25rem; 54 | 55 | } 56 | 57 | .contact__form-area textarea{ 58 | resize: none; 59 | 60 | } 61 | 62 | @media screen and (max-width: 1024px){ 63 | .contact__container{ 64 | grid-template-columns: 300px 360px; 65 | justify-content: center; 66 | } 67 | 68 | .contact__form-group{ 69 | grid-template-columns: 1fr; 70 | } 71 | } 72 | 73 | @media screen and (max-width: 768px){ 74 | .contact__container{ 75 | grid-template-columns: 310px; 76 | row-gap: 1.875rem; 77 | } 78 | 79 | .contact__info{ 80 | text-align: center; 81 | } 82 | } 83 | 84 | @media screen and (max-width: 350px){ 85 | .contact__container{ 86 | grid-template-columns: 1fr; 87 | } 88 | } -------------------------------------------------------------------------------- /src/components/portfolio/Portfolio.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { useState } from "react"; 3 | import "./portfolio.css" 4 | import Menu from "./Menu"; 5 | 6 | const Portfolio = ()=>{ 7 | 8 | const [items, setItems] = useState(Menu); 9 | 10 | const filterItem = (categoryItem) =>{ 11 | const updatedItems = Menu.filter((curElem) =>{ 12 | return curElem.category === categoryItem; 13 | }) 14 | 15 | setItems(updatedItems); 16 | } 17 | 18 | 19 | return( 20 |
21 |

22 | Recent Works 23 |

24 | 25 |
26 | setItems(Menu)}>Everything 27 | filterItem("Creative")}>Creative 28 | filterItem("Art")}>Art 29 | filterItem("Design")}>Design 30 | filterItem("Branding")}>Branding 31 |
32 | 33 | 34 |
35 | {items.map((elem) =>{ 36 | const{id, image, title, category} = elem; 37 | return( 38 |
39 |
40 | 41 |
42 |
43 | 44 | {category} 45 |

{title}

46 | 47 | 48 | 49 |
50 | ) 51 | })} 52 |
53 |
54 | ) 55 | } 56 | 57 | export default Portfolio -------------------------------------------------------------------------------- /src/components/resume/resume.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .resume__container{ 4 | grid-template-columns: repeat(2, 1fr); 5 | column-gap: 1.875rem; 6 | } 7 | 8 | .timeline{ 9 | position: relative; 10 | background-color: var(--container-color); 11 | padding: 1.875rem; 12 | border-radius: var(--border-radius); 13 | box-shadow: var(--shadow); 14 | } 15 | 16 | .timeline__item{ 17 | position: relative; 18 | padding-left: 3.125rem; 19 | padding-bottom: 3.125rem; 20 | } 21 | 22 | .timeline__item:last-child{ 23 | padding-bottom: 0; 24 | } 25 | 26 | .timeline__item::before{ 27 | content: ''; 28 | width: 1px; 29 | height: 100%; 30 | background-color: var(--first-color); 31 | position: absolute; 32 | left: .25rem; 33 | top: 0; 34 | } 35 | 36 | .timeline .icon-briefcase, 37 | .timeline .icon-graduation{ 38 | position: absolute; 39 | left: -0.4375rem; 40 | top: 0; 41 | font-size: var(--h2-font-size); 42 | color: var(--first-color); 43 | background-color: var(--container-color); 44 | padding: 0.4375rem 0; 45 | } 46 | 47 | .timeline__date{ 48 | color: #8b88b1; 49 | font-size: var(--small-font-size); 50 | } 51 | 52 | .timeline__title{ 53 | font-size: var(--h3-font-size); 54 | margin: 0.5rem 0; 55 | } 56 | 57 | @media screen and (max-width: 1024px){ 58 | .resume__container{ 59 | grid-template-columns: 450px; 60 | justify-content: center; 61 | row-gap: 1.875rem; 62 | } 63 | 64 | .timeline__item::before{ 65 | left: 2px; 66 | } 67 | } 68 | 69 | @media screen and (max-width: 576px){ 70 | .resume__container{ 71 | grid-template-columns: 1fr; 72 | 73 | } 74 | } 75 | 76 | @media screen and (max-width: 350px){ 77 | .timeline__item{ 78 | padding-left: 1.875rem; 79 | padding-bottom: 1.875rem; 80 | } 81 | 82 | .timeline__item::before{ 83 | left: 0; 84 | } 85 | 86 | .timeline .icon-briefcase, 87 | .timeline .icon-graduation{ 88 | left: -9px; 89 | } 90 | 91 | .timeline__text{ 92 | text-align: justify; 93 | } 94 | } -------------------------------------------------------------------------------- /src/components/pricing/Pricing.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from "react"; 3 | import "./pricing.css" 4 | import Image1 from "../../assets/price-1.svg" 5 | import Image2 from "../../assets/price-2.svg" 6 | import Image3 from "../../assets/price-3.svg" 7 | 8 | const Pricing = ()=>{ 9 | return( 10 |
11 |

12 | Pricing Plans 13 |

14 | 15 |
16 |
17 | 18 |

Basic

19 |

A Simple option but powerful to manage your business

20 |

Email support

21 |

22 | $ 9 Month 23 |

24 | Get Started 25 |
26 | 27 |
28 | Recommended 29 | 30 |

Premium

31 |

Unlimited product including app integration and more features

32 |

Mon-Fri support

33 |

34 | $ 15 Month 35 |

36 | Get Started 37 |
38 | 39 |
40 | 41 |

Ultimate

42 |

A wise option for large companies and individuals

43 |

24/7 support

44 |

45 | $ 19 Month 46 |

47 | Get Started 48 |
49 |
50 |
51 | ) 52 | } 53 | 54 | export default Pricing -------------------------------------------------------------------------------- /src/components/pricing/pricing.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .pricing__container{ 4 | grid-template-columns: repeat(3, 1fr); 5 | align-items: center; 6 | } 7 | 8 | .pricing__item{ 9 | padding: 1.875rem 2.5rem; 10 | background-color: var(--container-color); 11 | text-align: center; 12 | border-radius: var(--border-radius); 13 | box-shadow: var(--shadow); 14 | } 15 | 16 | .pricing__plan{ 17 | margin: 1.25rem 0; 18 | font-size: var(--h2-font-size); 19 | } 20 | 21 | .pricing__title, 22 | .pricing__support{ 23 | margin-bottom: 1rem; 24 | } 25 | 26 | .price{ 27 | font-size: var(--h1-font-size); 28 | font-weight: var(--font-bold); 29 | } 30 | 31 | .price em{ 32 | font-style: normal; 33 | font-size: var(--small-font-size); 34 | margin-right: 0.5rem; 35 | vertical-align: super; 36 | } 37 | 38 | .price span{ 39 | font-size: var(--normal-font-size); 40 | font-weight: 400; 41 | margin-left: 0.75rem; 42 | } 43 | 44 | .pricing__item .btn{ 45 | margin-top: 1.25rem; 46 | } 47 | 48 | .pricing__item.best{ 49 | position: relative; 50 | padding: 3.4rem 2.5rem; 51 | z-index: 1; 52 | } 53 | 54 | .badge{ 55 | position: absolute; 56 | left: 0; 57 | top: 2.6rem; 58 | color: #fff; 59 | background-color: #6c6ce5; 60 | transform: rotate(-90deg); 61 | padding: .25rem .75rem; 62 | font-size: var(--small-font-size); 63 | border-top-left-radius: var(--border-radius); 64 | border-bottom-left-radius: var(--border-radius); 65 | border-top-right-radius: 0; 66 | border-bottom-right-radius: 0; 67 | } 68 | 69 | @media screen and (max-width: 1024px){ 70 | .pricing__container{ 71 | grid-template-columns: repeat(2, 330px); 72 | justify-content: center; 73 | gap: 1.875rem; 74 | } 75 | 76 | .pricing__item.best{ 77 | padding: 1.875rem 2.5rem; 78 | } 79 | } 80 | 81 | @media screen and (max-width: 768px){ 82 | .pricing__container{ 83 | grid-template-columns: 310px; 84 | 85 | } 86 | } 87 | 88 | @media screen and (max-width: 350px){ 89 | .pricing__container{ 90 | grid-template-columns: 1fr; 91 | } 92 | } -------------------------------------------------------------------------------- /src/components/services/Services.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from "react"; 4 | import "./services.css" 5 | import Image1 from "../../assets/service-1.svg"; 6 | import Image2 from "../../assets/service-2.svg"; 7 | import Image3 from "../../assets/service-3.svg"; 8 | 9 | const data = [ 10 | { 11 | id: 1, 12 | image: Image1, 13 | title: "UI/UX design", 14 | description: 15 | "Engaging user interfaces that are both functional and aesthetically pleasing. Leveraging React's capabilities to ensure components are reusable, maintainable, and optimized for performance, enhancing the overall user experience.", 16 | }, 17 | { 18 | id: 2, 19 | image: Image2, 20 | title: "Web Development", 21 | description: 22 | "Adepting at both front-end and back-end technologies, ensuring robust, scalable, and secure websites or applications. Possessing a keen eye for design, strong problem-solving skills, and a commitment to staying updated with the latest web development trends and practices.", 23 | }, 24 | { 25 | id: 3, 26 | image: Image3, 27 | title: "Photography", 28 | description: 29 | "Having an exceptional eye for detail, composition, and light, capturing moments that tell a story or evoke emotion. Mastering both the technical aspects of photography and the creative process, whether working with digital or analog techniques.", 30 | }, 31 | ]; 32 | 33 | const Services = ()=>{ 34 | return
35 |

Services

36 | 37 |
38 | {data.map(({id, image, title, description}) =>{ 39 | return( 40 |
41 | 42 | 43 |

{title}

44 |

{description}

45 |
46 | ) 47 | })} 48 |
49 | 50 |
51 | } 52 | 53 | export default Services -------------------------------------------------------------------------------- /src/components/about/About.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from "react"; 3 | import "./about.css" 4 | import avatar2 from "../../assets/pfp-2.webp"; 5 | import AboutBox from "./AboutBox"; 6 | 7 | const About = ()=>{ 8 | return( 9 |
10 |

About Me

11 | 12 |
13 | Misha Kaiser 14 | 15 | 16 |
17 |
18 |

I'm a software engineer that admires beautiful design and delicious coffee ☕ Trying my best to keep it elegant and useful.

19 | Download CV 20 |
21 | 22 |
23 |
24 |
25 |

Development

26 | 95% 27 |
28 | 29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 |

UI/UX design

37 | 80% 38 |
39 | 40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 |

Photography

48 | 70% 49 |
50 | 51 |
52 | 53 |
54 |
55 |
56 |
57 | 58 |
59 | 60 | 61 |
62 | ) 63 | } 64 | 65 | export default About -------------------------------------------------------------------------------- /src/components/testimonials/Testimonials.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from "react"; 4 | import "./testimonials.css"; 5 | import Image1 from "../../assets/frank.webp"; 6 | import Image3 from "../../assets/yarman.webp"; 7 | 8 | import {Pagination} from 'swiper/modules'; 9 | 10 | import { Swiper, SwiperSlide } from 'swiper/react'; 11 | 12 | import 'swiper/css'; 13 | import 'swiper/css/pagination'; 14 | 15 | 16 | const data = [ 17 | { 18 | id: 1, 19 | image: Image3, 20 | title: "Yarman", 21 | subtitle: "Executive director at Good Drivers Company", 22 | comment: 23 | "I enjoy working with the theme and learn so much. You guys make the process fun and interesting. Good luck! 👍", 24 | }, 25 | { 26 | id: 2, 27 | image: Image1, 28 | title: "Frank MacDonald", 29 | subtitle: "Product manager at Amazon", 30 | comment: 31 | "I'm a big fan of this team. Y'all the best. Keep it up, folks. The project we've done together is top notch even for FFANG 👍", 32 | }, 33 | ]; 34 | 35 | const Testimonials = ()=>{ 36 | return( 37 |
38 |

Clients & Reviews

39 | 40 | 48 | {data.map(({id, image, title, subtitle, comment}) =>{ 49 | return( 50 | 51 |
52 | 53 |
54 | 55 |

56 | {title} 57 |

58 | 59 | {subtitle} 60 | 61 |
62 | {comment} 63 |
64 | 65 | ) 66 | })} 67 | 68 | 69 | 70 |
71 | ) 72 | } 73 | 74 | export default Testimonials -------------------------------------------------------------------------------- /src/components/sidebar/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { useState } from "react"; 3 | import "./sidebar.css" 4 | import Logo from "../../assets/logo.svg" 5 | 6 | const Sidebar = ()=>{ 7 | const [toggle, showMenu] = useState(false); 8 | return( 9 | <> 10 | 69 | 70 | 71 |
showMenu(!toggle)}> 72 | 73 |
74 | 75 | ) 76 | } 77 | 78 | export default Sidebar 79 | -------------------------------------------------------------------------------- /src/components/blog/Blog.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./blog.css" 3 | import Image1 from "../../assets/blog-1.svg"; 4 | import Image2 from "../../assets/blog-2.svg"; 5 | import Image3 from "../../assets/blog-3.svg"; 6 | 7 | const Blog = ()=>{ 8 | return( 9 |
10 |

Latest Posts

11 |
12 |
13 |
14 | Reviews 15 | 16 |
17 |
18 |

5 Best App Development Tool for Your Projects

19 |
20 | 09 February, 2022 21 | . 22 | Bolby 23 |
24 |
25 |
26 | 27 |
28 |
29 | Tutorial 30 | 31 |
32 |
33 |

Common Misconceptions About Payment

34 |
35 | 07 February, 2022 36 | . 37 | Bolby 38 |
39 |
40 |
41 | 42 |
43 |
44 | Business 45 | 46 |
47 |
48 |

3 Things to know about startup business

49 |
50 | 05 February, 2022 51 | . 52 | Bolby 53 |
54 |
55 |
56 |
57 | 58 | 59 |
60 | ) 61 | } 62 | 63 | export default Blog -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | B 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/dots-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | dots-bg 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/portfolio/portfolio.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .work__filters{ 4 | display: flex; 5 | flex-wrap: wrap; 6 | align-items: center; 7 | column-gap: 1.875rem; 8 | margin-bottom: 2.5rem; 9 | } 10 | 11 | .work__item{ 12 | cursor: pointer; 13 | font-weight: var(--font-bold); 14 | } 15 | 16 | .work__item:hover{ 17 | color: var(--first-color); 18 | transition: all .3s ease; 19 | } 20 | 21 | .work__container{ 22 | grid-template-columns: repeat(3, 1fr); 23 | gap: 1.875rem; 24 | } 25 | 26 | .work__card{ 27 | position: relative; 28 | overflow: hidden; 29 | border-radius: var(--border-radius); 30 | box-shadow: var(--shadow); 31 | } 32 | 33 | .work__mask{ 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | height: 100%; 38 | width: 100%; 39 | background: #6c6ce5; 40 | transition: .3s; 41 | opacity: 0; 42 | } 43 | 44 | .work__card:hover .work__mask{ 45 | opacity: 0.9; 46 | } 47 | 48 | .work__category{ 49 | display: inline-block; 50 | position: absolute; 51 | top: 0; 52 | left: 1.5rem; 53 | padding: 0.19rem 0.625rem; 54 | color: #fff; 55 | background-color: var(--first-color); 56 | border-bottom-left-radius: 0.98rem; 57 | border-bottom-right-radius: 0.98rem; 58 | font-size: var(--small-font-size); 59 | transform: translateY(-40px); 60 | transition: .3s; 61 | } 62 | 63 | .work__title{ 64 | position: absolute; 65 | top: 3.75rem; 66 | color: #fff; 67 | font-size: var(--h3-font-size); 68 | margin: 0 0 0.98rem; 69 | padding: 0 1.25rem; 70 | transform: translateY(30px); 71 | transition: .3s; 72 | opacity: 0; 73 | } 74 | 75 | .work__button{ 76 | display: block; 77 | position: absolute; 78 | bottom: 1.5rem; 79 | left: 1.5rem; 80 | color: #fff; 81 | font-size: var(--h3-font-size); 82 | background-color: #ffd15c; 83 | height: 40px; 84 | width: 40px; 85 | cursor: pointer; 86 | border-radius: 50%; 87 | text-align: center; 88 | line-height: 42px; 89 | transition: .3s; 90 | opacity: 0; 91 | } 92 | 93 | .work__card:hover .work__button{ 94 | opacity: 1; 95 | } 96 | 97 | .work__card:hover .work__title, 98 | .work__card:hover .work__category{ 99 | opacity: 1; 100 | transform: translateY(0); 101 | } 102 | 103 | @media screen and (max-width: 1024px){ 104 | .work__filters{ 105 | justify-content: center; 106 | } 107 | .work__container{ 108 | grid-template-columns: repeat(2, 330px); 109 | justify-content: center; 110 | row-gap: 1.875rem; 111 | } 112 | } 113 | 114 | @media screen and (max-width: 768px){ 115 | .work__container{ 116 | grid-template-columns: 310px; 117 | 118 | } 119 | 120 | .work__filters{ 121 | row-gap: .25rem; 122 | } 123 | } 124 | 125 | @media screen and (max-width: 350px){ 126 | .portfolio__container{ 127 | grid-template-columns: 1fr; 128 | } 129 | } -------------------------------------------------------------------------------- /src/components/home/home.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .home{ 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | position: relative; 8 | min-height: 100vh; 9 | } 10 | 11 | .intro{ 12 | max-width: 540px; 13 | text-align: center; 14 | z-index: 1; 15 | } 16 | 17 | .home__img{ 18 | margin-bottom: 1.5rem; 19 | height: 250px; 20 | } 21 | 22 | .home__name{ 23 | font-size: var(--h1-font-size); 24 | font-weight: var(--font-bold); 25 | margin-bottom: 0.5rem; 26 | } 27 | 28 | .home__socials{ 29 | display: flex; 30 | justify-content: center; 31 | column-gap: 1.75rem; 32 | margin: 1.5rem 0; 33 | } 34 | 35 | .home__social-link{ 36 | color: var(--title-color); 37 | font-size: 1.3rem; 38 | transition: ease .3s; 39 | } 40 | 41 | .home__social-link:hover{ 42 | color: hsl(43, 100%, 68%); 43 | } 44 | 45 | .scroll__down{ 46 | position: absolute; 47 | bottom: 2.5rem; 48 | left: 0; 49 | width: 100%; 50 | } 51 | 52 | .home__scroll-name{ 53 | font-size: var(--small-font-size); 54 | color: var(--title-color); 55 | text-decoration: none; 56 | } 57 | 58 | .mouse{ 59 | display: block; 60 | position: relative; 61 | border: 2px solid #454360; 62 | height: 1.6rem; 63 | width: 1.25rem; 64 | margin: auto; 65 | margin-top: .75rem; 66 | border-radius: 1rem; 67 | } 68 | 69 | @keyframes ani-mouse{ 70 | 0%{ 71 | top: 29%; 72 | } 73 | 74 | 15%{ 75 | top: 50%; 76 | } 77 | 78 | 50%{ 79 | top: 50%; 80 | } 81 | 82 | 100%{ 83 | top: 29%; 84 | } 85 | } 86 | 87 | .wheel{ 88 | position: absolute; 89 | top: 0.5rem; 90 | left: 50%; 91 | background-color: var(--title-color); 92 | border-radius: 100%; 93 | width: 0.25rem; 94 | height: 0.25rem; 95 | transform: translateX(-50%); 96 | animation: ani-mouse 2s linear infinite; 97 | } 98 | 99 | .shapes{ 100 | position: absolute; 101 | left: 0; 102 | top: 0; 103 | height: 100%; 104 | width: 100%; 105 | z-index: -9; 106 | } 107 | 108 | .shape{ 109 | position: absolute; 110 | } 111 | 112 | .s1{ 113 | left: 2%; 114 | top: 10%; 115 | } 116 | 117 | .s2{ 118 | left: 18%; 119 | top: 30%; 120 | } 121 | 122 | .s3{ 123 | left: 5%; 124 | bottom: 30%; 125 | } 126 | 127 | .s4{ 128 | left: 2%; 129 | bottom: 10%; 130 | } 131 | 132 | .s5{ 133 | left: 44%; 134 | top: 10%; 135 | } 136 | 137 | .s6{ 138 | left: 36%; 139 | bottom: 10%; 140 | } 141 | 142 | .s7{ 143 | top: 20%; 144 | right: 25%; 145 | } 146 | 147 | .s8{ 148 | right: 24%; 149 | bottom: 20%; 150 | } 151 | 152 | .s9{ 153 | right: 2%; 154 | top: 10%; 155 | } 156 | 157 | .s10{ 158 | top: 45%; 159 | right: 11%; 160 | } 161 | 162 | .s11{ 163 | bottom: 10%; 164 | right: 2%; 165 | } 166 | 167 | 168 | 169 | @media screen and (max-width: 1024px){ 170 | .home__social-link { 171 | font-size: 1.125rem; 172 | } 173 | } -------------------------------------------------------------------------------- /src/components/about/about.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .about__container{ 4 | grid-template-columns: 3fr 9fr; 5 | column-gap: 1.875rem; 6 | 7 | margin-left: var(--indention); 8 | } 9 | 10 | .about__data{ 11 | padding: 1.875rem; 12 | background-color: var(--container--color); 13 | box-shadow: var(--shadow); 14 | border-radius: var(--border-radius); 15 | grid-template-columns: repeat(2, 1fr); 16 | column-gap: 1.875rem; 17 | align-items: flex-start; 18 | position: relative; 19 | 20 | margin-right: 6rem; 21 | } 22 | 23 | .about__data::before{ 24 | content: ''; 25 | width: 0; 26 | height: 0; 27 | border-top: 10px solid transparent; 28 | border-bottom: 10px solid transparent; 29 | border-right: 15px solid var(--container--color); 30 | left: -0.93rem; 31 | top: 20%; 32 | position: absolute; 33 | } 34 | 35 | .about__description{ 36 | margin-bottom: 1rem; 37 | text-align: justify; 38 | } 39 | 40 | .about__skills{ 41 | row-gap: 1.25rem; 42 | } 43 | 44 | .skills_titles{ 45 | display: flex; 46 | justify-content: space-between; 47 | margin-bottom: 1rem; 48 | } 49 | 50 | .skills__name{ 51 | font-size: var(--normal-font-size); 52 | font-weight: var(--font-medium); 53 | } 54 | 55 | .skills__number{ 56 | line-height: 1.2; 57 | } 58 | 59 | .skills__bar, 60 | .skills__percentage{ 61 | height: 7px; 62 | border-radius: 0.25rem; 63 | } 64 | 65 | .skills__bar{ 66 | background-color: #f1f1f1; 67 | } 68 | 69 | .skills__percentage{ 70 | display: block; 71 | } 72 | 73 | .development{ 74 | width: 95%; 75 | background-color: rgb(255, 209, 92); 76 | } 77 | 78 | .ui__design{ 79 | width: 80%; 80 | background-color: rgb(255, 76, 96); 81 | } 82 | 83 | .photography{ 84 | width: 70%; 85 | background-color: rgb(108, 108, 299); 86 | } 87 | 88 | .about__boxes{ 89 | grid-template-columns: repeat(4, 1fr); 90 | column-gap: 1.875rem; 91 | margin-top: 4.35rem; 92 | 93 | 94 | margin-left: var(--indention); 95 | 96 | } 97 | 98 | .about__box{ 99 | display: flex; 100 | column-gap: 1.5rem; 101 | } 102 | 103 | .about__icon{ 104 | font-size: var(--h1-font-size); 105 | color: #dedeea; 106 | } 107 | 108 | .about__title{ 109 | font-size: 1.875rem; 110 | } 111 | 112 | @media screen and (max-width: 1024px){ 113 | .about__container{ 114 | grid-template-columns: 720px; 115 | justify-content: center; 116 | row-gap: 1.875rem; 117 | } 118 | 119 | .about__data::before{ 120 | border-left: 10px solid transparent; 121 | border-right: 10px solid transparent; 122 | border-bottom: 10px solid #fff; 123 | left: 49%; 124 | top: -20px; 125 | } 126 | 127 | .about__img{ 128 | justify-self: center; 129 | height: 200px; 130 | } 131 | 132 | .about__box{ 133 | flex-direction: column; 134 | text-align: center; 135 | row-gap: .5rem; 136 | } 137 | } 138 | 139 | @media screen and (max-width: 768px){ 140 | .about__container{ 141 | grid-template-columns: 350px; 142 | } 143 | 144 | .about__data::before{ 145 | left: 47%; 146 | } 147 | 148 | .about__data{ 149 | grid-template-columns: 1fr; 150 | row-gap: 1.875rem; 151 | } 152 | 153 | .about__boxes{ 154 | grid-template-columns: repeat(2, 150px); 155 | row-gap: 1.5rem; 156 | justify-content: center; 157 | } 158 | } 159 | 160 | @media screen and (max-width: 576px){ 161 | .about__container{ 162 | grid-template-columns: 320px; 163 | } 164 | } 165 | 166 | @media screen and (max-width: 350px){ 167 | .about__container{ 168 | grid-template-columns: 1fr; 169 | } 170 | 171 | .about__boxes{ 172 | grid-template-columns: 1fr; 173 | } 174 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | 2 | /* ----- Google Fonts ------ */ 3 | 4 | @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); 5 | 6 | /* ----- Variables CSS ------ */ 7 | 8 | :root{ 9 | 10 | /* ----- Colors ------ */ 11 | 12 | /* ----- HSL (hue, saturation, lightness ------ */ 13 | --first-color: hsl(353, 100%, 65%); 14 | --title-color: hsl(244, 24%, 26%); 15 | --text-color: hsl(244, 16%, 43%); 16 | --body-color: hsl(258, 60%, 98%); 17 | --container-color: #fff; 18 | 19 | /* ----- Font and Typography ------ */ 20 | /* .5rem = 8px | 1rem = 16px */ 21 | --body-font: 'Rubik', sans-serif; 22 | --h1-font-size: 2.25rem; 23 | --h2-font-size: 1.5rem; 24 | --h3-font-size: 1.25rem; 25 | --normal-font-size: 1rem; 26 | --small-font-size: .875rem; 27 | --smaller-font-size: .813rem; 28 | 29 | /* ----- Font and Typography ------ */ 30 | --font-medium: 500; 31 | --font-semibold: 600; 32 | --font-bold: 700; 33 | 34 | /* ----- Box Shadow ------ */ 35 | --shadow: 0 5px 20px 0 rgb(69 67 96 /10%); 36 | 37 | /* ----- Box Shadow ------ */ 38 | --border-radius: 20px; 39 | 40 | } 41 | 42 | /* Responsive Typography */ 43 | @media (max-width: 1024px) { 44 | :root{ 45 | --h1-font-size: 1.75rem; 46 | --h2-font-size: 1.25rem; 47 | --h3-font-size: 1rem; 48 | --normal-font-size: 0.938rem; 49 | --small-font-size: .813rem; 50 | --smaller-font-size: .75rem; 51 | } 52 | } 53 | 54 | 55 | /* ----- Base ------ */ 56 | 57 | *{ 58 | margin: 0; 59 | padding: 0; 60 | box-sizing: border-box; 61 | } 62 | 63 | html{ 64 | scroll-behavior: smooth; 65 | } 66 | 67 | body, 68 | button, 69 | input, 70 | textarea { 71 | font-family: var(--body-font); 72 | font-size: var(--normal-font-size); 73 | } 74 | 75 | body{ 76 | background-color: var(--body-color); 77 | line-height: 1.7; 78 | color: var(--text-color); 79 | } 80 | 81 | h1, h2, h3 { 82 | color: var(--title-color); 83 | font-weight: var(--font-semibold); 84 | line-height: 1.2; 85 | } 86 | 87 | ul{ 88 | list-style: none; 89 | } 90 | 91 | a{ 92 | text-decoration: none; 93 | } 94 | 95 | button{ 96 | cursor: pointer; 97 | border: none; 98 | outline: none; 99 | } 100 | 101 | img{ 102 | max-width: 100%; 103 | height: auto; 104 | vertical-align: middle; 105 | } 106 | 107 | /* ----- Resuable CSS Classes ------ */ 108 | 109 | .container{ 110 | max-width: 1080px; 111 | padding-left: 15px; 112 | padding-right: 15px; 113 | margin: 0 auto; 114 | } 115 | 116 | .grid{ 117 | display: grid; 118 | } 119 | 120 | .section{ 121 | padding-top: 7rem; 122 | padding-bottom: 2rem; 123 | } 124 | 125 | .section__title{ 126 | font-size: var(--h1-font-size); 127 | margin-left: 0.875rem; 128 | font-weight: var(--font-bold); 129 | position: relative; 130 | margin-bottom: 3.75rem; 131 | } 132 | 133 | .section__title::before{ 134 | content: ''; 135 | background: url(./assets/dots-bg.svg); 136 | height: 2.25rem; 137 | width: 2.25rem; 138 | position: absolute; 139 | top: -0.875rem; 140 | left: -0.875rem; 141 | } 142 | 143 | .btn{ 144 | display: inline-block; 145 | padding: 0.75rem 2rem; 146 | line-height: 1; 147 | border-radius: 1.875rem; 148 | box-shadow: 0 0 1px rgb(0 0 0 /0%); 149 | border: 1px solid transparent; 150 | color: #fff; 151 | background-color: var(--first-color); 152 | font-weight: var(--font-bold); 153 | } 154 | 155 | @keyframes button-push{ 156 | 50%{ 157 | transform: scale(0.8); 158 | } 159 | 100%{ 160 | transform: scale(1); 161 | } 162 | } 163 | 164 | .btn:hover{ 165 | animation: button-push 0.3s linear 1; 166 | } -------------------------------------------------------------------------------- /src/assets/price-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | package 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/assets/price-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | startup 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/assets/service-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | web-programming 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/home/Shapes.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | 4 | const Shapes = () => { 5 | return ( 6 |
7 | 13 | 18 | 19 | 20 | 26 | 33 | 34 | 35 | 41 | 46 | 47 | 48 | 54 | 63 | 64 | 65 | 71 | 80 | 81 | 82 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 100 | 107 | 108 | 109 | 115 | 124 | 125 | 126 | 132 | 137 | 138 | 139 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 157 | 162 | 163 |
164 | ) 165 | } 166 | 167 | export default Shapes 168 | -------------------------------------------------------------------------------- /src/assets/price-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | idea 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/assets/service-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | camera 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/assets/work-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/assets/work-5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/assets/work-6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /src/assets/service-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | paint-palette 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/assets/work-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 1 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /src/assets/avatar-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | --------------------------------------------------------------------------------