7 |
8 | 
9 |
10 |
 Saad Pasta |
196 |  Kartik Choudhary |
197 |  Naveen M K |
198 |
9 |
10 |
11 | );
12 | }
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
16 |
29 | openUrlInNewTab(blog.url)}
19 | >
20 |
21 |
28 | {blog.title}
22 |{blog.description}
23 |
24 |
26 |
27 | →
25 |
7 |
8 | {text}
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/certificationCard/CertificationCard.css:
--------------------------------------------------------------------------------
1 | .cert-card {
2 | display: inline-block;
3 | justify-content:center;
4 | align-items: center;
5 | text-align: center;
6 | border-radius: 10px;
7 | box-shadow: 0 0 36px rgba(0, 0, 0, 0.1);
8 | flex: 0 0 30%;
9 | }
10 |
11 | .cert-header {
12 | margin: 0px;
13 | border-radius: 10px 10px 0px 0px;
14 | }
15 |
16 | .logo_img {
17 | margin: 3px;
18 | width: auto;
19 | height: 100px;
20 | }
21 |
22 | .cert-body {
23 | margin: 0px;
24 | }
25 |
26 | .cert-body-title {
27 | font-size: 20px;
28 | margin: 10px;
29 | }
30 |
31 | .cert-body-subtitle {
32 | font-size: 17px;
33 | color: #808080;
34 | margin: 10px;
35 | }
36 |
37 | .content {
38 | position: relative;
39 | width: 100%;
40 | margin: auto;
41 | overflow: hidden;
42 | border-radius: 10px 10px 0px 0px;
43 | }
44 |
45 | .content .content-overlay {
46 | background: rgba(0,0,0,0.7);
47 | position: absolute;
48 | height: 99%;
49 | width: 100%;
50 | left: 0;
51 | top: 0;
52 | bottom: 0;
53 | right: 0;
54 | opacity: 0;
55 | -webkit-transition: all 0.4s ease-in-out 0s;
56 | -moz-transition: all 0.4s ease-in-out 0s;
57 | transition: all 0.4s ease-in-out 0s;
58 | }
59 |
60 | .content:hover .content-overlay{
61 | opacity: 1;
62 | }
63 |
64 |
65 | .content-details {
66 | position: absolute;
67 | text-align: center;
68 | padding-left: 1em;
69 | padding-right: 1em;
70 | width: 100%;
71 | top: 50%;
72 | left: 50%;
73 | opacity: 0;
74 | -webkit-transform: translate(-50%, -50%);
75 | -moz-transform: translate(-50%, -50%);
76 | transform: translate(-50%, -50%);
77 | -webkit-transition: all 0.3s ease-in-out 0s;
78 | -moz-transition: all 0.3s ease-in-out 0s;
79 | transition: all 0.3s ease-in-out 0s;
80 | }
81 |
82 | .content:hover .content-details{
83 | top: 50%;
84 | left: 50%;
85 | opacity: 1;
86 | }
87 |
88 | .content-details h3{
89 | color: #fff;
90 | font-weight: 500;
91 | letter-spacing: 0.15em;
92 | margin-bottom: 0.5em;
93 | text-transform: uppercase;
94 | }
95 |
96 | .fadeIn-top{
97 | top: 20%;
98 | }
99 |
100 | @media screen and (max-width: 480px) and (min-width: 300px) {
101 | .cert-body-title {
102 | font-size: 18px;
103 | }
104 | }
--------------------------------------------------------------------------------
/src/components/certificationCard/CertificationCard.js:
--------------------------------------------------------------------------------
1 | import React, { Component} from 'react';
2 | import "./CertificationCard.css";
3 | import {Fade} from 'react-reveal';
4 |
5 | class CertificationCard extends Component {
6 | render(){
7 | const certificate = this.props.certificate;
8 | return (
9 |
11 |
26 |
31 | }){kind=logo}
20 |
27 |
30 | {certificate.title}
28 |{certificate.subtitle}
29 |
24 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/footer/Footer.css:
--------------------------------------------------------------------------------
1 | .footer-text {
2 | text-align: center;
3 | color: #868e96;
4 | }
5 |
6 | .footer-div {
7 | margin-top: 2rem;
8 |
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/footer/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Footer.css";
3 | import { Fade } from "react-reveal";
4 | import emoji from "react-easy-emoji";
5 |
6 | export default function Footer() {
7 | return (
8 |
25 |
26 | 
getColorArrays()}/>
31 |
32 |
27 |
29 |
30 | {cardInfo.company}
28 |
33 |
40 | {cardInfo.role}
34 |{cardInfo.date}
35 |{cardInfo.desc}
36 |-
37 |
10 |
12 | {emoji("Made with ❤️ by Bharat Kammakatla")}
11 |
17 |
59 | Reach Out to me!
18 |
19 |
58 |
20 |
50 |
21 |
23 | {contactInfo.subtitle}
22 |{emoji(String(prof.bio))}
24 | {prof.location !== null && ( 25 |
26 |
27 |
39 | {prof.location}
40 |
41 |
42 | )}
43 |
44 |
45 | Open for opportunities: {prof.hireable}
46 |
47 |
48 |
51 | 
56 |
57 |
14 |
68 | openRepoinNewTab(repo.node.url)}
18 | >
19 |
67 |
20 |
34 |
36 | {repo.node.name}
35 |{repo.node.description}
37 |
38 |
66 |
39 |
40 |
44 |
62 | {repo.node.primaryLanguage.name}
45 | 46 | {/* 47 | 53 |{repo.node.forkCount}
54 | */} 55 | {/* 56 | 59 |{repo.node.stargazers.totalCount}
60 | */} 61 |
63 |
65 | {repo.node.diskUsage} KB
64 |-
21 |
- 22 | Skills 23 | 24 | { exp === true && 25 |
- 26 | Work Experiences 27 | 28 | } 29 |
- 30 | Projects 31 | 32 | {/*
- 33 | Projects 34 | */} 35 | {/*
- 36 | Achievements 37 | */} 38 |
- 39 | Certfications 40 | 41 |
- 42 | Blogs 43 | 44 | {/*
- 45 | Talks 46 | */} 47 |
- 48 | Contact Me 49 | 50 |
8 |
9 | {socialMediaLinks.github ?
10 | (
11 |
12 |
13 | )
14 | :
15 | null}
16 |
17 | {socialMediaLinks.linkedin ?
18 |
19 |
20 |
21 |
22 | :
23 | null}
24 |
25 | {socialMediaLinks.gmail ?
26 |
27 |
28 |
29 |
30 | :
31 | null}
32 |
33 | {socialMediaLinks.gitlab ?
34 |
35 |
36 |
37 |
38 | :
39 | null }
40 |
41 | {socialMediaLinks.facebook ?
42 |
43 |
44 |
45 |
46 | :
47 | null}
48 |
49 | {socialMediaLinks.instagram ?
50 |
51 |
52 |
53 |
54 | :
55 | null}
56 |
57 | {socialMediaLinks.twitter ?
58 |
59 |
60 |
61 |
62 | :
63 | null}
64 |
65 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/softwareSkills/SoftwareSkill.css:
--------------------------------------------------------------------------------
1 | .dev-icons {
2 | padding-left: 0;
3 | list-style: none;
4 | font-size: 3rem;
5 | margin-bottom: 0px;
6 | margin-top: 0px;
7 | text-align: center;
8 | }
9 |
10 | .software-skill-inline {
11 | display: inline-block;
12 | margin-right: 20px;
13 | margin-bottom: 20px;
14 | }
15 |
16 | .software-skill-inline > i {
17 | color: #868e96;
18 | }
19 |
20 | .software-skill-inline > i:hover {
21 | color: #645beb;
22 | }
23 | .software-skill-inline > p {
24 | color: #868e96;
25 | font-size: 10px;
26 | }
27 | .software-skill-inline > i:hover ~ p{
28 | color: #645beb;
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/softwareSkills/SoftwareSkill.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./SoftwareSkill.css";
3 | import { skillsSection } from "../../portfolio";
4 |
5 | export default function SoftwareSkill() {
6 | return (
7 |
8 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/containers/Main.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import Header from "../components/header/Header";
3 | import Greeting from "./greeting/Greeting";
4 | import Skills from "./skills/Skills";
5 | import WorkExperience from "./workExperience/WorkExperience";
6 | import Projects from "./projects/Projects";
7 | import Blogs from "./blogs/Blogs";
8 | import Footer from "../components/footer/Footer";
9 | import Top from "./topbutton/Top";
10 | import Profile from "./profile/Profile";
11 | import Certifications from "./certifications/Certifications";
12 |
13 | export default class Main extends Component {
14 | render() {
15 | return (
16 |
9 |
25 | -
10 | {skillsSection.softwareSkills.map(skills => {
11 | return (
12 |
-
13 |
19 |
{skills.skillName}
20 |
21 | );
22 | })}
23 |
17 |
28 | );
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/containers/blogs/Blog.css:
--------------------------------------------------------------------------------
1 | /*Blog Cards Layout*/
2 | .square {
3 | width: 440px;
4 | height: 430px;
5 | background: white;
6 | border-radius: 10px;
7 | box-shadow: 0px 20px 50px #d9dbdf;
8 | -webkit-transition: all 0.3s ease;
9 | -o-transition: all 0.3s ease;
10 | transition: all 0.3s ease;
11 | margin-top: 30px;
12 | }
13 |
14 | .square:hover {
15 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
16 | }
17 |
18 | .blog-header-text {
19 | font-size: 56px;
20 | font-weight: 400;
21 | }
22 |
23 | .blog-subtitle {
24 | text-transform: uppercase;
25 | }
26 | .blog-main-div > * {
27 | flex: 1;
28 | margin-bottom: 30px;
29 | }
30 | .blog-main-div {
31 | display: flex;
32 | }
33 | .blog-image-div > img {
34 | max-width: 100%;
35 | height: auto;
36 | }
37 | .blog-text-div{
38 | display: grid;
39 | grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
40 | gap: 32px;
41 | }
42 |
43 | /* Media Query */
44 | @media (max-width: 1380px) {
45 | .blog-header-text {
46 | font-size: 40px;
47 | }
48 | }
49 | @media (max-width: 768px) {
50 | .blog-header-text {
51 | font-size: 30px;
52 | text-align: center;
53 | }
54 | .blog-subtitle {
55 | font-size: 16px;
56 | line-height: normal;
57 | text-align: center;
58 | }
59 | }
60 |
61 | @media screen and (max-width: 480px) and (min-width:300px){
62 | .blog-text-div{
63 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
64 | }
65 | }
--------------------------------------------------------------------------------
/src/containers/blogs/Blogs.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Blog.css";
3 | import BlogCard from "../../components/blogCard/BlogCard";
4 | import { blogSection } from "../../portfolio";
5 | import { Fade } from "react-reveal";
6 |
7 | export default function Blogs() {
8 | return (
9 |
11 |
32 |
12 |
15 | {blogSection.title}
13 |{blogSection.subtitle}
14 |
16 |
31 |
17 | {blogSection.blogs.map(blog => {
18 | return (
19 |
30 |
11 |
20 | Certifications
12 |
13 |
19 |
14 | {certifications.certifications.map(cert => {
15 | return
18 |
11 |
30 |
12 |
29 |
13 |
25 | {contactInfo.title}
14 |{contactInfo.subtitle}
15 | 16 | 24 |
26 | ![Contact Mail]({require("../../assets/images/contactMail.webp")})
27 |
28 |
27 |
13 |
41 |
14 |
40 |
15 |
33 |
16 |
32 | 17 | {" "} 18 | {greeting.title}{" "} 19 | {emoji("👋")} 20 |
21 |{greeting.subTitle}
22 |
24 |
25 |
30 |
31 |
34 | ![man at desk]({require("../../assets/images/manOnTable.svg")})
38 |
39 |
38 |
7 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/containers/loading/loading.css:
--------------------------------------------------------------------------------
1 | .sk-circle {
2 | margin: 100px auto;
3 | width: 40px;
4 | height: 40px;
5 | position: relative;
6 | }
7 | .sk-circle .sk-child {
8 | width: 100%;
9 | height: 100%;
10 | position: absolute;
11 | left: 0;
12 | top: 0;
13 | }
14 | .sk-circle .sk-child:before {
15 | content: '';
16 | display: block;
17 | margin: 0 auto;
18 | width: 15%;
19 | height: 15%;
20 | background-color: #333;
21 | border-radius: 100%;
22 | -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
23 | animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
24 | }
25 | .sk-circle .sk-circle2 {
26 | -webkit-transform: rotate(30deg);
27 | -ms-transform: rotate(30deg);
28 | transform: rotate(30deg); }
29 | .sk-circle .sk-circle3 {
30 | -webkit-transform: rotate(60deg);
31 | -ms-transform: rotate(60deg);
32 | transform: rotate(60deg); }
33 | .sk-circle .sk-circle4 {
34 | -webkit-transform: rotate(90deg);
35 | -ms-transform: rotate(90deg);
36 | transform: rotate(90deg); }
37 | .sk-circle .sk-circle5 {
38 | -webkit-transform: rotate(120deg);
39 | -ms-transform: rotate(120deg);
40 | transform: rotate(120deg); }
41 | .sk-circle .sk-circle6 {
42 | -webkit-transform: rotate(150deg);
43 | -ms-transform: rotate(150deg);
44 | transform: rotate(150deg); }
45 | .sk-circle .sk-circle7 {
46 | -webkit-transform: rotate(180deg);
47 | -ms-transform: rotate(180deg);
48 | transform: rotate(180deg); }
49 | .sk-circle .sk-circle8 {
50 | -webkit-transform: rotate(210deg);
51 | -ms-transform: rotate(210deg);
52 | transform: rotate(210deg); }
53 | .sk-circle .sk-circle9 {
54 | -webkit-transform: rotate(240deg);
55 | -ms-transform: rotate(240deg);
56 | transform: rotate(240deg); }
57 | .sk-circle .sk-circle10 {
58 | -webkit-transform: rotate(270deg);
59 | -ms-transform: rotate(270deg);
60 | transform: rotate(270deg); }
61 | .sk-circle .sk-circle11 {
62 | -webkit-transform: rotate(300deg);
63 | -ms-transform: rotate(300deg);
64 | transform: rotate(300deg); }
65 | .sk-circle .sk-circle12 {
66 | -webkit-transform: rotate(330deg);
67 | -ms-transform: rotate(330deg);
68 | transform: rotate(330deg); }
69 | .sk-circle .sk-circle2:before {
70 | -webkit-animation-delay: -1.1s;
71 | animation-delay: -1.1s; }
72 | .sk-circle .sk-circle3:before {
73 | -webkit-animation-delay: -1s;
74 | animation-delay: -1s; }
75 | .sk-circle .sk-circle4:before {
76 | -webkit-animation-delay: -0.9s;
77 | animation-delay: -0.9s; }
78 | .sk-circle .sk-circle5:before {
79 | -webkit-animation-delay: -0.8s;
80 | animation-delay: -0.8s; }
81 | .sk-circle .sk-circle6:before {
82 | -webkit-animation-delay: -0.7s;
83 | animation-delay: -0.7s; }
84 | .sk-circle .sk-circle7:before {
85 | -webkit-animation-delay: -0.6s;
86 | animation-delay: -0.6s; }
87 | .sk-circle .sk-circle8:before {
88 | -webkit-animation-delay: -0.5s;
89 | animation-delay: -0.5s; }
90 | .sk-circle .sk-circle9:before {
91 | -webkit-animation-delay: -0.4s;
92 | animation-delay: -0.4s; }
93 | .sk-circle .sk-circle10:before {
94 | -webkit-animation-delay: -0.3s;
95 | animation-delay: -0.3s; }
96 | .sk-circle .sk-circle11:before {
97 | -webkit-animation-delay: -0.2s;
98 | animation-delay: -0.2s; }
99 | .sk-circle .sk-circle12:before {
100 | -webkit-animation-delay: -0.1s;
101 | animation-delay: -0.1s; }
102 |
103 | @-webkit-keyframes sk-circleBounceDelay {
104 | 0%, 80%, 100% {
105 | -webkit-transform: scale(0);
106 | transform: scale(0);
107 | } 40% {
108 | -webkit-transform: scale(1);
109 | transform: scale(1);
110 | }
111 | }
112 |
113 | @keyframes sk-circleBounceDelay {
114 | 0%, 80%, 100% {
115 | -webkit-transform: scale(0);
116 | transform: scale(0);
117 | } 40% {
118 | -webkit-transform: scale(1);
119 | transform: scale(1);
120 | }
121 | }
122 |
--------------------------------------------------------------------------------
/src/containers/profile/Profile.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, lazy, Suspense } from "react";
2 | import { openSource } from "../../portfolio";
3 | import Contact from "../contact/Contact";
4 | import Loading from "../loading/Loading";
5 |
6 | const renderLoader = () =>
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
45 |
58 | Projects
46 |
47 | {repo.map((v, i) => {
48 | return
51 |
57 |
10 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/containers/topbutton/Top.css:
--------------------------------------------------------------------------------
1 | #topButton {
2 | visibility:hidden;
3 | position: fixed;
4 | bottom: 20px;
5 | right: 30px;
6 | z-index: 99;
7 | border: none;
8 | outline: none;
9 | background-color: #001C55;
10 | color: white;
11 | cursor: pointer;
12 | padding: 15px;
13 | border-radius: 15px;
14 | font-size: 25px;
15 | }
16 |
17 | #topButton:hover {
18 | background-color: #000;
19 | transition: all ease-in-out 0.2s;
20 | }
21 |
--------------------------------------------------------------------------------
/src/containers/topbutton/Top.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Top.css";
3 |
4 | export default function Top() {
5 | function TopEvent() {
6 | document.body.scrollTop = 0; // For Safari
7 | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
8 | }
9 | // When the user scrolls down 20px from the top of the document, show the button
10 | function scrollFunction() {
11 | if (
12 | document.body.scrollTop > 20 ||
13 | document.documentElement.scrollTop > 20
14 | ) {
15 | document.getElementById("topButton").style.visibility = "visible";
16 | } else {
17 | document.getElementById("topButton").style.visibility = "hidden";
18 | }
19 | }
20 | window.onscroll = function () {
21 | scrollFunction();
22 | };
23 | window.onload = function () {
24 | scrollFunction();
25 | }; //To make sure that this button is not visible at starting.
26 | // When the user clicks on the button, scroll to the top of the document
27 | return (
28 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/containers/workExperience/WorkExperience.css:
--------------------------------------------------------------------------------
1 | .experience-cards-div {
2 | display: grid;
3 | grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
4 | gap: 1rem 1rem;
5 | }
6 |
7 | .experience-heading {
8 | font-size: 56px;
9 | font-weight: 400;
10 | }
11 |
12 | .experience-container {
13 | display: flex;
14 | width: 90%;
15 | padding: 20px 10px;
16 | margin: 0px auto;
17 | margin-top: 2rem;
18 | }
19 |
20 | .experience-container>* {
21 | flex: 1;
22 | }
23 |
24 | /* Media Query */
25 |
26 | @media (max-width: 1380px) {
27 | .experience-heading {
28 | font-size: 40px;
29 | }
30 | }
31 |
32 | @media (max-width: 768px) {
33 | .experience-heading {
34 | font-size: 30px;
35 | text-align: center;
36 | }
37 | }
--------------------------------------------------------------------------------
/src/containers/workExperience/WorkExperience.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./WorkExperience.css";
3 | import ExperienceCard from "../../components/experienceCard/ExperienceCard";
4 | import { workExperiences } from "../../portfolio";
5 | import { Fade } from "react-reveal";
6 |
7 |
8 | export default function WorkExperience() {
9 | if(workExperiences.viewExperiences){
10 | return (
11 |
11 |
12 |
19 |
20 |
33 |
34 |
13 | ![Bharat Working]({require("../../assets/images/developerActivity.svg")})
17 |
18 |
17 |
21 |
32 | {skillsSection.title}
22 |23 | {skillsSection.subTitle} 24 |
25 |
27 | {skillsSection.skills.map((skills) => {
28 | return
31 | {skills}
; 29 | })} 30 |
12 |
13 |
35 |
36 | );
37 | }
38 | return null;
39 | }
40 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Agustina Regular';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local('Agustina Regular'), url('./assets/fonts/Agustina.woff') format('woff');
6 | font-display: swap;
7 | }
8 | @font-face {
9 | font-family: 'Montserrat';
10 | src: local('Montserrat'), url('./assets/fonts/Montserrat-Regular.ttf') format('woff');
11 | font-display: swap;
12 | }
13 | code {
14 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
15 | monospace;
16 | }
17 | html,
18 | body {
19 | scroll-behavior: smooth;
20 | }
21 | body {
22 | margin: 0;
23 | font: 19px / 23px Montserrat, "Montserrat", sans-serif;
24 | -webkit-font-smoothing: antialiased;
25 | -moz-osx-font-smoothing: grayscale;
26 | }
27 | /* Media Query */
28 | @media (max-width: 1380px) {
29 | html,
30 | body {
31 | font-size: 16px;
32 | line-height: normal;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 | import * as serviceWorker from "./serviceWorker";
6 |
7 | ReactDOM.render(
14 |
34 |
15 |
33 | Experiences
16 |
17 | {workExperiences.experience.map((card) => {
18 | return (
19 |
32 |