I Know that Good Design
means Good Business
22 |
23 |
24 | {abouts.map((about, index) => (
25 |
32 | })
33 |
36 | ))}
37 |
38 |
39 | );
40 | };
41 |
42 | export default AppWrap(
43 | MotionWrap(About, 'app__about'),
44 | 'about',
45 | 'app__whitebg',
46 | );
47 |
--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { HiMenuAlt4, HiX } from 'react-icons/hi';
3 | import { motion } from 'framer-motion';
4 |
5 | import { images } from '../../constants';
6 | import './Navbar.scss';
7 |
8 | const Navbar = () => {
9 | const [toggle, setToggle] = useState(false);
10 |
11 | return (
12 |
47 | );
48 | };
49 |
50 | export default Navbar;
51 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es2021: true,
5 | },
6 | extends: [
7 | 'plugin:react/recommended',
8 | 'airbnb',
9 | ],
10 | parserOptions: {
11 | ecmaFeatures: {
12 | jsx: true,
13 | },
14 | ecmaVersion: 12,
15 | sourceType: 'module',
16 | },
17 | plugins: [
18 | 'react',
19 | ],
20 | rules: {
21 | 'react/function-component-definition': 0,
22 | 'import/extensions': 0,
23 | 'react/prop-types': 0,
24 | 'linebreak-style': 0,
25 | 'react/state-in-constructor': 0,
26 | 'import/prefer-default-export': 0,
27 | 'max-len': [
28 | 2,
29 | 550,
30 | ],
31 | 'no-multiple-empty-lines': [
32 | 'error',
33 | {
34 | max: 1,
35 | maxEOF: 1,
36 | },
37 | ],
38 | 'no-underscore-dangle': [
39 | 'error',
40 | {
41 | allow: [
42 | '_d',
43 | '_dh',
44 | '_h',
45 | '_id',
46 | '_m',
47 | '_n',
48 | '_t',
49 | '_text',
50 | ],
51 | },
52 | ],
53 | 'object-curly-newline': 0,
54 | 'react/jsx-filename-extension': 0,
55 | 'react/jsx-one-expression-per-line': 0,
56 | 'jsx-a11y/click-events-have-key-events': 0,
57 | 'jsx-a11y/alt-text': 0,
58 | 'jsx-a11y/no-autofocus': 0,
59 | 'jsx-a11y/no-static-element-interactions': 0,
60 | 'react/no-array-index-key': 0,
61 | 'jsx-a11y/anchor-is-valid': [
62 | 'error',
63 | {
64 | components: [
65 | 'Link',
66 | ],
67 | specialLink: [
68 | 'to',
69 | 'hrefLeft',
70 | 'hrefRight',
71 | ],
72 | aspects: [
73 | 'noHref',
74 | 'invalidHref',
75 | 'preferButton',
76 | ],
77 | },
78 | ],
79 | },
80 | };
81 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
33 | {about.title}
34 |{about.description}
35 |
21 |
26 |
41 |
42 |
47 | 
48 |
56 |
57 |
62 | {[images.flutter, images.redux, images.sass].map((circle, index) => (
63 |
68 |
69 | );
70 |
71 | export default AppWrap(Header, 'home');
72 |
--------------------------------------------------------------------------------
/src/container/Testimonial/Testimonial.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { HiChevronLeft, HiChevronRight } from 'react-icons/hi';
3 | import { motion } from 'framer-motion';
4 |
5 | import { AppWrap, MotionWrap } from '../../wrapper';
6 | import { urlFor, client } from '../../client';
7 | import './Testimonial.scss';
8 |
9 | const Testimonial = () => {
10 | const [currentIndex, setCurrentIndex] = useState(0);
11 | const [testimonials, setTestimonials] = useState([]);
12 | const [brands, setBrands] = useState([]);
13 |
14 | const handleClick = (index) => {
15 | setCurrentIndex(index);
16 | };
17 |
18 | useEffect(() => {
19 | const query = '*[_type == "testimonials"]';
20 | const brandsQuery = '*[_type == "brands"]';
21 |
22 | client.fetch(query).then((data) => {
23 | setTestimonials(data);
24 | });
25 |
26 | client.fetch(brandsQuery).then((data) => {
27 | setBrands(data);
28 | });
29 | }, []);
30 |
31 | return (
32 | <>
33 | {testimonials.length && (
34 | <>
35 |
27 |
40 |
28 | 👋
29 |
34 |
35 |
30 |
33 | Hello, I am
31 |Micael
32 |
36 |
39 | Web Developer
37 |Freelancer
38 |
64 | 
65 |
66 | ))}
67 |
36 | ![{testimonials[currentIndex].name}]({urlFor(testimonials[currentIndex].imgurl)})
37 |
45 |
46 |
37 |
38 |
44 | {testimonials[currentIndex].feedback}
39 |
40 |
43 | {testimonials[currentIndex].name}
41 |{testimonials[currentIndex].company}
42 |
47 |
55 |
56 | )}
57 |
58 | handleClick(currentIndex === 0 ? testimonials.length - 1 : currentIndex - 1)}>
48 |
50 |
51 | handleClick(currentIndex === testimonials.length - 1 ? 0 : currentIndex + 1)}>
52 |
54 |
59 | {brands.map((brand) => (
60 |
65 | })
66 |
67 | ))}
68 |
69 |
70 | );
71 | };
72 |
73 | export default AppWrap(
74 | MotionWrap(Testimonial, 'app__testimonial'),
75 | 'testimonial',
76 | 'app__primarybg',
77 | );
78 |
--------------------------------------------------------------------------------
/src/container/Footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { images } from '../../constants';
4 | import { AppWrap, MotionWrap } from '../../wrapper';
5 | import { client } from '../../client';
6 | import './Footer.scss';
7 |
8 | const Footer = () => {
9 | const [formData, setFormData] = useState({ name: '', email: '', message: '' });
10 | const [isFormSubmitted, setIsFormSubmitted] = useState(false);
11 | const [loading, setLoading] = useState(false);
12 |
13 | const { username, email, message } = formData;
14 |
15 | const handleChangeInput = (e) => {
16 | const { name, value } = e.target;
17 | setFormData({ ...formData, [name]: value });
18 | };
19 |
20 | const handleSubmit = () => {
21 | setLoading(true);
22 |
23 | const contact = {
24 | _type: 'contact',
25 | name: formData.username,
26 | email: formData.email,
27 | message: formData.message,
28 | };
29 |
30 | client.create(contact)
31 | .then(() => {
32 | setLoading(false);
33 | setIsFormSubmitted(true);
34 | })
35 | .catch((err) => console.log(err));
36 | };
37 |
38 | return (
39 | <>
40 |
66 | Take a coffee & chat with me
41 | 42 |
43 |
52 | {!isFormSubmitted ? (
53 |
44 | 
45 | hello@micael.com
46 |
47 |
48 | 
49 | +1 (123) 456-7890
50 |
51 |
54 |
71 | ) : (
72 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
68 |
69 |
70 |
73 |
77 | )}
78 |
79 | );
80 | };
81 |
82 | export default AppWrap(
83 | MotionWrap(Footer, 'app__footer'),
84 | 'contact',
85 | 'app__whitebg',
86 | );
87 |
--------------------------------------------------------------------------------
/src/container/Footer/Footer.scss:
--------------------------------------------------------------------------------
1 | .app__footer {
2 | flex: 1;
3 | width: 100%;
4 | flex-direction: column;
5 |
6 | @media screen and (max-width: 768px) {
7 | flex-direction: column;
8 | }
9 | }
10 |
11 | .app__footer-cards {
12 | width: 60%;
13 | display: flex;
14 | justify-content: space-evenly;
15 | align-items: center;
16 | flex-wrap: wrap;
17 | margin: 4em 2rem 2rem;
18 |
19 | .app__footer-card {
20 | min-width: 290px;
21 | display: flex;
22 | flex-direction: row;
23 | justify-content: flex-start;
24 | align-items: center;
25 |
26 | margin: 1rem 0;
27 | padding: 1rem;
28 | border-radius: 10px;
29 | cursor: pointer;
30 | background-color: #fef4f5;
31 |
32 | transition: all 0.3s ease-in-out;
33 |
34 | img {
35 | width: 40px;
36 | height: 40px;
37 | margin: 0 0.7rem;
38 | }
39 |
40 | p {
41 | font-weight: 500;
42 | }
43 | a {
44 | text-decoration: none;
45 | font-weight: 500;
46 | }
47 | &:hover {
48 | box-shadow: 0 0 25px #fef4f5;
49 | }
50 |
51 | @media screen and (max-width: 450px) {
52 | width: 100%;
53 | }
54 | }
55 |
56 | @media screen and (max-width: 768px) {
57 | width: 100%;
58 | }
59 | }
60 |
61 | .app__footer-cards .app__footer-card:last-child {
62 | background-color: #f2f7fb;
63 | }
64 |
65 | .app__footer-cards .app__footer-card:last-child:hover {
66 | box-shadow: 0 0 25px #f2f7fb;
67 | }
68 |
69 | .app__footer-form {
70 | width: 60%;
71 | flex-direction: column;
72 | margin: 1rem 2rem;
73 |
74 | div {
75 | width: 100%;
76 |
77 | margin: 0.75rem 0;
78 | border-radius: 10px;
79 | cursor: pointer;
80 | background-color: var(--primary-color);
81 |
82 | transition: all 0.3s ease-in-out;
83 |
84 | input,
85 | textarea {
86 | width: 100%;
87 | padding: 0.95rem;
88 | border: none;
89 | border-radius: 7px;
90 | background-color: var(--primary-color);
91 |
92 | font-family: var(--font-base);
93 | color: var(--secondary-color);
94 | outline: none;
95 | }
96 |
97 | textarea {
98 | height: 170px;
99 | }
100 |
101 | &:hover {
102 | box-shadow: 0 0 25px var(--primary-color);
103 | }
104 | }
105 |
106 | button {
107 | padding: 1rem 2rem;
108 | border-radius: 10px;
109 | border: none;
110 | background-color: var(--secondary-color);
111 |
112 | font-weight: 500;
113 | color: var(--white-color);
114 | outline: none;
115 | margin: 2rem 0 0 0;
116 | font-family: var(--font-base);
117 |
118 | transition: cubic-bezier(0.55, 0.085, 0.68, 0.53);
119 | cursor: pointer;
120 |
121 | &:hover {
122 | background-color: #2430af;
123 | }
124 | }
125 |
126 | @media screen and (max-width: 768px) {
127 | width: 100%;
128 | margin: 1rem 0;
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/src/container/Skills/Skills.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { motion } from 'framer-motion';
3 | import ReactTooltip from 'react-tooltip';
4 |
5 | import { AppWrap, MotionWrap } from '../../wrapper';
6 | import { urlFor, client } from '../../client';
7 | import './Skills.scss';
8 |
9 | const Skills = () => {
10 | const [experiences, setExperiences] = useState([]);
11 | const [skills, setSkills] = useState([]);
12 |
13 | useEffect(() => {
14 | const query = '*[_type == "experiences"]';
15 | const skillsQuery = '*[_type == "skills"]';
16 |
17 | client.fetch(query).then((data) => {
18 | setExperiences(data);
19 | });
20 |
21 | client.fetch(skillsQuery).then((data) => {
22 | setSkills(data);
23 | });
24 | }, []);
25 |
26 | return (
27 | <>
28 | 74 | Thank you for getting in touch! 75 |
76 |Skills & Experiences
29 | 30 |
31 |
32 | {skills.map((skill) => (
33 |
39 |
47 | ))}
48 |
49 |
87 |
88 | );
89 | };
90 |
91 | export default AppWrap(
92 | MotionWrap(Skills, 'app__skills'),
93 | 'skills',
94 | 'app__whitebg',
95 | );
96 |
--------------------------------------------------------------------------------
/src/container/Work/Work.scss:
--------------------------------------------------------------------------------
1 | .app__works {
2 | flex: 1;
3 | width: 100%;
4 | flex-direction: column;
5 | }
6 |
7 | .app__work-filter {
8 | display: flex;
9 | flex-direction: row;
10 | justify-content: flex-start;
11 | align-items: center;
12 | flex-wrap: wrap;
13 |
14 | margin: 4rem 0 2rem;
15 |
16 | .app__work-filter-item {
17 | padding: 0.5rem 1rem;
18 | border-radius: 0.5rem;
19 | background-color: #fff;
20 | color: #000;
21 | font-weight: 800;
22 |
23 | cursor: pointer;
24 | transition: all 0.3s ease;
25 | margin: 0.5rem;
26 |
27 | &:hover {
28 | background-color: var(--secondary-color);
29 | color: #fff;
30 | }
31 |
32 | @media screen and (min-width: 2000px) {
33 | padding: 1rem 2rem;
34 | border-radius: 0.85rem;
35 | }
36 | }
37 |
38 | .item-active {
39 | background-color: var(--secondary-color);
40 | color: #fff;
41 | }
42 | }
43 |
44 | .app__work-portfolio {
45 | display: flex;
46 | flex-wrap: wrap;
47 | justify-content: center;
48 | align-items: center;
49 |
50 | .app__work-item {
51 | width: 270px;
52 | flex-direction: column;
53 |
54 | margin: 2rem;
55 | padding: 1rem;
56 | border-radius: 0.5rem;
57 | background-color: #fff;
58 | color: #000;
59 |
60 | cursor: pointer;
61 | transition: all 0.3s ease;
62 |
63 | &:hover {
64 | box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
65 | }
66 |
67 | @media screen and (min-width: 2000px) {
68 | width: 470px;
69 | padding: 1.25rem;
70 | border-radius: 0.75rem;
71 | }
72 |
73 | @media screen and (max-width: 300px) {
74 | width: 100%;
75 | margin: 1rem;
76 | }
77 | }
78 | }
79 |
80 | .app__work-img {
81 | width: 100%;
82 | height: 230px;
83 |
84 | position: relative;
85 |
86 | img {
87 | width: 100%;
88 | height: 100%;
89 | border-radius: 0.5rem;
90 | object-fit: cover;
91 | }
92 |
93 | @media screen and (min-width: 2000px) {
94 | height: 350px;
95 | }
96 | }
97 |
98 | .app__work-hover {
99 | position: absolute;
100 | top: 0;
101 | left: 0;
102 | bottom: 0;
103 | right: 0;
104 | width: 100%;
105 | height: 100%;
106 | background-color: rgba(0, 0, 0, 0.5);
107 |
108 | border-radius: 0.5rem;
109 | opacity: 0;
110 | transition: all 0.3s ease;
111 |
112 | div {
113 | width: 50px;
114 | height: 50px;
115 | border-radius: 50%;
116 | background-color: rgba(0, 0, 0, 0.5);
117 | color: #fff;
118 |
119 | margin: 1rem;
120 | font-family: var(--font-base);
121 | font-weight: 800;
122 | cursor: pointer;
123 | transition: all 0.3s ease;
124 |
125 | svg {
126 | width: 50%;
127 | height: 50%;
128 | color: var(--white-color);
129 | }
130 | }
131 | }
132 |
133 | .app__work-content {
134 | padding: 0.5rem;
135 | width: 100%;
136 | position: relative;
137 | flex-direction: column;
138 |
139 | h4 {
140 | margin-top: 1rem;
141 | line-height: 1.5;
142 |
143 | @media screen and (min-width: 2000px) {
144 | margin-top: 3rem;
145 | }
146 | }
147 |
148 | .app__work-tag {
149 | position: absolute;
150 |
151 | padding: 0.5rem 1rem;
152 | border-radius: 10px;
153 | background-color: #fff;
154 | top: -25px;
155 | }
156 | }
157 |
--------------------------------------------------------------------------------
/src/container/Testimonial/Testimonial.scss:
--------------------------------------------------------------------------------
1 | .app__testimonial {
2 | flex: 1;
3 | width: 100%;
4 | flex-direction: column;
5 | }
6 |
7 | .app__testimonial-item {
8 | width: 60%;
9 | min-height: 320px;
10 | background-color: var(--white-color);
11 | display: flex;
12 | flex-direction: row;
13 | padding: 2rem;
14 | border-radius: 15px;
15 | box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
16 |
17 | transition: all 0.3s ease-in-out;
18 |
19 | img {
20 | width: 100px;
21 | height: 100px;
22 | border-radius: 50%;
23 | object-fit: cover;
24 | }
25 |
26 | @media screen and (min-width: 2000px) {
27 | min-height: 450px;
28 |
29 | img {
30 | width: 150px;
31 | height: 150px;
32 | }
33 | }
34 |
35 | @media screen and (max-width: 850px) {
36 | width: 100%;
37 | }
38 |
39 | @media screen and (max-width: 600px) {
40 | flex-direction: column;
41 | }
42 | }
43 |
44 | .app__testimonial-content {
45 | flex: 1;
46 | height: 100%;
47 | padding: 0 2rem;
48 | text-align: left;
49 |
50 | display: flex;
51 | flex-direction: column;
52 | justify-content: space-around;
53 | align-items: flex-start;
54 |
55 | p {
56 | font-size: 1.25rem;
57 | line-height: 2rem;
58 | color: var(--black-color);
59 | font-family: var(--font-base);
60 |
61 | @media screen and (min-width: 2000px) {
62 | font-size: 2rem;
63 | line-height: 3.5rem;
64 | }
65 | }
66 |
67 | h4 {
68 | font-weight: 600;
69 | color: var(--secondary-color);
70 | margin-top: 2rem;
71 | }
72 |
73 | h5 {
74 | font-weight: 400;
75 | color: var(--gray-color);
76 | margin-top: 5px;
77 | }
78 |
79 | @media screen and (max-width: 600px) {
80 | margin-top: 2rem;
81 | padding: 0;
82 | }
83 | }
84 |
85 | .app__testimonial-btns {
86 | flex-direction: row;
87 | margin-top: 1rem;
88 |
89 | div {
90 | width: 50px;
91 | height: 50px;
92 | border-radius: 50%;
93 | background-color: var(--white-color);
94 |
95 | margin: 1rem;
96 | transition: all 0.3s ease-in-out;
97 |
98 | svg {
99 | width: 20px;
100 | height: 20px;
101 | color: var(--secondary-color);
102 | }
103 |
104 | &:hover {
105 | background-color: var(--secondary-color);
106 |
107 | svg {
108 | color: var(--white-color);
109 | }
110 | }
111 |
112 | @media screen and (min-width: 2000px) {
113 | width: 100px;
114 | height: 100px;
115 |
116 | svg {
117 | width: 45px;
118 | height: 45px;
119 | }
120 | }
121 | }
122 | }
123 |
124 | .app__testimonial-brands {
125 | width: 80%;
126 | flex-wrap: wrap;
127 | margin-top: 2rem;
128 |
129 | div {
130 | width: 150px;
131 | margin: 1.5rem;
132 |
133 | img {
134 | width: 100%;
135 | height: auto;
136 | object-fit: cover;
137 | filter: grayscale(1);
138 | }
139 |
140 | &:hover {
141 | img {
142 | filter: grayscale(0);
143 | }
144 | }
145 |
146 | @media screen and (min-width: 2000px) {
147 | width: 210px;
148 | margin: 2rem;
149 | }
150 |
151 | @media screen and (max-width: 450px) {
152 | width: 120px;
153 | margin: 1rem;
154 | }
155 | }
156 |
157 | @media screen and (max-width: 800px) {
158 | width: 100%;
159 | }
160 | }
161 |
--------------------------------------------------------------------------------
/src/container/Skills/Skills.scss:
--------------------------------------------------------------------------------
1 | .app__skills {
2 | flex: 1;
3 | width: 100%;
4 | flex-direction: column;
5 | }
6 |
7 | .app__skills-container {
8 | width: 80%;
9 | margin-top: 3rem;
10 |
11 | display: flex;
12 | flex-direction: row;
13 |
14 | @media screen and (max-width: 900px) {
15 | width: 100%;
16 | flex-direction: column;
17 | }
18 | }
19 |
20 | .app__skills-list {
21 | flex: 1;
22 | display: flex;
23 | flex-wrap: wrap;
24 | justify-content: flex-start;
25 | align-items: flex-start;
26 |
27 | margin-right: 5rem;
28 |
29 | @media screen and (max-width: 900px) {
30 | margin-right: 0;
31 | justify-content: center;
32 | align-items: center;
33 | }
34 | }
35 |
36 | .app__skills-item {
37 | flex-direction: column;
38 | text-align: center;
39 |
40 | margin: 1rem;
41 |
42 | transition: all 0.3s ease-in-out;
43 |
44 | div {
45 | width: 90px;
46 | height: 90px;
47 | border-radius: 50%;
48 | background-color: #fef4f5;
49 |
50 | img {
51 | width: 50%;
52 | height: 50%;
53 | }
54 |
55 | &:hover {
56 | box-shadow: 0 0 25px #fef4f5;
57 | }
58 |
59 | @media screen and (min-width: 2000px) {
60 | width: 150px;
61 | height: 150px;
62 | }
63 |
64 | @media screen and (max-width: 450px) {
65 | width: 70px;
66 | height: 70px;
67 | }
68 | }
69 |
70 | p {
71 | font-weight: 500;
72 | margin-top: 0.5rem;
73 | }
74 |
75 | @media screen and (min-width: 2000px) {
76 | margin: 1rem 2rem;
77 |
78 | p {
79 | margin-top: 1rem;
80 | }
81 | }
82 | }
83 |
84 | .app__skills-exp {
85 | flex: 1;
86 | display: flex;
87 | justify-content: flex-start;
88 | align-items: flex-start;
89 | flex-direction: column;
90 |
91 | @media screen and (max-width: 900px) {
92 | margin-top: 2rem;
93 | }
94 | }
95 |
96 | .app__skills-exp-item {
97 | width: 100%;
98 | display: flex;
99 | flex-direction: row;
100 | justify-content: flex-start;
101 | align-items: flex-start;
102 | margin: 1rem 0;
103 | }
104 |
105 | .app__skills-exp-works {
106 | flex: 1;
107 |
108 | .app__skills-exp-work {
109 | display: flex;
110 | flex-direction: column;
111 | justify-content: flex-start;
112 | align-items: flex-start;
113 | margin-bottom: 1rem;
114 | cursor: pointer;
115 |
116 | h4 {
117 | font-weight: 500;
118 | }
119 |
120 | p {
121 | font-weight: 400;
122 | color: var(--gray-color);
123 | margin-top: 5px;
124 | }
125 | }
126 | }
127 |
128 | .app__skills-exp-year {
129 | margin-right: 3rem;
130 |
131 | p {
132 | font-weight: 800;
133 | color: var(--secondary-color);
134 | }
135 |
136 | @media screen and (max-width: 450px) {
137 | margin-right: 1rem;
138 | }
139 | }
140 |
141 | .skills-tooltip {
142 | max-width: 300px !important;
143 | background-color: var(--white-color) !important;
144 | box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) !important;
145 | border-radius: 5px !important;
146 | padding: 1rem !important;
147 | color: var(--gray-color) !important;
148 | text-align: center !important;
149 | line-height: 1.5 !important;
150 | opacity: 1 !important;
151 |
152 | @media screen and (min-width: 2000px) {
153 | font-size: 1.75rem !important;
154 | max-width: 500px !important;
155 | line-height: 2 !important;
156 | }
157 | }
158 |
--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.scss:
--------------------------------------------------------------------------------
1 | .app__navbar {
2 | width: 100%;
3 |
4 | display: flex;
5 | justify-content: space-between;
6 | align-items: center;
7 |
8 | padding: 1rem 2rem;
9 | background: rgba(255, 255, 255, 0.25);
10 | // box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
11 | backdrop-filter: blur(4px);
12 | -webkit-backdrop-filter: blur(4px);
13 | border: 1px solid rgba(255, 255, 255, 0.18);
14 | position: fixed;
15 | z-index: 2;
16 | }
17 |
18 | .app__navbar-logo {
19 | display: flex;
20 | justify-content: flex-start;
21 | align-items: center;
22 |
23 | img {
24 | width: 90px;
25 | height: 20px;
26 |
27 | @media screen and (min-width: 2000px) {
28 | width: 180px;
29 | height: 40px;
30 | }
31 | }
32 | }
33 |
34 | .app__navbar-links {
35 | flex: 1;
36 | display: flex;
37 | justify-content: center;
38 | align-items: center;
39 |
40 | list-style: none;
41 |
42 | li {
43 | margin: 0 1rem;
44 | cursor: pointer;
45 |
46 | flex-direction: column;
47 |
48 | div {
49 | width: 5px;
50 | height: 5px;
51 | background: transparent;
52 | border-radius: 50%;
53 |
54 | margin-bottom: 5px;
55 | }
56 |
57 | a {
58 | color: var(--gray-color);
59 | text-decoration: none;
60 | flex-direction: column;
61 |
62 | text-transform: uppercase;
63 | font-weight: 500;
64 |
65 | transition: all 0.3s ease-in-out;
66 |
67 | &:hover {
68 | color: var(--secondary-color);
69 | }
70 | }
71 |
72 | &:hover {
73 | div {
74 | background: var(--secondary-color);
75 | }
76 | }
77 | }
78 |
79 | @media screen and (max-width: 900px) {
80 | display: none;
81 | }
82 | }
83 |
84 | .app__navbar-menu {
85 | width: 35px;
86 | height: 35px;
87 | border-radius: 50%;
88 | position: relative;
89 |
90 | display: flex;
91 | justify-content: center;
92 | align-items: center;
93 | background-color: var(--secondary-color);
94 |
95 |
96 | svg {
97 | width: 70%;
98 | height: 70%;
99 | color: var(--white-color);
100 | }
101 |
102 | div {
103 | position: fixed;
104 | top: 0;
105 | bottom: 0;
106 | right: 0;
107 | z-index: 5;
108 |
109 | padding: 1rem;
110 |
111 | width: 80%;
112 | height: 100vh;
113 |
114 | display: flex;
115 | justify-content: flex-end;
116 | align-items: flex-end;
117 | flex-direction: column;
118 |
119 | background: url('../../assets/bgWhite.png');
120 | background-color: var(--white-color);
121 | background-size: cover;
122 | background-repeat: repeat;
123 |
124 | /* top box shadow */
125 | box-shadow: 0px 0px 20px rgba(168, 168, 168, 0.15);
126 |
127 | svg {
128 | width: 35px;
129 | height: 35px;
130 | color: var(--secondary-color);
131 | margin: 0.5rem 1rem;
132 | }
133 |
134 | ul {
135 | list-style: none;
136 | margin: 0;
137 | padding: 0;
138 | height: 100%;
139 | width: 100%;
140 |
141 | display: flex;
142 | justify-content: flex-start;
143 | align-items: flex-start;
144 | flex-direction: column;
145 |
146 | li {
147 | margin: 1rem;
148 |
149 | a {
150 | color: var(--gray-color);
151 | text-decoration: none;
152 | font-size: 1rem;
153 | text-transform: uppercase;
154 | font-weight: 500;
155 |
156 | transition: all 0.3s ease-in-out;
157 |
158 | &:hover {
159 | color: var(--secondary-color);
160 | }
161 | }
162 | }
163 | }
164 |
165 | @media screen and (min-width: 900px) {
166 | display: none;
167 | }
168 | }
169 |
170 | @media screen and (min-width: 900px) {
171 | display: none;
172 | }
173 | }
174 |
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
61 |
--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
1 | .app {
2 | background-color: var(--primary-color);
3 | font-family: var(--font-base);
4 | }
5 |
6 | .app__whitebg {
7 | background-color: var(--white-color);
8 | }
9 |
10 | .app__primarybg {
11 | background-color: var(--primary-color);
12 | }
13 |
14 | .app__container {
15 | width: 100%;
16 | min-height: 100vh;
17 |
18 | display: flex;
19 | flex-direction: row;
20 | }
21 |
22 | .app__flex {
23 | display: flex;
24 | justify-content: center;
25 | align-items: center;
26 | }
27 |
28 | .app__wrapper {
29 | flex: 1;
30 | width: 100%;
31 | flex-direction: column;
32 | padding: 4rem 2rem;
33 |
34 | @media screen and (max-width: 450px) {
35 | padding: 4rem 1rem 2rem;
36 | }
37 | }
38 |
39 | .copyright {
40 | width: 100%;
41 | padding: 2rem 0 0;
42 |
43 | display: flex;
44 | flex-direction: column;
45 | justify-content: flex-end;
46 | align-items: flex-end;
47 |
48 | p {
49 | text-transform: uppercase;
50 | color: var(--black-color);
51 | }
52 | }
53 |
54 | .head-text {
55 | font-size: 2.75rem;
56 | font-weight: 800;
57 | text-align: center;
58 | color: var(--black-color);
59 | text-transform: capitalize;
60 |
61 | span {
62 | color: var(--secondary-color);
63 | }
64 |
65 | @media screen and (min-width: 2000px) {
66 | font-size: 4rem;
67 | }
68 |
69 | @media screen and (max-width: 450px) {
70 | font-size: 2rem;
71 | }
72 | }
73 |
74 | .p-text {
75 | font-size: 0.8rem;
76 | text-align: left;
77 | color: var(--gray-color);
78 | line-height: 1.5;
79 |
80 | @media screen and (min-width: 2000px) {
81 | font-size: 1.75rem;
82 | }
83 | }
84 |
85 | .bold-text {
86 | font-size: 1rem;
87 | font-weight: 800;
88 | color: var(--black-color);
89 | text-align: left;
90 |
91 | @media screen and (min-width: 2000px) {
92 | font-size: 2rem;
93 | }
94 |
95 | @media screen and (max-width: 450px) {
96 | font-size: 0.9rem;
97 | }
98 | }
99 |
100 | .app__social {
101 | display: flex;
102 | justify-content: flex-end;
103 | align-items: center;
104 | flex-direction: column;
105 |
106 | padding: 1rem;
107 |
108 | div {
109 | width: 40px;
110 | height: 40px;
111 | border-radius: 50%;
112 | background-color: var(--white-color);
113 | margin: 0.25rem 0;
114 | border: 1px solid var(--lightGray-color);
115 |
116 | display: flex;
117 | justify-content: center;
118 | align-items: center;
119 |
120 | transition: all 0.3s ease-in-out;
121 |
122 | svg {
123 | width: 15px;
124 | height: 15px;
125 | color: var(--gray-color);
126 | }
127 |
128 | &:hover {
129 | background-color: var(--secondary-color);
130 | border-color: var(--secondary-color);
131 |
132 | svg {
133 | color: var(--white-color);
134 | }
135 | }
136 |
137 | @media screen and (min-width: 2000px) {
138 | width: 70px;
139 | height: 70px;
140 |
141 | margin: 0.5rem 0;
142 |
143 | svg {
144 | width: 30px;
145 | height: 30px;
146 | }
147 | }
148 | }
149 | }
150 |
151 | .app__navigation {
152 | display: flex;
153 | justify-content: center;
154 | align-items: center;
155 | flex-direction: column;
156 |
157 | padding: 1rem;
158 |
159 | .app__navigation-dot {
160 | width: 10px;
161 | height: 10px;
162 | border-radius: 50%;
163 | background-color: #cbcbcb;
164 | margin: 0.5rem;
165 |
166 | transition: background-color 0.2s ease-in-out;
167 |
168 | &:hover {
169 | background-color: var(--secondary-color);
170 | }
171 |
172 | @media screen and (min-width: 2000px) {
173 | width: 20px;
174 | height: 20px;
175 | }
176 | }
177 | }
178 |
179 | @media screen and (max-width: 500px) {
180 | .app__navigation,
181 | .app__social {
182 | display: none;
183 | }
184 |
185 | .copyright {
186 | padding: 2rem;
187 | }
188 | }
189 |
--------------------------------------------------------------------------------
/src/container/Work/Work.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { AiFillEye, AiFillGithub } from 'react-icons/ai';
3 | import { motion } from 'framer-motion';
4 |
5 | import { AppWrap, MotionWrap } from '../../wrapper';
6 | import { urlFor, client } from '../../client';
7 | import './Work.scss';
8 |
9 | const Work = () => {
10 | const [works, setWorks] = useState([]);
11 | const [filterWork, setFilterWork] = useState([]);
12 | const [activeFilter, setActiveFilter] = useState('All');
13 | const [animateCard, setAnimateCard] = useState({ y: 0, opacity: 1 });
14 |
15 | useEffect(() => {
16 | const query = '*[_type == "works"]';
17 |
18 | client.fetch(query).then((data) => {
19 | setWorks(data);
20 | setFilterWork(data);
21 | });
22 | }, []);
23 |
24 | const handleWorkFilter = (item) => {
25 | setActiveFilter(item);
26 | setAnimateCard([{ y: 100, opacity: 0 }]);
27 |
28 | setTimeout(() => {
29 | setAnimateCard([{ y: 0, opacity: 1 }]);
30 |
31 | if (item === 'All') {
32 | setFilterWork(works);
33 | } else {
34 | setFilterWork(works.filter((work) => work.tags.includes(item)));
35 | }
36 | }, 500);
37 | };
38 |
39 | return (
40 | <>
41 |
43 | })
44 |
45 | {skill.name}
46 |
50 | {experiences.map((experience) => (
51 |
55 |
59 | {experience.works.map((work) => (
60 | <>
61 |
69 |
72 |
78 | {work.desc}
79 |
80 |
81 | ))}
82 |
83 |
84 | ))}
85 |
86 |
56 |
58 | {experience.year}
57 |{work.name}
70 |{work.company}
71 |My Creative Portfolio Section
42 | 43 |
44 | {['UI/UX', 'Web App', 'Mobile App', 'React JS', 'All'].map((item, index) => (
45 |
54 |
55 | handleWorkFilter(item)}
48 | className={`app__work-filter-item app__flex p-text ${activeFilter === item ? 'item-active' : ''}`}
49 | >
50 | {item}
51 |
52 | ))}
53 |
62 |
105 | ))}
106 |
65 | })
66 |
67 |
72 |
73 |
74 |
80 |
82 |
83 |
84 |
90 |
92 |
93 |
94 |
95 |
96 |
66 |
67 |
97 |
104 | {work.title}
98 |{work.description}
99 | 100 |
101 |
103 | {work.tags[0]}
102 |