Repository: soumyajit4419/Portfolio
Branch: master
Commit: 60c3c08f5f5c
Files: 30
Total size: 55.3 KB
Directory structure:
gitextract_1qa0hdh5/
├── .gitignore
├── README.md
├── package.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
└── src/
├── App.css
├── App.js
├── App.test.js
├── components/
│ ├── About/
│ │ ├── About.js
│ │ ├── AboutCard.js
│ │ ├── Github.js
│ │ ├── Techstack.js
│ │ └── Toolstack.js
│ ├── Footer.js
│ ├── Home/
│ │ ├── Home.js
│ │ ├── Home2.js
│ │ └── Type.js
│ ├── Navbar.js
│ ├── Particle.js
│ ├── Pre.js
│ ├── Projects/
│ │ ├── ProjectCards.js
│ │ └── Projects.js
│ ├── Resume/
│ │ └── ResumeNew.js
│ └── ScrollToTop.js
├── index.css
├── index.js
├── reportWebVitals.js
├── setupTests.js
└── style.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.eslintcache
Server/node_modules
Server/config.js
================================================
FILE: README.md
================================================
<h2 align="center">
Portfolio Website - v2.0<br/>
<a href="https://soumyajit.vercel.app/" target="_blank">soumyajit.tech</a>
</h2>
<div align="center">
<img alt="Demo" src="./Images/readme-img1.png" />
</div>
<br/>
<center>
[](https://forthebadge.com)
[](https://forthebadge.com)
[](https://forthebadge.com)
</center>
<h3 align="center">
🔹
<a href="https://github.com/soumyajit4419/Portfolio/issues">Report Bug</a>
🔹
<a href="https://github.com/soumyajit4419/Portfolio/issues">Request Feature</a>
</h3>
## TL;DR
You can fork this repo to modify and make changes of your own. Please give me proper credit by linking back to [Soumyajit4419](https://github.com/soumyajit4419/Portfolio). Thanks!
## Built With
My personal portfolio <a href="https://soumyajit.vercel.app/" target="_blank">soumyajit.tech</a> which features some of my github projects as well as my resume and technical skills.<br/>
This project was built using these technologies.
- React.js
- Node.js
- Express.js
- CSS3
- VsCode
- Vercel
## Features
**📖 Multi-Page Layout**
**🎨 Styled with React-Bootstrap and Css with easy to customize colors**
**📱 Fully Responsive**
## Getting Started
Clone down this repository. You will need `node.js` and `git` installed globally on your machine.
## 🛠 Installation and Setup Instructions
1. Installation: `npm install`
2. In the project directory, you can run: `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.
## Usage Instructions
Open the project folder and Navigate to `/src/components/`. <br/>
You will find all the components used and you can edit your information accordingly.
### Show your support
Give a ⭐ if you like this website!
<a href="https://www.buymeacoffee.com/soumyajit4419" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" height= "60px" width= "217px" ></a>
================================================
FILE: package.json
================================================
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-pdf/renderer": "^2.2.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-bootstrap": "^2.2.1",
"react-dom": "^17.0.2",
"react-github-calendar": "^3.2.2",
"react-icons": "^4.8.0",
"react-parallax-tilt": "^1.7.42",
"react-pdf": "^5.7.1",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"react-tsparticles": "^1.42.2",
"typewriter-effect": "^2.18.2",
"video-react": "^0.16.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>S0umyajit | Portfolio</title>
<meta name="description" content="Self Developed personal website build with React.js">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="S0umyajit | Portfolio">
<meta itemprop="description" content="Self Developed personal website build with React.js">
<meta itemprop="image"
content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://soumyajit.vercel.app">
<meta property="og:type" content="website">
<meta property="og:title" content="S0umyajit | Portfolio">
<meta property="og:description" content="Self Developed personal website build with React.js">
<meta property="og:image"
content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="S0umyajit | Portfolio">
<meta name="twitter:description" content="Self Developed personal website build with React.js">
<meta name="twitter:image"
content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
================================================
FILE: public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: src/App.css
================================================
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
================================================
FILE: src/App.js
================================================
import React, { useState, useEffect } from "react";
import Preloader from "../src/components/Pre";
import Navbar from "./components/Navbar";
import Home from "./components/Home/Home";
import About from "./components/About/About";
import Projects from "./components/Projects/Projects";
import Footer from "./components/Footer";
import Resume from "./components/Resume/ResumeNew";
import {
BrowserRouter as Router,
Route,
Routes,
Navigate
} from "react-router-dom";
import ScrollToTop from "./components/ScrollToTop";
import "./style.css";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
const [load, upadateLoad] = useState(true);
useEffect(() => {
const timer = setTimeout(() => {
upadateLoad(false);
}, 1200);
return () => clearTimeout(timer);
}, []);
return (
<Router>
<Preloader load={load} />
<div className="App" id={load ? "no-scroll" : "scroll"}>
<Navbar />
<ScrollToTop />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/project" element={<Projects />} />
<Route path="/about" element={<About />} />
<Route path="/resume" element={<Resume />} />
<Route path="*" element={<Navigate to="/"/>} />
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
================================================
FILE: src/App.test.js
================================================
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
================================================
FILE: src/components/About/About.js
================================================
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import Particle from "../Particle";
import Github from "./Github";
import Techstack from "./Techstack";
import Aboutcard from "./AboutCard";
import laptopImg from "../../Assets/about.png";
import Toolstack from "./Toolstack";
function About() {
return (
<>
{" "}
<Particle />
<Container fluid className="about-section">
<Container>
<Row style={{ justifyContent: "center", padding: "10px" }}>
<Col
md={7}
style={{
justifyContent: "center",
paddingTop: "30px",
paddingBottom: "50px",
}}
>
<h1 style={{ fontSize: "2.1em", paddingBottom: "20px" }}>
Know Who <strong className="purple">I'M</strong>
</h1>
<Aboutcard />
</Col>
<Col
md={5}
style={{ paddingTop: "120px", paddingBottom: "50px" }}
className="about-img"
>
<img src={laptopImg} alt="about" className="img-fluid" />
</Col>
</Row>
<h1 className="project-heading">
Professional <strong className="purple">Skillset </strong>
</h1>
<Techstack />
<h1 className="project-heading">
<strong className="purple">Tools</strong> I use
</h1>
<Toolstack />
<Github />
</Container>
</Container>
</>
);
}
export default About;
================================================
FILE: src/components/About/AboutCard.js
================================================
import React from "react";
import Card from "react-bootstrap/Card";
import { ImPointRight } from "react-icons/im";
function AboutCard() {
return (
<Card className="quote-card-view">
<Card.Body>
<blockquote className="blockquote mb-0">
<p style={{ textAlign: "justify" }}>
Hi everyone! I’m <span className="purple">Soumyajit Behera</span>{" "}
from <span className="purple">Bhubaneswar, India</span>.
<br />
I’m currently working as a{" "}
<span className="purple">Software Developer</span> at{" "}
<span className="purple">Juspay</span>.
<br />I hold an Integrated M.Sc. (IMSc) in{" "}
<span className="purple">Mathematics and Computing</span> from{" "}
<span className="purple">BIT Mesra</span>.
<br />
<br />
Outside of coding, I love engaging in activities that keep me
creative and inspired:
</p>
<ul>
<li className="about-activity">
<ImPointRight /> Playing Games 🎮
</li>
<li className="about-activity">
<ImPointRight /> Writing Tech Blogs ✍️
</li>
<li className="about-activity">
<ImPointRight /> Traveling and Exploring New Places 🌍
</li>
</ul>
<p style={{ color: "rgb(155 126 172)" }}>
"Strive to build things that make a difference!"{" "}
</p>
<footer className="blockquote-footer">Soumyajit</footer>
</blockquote>
</Card.Body>
</Card>
);
}
export default AboutCard;
================================================
FILE: src/components/About/Github.js
================================================
import React from "react";
import GitHubCalendar from "react-github-calendar";
import { Row } from "react-bootstrap";
function Github() {
return (
<Row
style={{
justifyContent: "center",
paddingBottom: "10px",
color: "white",
}}
>
<h1 className="project-heading pb-4" style={{ paddingBottom: "20px" }}>
Days I <strong className="purple">Code</strong>
</h1>
<GitHubCalendar
username="soumyajit4419"
blockSize={30}
blockMargin={10}
color="#c084f5"
fontSize={20}
/>
</Row>
);
}
export default Github;
================================================
FILE: src/components/About/Techstack.js
================================================
import React from "react";
import { Col, Row } from "react-bootstrap";
import { SiNextdotjs, SiSolidity } from "react-icons/si";
import { FaRust } from "react-icons/fa";
import Go from "../../Assets/TechIcons/go.svg";
import C from "../../Assets/TechIcons/C++.svg";
import Javascript from "../../Assets/TechIcons/Javascript.svg";
import Node from "../../Assets/TechIcons/Node.svg";
import ReactIcon from "../../Assets/TechIcons/React.svg";
import HaskellIcon from "../../Assets/TechIcons/Haskell.svg";
import Java from "../../Assets/TechIcons/Java.svg";
import Python from "../../Assets/TechIcons/Python.svg";
import Typescript from "../../Assets/TechIcons/Typescript.svg";
import Git from "../../Assets/TechIcons/Git.svg";
import Firebase from "../../Assets/TechIcons/Firebase.svg";
import Redis from "../../Assets/TechIcons/Redis.svg";
import Docker from "../../Assets/TechIcons/Docker.svg";
import Mongo from "../../Assets/TechIcons/Mongo.svg";
import SQL from "../../Assets/TechIcons/SQL.svg";
import Kubernates from "../../Assets/TechIcons/Kubernates.svg";
import Redux from "../../Assets/TechIcons/Redux.svg";
import Tailwind from "../../Assets/TechIcons/Tailwind.svg";
import MUI from "../../Assets/TechIcons/MUI.svg";
import Postman from "../../Assets/TechIcons/Postman.svg";
import AWS from "../../Assets/TechIcons/AWS.svg";
import Kafka from "../../Assets/TechIcons/Kafka.svg";
function Techstack() {
return (
<Row style={{ justifyContent: "center", paddingBottom: "50px" }}>
<Col xs={4} md={2} className="tech-icons">
<img src={C} alt="C++" />
<div className="tech-icons-text">C++</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Javascript} alt="javascript" />
<div className="tech-icons-text">Javascript</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Typescript} alt="typescript" />
<div className="tech-icons-text">Javascript</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Go} alt="go" />
<div className="tech-icons-text">Go</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Node} alt="node" />
<div className="tech-icons-text">Node.Js</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={ReactIcon} alt="react" />
<div className="tech-icons-text">React.Js</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<SiSolidity fontSize={"24px"} />
<div className="tech-icons-text">Solidity</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Mongo} alt="mongoDb" />
<div className="tech-icons-text">Mongo DB</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Redux} alt="redux" />
<div className="tech-icons-text">Redux</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<SiNextdotjs fontSize={"24px"} />
<div className="tech-icons-text">Next.js</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Git} alt="git" />
<div className="tech-icons-text">Git</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Firebase} alt="firebase" />
<div className="tech-icons-text">Firebase</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Redis} alt="redis" />
<div className="tech-icons-text">Redis</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Docker} alt="docker" />
<div className="tech-icons-text">Docker</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Kubernates} alt="kubernetes" />
<div className="tech-icons-text">Kubernetes</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={SQL} alt="SQL" />
<div className="tech-icons-text">Postgresql</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Python} alt="Python" />
<div className="tech-icons-text">Python</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Java} alt="haskell" />
<div className="tech-icons-text">Java</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={HaskellIcon} alt="haskell" />
<div className="tech-icons-text">Haskell</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Tailwind} alt="tailwind" />
<div className="tech-icons-text">Tailwind CSS</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={MUI} alt="mui" />
<div className="tech-icons-text">Material UI</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Postman} alt="Postman" />
<div className="tech-icons-text">Postman</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<FaRust fontSize={"24px"} />
<div className="tech-icons-text">Rust</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={AWS} alt="Postman" className="tech-icon-images" />
<div className="tech-icons-text">AWS</div>
</Col>
<Col xs={4} md={2} className="tech-icons">
<img src={Kafka} alt="Kafka" className="tech-icon-images" />
<div className="tech-icons-text">Kafka</div>
</Col>
</Row>
);
}
export default Techstack;
================================================
FILE: src/components/About/Toolstack.js
================================================
import React from "react";
import { Col, Row } from "react-bootstrap";
import macOs from "../../Assets/TechIcons/Apple MacOSX.svg";
import chrome from "../../Assets/TechIcons/Google Chrome.svg";
import vsCode from "../../Assets/TechIcons/vscode.svg";
import intelliJ from "../../Assets/TechIcons/intellij-idea.svg";
function Toolstack() {
return (
<Row style={{ justifyContent: "center", paddingBottom: "50px" }}>
<Col xs={4} md={2} className="tech-icons">
<img src={macOs} alt="macOs" className="tech-icon-images" />
<div className="tech-icons-text">Mac Os</div>
</Col>
<Col xs={4} md={2} className="tech-icons ">
<img src={chrome} alt="Chrome" className="tech-icon-images" />
<div className="tech-icons-text">Google Chrome</div>
</Col>
<Col xs={4} md={2} className="tech-icons ">
<img src={vsCode} alt="vsCode" className="tech-icon-images" />
<div className="tech-icons-text">Vs Code</div>
</Col>
<Col xs={4} md={2} className="tech-icons ">
<img src={intelliJ} alt="go" className="tech-icon-images" />
<div className="tech-icons-text">IntelliJ</div>
</Col>
</Row>
);
}
export default Toolstack;
================================================
FILE: src/components/Footer.js
================================================
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import {
AiFillGithub,
AiOutlineTwitter,
AiFillInstagram,
} from "react-icons/ai";
import { FaLinkedinIn } from "react-icons/fa";
function Footer() {
let date = new Date();
let year = date.getFullYear();
return (
<Container fluid className="footer">
<Row>
<Col md="4" className="footer-copywright">
<h3>Designed and Developed by Soumyajit Behera</h3>
</Col>
<Col md="4" className="footer-copywright">
<h3>Copyright © {year} SB</h3>
</Col>
<Col md="4" className="footer-body">
<ul className="footer-icons">
<li className="social-icons">
<a
href="https://github.com/soumyajit4419"
style={{ color: "white" }}
target="_blank"
rel="noopener noreferrer"
>
<AiFillGithub />
</a>
</li>
<li className="social-icons">
<a
href="https://twitter.com/Soumyajit4419"
style={{ color: "white" }}
target="_blank"
rel="noopener noreferrer"
>
<AiOutlineTwitter />
</a>
</li>
<li className="social-icons">
<a
href="https://www.linkedin.com/in/soumyajit4419/"
style={{ color: "white" }}
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedinIn />
</a>
</li>
<li className="social-icons">
<a
href="https://www.instagram.com/soumyajit4419"
style={{ color: "white" }}
target="_blank"
rel="noopener noreferrer"
>
<AiFillInstagram />
</a>
</li>
</ul>
</Col>
</Row>
</Container>
);
}
export default Footer;
================================================
FILE: src/components/Home/Home.js
================================================
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import homeLogo from "../../Assets/home-main.svg";
import Particle from "../Particle";
import Home2 from "./Home2";
import Type from "./Type";
import Techstack from "../About/Techstack";
import Github from "../About/Github";
import {
AiFillGithub,
AiOutlineTwitter,
AiFillInstagram,
} from "react-icons/ai";
import { FaLinkedinIn } from "react-icons/fa";
function Home() {
return (
<section>
<Container fluid className="home-section" id="home">
<Particle />
<Container className="home-content">
<Row>
<Col md={7} className="home-header">
<h1 style={{ paddingBottom: 15 }} className="heading">
Hi There!{" "}
<span className="wave" role="img" aria-labelledby="wave">
👋🏻
</span>
</h1>
<h1 className="heading-name">
I'M
<strong className="main-name"> SOUMYAJIT BEHERA</strong>
</h1>
<div style={{ padding: 50, textAlign: "left" }}>
<Type />
</div>
</Col>
<Col md={5} style={{ paddingBottom: 20 }}>
<img
src={homeLogo}
alt="home pic"
className="img-fluid"
style={{ maxHeight: "450px" }}
/>
</Col>
</Row>
</Container>
</Container>
<Home2 />
<Container>
<Row style={{ paddingTop: "50px", paddingBottom: "80px" }}>
<Col md={12} className="home-about-social">
<h1>Find Me On</h1>
<p>
Feel free to <span className="purple">connect </span>with me
</p>
<ul className="home-about-social-links">
<li className="social-icons">
<a
href="https://github.com/soumyajit4419"
target="_blank"
rel="noreferrer"
className="icon-colour home-social-icons"
>
<AiFillGithub />
</a>
</li>
<li className="social-icons">
<a
href="https://twitter.com/Soumyajit4419"
target="_blank"
rel="noreferrer"
className="icon-colour home-social-icons"
>
<AiOutlineTwitter />
</a>
</li>
<li className="social-icons">
<a
href="https://www.linkedin.com/in/soumyajit4419/"
target="_blank"
rel="noreferrer"
className="icon-colour home-social-icons"
>
<FaLinkedinIn />
</a>
</li>
<li className="social-icons">
<a
href="https://www.instagram.com/soumyajit4419"
target="_blank"
rel="noreferrer"
className="icon-colour home-social-icons"
>
<AiFillInstagram />
</a>
</li>
</ul>
</Col>
</Row>
</Container>
</section>
);
}
export default Home;
================================================
FILE: src/components/Home/Home2.js
================================================
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import myImg from "../../Assets/avatar.svg";
import Tilt from "react-parallax-tilt";
function Home2() {
return (
<Container fluid className="home-about-section" id="about">
<Container>
<Row>
<Col md={8} className="home-about-description">
<h1 style={{ fontSize: "2.6em" }}>
LET ME <span className="purple"> INTRODUCE </span> MYSELF
</h1>
<p className="home-about-body">
I’m a Software Engineer who loves transforming ideas into
reliable, scalable products. Over time, I’ve explored several
technologies and found my passion in building high-performance
systems and intuitive user experiences.
<br />
<br />
I’m proficient in
<i>
<b className="purple">
{" "}
JavaScript, C++, Rust, Node.js, and Java{" "}
</b>
</i>
— and I enjoy working across both backend and frontend stacks.
<br />
<br />
My key areas of interest include developing
<i>
<b className="purple">
{" "}
Web Applications, Blockchain Solutions,{" "}
</b>
</i>
and exploring new ways to bridge on-chain and off-chain systems.
<br />
<br />
Whenever possible, I love building projects with
<b className="purple"> Node.js </b> and modern frameworks like{" "}
<i>
<b className="purple">React.js</b> and{" "}
<b className="purple">Next.js</b>.
</i>
</p>
</Col>
<Col md={4} className="myAvtar">
<Tilt>
<img src={myImg} className="img-fluid" alt="avatar" />
</Tilt>
</Col>
</Row>
</Container>
</Container>
);
}
export default Home2;
================================================
FILE: src/components/Home/Type.js
================================================
import React from "react";
import Typewriter from "typewriter-effect";
function Type() {
return (
<Typewriter
options={{
strings: [
"Software Developer",
"Freelancer",
"MERN Stack Developer",
"Open Source Contributor",
],
autoStart: true,
loop: true,
deleteSpeed: 50,
}}
/>
);
}
export default Type;
================================================
FILE: src/components/Navbar.js
================================================
import React, { useState } from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Container from "react-bootstrap/Container";
import logo from "../Assets/logo.png";
import Button from "react-bootstrap/Button";
import { Link } from "react-router-dom";
import { CgGitFork } from "react-icons/cg";
import { ImBlog } from "react-icons/im";
import {
AiFillStar,
AiOutlineHome,
AiOutlineFundProjectionScreen,
AiOutlineUser,
} from "react-icons/ai";
import { CgFileDocument } from "react-icons/cg";
function NavBar() {
const [expand, updateExpanded] = useState(false);
const [navColour, updateNavbar] = useState(false);
function scrollHandler() {
if (window.scrollY >= 20) {
updateNavbar(true);
} else {
updateNavbar(false);
}
}
window.addEventListener("scroll", scrollHandler);
return (
<Navbar
expanded={expand}
fixed="top"
expand="md"
className={navColour ? "sticky" : "navbar"}
>
<Container>
<Navbar.Brand href="/" className="d-flex">
<img src={logo} className="img-fluid logo" alt="brand" />
</Navbar.Brand>
<Navbar.Toggle
aria-controls="responsive-navbar-nav"
onClick={() => {
updateExpanded(expand ? false : "expanded");
}}
>
<span></span>
<span></span>
<span></span>
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ms-auto" defaultActiveKey="#home">
<Nav.Item>
<Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
<AiOutlineHome style={{ marginBottom: "2px" }} /> Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={Link}
to="/about"
onClick={() => updateExpanded(false)}
>
<AiOutlineUser style={{ marginBottom: "2px" }} /> About
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={Link}
to="/project"
onClick={() => updateExpanded(false)}
>
<AiOutlineFundProjectionScreen
style={{ marginBottom: "2px" }}
/>{" "}
Projects
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={Link}
to="/resume"
onClick={() => updateExpanded(false)}
>
<CgFileDocument style={{ marginBottom: "2px" }} /> Resume
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
href="https://soumyajitblogs.vercel.app/"
target="_blank"
rel="noreferrer"
>
<ImBlog style={{ marginBottom: "2px" }} /> Blogs
</Nav.Link>
</Nav.Item>
<Nav.Item className="fork-btn">
<Button
href="https://github.com/soumyajit4419/Portfolio"
target="_blank"
className="fork-btn-inner"
>
<CgGitFork style={{ fontSize: "1.2em" }} />{" "}
<AiFillStar style={{ fontSize: "1.1em" }} />
</Button>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default NavBar;
================================================
FILE: src/components/Particle.js
================================================
import React from "react";
import Particles from "react-tsparticles";
function Particle() {
return (
<Particles
id="tsparticles"
params={{
particles: {
number: {
value: 160,
density: {
enable: true,
value_area: 1500,
},
},
line_linked: {
enable: false,
opacity: 0.03,
},
move: {
direction: "right",
speed: 0.05,
},
size: {
value: 1,
},
opacity: {
anim: {
enable: true,
speed: 1,
opacity_min: 0.05,
},
},
},
interactivity: {
events: {
onclick: {
enable: true,
mode: "push",
},
},
modes: {
push: {
particles_nb: 1,
},
},
},
retina_detect: true,
}}
/>
);
}
export default Particle;
================================================
FILE: src/components/Pre.js
================================================
import React from "react";
function Pre(props) {
return <div id={props.load ? "preloader" : "preloader-none"}></div>;
}
export default Pre;
================================================
FILE: src/components/Projects/ProjectCards.js
================================================
import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import { CgWebsite } from "react-icons/cg";
import { BsGithub } from "react-icons/bs";
function ProjectCards(props) {
return (
<Card className="project-card-view">
<Card.Img variant="top" src={props.imgPath} alt="card-img" />
<Card.Body>
<Card.Title>{props.title}</Card.Title>
<Card.Text style={{ textAlign: "justify" }}>
{props.description}
</Card.Text>
<Button variant="primary" href={props.ghLink} target="_blank">
<BsGithub />
{props.isBlog ? "Blog" : "GitHub"}
</Button>
{"\n"}
{"\n"}
{/* If the component contains Demo link and if it's not a Blog then, it will render the below component */}
{!props.isBlog && props.demoLink && (
<Button
variant="primary"
href={props.demoLink}
target="_blank"
style={{ marginLeft: "10px" }}
>
<CgWebsite />
{"Demo"}
</Button>
)}
</Card.Body>
</Card>
);
}
export default ProjectCards;
================================================
FILE: src/components/Projects/Projects.js
================================================
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import ProjectCard from "./ProjectCards";
import Particle from "../Particle";
import leaf from "../../Assets/Projects/leaf.png";
import emotion from "../../Assets/Projects/emotion.png";
import editor from "../../Assets/Projects/codeEditor.png";
import chatify from "../../Assets/Projects/chatify.png";
import suicide from "../../Assets/Projects/suicide.png";
import bitsOfCode from "../../Assets/Projects/blog.png";
function Projects() {
return (
<Container fluid className="project-section">
<Particle />
<Container>
<h1 className="project-heading">
My Recent <strong className="purple">Works </strong>
</h1>
<p style={{ color: "white" }}>
Here are a few projects I've worked on recently.
</p>
<Row style={{ justifyContent: "center", paddingBottom: "10px" }}>
<Col md={4} className="project-card">
<ProjectCard
imgPath={chatify}
isBlog={false}
title="Chatify"
description="Personal Chat Room or Workspace to share resources and hangout with friends build with react.js, Material-UI, and Firebase. Have features which allows user for realtime messaging, image sharing as well as supports reactions on messages."
ghLink="https://github.com/soumyajit4419/Chatify"
demoLink="https://chatify-49.web.app/"
/>
</Col>
<Col md={4} className="project-card">
<ProjectCard
imgPath={bitsOfCode}
isBlog={false}
title="Bits-0f-C0de"
description="My personal blog page build with Next.js and Tailwind Css which takes the content from makdown files and renders it using Next.js. Supports dark mode and easy to write blogs using markdown."
ghLink="https://github.com/soumyajit4419/Bits-0f-C0de"
demoLink="https://blogs.soumya-jit.tech/"
/>
</Col>
<Col md={4} className="project-card">
<ProjectCard
imgPath={editor}
isBlog={false}
title="Editor.io"
description="Online code and markdown editor build with react.js. Online Editor which supports html, css, and js code with instant view of website. Online markdown editor for building README file which supports GFM, Custom Html tags with toolbar and instant preview.Both the editor supports auto save of work using Local Storage"
ghLink="https://github.com/soumyajit4419/Editor.io"
demoLink="https://editor.soumya-jit.tech/"
/>
</Col>
<Col md={4} className="project-card">
<ProjectCard
imgPath={leaf}
isBlog={false}
title="Plant AI"
description="Used the plant disease dataset from Kaggle and trained a image classifer model using 'PyTorch' framework using CNN and Transfer Learning with 38 classes of various plant leaves. The model was successfully able to detect diseased and healthy leaves of 14 unique plants. I was able to achieve an accuracy of 98% by using Resnet34 pretrained model."
ghLink="https://github.com/soumyajit4419/Plant_AI"
demoLink="https://plant49-ai.herokuapp.com/"
/>
</Col>
<Col md={4} className="project-card">
<ProjectCard
imgPath={suicide}
isBlog={false}
title="Ai For Social Good"
description="Using 'Natural Launguage Processing' for the detection of suicide-related posts and user's suicide ideation in cyberspace and thus helping in sucide prevention."
ghLink="https://github.com/soumyajit4419/AI_For_Social_Good"
// demoLink="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley" <--------Please include a demo link here
/>
</Col>
<Col md={4} className="project-card">
<ProjectCard
imgPath={emotion}
isBlog={false}
title="Face Recognition and Emotion Detection"
description="Trained a CNN classifier using 'FER-2013 dataset' with Keras and tensorflow backened. The classifier sucessfully predicted the various types of emotions of human. And the highest accuracy obtained with the model was 60.1%.
Then used Open-CV to detect the face in an image and then pass the face to the classifer to predict the emotion of a person."
ghLink="https://github.com/soumyajit4419/Face_And_Emotion_Detection"
// demoLink="https://blogs.soumya-jit.tech/" <--------Please include a demo link here
/>
</Col>
</Row>
</Container>
</Container>
);
}
export default Projects;
================================================
FILE: src/components/Resume/ResumeNew.js
================================================
import React, { useState, useEffect } from "react";
import { Container, Row } from "react-bootstrap";
import Button from "react-bootstrap/Button";
import Particle from "../Particle";
import pdf from "../../Assets/../Assets/Soumyajit_Behera.pdf";
import { AiOutlineDownload } from "react-icons/ai";
import { Document, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
function ResumeNew() {
const [width, setWidth] = useState(1200);
useEffect(() => {
setWidth(window.innerWidth);
}, []);
return (
<div>
<Container fluid className="resume-section">
<Particle />
<Row style={{ justifyContent: "center", position: "relative" }}>
<Button
variant="primary"
href={pdf}
target="_blank"
style={{ maxWidth: "250px" }}
>
<AiOutlineDownload />
Download CV
</Button>
</Row>
<Row className="resume">
<Document file={pdf} className="d-flex justify-content-center">
<Page pageNumber={1} scale={width > 786 ? 1.7 : 0.6} />
</Document>
</Row>
<Row style={{ justifyContent: "center", position: "relative" }}>
<Button
variant="primary"
href={pdf}
target="_blank"
style={{ maxWidth: "250px" }}
>
<AiOutlineDownload />
Download CV
</Button>
</Row>
</Container>
</div>
);
}
export default ResumeNew;
================================================
FILE: src/components/ScrollToTop.js
================================================
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
export default ScrollToTop;
================================================
FILE: src/index.css
================================================
/* @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap'); */
@import url("https://fonts.googleapis.com/css2?family=Outfit&family=PT+Mono&display=swap");
body {
margin: 0;
font-family: "PT Mono", monospace !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: linear-gradient(to left, rgb(27 20 41), rgb(20 15 35));
}
================================================
FILE: src/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
================================================
FILE: src/reportWebVitals.js
================================================
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
================================================
FILE: src/setupTests.js
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
================================================
FILE: src/style.css
================================================
html {
--section-background-color: linear-gradient(
to bottom left,
rgba(17, 16, 16, 0.582),
rgba(12, 8, 24, 0.904)
);
--image-gradient: linear-gradient(
to bottom left,
rgba(17, 16, 16, 0.678),
rgba(12, 10, 22, 0.863)
);
--imp-text-color: #c770f0;
}
.purple {
color: var(--imp-text-color) !important;
}
button:focus {
box-shadow: none !important;
}
/* --------- */
/* Preloader */
/* --------- */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background-color: #0c0513;
background-image: url(./Assets/pre.svg);
background-repeat: no-repeat;
background-position: center;
}
#preloader-none {
opacity: 0;
}
/* #preloader-none {
opacity: 0;
display: none;
} */
#no-scroll {
overflow: hidden;
height: 100vh;
}
/* --------- */
/*Scrollbar */
/* --------- */
::-webkit-scrollbar {
width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
background: #2d1950;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(178, 121, 216, 0.959);
border-radius: 12px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(222, 130, 235, 0.911);
border-radius: 12px;
}
/* --------- */
/* Navbar Section */
/* --------- */
.sticky {
background-color: #1b1a2ea9 !important;
transition: all 0.3s ease-out 0s !important;
box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important;
backdrop-filter: blur(15px) !important;
}
.navbar {
position: fixed !important;
transition: all 0.3s ease-out 0s !important;
padding: 0.3rem 2rem !important;
font-size: 1.2rem !important;
}
.navbar-toggler {
position: relative !important;
background-color: transparent !important;
border-color: transparent !important;
}
.navbar-toggler span {
display: block !important;
background-color: #be50f4 !important;
height: 4px !important;
width: 27px !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
transform: rotate(0deg) !important;
left: 0 !important;
opacity: 1 !important;
}
.navbar-toggler:focus,
.navbar-toggler:active {
outline: 0 !important;
}
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
transition: transform 0.35s ease-in-out !important;
transition: transform 0.35s ease-in-out !important;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
position: absolute !important;
left: 12px !important;
top: 10px !important;
transform: rotate(135deg) !important;
opacity: 0.9 !important;
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
height: 12px !important;
visibility: hidden !important;
background-color: transparent !important;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
position: absolute !important;
left: 12px !important;
top: 10px !important;
transform: rotate(-135deg) !important;
opacity: 0.9 !important;
}
@media (max-width: 767px) {
.navbar {
padding: 1rem 2rem !important;
font-size: 1.4rem !important;
background-color: #181a27 !important;
}
.navbar-nav .nav-item a::after {
display: none !important;
}
}
.navbar-brand {
color: rgb(250, 250, 250) !important;
}
.logo {
height: 1.4em !important;
width: 2.5em !important;
}
.navbar-nav .nav-link {
color: white !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.nav-link {
padding: 0.8rem 1rem !important;
}
@media (max-width: 767px) {
.nav-link {
padding: 0.7rem 1rem !important;
}
}
.navbar-nav .nav-item {
position: relative;
margin-left: 20px;
}
.navbar-nav .nav-item a {
font-weight: 400;
transition: all 0.3s ease-out 0s;
position: relative;
z-index: 1;
}
.navbar-nav .nav-item a::after {
content: "";
position: relative;
display: block;
height: 5px;
width: 0;
border-radius: 16px;
background: #c95bf5;
bottom: 1px;
left: 0;
z-index: -1;
transition: all 0.3s ease-out 0s;
}
.navbar-nav .nav-item a:hover::after {
width: 100%;
}
/* --------- */
/* Home section */
/* --------- */
.wave {
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
animation-duration: 2.1s; /* Change to speed up or slow down */
animation-iteration-count: infinite; /* Never stop waving :) */
transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
display: inline-block;
}
@keyframes wave-animation {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
} /* The following five values can be played with to make the waving more or less extreme */
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
} /* Reset for the last half to pause */
100% {
transform: rotate(0deg);
}
}
#tsparticles {
position: fixed !important;
background-repeat: no-repeat !important;
background-size: cover !important;
width: 100%;
height: 100%;
}
.home-header {
padding-top: 80px !important;
}
.home-section {
position: relative;
z-index: -1;
/* background-image: var(--image-gradient), url(./Assets/home-bg.jpg); */
background-position: top center;
background-repeat: no-repeat;
padding-bottom: 30px !important;
padding-top: 30px !important;
}
.home-content {
padding: 9rem 0 2rem !important;
color: whitesmoke;
text-align: left;
}
.heading {
font-size: 2.4em !important;
padding-left: 50px !important;
}
.heading-name {
font-size: 2.5em !important;
padding-left: 45px !important;
}
.main-name {
color: #cd5ff8;
}
.Typewriter__wrapper {
font-size: 2.2em !important;
color: #be6adf !important;
font-weight: 600 !important;
}
.Typewriter__cursor {
font-size: 2.4em !important;
color: #b562d6 !important;
}
@media (max-width: 767px) {
.Typewriter__wrapper {
font-size: 1.4em !important;
font-weight: 500 !important;
position: absolute !important;
}
.Typewriter__cursor {
display: none !important;
}
}
.myAvtar {
justify-content: center !important;
padding-top: 9em !important;
}
@media (max-width: 767px) {
.myAvtar {
padding-top: 2em !important;
padding-bottom: 2em !important;
}
}
.home-about-section {
position: relative;
padding-bottom: 70px !important;
padding-top: 70px !important;
}
.home-about-description {
color: white !important;
padding-top: 100px !important;
padding-bottom: 20px !important;
text-align: center;
}
.home-about-body {
padding-top: 50px;
font-size: 1.2em !important;
text-align: left;
}
.home-about-social {
text-align: center !important;
padding-top: 25px;
color: white !important;
}
.home-about-social-links {
justify-content: center !important;
padding-top: 15px !important;
display: inline-block !important;
position: relative !important;
padding-inline-start: 0 !important;
}
.home-social-icons {
position: relative !important;
display: inline-block !important;
width: 40px !important;
height: 40px !important;
text-align: center !important;
font-size: 1.2em !important;
line-height: 2em !important;
background: rgba(255, 255, 255, 0.972) !important;
border-radius: 50% !important;
transition: 0.5s !important;
}
.home-social-icons::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #68187a;
transition: 0.5s;
transform: scale(0.9);
z-index: -1;
}
.home-social-icons:hover::before {
transform: scale(1.1);
box-shadow: 0 0 15px #801f95;
}
.home-social-icons:hover {
color: #87209e;
box-shadow: 0 0 5px #87209e;
text-shadow: 0 0 2px #87209e;
}
.social-icons {
display: inline-block !important;
padding-right: 15px;
padding-left: 15px;
}
.icon-colour {
color: #700c86 !important;
}
/* --------- */
/* Footer */
/* --------- */
.footer {
background-color: rgb(10, 4, 22);
bottom: 0 !important;
padding-top: 10px !important;
padding-bottom: 8px !important ;
}
.footer-copywright {
text-align: center !important;
}
.footer-body {
z-index: 1;
text-align: center !important;
}
@media (max-width: 767px) {
.footer-copywright {
text-align: center !important;
}
.footer-body {
text-align: center !important;
}
}
.footer h3 {
font-size: 1em;
color: white !important;
margin-top: 0.5em !important;
margin-bottom: 0.5em !important;
}
.footer-icons {
margin-top: 0.5em !important;
margin-bottom: 0.5em !important;
padding: 0 !important;
}
.blockquote-footer {
color: #a588c0 !important;
}
/* --------- */
/* Projects */
/* --------- */
.project-section {
position: relative !important;
padding-top: 150px !important;
padding-bottom: 30px !important;
background-image: var(--section-background-color) !important;
}
.project-card {
padding-top: 50px !important;
padding-bottom: 50px !important;
padding-left: 25px !important;
padding-right: 25px !important;
height: auto !important;
}
.project-card-view {
box-shadow: 0 4px 5px 3px rgba(119, 53, 136, 0.459) !important;
color: white !important;
background-color: transparent !important;
opacity: 0.9 !important;
transition: all 0.5s ease 0s !important;
height: 100% !important;
}
.project-card-view:hover {
transform: scale(1.02) !important;
overflow: hidden !important;
box-shadow: 0 4px 4px 5px rgba(129, 72, 144, 0.561) !important;
}
.blog-card {
padding-top: 50px !important;
padding-bottom: 50px !important;
padding-left: 25px !important;
padding-right: 25px !important;
height: auto !important;
}
.blog-card-view {
background-color: transparent !important;
box-shadow: 0 3px 3px 2px rgba(145, 77, 161, 0.459) !important;
color: white !important;
transition: all 0.5s ease 0s !important;
height: 100% !important;
}
.blog-link {
color: white !important;
text-decoration: none !important;
}
.blog-link:hover {
cursor: pointer !important;
}
.blog-card-view:hover {
transform: scale(1.02) !important;
overflow: hidden !important;
box-shadow: 0 3px 3px 5px rgba(155, 88, 173, 0.65) !important;
}
.card-img-top {
padding: 20px !important;
opacity: 0.8 !important;
border-radius: 10px !important;
}
.blog-img {
padding: 0px !important;
opacity: 0.8 !important;
border-radius: 0px !important;
}
.btn-primary {
color: #fff !important;
background-color: #623686 !important;
border-color: #623686 !important;
}
.btn-primary:hover {
color: #fff !important;
background-color: #6d20c5d7 !important;
border-color: #6d20c5d7 !important;
}
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
.project-heading {
color: white !important;
font-size: 2.3em !important;
font-weight: 500 !important;
padding-top: 10px !important;
}
/* --------- */
/* About */
/* --------- */
.about-section {
position: relative !important;
padding-top: 150px !important;
padding-bottom: 30px !important;
/* background-image: var(--section-background-color) !important; */
color: white !important;
}
.tech-icons {
display: flex !important;
align-self: center !important;
justify-content: center !important;
font-size: 1rem !important;
margin: 15px !important;
padding: 10px 20px !important;
opacity: 0.93 !important;
outline: 1.7px solid rgba(200, 137, 230, 0.637) !important;
vertical-align: middle !important;
text-align: center !important;
border-radius: 24px !important;
box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137) !important;
overflow: hidden !important;
transition: all 0.4s ease 0s !important;
width: fit-content !important;
cursor: pointer !important;
transition: outline-color 0.3s, outline-width 0.3s, transform 0.3s;
color: white;
}
.tech-icons-text {
display: flex;
align-items: center;
margin-left: 10px;
color: white;
}
@media (max-width: 767px) {
.tech-icons {
margin: 10px !important;
}
}
.tech-icons:hover {
transform: scale(1.05) !important;
overflow: hidden !important;
outline: 2.2px solid rgba(197, 115, 230, 0.883) !important;
}
.tech-icon-images {
height: 1.6rem;
line-height: 1.6 !important;
}
.quote-card-view {
border: none !important;
color: white !important;
background-color: transparent !important;
}
.about-activity {
list-style: none !important;
text-align: left !important;
padding-left: 1px !important;
}
@media (max-width: 767px) {
.about-img {
padding-top: 0 !important;
}
}
/* --------- */
/* Resume */
/* --------- */
.resume-section {
position: relative !important;
padding-top: 110px !important;
padding-bottom: 30px !important;
background-image: var(--section-background-color) !important;
color: white !important;
}
.resume {
padding-top: 50px;
padding-bottom: 50px;
justify-content: center;
}
.resume-left {
padding-right: 80px !important;
}
.resume-right {
padding-left: 80px !important;
}
@media (max-width: 767px) {
.resume-left {
padding-right: 15px !important;
padding-left: 15px !important;
}
.resume-right {
padding-right: 15px !important;
padding-left: 15px !important;
}
}
.resume .resume-title {
font-size: 2em;
font-weight: 700;
padding-top: 30px;
padding-bottom: 30px;
}
.resume .resume-item {
padding: 0 0 10px 25px;
margin-top: -2px;
border-left: 2px solid #8a49a8;
position: relative;
}
.resume .resume-item .resume-title {
line-height: 18px;
font-size: 0.9em;
background: #5234795d;
padding: 8px 15px;
display: inline-block;
font-weight: 600;
margin-bottom: 10px;
}
.resume .resume-item ul {
padding-left: 20px;
text-align: justify;
}
.resume .resume-item ul li {
padding-bottom: 10px;
list-style: none;
}
.resume .resume-item:last-child {
padding-bottom: 0;
}
.resume .resume-item::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50px;
left: -9px;
top: 0;
background: #fff;
border: 2px solid #8a49a8;
}
.like-item {
padding-top: 10px !important;
font-size: 1.1em !important;
font-family: sans-serif !important;
}
.like-btn {
background-color: #934cce5e !important;
border-color: #934cce5e !important;
padding: 0.25rem 0.98rem !important;
border-radius: 5px !important;
line-height: 1.4 !important;
transition: 0.3s ease !important;
}
.like-btn:hover {
transform: translateY(-2px) !important;
background-color: #a24dd386 !important;
border-color: #a24dd386 !important;
}
.animate-like {
animation-name: likeAnimation;
animation-fill-mode: forwards;
animation-duration: 0.85s;
}
@keyframes likeAnimation {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.fork-btn {
font-size: 1.1em !important;
padding-top: 10px !important;
}
.fork-btn-inner {
line-height: 1.4em !important;
background-color: #934cce5e !important;
padding: 0.25rem 1.1rem !important;
vertical-align: middle !important;
text-align: center !important;
}
.fork-btn-inner:hover {
transform: translateY(-2px) !important;
background-color: #a24dd386 !important;
border-color: #a24dd386 !important;
}
.fork-btn-inner::after {
display: none !important;
}
gitextract_1qa0hdh5/
├── .gitignore
├── README.md
├── package.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
└── src/
├── App.css
├── App.js
├── App.test.js
├── components/
│ ├── About/
│ │ ├── About.js
│ │ ├── AboutCard.js
│ │ ├── Github.js
│ │ ├── Techstack.js
│ │ └── Toolstack.js
│ ├── Footer.js
│ ├── Home/
│ │ ├── Home.js
│ │ ├── Home2.js
│ │ └── Type.js
│ ├── Navbar.js
│ ├── Particle.js
│ ├── Pre.js
│ ├── Projects/
│ │ ├── ProjectCards.js
│ │ └── Projects.js
│ ├── Resume/
│ │ └── ResumeNew.js
│ └── ScrollToTop.js
├── index.css
├── index.js
├── reportWebVitals.js
├── setupTests.js
└── style.css
SYMBOL INDEX (17 symbols across 17 files)
FILE: src/App.js
function App (line 20) | function App() {
FILE: src/components/About/About.js
function About (line 10) | function About() {
FILE: src/components/About/AboutCard.js
function AboutCard (line 5) | function AboutCard() {
FILE: src/components/About/Github.js
function Github (line 5) | function Github() {
FILE: src/components/About/Techstack.js
function Techstack (line 28) | function Techstack() {
FILE: src/components/About/Toolstack.js
function Toolstack (line 8) | function Toolstack() {
FILE: src/components/Footer.js
function Footer (line 10) | function Footer() {
FILE: src/components/Home/Home.js
function Home (line 16) | function Home() {
FILE: src/components/Home/Home2.js
function Home2 (line 6) | function Home2() {
FILE: src/components/Home/Type.js
function Type (line 4) | function Type() {
FILE: src/components/Navbar.js
function NavBar (line 19) | function NavBar() {
FILE: src/components/Particle.js
function Particle (line 4) | function Particle() {
FILE: src/components/Pre.js
function Pre (line 2) | function Pre(props) {
FILE: src/components/Projects/ProjectCards.js
function ProjectCards (line 7) | function ProjectCards(props) {
FILE: src/components/Projects/Projects.js
function Projects (line 12) | function Projects() {
FILE: src/components/Resume/ResumeNew.js
function ResumeNew (line 11) | function ResumeNew() {
FILE: src/components/ScrollToTop.js
function ScrollToTop (line 4) | function ScrollToTop() {
Condensed preview — 30 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (62K chars).
[
{
"path": ".gitignore",
"chars": 366,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "README.md",
"chars": 2513,
"preview": "<h2 align=\"center\">\n Portfolio Website - v2.0<br/>\n <a href=\"https://soumyajit.vercel.app/\" target=\"_blank\">soumyajit."
},
{
"path": "package.json",
"chars": 1202,
"preview": "{\n \"name\": \"portfolio\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@react-pdf/renderer\": \"^2.2.0"
},
{
"path": "public/index.html",
"chars": 1875,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.png\" /"
},
{
"path": "public/manifest.json",
"chars": 306,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "public/robots.txt",
"chars": 67,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "src/App.css",
"chars": 564,
"preview": ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion:"
},
{
"path": "src/App.js",
"chars": 1371,
"preview": "import React, { useState, useEffect } from \"react\";\nimport Preloader from \"../src/components/Pre\";\nimport Navbar from \"."
},
{
"path": "src/App.test.js",
"chars": 246,
"preview": "import { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () ="
},
{
"path": "src/components/About/About.js",
"chars": 1594,
"preview": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport Particle from \"../Particle\";\nim"
},
{
"path": "src/components/About/AboutCard.js",
"chars": 1672,
"preview": "import React from \"react\";\nimport Card from \"react-bootstrap/Card\";\nimport { ImPointRight } from \"react-icons/im\";\n\nfunc"
},
{
"path": "src/components/About/Github.js",
"chars": 624,
"preview": "import React from \"react\";\nimport GitHubCalendar from \"react-github-calendar\";\nimport { Row } from \"react-bootstrap\";\n\nf"
},
{
"path": "src/components/About/Techstack.js",
"chars": 5563,
"preview": "import React from \"react\";\nimport { Col, Row } from \"react-bootstrap\";\nimport { SiNextdotjs, SiSolidity } from \"react-ic"
},
{
"path": "src/components/About/Toolstack.js",
"chars": 1224,
"preview": "import React from \"react\";\nimport { Col, Row } from \"react-bootstrap\";\nimport macOs from \"../../Assets/TechIcons/Apple M"
},
{
"path": "src/components/Footer.js",
"chars": 2074,
"preview": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport {\n AiFillGithub,\n AiOutlineTw"
},
{
"path": "src/components/Home/Home.js",
"chars": 3385,
"preview": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport homeLogo from \"../../Assets/hom"
},
{
"path": "src/components/Home/Home2.js",
"chars": 2128,
"preview": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport myImg from \"../../Assets/avatar"
},
{
"path": "src/components/Home/Type.js",
"chars": 406,
"preview": "import React from \"react\";\nimport Typewriter from \"typewriter-effect\";\n\nfunction Type() {\n return (\n <Typewriter\n "
},
{
"path": "src/components/Navbar.js",
"chars": 3551,
"preview": "import React, { useState } from \"react\";\nimport Navbar from \"react-bootstrap/Navbar\";\nimport Nav from \"react-bootstrap/N"
},
{
"path": "src/components/Particle.js",
"chars": 1071,
"preview": "import React from \"react\";\nimport Particles from \"react-tsparticles\";\n\nfunction Particle() {\n return (\n <Particles\n "
},
{
"path": "src/components/Pre.js",
"chars": 143,
"preview": "import React from \"react\";\nfunction Pre(props) {\n return <div id={props.load ? \"preloader\" : \"preloader-none\"}></div>;\n"
},
{
"path": "src/components/Projects/ProjectCards.js",
"chars": 1197,
"preview": "import React from \"react\";\nimport Card from \"react-bootstrap/Card\";\nimport Button from \"react-bootstrap/Button\";\nimport "
},
{
"path": "src/components/Projects/Projects.js",
"chars": 4919,
"preview": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport ProjectCard from \"./ProjectCard"
},
{
"path": "src/components/Resume/ResumeNew.js",
"chars": 1673,
"preview": "import React, { useState, useEffect } from \"react\";\nimport { Container, Row } from \"react-bootstrap\";\nimport Button from"
},
{
"path": "src/components/ScrollToTop.js",
"chars": 258,
"preview": "import { useEffect } from \"react\";\nimport { useLocation } from \"react-router-dom\";\n\nfunction ScrollToTop() {\n const { p"
},
{
"path": "src/index.css",
"chars": 400,
"preview": "/* @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap'); */\n\n@import url(\"https://fonts.googleapi"
},
{
"path": "src/index.js",
"chars": 500,
"preview": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport repor"
},
{
"path": "src/reportWebVitals.js",
"chars": 362,
"preview": "const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals'"
},
{
"path": "src/setupTests.js",
"chars": 241,
"preview": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).to"
},
{
"path": "src/style.css",
"chars": 15179,
"preview": "html {\n --section-background-color: linear-gradient(\n to bottom left,\n rgba(17, 16, 16, 0.582),\n rgba(12, 8, 2"
}
]
About this extraction
This page contains the full source code of the soumyajit4419/Portfolio GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 30 files (55.3 KB), approximately 15.7k tokens, and a symbol index with 17 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.