├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
└── index.html
└── src
├── App.jsx
├── assets
├── Covid-19 Project.jpg
├── Educational Website.jpg
├── Jokes Project.jpg
├── Me.png
├── Portfolio preview.png
├── Project4.jpg
├── Rasif-Taghizade-CV.pdf
├── RubyCode Blog Project.jpg
├── Startup Agency Project.jpg
├── bg-texture.png
├── fh-huquq.png
├── linkedin.png
└── reservation-form.png
├── components
├── contact
│ ├── Contact.jsx
│ └── contact.css
├── experience
│ ├── Experience.jsx
│ └── experience.css
├── footer
│ ├── Footer.jsx
│ └── footer.css
├── header
│ ├── CTA.jsx
│ ├── Header.jsx
│ ├── HeaderSocials.jsx
│ └── header.css
├── intro
│ ├── Intro.jsx
│ └── intro.css
├── portfolio
│ ├── Portfolio.jsx
│ └── portfolio.css
├── testimonials
│ ├── Testimonials.jsx
│ └── testimonials.css
└── topbar
│ ├── Topbar.jsx
│ └── topbar.css
├── index.css
└── index.js
/.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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React JS Portfolio Website
2 |
3 | [🔗Live Demo🔗](https://rtaghizadev.vercel.app/)
4 |
5 | 
6 |
7 |
8 |
9 |  [](http://makeapullrequest.com) [](https://github.com/ellerbrock/open-source-badges/)
10 |
11 |
12 |
13 |
14 |
15 | Project Stats 🌟 Stars 🍴 Forks 🐛 Issues 🔔 Open PRs 🔕 Close PRs
22 |
23 |
24 |
25 | Project
32 |
33 |
34 |
35 | 🧠 Happy Hacking 🧠
66 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "portfolio---react",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@emailjs/browser": "^3.6.2",
7 | "@testing-library/jest-dom": "^5.16.4",
8 | "@testing-library/react": "^13.3.0",
9 | "@testing-library/user-event": "^13.5.0",
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-icons": "^4.4.0",
13 | "react-scripts": "5.0.1",
14 | "swiper": "^8.2.4",
15 | "web-vitals": "^2.1.4"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": [
25 | "react-app",
26 | "react-app/jest"
27 | ]
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rasif-Taghizada/My-portfolio/186d1e99c7884c389c864cbea51a0bfe977af4e1/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Rasif Tagizade React-Portfolio
16 |
22 |
23 |
24 | You need to enable JavaScript to run this app.
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Contact from './components/contact/Contact';
3 | import Experience from './components/experience/Experience';
4 | import Footer from './components/footer/Footer';
5 | import Header from './components/header/Header';
6 | import Intro from './components/intro/Intro';
7 | import Portfolio from './components/portfolio/Portfolio';
8 | import Testimonials from './components/testimonials/Testimonials';
9 | import Topbar from './components/topbar/Topbar';
10 |
11 |
12 | const App = () => {
13 | return (
14 | <>
15 |
16 |
8 | The Skills I Have
9 | Skills
10 |
11 |
12 |
Front-end Development
13 |
14 |
15 | HTML / CSS
17 |
18 |
19 | JavaScript
21 |
22 |
23 | SASS / SCSS
25 |
26 |
27 | Bootstrap, Tailwind
29 |
30 |
31 | React , Vite JS, Next Js
33 |
34 |
35 | Typescript
37 |
38 |
39 | Firebase
41 |
42 |
43 | Node.js, Express.js
45 |
46 |
47 | Responsive Design, BEM Methodology
49 |
50 |
51 | Redux, Redux-toolkit, Context API
53 |
54 |
55 |
56 |
58 | )
59 | }
60 |
61 | export default Experience
--------------------------------------------------------------------------------
/src/components/experience/experience.css:
--------------------------------------------------------------------------------
1 | .experience__container {
2 | display: grid;
3 | grid-template-columns: 1fr;
4 | gap: 2rem;
5 | }
6 |
7 | .experience__container > div {
8 | background: var(--color-bg-variant);
9 | padding: 2.4rem 5rem;
10 | border-radius: 2rem;
11 | border: 1px solid transparent;
12 | transition: var(--transition);
13 | width: 60%;
14 | margin: 0 auto;
15 | }
16 |
17 | .experience__container > div:hover {
18 | background: transparent;
19 | border-color: var(--color-primary-variant);
20 | cursor: default;
21 | }
22 |
23 | .experience__container > div h3 {
24 | text-align: center;
25 | margin-bottom: 2rem;
26 | color: var(--color-primary);
27 | }
28 |
29 | .experience__content {
30 | display: grid;
31 | grid-template-columns: 1fr 1fr;
32 | row-gap: 2rem;
33 | }
34 |
35 | .experience__details {
36 | display: flex;
37 | gap: 1rem;
38 | }
39 |
40 | .experience__details-icon {
41 | margin-top: 6px;
42 | color: var(--color-primary);
43 | }
44 |
45 | @media screen and (max-width: 1024px){
46 | .experience__container {
47 | grid-template-columns: 1fr;
48 | }
49 |
50 | .experience__container > div {
51 | width: 80%;
52 | margin: 0 auto;
53 | padding: 2rem;
54 | }
55 |
56 | .experience__content p {
57 | padding: 1rem;
58 | }
59 | }
60 |
61 | @media screen and (max-width: 600px){
62 | .experience__container {
63 | gap: 1rem;
64 | }
65 |
66 | .experience__container > div {
67 | width: 100%;
68 | padding: 2rem 1rem;
69 | }
70 | }
--------------------------------------------------------------------------------
/src/components/footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BsLinkedin } from 'react-icons/bs';
3 | import { FaGithub } from 'react-icons/fa';
4 | import './footer.css';
5 |
6 | const Footer = () => {
7 | return (
8 |
26 | )
27 | }
28 |
29 | export default Footer
--------------------------------------------------------------------------------
/src/components/footer/footer.css:
--------------------------------------------------------------------------------
1 | footer {
2 | background: var(--color-primary);
3 | padding: 3rem 0;
4 | text-align: center;
5 | font-size: 0.9rem;
6 | margin-top: 7rem;
7 | }
8 |
9 | footer a {
10 | color: var(--color-bg);
11 | }
12 |
13 | .footer__logo {
14 | font-size: 2rem;
15 | font-weight: 500;
16 | margin-bottom: 2rem;
17 | display: inline-block;
18 | }
19 |
20 | .permalinks {
21 | display: flex;
22 | flex-wrap: wrap;
23 | justify-content: center;
24 | gap: 2rem;
25 | margin: 0 auto 3rem;
26 | }
27 |
28 | .footer__socials {
29 | display: flex;
30 | justify-content: center;
31 | gap: 1rem;
32 | margin-bottom: 4rem;
33 | }
34 |
35 | .footer__socials a {
36 | background: var(--color-bg);
37 | color: var(--color-white);
38 | padding: 0.8rem;
39 | border-radius: 0.7rem;
40 | display: flex;
41 | border: 1px solid transparent;
42 | }
43 |
44 | .footer__socials a:hover {
45 | background: transparent;
46 | color: var(--color-bg);
47 | border-color: var(--color-bg);
48 | }
49 |
50 | .footer__copyright {
51 | margin-bottom: 4rem;
52 | color: var(--color-bg);
53 | }
54 |
55 | @media screen and (max-width: 600px){
56 | .permalinks {
57 | flex-direction: column;
58 | gap: 1.5rem;
59 | }
60 |
61 | .footer__socials {
62 | margin-bottom: 2.6rem;
63 | }
64 | }
--------------------------------------------------------------------------------
/src/components/header/CTA.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CV from '../../assets/Rasif-Taghizade-CV.pdf';
3 |
4 | const CTA = () => {
5 | return (
6 |
14 | );
15 | };
16 |
17 | export default CTA;
18 |
--------------------------------------------------------------------------------
/src/components/header/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CTA from './CTA';
3 | import HeaderSocials from './HeaderSocials';
4 | import './header.css';
5 |
6 | const Header = () => {
7 | return (
8 |
20 | );
21 | };
22 |
23 | export default Header;
24 |
--------------------------------------------------------------------------------
/src/components/header/HeaderSocials.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BsLinkedin } from 'react-icons/bs';
3 | import { FaGithub } from 'react-icons/fa';
4 |
5 | const HeaderSocials = () => {
6 | return (
7 |
11 | )
12 | }
13 |
14 | export default HeaderSocials
--------------------------------------------------------------------------------
/src/components/header/header.css:
--------------------------------------------------------------------------------
1 | header {
2 | height: 100%;
3 | padding-top: 7rem;
4 | overflow: hidden;
5 | }
6 |
7 | .header__container {
8 | text-align: center;
9 | height: 100%;
10 | position: relative;
11 | }
12 |
13 | .cta {
14 | display: flex;
15 | justify-content: center;
16 | gap: 1.2rem;
17 | margin-top: 2.5rem;
18 | }
19 |
20 | .header__socials {
21 | display: flex;
22 | flex-direction: column;
23 | align-items: center;
24 | gap: 0.8rem;
25 | position: absolute;
26 | left: 5rem;
27 | bottom: 1rem;
28 | }
29 |
30 | .header__socials::after {
31 | content: '';
32 | width: 1px;
33 | height: 2rem;
34 | background: var(--color-primary);
35 | }
36 |
37 | .scroll__down {
38 | position: absolute;
39 | right: 5rem;
40 | bottom: 5rem;
41 | transform: rotate(90deg);
42 | font-weight: 300;
43 | font-size: 0.9rem;
44 | }
45 |
46 | @media screen and (max-width: 1024px){
47 | header {
48 | height: 68vh;
49 | }
50 |
51 | section {
52 | margin-top: 6rem;
53 | }
54 | }
55 |
56 | @media screen and (max-width: 600px){
57 | header {
58 | height: 100vh;
59 | }
60 |
61 | .header__socials,
62 | .scroll__down {
63 | display: none;
64 | }
65 | }
--------------------------------------------------------------------------------
/src/components/intro/Intro.jsx:
--------------------------------------------------------------------------------
1 | import "./intro.css";
2 |
3 | import { FaAward } from "react-icons/fa";
4 | import React from "react";
5 | import { VscFolderLibrary } from "react-icons/vsc";
6 | import img from '../../assets/Me.png'
7 |
8 | // import ME from '../../assets/Rasif Tagizade image.jpg';
9 |
10 |
11 | const Intro = () => {
12 | return (
13 |
14 | Get to know
15 | About Me
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | Experience
27 | 1.5 year
28 |
29 |
30 | Projects
32 | 10+ Completed Projects
33 |
34 |
35 |
36 | 1+ years experienced Front End Developer with hands-on experience in
37 | identifying web-based user interactions along with designing and
38 | implementing highly-responsive user interface components by
39 | deploying React concepts. Proficient in translating designs and
40 | wireframes into high-quality code, and writing application interface
41 | code via JavaScript and React JS workflows. Adept at monitoring and
42 | maintaining frontend performance and troubleshooting and debugging
43 | the same to bolster overall performance.
44 |
45 |
46 | Let's Talk
47 |
48 |
49 |
51 | );
52 | };
53 |
54 | export default Intro;
55 |
--------------------------------------------------------------------------------
/src/components/intro/intro.css:
--------------------------------------------------------------------------------
1 | .about__container {
2 | display: grid;
3 | grid-template-columns: 35% 50%;
4 | gap: 15%;
5 | }
6 |
7 | .about__me {
8 | width: 100%;
9 | aspect-ratio: 1/1;
10 | border-radius: 2rem;
11 | background: linear-gradient(45deg, transparent, var(--color-primary), transparent);
12 | display: grid;
13 | place-items: center;
14 | }
15 |
16 | .about__me-image {
17 | border-radius: 2rem;
18 | overflow: hidden;
19 | transition: var(--transition);
20 | }
21 |
22 | .about__me-image:hover {
23 | transform: scale(1.1);
24 | }
25 |
26 | .about__cards {
27 | display: grid;
28 | grid-template-columns: repeat(2, 1fr);
29 | gap: 1.5rem;
30 | }
31 |
32 | .about__card {
33 | background: var(--color-bg-variant);
34 | border: 1px solid transparent;
35 | border-radius: 1rem;
36 | padding: 2rem;
37 | text-align: center;
38 | transition: var(--transition);
39 | }
40 |
41 | .about__card:hover {
42 | background: transparent;
43 | border-color: var(--color-primary-variant);
44 | cursor: default;
45 | }
46 |
47 | .about__icon {
48 | color: var(--color-primary);
49 | font-size: 1.5rem;
50 | margin-bottom: 1rem;
51 | }
52 |
53 | .about__card h5 {
54 | font-size: 1rem;
55 | }
56 |
57 | .about__card small {
58 | font-size: 0.9rem;
59 | color: var(--color-light);
60 | }
61 |
62 | .about__content p {
63 | margin: 2rem 0 2.6rem;
64 | color: var(--color-light);
65 | }
66 |
67 | @media screen and (max-width: 1024px){
68 | .about__container {
69 | grid-template-columns: 1fr;
70 | gap: 0;
71 | }
72 |
73 | .about__me {
74 | width: 50%;
75 | margin: 2rem auto 4rem;
76 | }
77 |
78 | .about__content p {
79 | margin: 1rem 0 1.5rem;
80 | }
81 | }
82 |
83 | @media screen and (max-width: 600px){
84 | .about__me {
85 | width: 65%;
86 | margin: 0rem auto 3rem;
87 | }
88 |
89 | .about__cards {
90 | grid-template-columns: 1fr 1fr;
91 | gap: 1rem;
92 | }
93 |
94 | .about__content {
95 | text-align: center;
96 | }
97 |
98 | .about__content p {
99 | margin: 1.5rem 0;
100 | }
101 | }
--------------------------------------------------------------------------------
/src/components/portfolio/Portfolio.jsx:
--------------------------------------------------------------------------------
1 | import "./portfolio.css";
2 |
3 | import IMG1 from "../../assets/Educational Website.jpg";
4 | import IMG2 from "../../assets/reservation-form.png";
5 | import IMG3 from "../../assets/Startup Agency Project.jpg";
6 | import IMG4 from "../../assets/fh-huquq.png";
7 | import IMG5 from "../../assets/Jokes Project.jpg";
8 | import IMG6 from "../../assets/Project4.jpg";
9 | import React from "react";
10 |
11 | //Portfolio function
12 | const Portfolio = () => {
13 | const soloProjects = [
14 | {
15 | id: 1,
16 | title: "Educational Website with React.js",
17 | img: IMG1,
18 | description:
19 | "An educational website is a huge interactive platform to present various information for people.",
20 | technologies: "Html | CSS | Javascript | React Js",
21 | link: "https://educational-website-reactjs.netlify.app/",
22 | github: "https://github.com/Rasif-Taghizada/Educational-Website-ReactJs",
23 | },
24 | {
25 | id: 2,
26 | title: "fh-huquq.az",
27 | img: IMG4,
28 | description:
29 | "A personal website assembled for a lawyer. Firebase is the basis of the website assembled as a full stack",
30 | technologies: "HTML | CSS | JavaScript | Express Js | Firebase",
31 | link: "https://fh-huquq-com.vercel.app/",
32 | github: "https://github.com/Rasif-Taghizada/fh-huquq.com",
33 | },
34 | {
35 | id: 3,
36 | title: "Hospital reservation form",
37 | img: IMG2,
38 | description: "A booking website for doctor's appointments at the hospital. The website is mainly functionally developed with JavaScript",
39 | technologies: "HTML | CSS | JavaScript",
40 | link: "https://fs-code-task-two.vercel.app/",
41 | github: "https://github.com/Rasif-Taghizada/FS-Code-Task",
42 | },
43 | {
44 | id: 4,
45 | title: "Startup Landing Page",
46 | img: IMG3,
47 | description:
48 | "A dedicated, standalone web page built for specific campaigns and target audiences.",
49 | technologies: "Html | CSS | JavaScript | Next Js",
50 | link: "https://alpha-agency-project.vercel.app/",
51 | github: "https://github.com/Rasif-Taghizada/Alpha-Agency-Project",
52 | },
53 | {
54 | id: 5,
55 | title: "Jokes Project with Typescript",
56 | img: IMG5,
57 | description:
58 | "For when you need a fast funny joke, here are some short jokes to get anyone giggling.",
59 | technologies: "Html | Styled-components | Typescript",
60 | link: "https://jokes-project.vercel.app/",
61 | github: "https://github.com/Rasif-Taghizada/Joke-App",
62 | },
63 | {
64 | id: 6,
65 | title: "Fs Poster Website",
66 | img: IMG6,
67 | description:
68 | "Real-world group project which is still in progress and will provide educational platform for future young developers",
69 | technologies: "Html | Scss | Javascript",
70 | link: "https://fs-poster-project.vercel.app/",
71 | github: "https://github.com/Rasif-Taghizada/Fs-Poster-Project",
72 | },
73 | ];
74 |
75 | return (
76 |
77 | My Recent Work
78 | Portfolio
79 |
80 |
81 | {soloProjects.map((pro) => (
82 |
83 |
84 |
85 |
87 |
{pro.title}
88 |
{pro.description}
89 |
{pro.technologies}
90 |
110 | ))}
111 |
113 | );
114 | };
115 |
116 | export default Portfolio;
117 |
--------------------------------------------------------------------------------
/src/components/portfolio/portfolio.css:
--------------------------------------------------------------------------------
1 | .portfolio__container {
2 | display: grid;
3 | grid-template-columns: repeat(3, 1fr);
4 | gap: 2.5rem;
5 | }
6 |
7 | .portfolio__item {
8 | background: var(--color-bg-variant);
9 | padding: 1.3rem;
10 | border-radius: 2rem;
11 | border: 1px solid transparent;
12 | transition: var(--transition);
13 | }
14 |
15 | .portfolio__item:hover {
16 | border-color: var(--color-primary-variant);
17 | background: transparent;
18 | }
19 |
20 | .portfolio__item-image {
21 | border-radius: 1.5rem;
22 | overflow: hidden;
23 | height: 30%;
24 | }
25 |
26 | .portfolio__item h3 {
27 | margin: 2rem 0;
28 | }
29 |
30 | .portfolio__item p {
31 | margin: 0 0 1.2rem 0;
32 | font-size: 0.9rem;
33 | }
34 |
35 | .portfolio__item-cta {
36 | display: flex;
37 | gap: 1rem;
38 | margin-bottom: 2rem;
39 | }
40 |
41 | .portfolio__item-content {
42 | height: 40%;
43 | }
44 |
45 | @media screen and (max-width: 1024px){
46 | .portfolio__container {
47 | grid-template-columns: 1fr 1fr;
48 | gap: 1.2rem;
49 | }
50 | }
51 |
52 | @media screen and (max-width: 600px){
53 | .portfolio__container {
54 | grid-template-columns: 1fr;
55 | gap: 1rem;
56 | }
57 | }
--------------------------------------------------------------------------------
/src/components/testimonials/Testimonials.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BsLinkedin } from 'react-icons/bs';
3 | import { Pagination } from 'swiper';
4 |
5 | import { Swiper, SwiperSlide } from 'swiper/react';
6 |
7 | // Import Swiper styles
8 | import 'swiper/css';
9 | import 'swiper/css/navigation';
10 | import 'swiper/css/pagination';
11 | import 'swiper/css/scrollbar';
12 | import './testimonials.css';
13 |
14 | const Testimonials = () => {
15 | const testimonials = [
16 | {
17 | id: 1,
18 | link: 'https://www.linkedin.com/in/n%C9%99sib%C9%99li-yusibov-0x101/',
19 | name: 'Nəsibəli YUSIBOV',
20 | role: 'Cyber Security Engineer . Improving open-source projects, one commit at a time.',
21 | test: 'As a developer and a problem solver, I think Rasif is a great collaborative partner to have. I met Rasif in some basic javascript & react projects and since then he has drastically progressed in him understanding of the development process. He always has a professional environment and has good audio and video quality which makes it easier to communicate with him.',
22 | },
23 | {
24 | id: 2,
25 | link: 'https://www.linkedin.com/in/raul-omarov-7841b7201/',
26 | name: 'Raul Omarov',
27 | role: 'Full-stack developer | Technical Support Engineer at Microverse',
28 | test: "It was a pleasure collaborating with Rasif on different projects. One of the things that I think is special about him is that he never settles, even after completing the projects he finds other resources and strengthens him knowledge. Collaborating with him is easy and comfortable, it's like working with someone you've known for a long period of time.",
29 | },
30 | {
31 | id: 3,
32 | link: 'https://www.linkedin.com/in/agasi-xalilov/',
33 | name: 'Ağası Xəlilov',
34 | role: 'Full Stack Developer| PostgreSQL | JavaScript | React | Redux | Html&Css | Python.',
35 | test: 'I worked with Rasif in the same team and him communication skills are very strong. Him programming skill is one of the bests, given the time frame in the field. He is a good team player. He will probably fit in most of the companies not only because he\'s a good team worker, but also because he has very good skills and I know he has much more potential to be shown.',
36 | },
37 | {
38 | id: 4,
39 | link: 'https://www.linkedin.com/in/javid-aliyev-b343061b6/',
40 | name: 'Javid Aliyev',
41 | role: 'Full-Stack Web Developer. JavaScript | Rails | React | Redux.',
42 | test: "I mentored Rasif some months ago, and I can say that he is one of those people that you love to work with. He was always interested in what I was trying to teach him, paying attention and always asking questions if something was not clear. When it comes to professional skills, he is really committed to work, always doing him best and going beyond the requirements of the project he's building.",
43 | },
44 | {
45 | id: 5,
46 | link: 'https://www.linkedin.com/in/elshad-bashirov-1907a1213/',
47 | name: 'Elshad Bashirov',
48 | role: 'Software Developer',
49 | test: "Throughout all our collaborations, Rasif has always conducted herself politely and kindly. He comes across as someone that's always willing to help and puts the team ahead of himself. But beneath this, I see a strength and determination to distinguish himself. He's not only someone I highly recommend but is also someone I greatly respect.",
50 | },
51 | ];
52 | return (
53 |
54 | Feedback from my peers
55 | Testimonials
56 |
63 | {testimonials.map((test) => (
64 |
65 |
70 | {test.name}
71 | {test.test}
72 |
73 | ))}
74 |
75 |
76 | )
77 | }
78 |
79 | export default Testimonials
--------------------------------------------------------------------------------
/src/components/testimonials/testimonials.css:
--------------------------------------------------------------------------------
1 | .container.testimonials__container {
2 | width: 40%;
3 | padding-bottom: 4rem;
4 | }
5 |
6 | .client__avatar {
7 | width: 4rem;
8 | aspect-ratio: 1/1;
9 | overflow: hidden;
10 | border-radius: 50%;
11 | margin: 0 auto 1rem;
12 | display: flex;
13 | justify-content: center;
14 | align-content: center;
15 | }
16 |
17 | .client__avatar a {
18 | font-size: 40px;
19 | aspect-ratio: 1/1;
20 | }
21 |
22 | .testimonial {
23 | background: var(--color-bg-variant);
24 | text-align: center;
25 | padding: 2rem;
26 | border-radius: 2rem;
27 | user-select: none;
28 | }
29 |
30 | .client__review {
31 | color: var(--color-light);
32 | font-weight: 300;
33 | display: block;
34 | width: 90%;
35 | margin: 0.8rem auto 0;
36 | }
37 |
38 | .swiper-pagination-clickable .swiper-pagination-bullet {
39 | background: var(--color-primary);
40 | }
41 |
42 | @media screen and (max-width: 1024px){
43 | .container.testimonials__container {
44 | width: 60%;
45 | }
46 | }
47 |
48 | @media screen and (max-width: 600px){
49 | .container.testimonials__container {
50 | width: var(--container-width-sm);
51 | }
52 |
53 | .client__review {
54 | width: var(--container-width-sm);
55 | }
56 | }
--------------------------------------------------------------------------------
/src/components/topbar/Topbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { AiOutlineHome } from 'react-icons/ai';
3 | import { AiOutlineUser } from 'react-icons/ai';
4 | import { BiBook } from 'react-icons/bi';
5 | import { RiServiceLine } from 'react-icons/ri';
6 | import { BiMessageSquareDetail } from 'react-icons/bi';
7 |
8 |
9 | import './topbar.css';
10 |
11 | const Topbar = () => {
12 | const [activeNav, setActiveNav] = useState('#home');
13 | return (
14 |
15 | setActiveNav('#home')} className={activeNav === '#home' ? 'active' : ''}>
16 | setActiveNav('#about')} className={activeNav === '#about' ? 'active' : ''}>
17 | setActiveNav('#experience')} className={activeNav === '#experience' ? 'active' : ''}>
18 | setActiveNav('#portfolio')} className={activeNav === '#portfolio' ? 'active' : ''}>
19 | setActiveNav('#contact')} className={activeNav === '#contact' ? 'active' : ''}>
20 |
21 | )
22 | }
23 |
24 | export default Topbar;
--------------------------------------------------------------------------------
/src/components/topbar/topbar.css:
--------------------------------------------------------------------------------
1 | nav {
2 | background: rgba(0, 0, 0, 0.3);
3 | width: max-content;
4 | display: block;
5 | padding: 0.7rem 1.7rem;
6 | z-index: 2;
7 | position: fixed;
8 | left: 50%;
9 | transform: translateX(-50%);
10 | bottom: 2rem;
11 | display: flex;
12 | gap: 0.8rem;
13 | border-radius: 3rem;
14 | backdrop-filter: blur(15px);
15 | }
16 |
17 | nav a {
18 | background: transparent;
19 | padding: 0.9rem;
20 | border-radius: 50%;
21 | display: flex;
22 | color: var(--color-light);
23 | font-size: 1.1rem;
24 | }
25 |
26 | nav a:hover {
27 | background: rgba(0, 0, 0, 0.3);
28 | }
29 |
30 | nav a.active {
31 | background: var(--color-bg);
32 | color: var(--color-white);
33 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Roboto:wght@100;300;700;900&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | border: 0;
7 | outline: 0;
8 | box-sizing: border-box;
9 | list-style: none;
10 | text-decoration: none;
11 | }
12 |
13 | :root {
14 | --color-bg: #1f1f38;
15 | --color-bg-variant: #2c2c6c;
16 | --color-primary: #4db5ff;
17 | --color-primary-variant: rgba(77, 181, 255, 0.4);
18 | --color-white: #fff;
19 | --color-light: rgba(255, 255, 255, 0.6);
20 |
21 | --transition: all 400ms ease;
22 |
23 | --container-width-lg: 75%;
24 | --container-width-md: 86%;
25 | --container-width-sm: 90%;
26 | }
27 |
28 | html {
29 | scroll-behavior: smooth;
30 | }
31 |
32 | ::-webkit-scrollbar {
33 | display: none;
34 | }
35 |
36 | body {
37 | font-family: 'Poppins', sans-serif;
38 | background-color: var(--color-bg);
39 | color: var(--color-white);
40 | line-height: 1.7;
41 | background-image: url(../src/assets/bg-texture.png);
42 | }
43 |
44 | .container {
45 | width: var(--container-width-lg);
46 | margin: 0 auto;
47 | }
48 |
49 | h1,
50 | h2,
51 | h3,
52 | h4,
53 | h5,
54 | h6 {
55 | font-weight: 500;
56 | }
57 |
58 | h1 {
59 | font-size: 2.5rem;
60 | }
61 |
62 | section {
63 | margin-top: 8rem;
64 | }
65 |
66 | section > h2,
67 | section > h5 {
68 | color: var(--color-light);
69 | text-align: center;
70 | }
71 |
72 | section > h2 {
73 | color: var(--color-primary);
74 | margin-bottom: 3rem;
75 | }
76 |
77 | .text-light {
78 | color: var(--color-primary)
79 | }
80 |
81 | a {
82 | transition: var(--transition);
83 | color: var(--color-primary)
84 | }
85 |
86 | a:hover {
87 | color: var(--color-white);
88 | }
89 |
90 | .btn {
91 | width: max-content;
92 | display: inline-block;
93 | color: var(--color-primary);
94 | padding: 0.75rem 1.2rem;
95 | border-radius: 0.4rem;
96 | cursor: pointer;
97 | border: 1px solid var(--color-primary);
98 | transition: var(--transition);
99 | }
100 |
101 | .btn:hover {
102 | background-color: var(--color-white);
103 | color: var(--color-bg);
104 | border-color: transparent;
105 | }
106 |
107 | .btn-primary {
108 | background-color: var(--color-primary);
109 | color: var(--color-bg);
110 | }
111 |
112 | img {
113 | display: block;
114 | width: 100%;
115 | object-fit: cover;
116 | }
117 |
118 | @media screen and (max-width: 1024px){
119 | .container {
120 | width: var(--container-width-md);
121 | }
122 |
123 | section {
124 | margin-top: 6rem;
125 | }
126 | }
127 |
128 | @media screen and (max-width: 600px){
129 | .container {
130 | width: var(--container-width-sm);
131 | }
132 |
133 | section > h2 {
134 | margin-bottom: 2rem;
135 | }
136 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | import './index.css';
5 |
6 | const root = ReactDOM.createRoot(document.getElementById('root'));
7 | root.render(
8 |
9 |
11 | );
12 |
--------------------------------------------------------------------------------
