-
-
- I
- Am
-
- Subha
- setIsImageVisible(true)}
- onMouseLeave={() => setIsImageVisible(false)}
- >
- /Dev
-
-
-
-
-
- MERN & Flask Stack Developer / Web Designer.
- Information Technology student at{" "}
-
- IIEST Shibpur
-
- . Interested in Deep Learning and Blockchain
- technologies.
-
-
-
-
- Nothing more to say, thanks for visiting my website.
- Don ' t forget to explore my projects. I '
- m eager to collaborate with interested people.
-
-
-
+ return (
+
+
+
+
+ Hi, I'm Subhajit
+ setIsImageVisible(true)}
+ onMouseLeave={() => setIsImageVisible(false)}
+ >
+ A CS Undergraduate @BESU
-
- );
+
+
+
+
+ Made it to my Fifth Semester at{" "}
+
+ BESU
+
+ . I love building stuff, strongly interested in Full Stack Web
+ Development and Decentralised Technologies.
+
+
+
+
+ Thanks for visiting. Don't forget to explore my projects.
+ I'm eager to EAGER TO CONNECT & COLLABORATE.
+
+
+
+
+ );
};
export default IntroSection;
diff --git a/src/components/Main/ProjectsSection/Desk.jsx b/src/components/Main/ProjectsSection/Desk.jsx
new file mode 100644
index 0000000..d649a6a
--- /dev/null
+++ b/src/components/Main/ProjectsSection/Desk.jsx
@@ -0,0 +1,246 @@
+import { useState, useRef } from "react";
+import {
+ motion,
+ useSpring,
+ useMotionValue,
+ useTransform,
+ AnimatePresence,
+} from "framer-motion";
+import { X, ExternalLink, ArrowUpRight } from "lucide-react";
+import "./newP.css";
+import projects from "./projectsData";
+import PropTypes from "prop-types";
+
+// using 'aspect' and specific widths to vary the card shapes
+const layoutConfig = [
+ { top: "10%", left: "45%", width: "w-[280px]", height: "h-48" },
+ { top: "45%", left: "10%", width: "w-56", height: "h-56" },
+ { top: "45%", right: "10%", width: "w-48", height: "h-48" },
+ { bottom: "10%", right: "45%", width: "w-40", height: "h-40" },
+
+ { top: "17%", left: "17%", width: "w-[280px]", height: "h-48" },
+ { top: "17%", right: "17%", width: "w-[280px]", height: "h-48" },
+ { bottom: "17%", left: "17%", width: "w-40", height: "h-[280px]" },
+ { bottom: "17%", right: "17%", width: "w-80", height: "h-48" },
+];
+
+const FloatingCard = ({
+ project,
+ index,
+ mouseX,
+ mouseY,
+ setFocusedProject,
+}) => {
+ // Cycle safely through configs if more than len
+ const config = layoutConfig[index % layoutConfig.length];
+
+ // Varied depth for parallax effect (some move faster than others)
+ const depth = (index % 3) + 1;
+ const x = useTransform(mouseX, (val) => val / (depth * 20));
+ const y = useTransform(mouseY, (val) => val / (depth * 20));
+
+ const springConfig = { damping: 20, stiffness: 80, mass: 1 };
+ const springX = useSpring(x, springConfig);
+ const springY = useSpring(y, springConfig);
+
+ return (
+
setFocusedProject(project)}
+ initial={{ opacity: 0, scale: 0.5 }}
+ whileInView={{ opacity: 1, scale: 1 }}
+ viewport={{ once: true }}
+ transition={{ duration: 0.8, delay: index * 0.05, type: "spring" }}
+ >
+
+ {/* Background Image */}
+
+
+ {/* Gradient Overlay */}
+
+
+ {/* Content - Scaled down for smaller cards */}
+
+
+
+ {project.title}
+
+
+
+
+
+
+
+ {/* Hiding summary on very small cards to keep it clean */}
+
+ {project.technologies.slice(0, 2).map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+
+
+ );
+};
+FloatingCard.propTypes = {
+ project: PropTypes.object,
+ index: PropTypes.number,
+ mouseX: PropTypes.object,
+ mouseY: PropTypes.object,
+ setFocusedProject: PropTypes.func,
+};
+
+const ProjectModal = ({ project, onClose }) => {
+ if (!project) return null;
+
+ return (
+
+ e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+ {project.title}
+
+
+ Visit Project
+
+
+
+
+ About
+
+
+ {project.description}
+
+
+
+
+
+ Stack
+
+
+ {project.technologies.map((t) => (
+
+ {t}
+
+ ))}
+
+
+
+
+
+ );
+};
+ProjectModal.propTypes = {
+ project: PropTypes.object,
+ onClose: PropTypes.func,
+};
+
+export const ProjectsSection = () => {
+ const containerRef = useRef(null);
+ const mouseX = useMotionValue(0);
+ const mouseY = useMotionValue(0);
+ const [focusedProject, setFocusedProject] = useState(null);
+
+ const handleMouseMove = (e) => {
+ const { innerWidth, innerHeight } = window;
+ mouseX.set(e.clientX - innerWidth / 2);
+ mouseY.set(e.clientY - innerHeight / 2);
+ };
+
+ return (
+
+
+
+ Projects
+
+
+
+ {projects.slice(0, 8).map((project, index) => (
+
+ ))}
+
+
+ {focusedProject && (
+ setFocusedProject(null)}
+ />
+ )}
+
+
+ );
+};
diff --git a/src/components/Main/ProjectsSection/Mob.jsx b/src/components/Main/ProjectsSection/Mob.jsx
new file mode 100644
index 0000000..7d28691
--- /dev/null
+++ b/src/components/Main/ProjectsSection/Mob.jsx
@@ -0,0 +1,92 @@
+import { ChevronRight } from "lucide-react";
+import "./newP.css";
+import projects from "./projectsData";
+
+export const ProjectsSection = () => {
+ return (
+
+ {/* anchor div */}
+
+
+
+
+ Selected Projects
+
+
+
+
+ {projects.map((project) => (
+
+
+ {/* Left : content */}
+
+
+
+
+ {project.summary}
+
+
+
+
+ {project.description}
+
+
+
+ {project.technologies.map((tech, i) => (
+
+ {tech}
+
+ ))}
+
+
+
+
+ {/* Right : image */}
+
+
+
+
+
+
+
+ ))}
+
+ );
+};
+
+export default ProjectsSection;
diff --git a/src/components/Main/ProjectsSection/Projects.js b/src/components/Main/ProjectsSection/Projects.js
deleted file mode 100644
index 7d8fe37..0000000
--- a/src/components/Main/ProjectsSection/Projects.js
+++ /dev/null
@@ -1,121 +0,0 @@
-const projects = [
- {
- title: "myClassroom",
- summary: "Distraction-free platform for focused selfstudy",
- description:
- "webapp to create courses from youtube playlists. Design own courses, study without any ads or distractions. Track course progress, to-do, goals, study hours.",
- type: "Personal project",
- technologies: [
- "flask",
- "yt_dlp",
- "MongoDB",
- "pymongo",
- "jwt",
- "React",
- "TailwindCSS",
- ],
- link: "https://github.com/Dream-World-Coder/myClassroom",
- image: "/images/projects-imgs/myclassroom.jpeg",
- },
- {
- title: "myOPENCANVAS",
- summary: "A site for art-lovers to browse and share all types of arts.",
- description: "Currently IN MAKING.",
- type: "Personal project",
- technologies: [
- "MongoDB",
- "Express",
- "React",
- "Node",
- "MERN",
- "TailwindCSS",
- "SCSS",
- ],
- link: "https://www.myopencanvas.in",
- image: "/images/projects-imgs/myopencanvas.jpeg",
- },
- {
- title: "markdown2pdf",
- summary:
- "Highquality markdown, latex editor and pdf converter for free",
- description:
- "webapp to edit markdown documents and latex, insert images, links. Easily export to PDF/txt/md. completely free.",
- type: "Personal project",
- technologies: ["React", "TailwindCSS"],
- link: "https://www.opencanvas.blog/markdown2pdf",
- image: "/images/projects-imgs/md2pdf.jpeg",
- },
- {
- title: "LumiFeed",
- summary: "A neat platform for reading news.",
- description:
- "A rss reader with clutterless UI to read news without advertisements, along with summary of each news available. Many other mindblowing features available.",
- type: "Personal Project",
- technologies: [
- "Backend: Flask, SQL(postgresql + sqlite)",
- "Frontend: React, TailwindCSS, figma",
- "Web Scraping [requests, bs4], AI Summary api",
- "Monolothic architecture, SAAS webapp",
- ],
- link: "https://lumifeed.netlify.app",
- image: "/images/projects-imgs/lumifeed.jpeg",
- },
- {
- title: "EncryptEase",
- summary: "Encrypt messages or files easily.",
- description:
- "A powerful webapp to encrypt messages and files easily that are highly secure and cannot be decrypted without the encryption KEY.",
- type: "Personal Project",
- technologies: [
- "Flask",
- "Cryptography Module (python)",
- "JavaScript AJAX",
- "HTML",
- "CSS",
- "JS",
- ],
- link: "https://encryptease.pythonanywhere.com",
- image: "/images/projects-imgs/encryptease.jpeg",
- },
-
- {
- title: "Portfolio",
- summary: "This portfolio website you are visiting right now.",
- description:
- "A portfolio Website to easily introduce myself to everyone.",
- type: "Personal Project",
- technologies: ["React", "TailwindCSS", "GSAP", "figma"],
- link: "https://github.com/Subha-Py-c/subhajit",
- image: "/images/projects-imgs/portfolio.jpeg",
- },
- {
- title: "TithiRekha[তিথিরেখা]",
- summary: "Modern themed Bangla Calendar.",
- description: "A webapp to easily check bengali date and occations.",
- type: "Personal Project",
- technologies: ["React", "TailwindCSS", "JavaScript", "UI design"],
- link: "https://bangla-calendar.vercel.app",
- image: "/images/projects-imgs/tithirekha.jpeg",
- },
- {
- title: "Zentunes",
- summary: "Beautiful collection of some special genres of Music.",
- description:
- "A music streaming platform for retro lovers. Some development is yet to do, sorry!!",
- type: "Personal Project",
- technologies: ["HTML", "CSS", "JavaScript", "SCSS"],
- link: "https://zentunes.netlify.app",
- image: "/images/projects-imgs/krishisearch.jpeg",
- },
- {
- title: "Maze Battle Game",
- summary: "Player vs CPU maze running game",
- description: "",
- type: "Personal Project",
- technologies: ["HTML", "CSS", "JavaScript"],
- link: "https://mazebattle.netlify.app",
- image: "/images/projects-imgs/relaxingmelody.jpeg",
- },
-];
-
-export default projects;
diff --git a/src/components/Main/ProjectsSection/ProjectsSection.css b/src/components/Main/ProjectsSection/ProjectsSection.css
index 7f77676..ddb5338 100644
--- a/src/components/Main/ProjectsSection/ProjectsSection.css
+++ b/src/components/Main/ProjectsSection/ProjectsSection.css
@@ -1,218 +1,218 @@
* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
#s3-projects {
- height: auto;
- /* border: 1px solid blue; */
+ height: auto;
+ /* border: 1px solid blue; */
}
.project-heading-container {
- position: relative;
- margin: 0;
- padding-top: 0px;
- width: 100%;
+ position: relative;
+ margin: 0;
+ padding-top: 0px;
+ width: 100%;
}
.exp {
- margin: 200px 30px 30px var(--margin-left);
- font-size: var(--heading-text-size);
- font-weight: var(--heading-weight);
+ margin: 200px 30px 30px var(--margin-left);
+ font-size: var(--heading-text-size);
+ font-weight: var(--heading-weight);
}
summary {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
details {
- line-height: 1.5rem;
+ line-height: 1.5rem;
}
@media screen and (min-width: 1025px) {
- details {
- line-height: 1.1rem;
- }
+ details {
+ line-height: 1.1rem;
+ }
}
/* ------------------------ */
.projects-wrapper {
- /* border: 1px solid red; */
+ /* border: 1px solid red; */
+ box-sizing: border-box;
+ margin-top: 6vh;
+ width: fit-content !important;
+ margin-left: 10vw;
+ margin-right: 10vw;
+ display: grid;
+ gap: 0vh;
+ grid-template-rows: 0 13.33rem 13.33rem 3rem 13.33rem 13.33rem 3rem 13.33rem 13.33rem;
+ grid-template-columns: repeat(6, 13.33rem);
+ transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+ & .project {
box-sizing: border-box;
- margin-top: 6vh;
- width: fit-content !important;
- margin-left: 10vw;
- margin-right: 10vw;
- display: grid;
- gap: 0vh;
- grid-template-rows: 0 13.33rem 13.33rem 3rem 13.33rem 13.33rem 3rem 13.33rem 13.33rem;
- grid-template-columns: repeat(6, 13.33rem);
- transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
-
- & .project {
- box-sizing: border-box;
- border-radius: 5vh;
- background-color: var(--card-container-color);
- position: relative;
- width: 100%;
- height: 100%;
- border: 1px solid rgb(226, 200, 193);
- /* box-shadow: 3px 3px 0 rgb(226, 200, 193); */
- transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 15px;
- padding: 15px;
- overflow: hidden;
-
- &:hover {
- box-shadow: none;
- }
- }
+ border-radius: 5vh;
+ background-color: var(--card-container-color);
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border: 1px solid rgb(226, 200, 193);
+ /* box-shadow: 3px 3px 0 rgb(226, 200, 193); */
+ transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ padding: 15px;
+ overflow: hidden;
- & .project1 {
- grid-row: span 3;
- grid-column: span 3;
- width: calc(100% + 10.33rem);
- }
- & .project2 {
- grid-area: 1/5/4/-1;
- }
- & .project3 {
- grid-area: 5/1/7/3;
- }
- & .project4 {
- grid-row: 5/7;
- grid-column: 4/-1;
- width: calc(100% + 10.33rem);
- transform: translateX(-10.33rem);
- }
- & .project5 {
- grid-row: 8/10;
- grid-column: 1/4;
- width: calc(100% + 10.33rem);
- }
- & .project6 {
- grid-row: 8/10;
- grid-column: 5/-1;
+ &:hover {
+ box-shadow: none;
}
+ }
+
+ & .project1 {
+ grid-row: span 3;
+ grid-column: span 3;
+ width: calc(100% + 10.33rem);
+ }
+ & .project2 {
+ grid-area: 1/5/4/-1;
+ }
+ & .project3 {
+ grid-area: 5/1/7/3;
+ }
+ & .project4 {
+ grid-row: 5/7;
+ grid-column: 4/-1;
+ width: calc(100% + 10.33rem);
+ transform: translateX(-10.33rem);
+ }
+ & .project5 {
+ grid-row: 8/10;
+ grid-column: 1/4;
+ width: calc(100% + 10.33rem);
+ }
+ & .project6 {
+ grid-row: 8/10;
+ grid-column: 5/-1;
+ }
}
html.invert .project {
- border: 1px solid #dcdbdb;
- background-color: #cbcbcb;
- /* box-shadow: 3px 3px 0 #dbdbdb; */
+ border: 1px solid #dcdbdb;
+ background-color: #cbcbcb;
+ /* box-shadow: 3px 3px 0 #dbdbdb; */
}
.project__data,
.project__image {
- box-sizing: border-box;
- border-radius: 3vh;
- position: relative;
- width: 100%;
- height: 100%;
- border: 1px solid rgb(206, 180, 173);
- background-size: cover;
- background-position: center;
- overflow: hidden;
- /* transition:
+ box-sizing: border-box;
+ border-radius: 3vh;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border: 1px solid rgb(206, 180, 173);
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+ /* transition:
width 0.7s cubic-bezier(0.86, 0, 0.07, 1),
padding 0.7s cubic-bezier(0.86, 0, 0.07, 1),
opacity 0.7s cubic-bezier(0.86, 0, 0.07, 1); */
- transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
- & img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
+ & img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
- @media (max-width: 1025px) {
- border-radius: 6px;
- }
+ @media (max-width: 1025px) {
+ border-radius: 6px;
+ }
}
.project__data {
- padding: 1rem;
-
- & h2 {
- font-weight: bolder;
- font-size: xx-large;
- font-family: title;
- }
-
- & summary {
- font-size: large;
- font-weight: 500;
- text-decoration: underline;
- }
-
- & details {
- font-size: small;
- }
-
- & a {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 8px;
- color: #343434;
- border: 1px solid rgb(206, 180, 173);
- border-radius: 15px;
- font-size: large;
- font-weight: lighter;
- text-transform: lowercase;
- background-color: rgb(226, 200, 193);
- margin-top: 10px;
- cursor: url("../../assets/images/a2.png"), auto;
-
- &:hover {
- background: rgb(206, 180, 173);
- color: #232424;
- }
-
- & img {
- display: block;
- width: 20px !important;
- height: 20px !important;
- }
- }
+ padding: 1rem;
+
+ & h2 {
+ font-weight: bolder;
+ font-size: xx-large;
+ font-family: title;
+ }
+
+ & summary {
+ font-size: large;
+ font-weight: 500;
+ text-decoration: underline;
+ }
+
+ & details {
+ font-size: small;
+ }
+
+ & a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ color: #343434;
+ border: 1px solid rgb(206, 180, 173);
+ border-radius: 15px;
+ font-size: large;
+ font-weight: lighter;
+ text-transform: lowercase;
+ background-color: rgb(226, 200, 193);
+ margin-top: 10px;
+ cursor: url("../../assets/images/a2.png"), auto;
- & ul {
- padding-left: 40px;
- list-style: disc;
+ &:hover {
+ background: rgb(206, 180, 173);
+ color: #232424;
}
- & em {
- display: block;
- margin: 5px 0 5px 0%;
- font-weight: bold;
+ & img {
+ display: block;
+ width: 20px !important;
+ height: 20px !important;
}
+ }
+
+ & ul {
+ padding-left: 40px;
+ list-style: disc;
+ }
+
+ & em {
+ display: block;
+ margin: 5px 0 5px 0%;
+ font-weight: bold;
+ }
}
html.invert .project__data {
- border: 1px solid #dcdbdb;
+ border: 1px solid #dcdbdb;
}
html.invert .project__image {
- border: 1px solid #343434;
+ border: 1px solid #343434;
}
/* larger */
.project:nth-child(1),
.project:nth-child(4),
.project:nth-child(5) {
- /* & .project__data {opacity: 1;} */
- & .project__image:hover img {
- filter: grayscale(1) blur(2px);
- }
+ /* & .project__data {opacity: 1;} */
+ & .project__image:hover img {
+ filter: grayscale(1) blur(2px);
+ }
}
/* smaller */
.project:nth-child(2),
.project:nth-child(3),
.project:nth-child(6) {
- gap: 0px;
+ gap: 0px;
- /* & .project__data {
+ /* & .project__data {
width: 0;
padding: 0;
border: none;
@@ -234,150 +234,150 @@ html.invert .project__image {
border: none;
}
} */
- & .project__data,
- & .project__image {
- position: absolute;
- border: 1px solid rgb(206, 180, 173);
+ & .project__data,
+ & .project__image {
+ position: absolute;
+ border: 1px solid rgb(206, 180, 173);
- --value-of-padding: 15px;
- top: var(--value-of-padding);
- left: var(--value-of-padding);
- --abc: calc(100% - 2 * var(--value-of-padding));
- width: var(--abc);
- height: var(--abc);
+ --value-of-padding: 15px;
+ top: var(--value-of-padding);
+ left: var(--value-of-padding);
+ --abc: calc(100% - 2 * var(--value-of-padding));
+ width: var(--abc);
+ height: var(--abc);
- @media screen and (max-width: 1025px) {
- --value-of-padding: 6px;
- }
+ @media screen and (max-width: 1025px) {
+ --value-of-padding: 6px;
}
+ }
+ & .project__data {
+ opacity: 0;
+ visibility: hidden;
+ }
+ & .project__image {
+ opacity: 1;
+ visibility: visible;
+ }
+ &:hover {
& .project__data {
- opacity: 0;
- visibility: hidden;
+ opacity: 1;
+ visibility: visible;
}
& .project__image {
- opacity: 1;
- visibility: visible;
- }
- &:hover {
- & .project__data {
- opacity: 1;
- visibility: visible;
- }
- & .project__image {
- opacity: 0;
- visibility: hidden;
- }
+ opacity: 0;
+ visibility: hidden;
}
+ }
}
.project__image img {
- scale: 1.5;
+ scale: 1.5;
}
@media screen and (min-width: 1500px) {
- .projects-wrapper {
- padding-left: 3vw;
- padding-right: 0;
- margin-top: 3vh;
- }
+ .projects-wrapper {
+ padding-left: 3vw;
+ padding-right: 0;
+ margin-top: 3vh;
+ }
}
@media screen and (max-width: 1025px) {
- #project-heading {
- font-size: xx-large;
+ #project-heading {
+ font-size: xx-large;
+ }
+ .projects-wrapper {
+ margin-top: 2vh;
+ grid-template-rows: repeat(6, 40vh);
+ grid-template-columns: repeat(1, 1fr);
+ border-radius: 6px;
+ gap: 2rem;
+
+ & .project {
+ border-radius: 6px;
+ padding: 6px;
}
- .projects-wrapper {
- margin-top: 2vh;
- grid-template-rows: repeat(6, 40vh);
- grid-template-columns: repeat(1, 1fr);
- border-radius: 6px;
- gap: 2rem;
-
- & .project {
- border-radius: 6px;
- padding: 6px;
- }
- & .project1 {
- grid-row: span 1;
- grid-column: span 1;
- }
- & .project2 {
- grid-row: span 1;
- grid-column: span 1;
- }
- & .project3 {
- grid-row: span 1;
- grid-column: span 1;
- }
- & .project4 {
- grid-row: span 1;
- grid-column: span 1;
- transform: translateX(0);
- }
- & .project5 {
- grid-row: span 1;
- grid-column: span 1;
- }
- & .project6 {
- grid-row: span 1;
- grid-column: span 1;
- }
+ & .project1 {
+ grid-row: span 1;
+ grid-column: span 1;
}
- .project__data {
- & h2 {
- font-size: x-large;
- }
- & summary {
- font-size: small;
- font-weight: 300;
- text-decoration: underline;
- }
- & details {
- font-size: small;
- }
+ & .project2 {
+ grid-row: span 1;
+ grid-column: span 1;
}
- .project__image {
- border-radius: 6px;
+ & .project3 {
+ grid-row: span 1;
+ grid-column: span 1;
}
+ & .project4 {
+ grid-row: span 1;
+ grid-column: span 1;
+ transform: translateX(0);
+ }
+ & .project5 {
+ grid-row: span 1;
+ grid-column: span 1;
+ }
+ & .project6 {
+ grid-row: span 1;
+ grid-column: span 1;
+ }
+ }
+ .project__data {
+ & h2 {
+ font-size: x-large;
+ }
+ & summary {
+ font-size: small;
+ font-weight: 300;
+ text-decoration: underline;
+ }
+ & details {
+ font-size: small;
+ }
+ }
+ .project__image {
+ border-radius: 6px;
+ }
+
+ .project:nth-child(1),
+ .project:nth-child(4),
+ .project:nth-child(5) {
+ width: 100%;
+ gap: 0px;
- .project:nth-child(1),
- .project:nth-child(4),
- .project:nth-child(5) {
- width: 100%;
- gap: 0px;
-
- & .project__data {
- width: 0;
- padding: 0;
- border: none;
- opacity: 0;
- transform-origin: left;
- }
- & .project__image {
- width: 100%;
- transform-origin: right;
- }
+ & .project__data {
+ width: 0;
+ padding: 0;
+ border: none;
+ opacity: 0;
+ transform-origin: left;
+ }
+ & .project__image {
+ width: 100%;
+ transform-origin: right;
+ }
- &:hover {
- & .project__data {
- width: 100%;
- padding: 6px;
- border: 1px solid rgb(206, 180, 173);
- opacity: 1;
- transform-origin: right;
- }
- & .project__image {
- width: 0;
- border: none;
- transform-origin: left;
- }
- }
+ &:hover {
+ & .project__data {
+ width: 100%;
+ padding: 6px;
+ border: 1px solid rgb(206, 180, 173);
+ opacity: 1;
+ transform-origin: right;
+ }
+ & .project__image {
+ width: 0;
+ border: none;
+ transform-origin: left;
+ }
}
+ }
}
@media screen and (max-width: 768px) {
- .projects-wrapper {
- margin-left: 3vw;
- margin-right: 3vw;
- }
+ .projects-wrapper {
+ margin-left: 3vw;
+ margin-right: 3vw;
+ }
}
diff --git a/src/components/Main/ProjectsSection/ProjectsSection.jsx b/src/components/Main/ProjectsSection/ProjectsSection.jsx
index c95c978..8042a40 100644
--- a/src/components/Main/ProjectsSection/ProjectsSection.jsx
+++ b/src/components/Main/ProjectsSection/ProjectsSection.jsx
@@ -1,163 +1,15 @@
-import { useEffect, useRef, useState } from "react";
-import "./newP.css";
-import projects from "./Projects";
-import { ExternalLink } from "lucide-react";
-
-const ProjectsSection = () => {
- const projectWrapperRef = useRef(null);
- const [activeIndex, setActiveIndex] = useState(null);
-
- // useEffect(() => {
- // const projectWrapper = projectWrapperRef.current;
- // const projectImgs = projectWrapper.querySelectorAll(".parallaxImgs");
- // const projectChildren = [...projectImgs];
- // let initialPositions = new Map();
- // const coeff2 = 0.05;
-
- // // Parallax scroll effect
- // const parallaxScrollHandler = () => {
- // projectChildren.forEach((child) => {
- // const initialTop = initialPositions.get(child);
- // const offsetY = (window.scrollY - initialTop) * coeff2;
- // child.style.transform = `translate3d(0, ${offsetY * 1.618}px, 0)`;
- // });
- // };
-
- // const startParallax = () => {
- // projectChildren.forEach((child) => {
- // initialPositions.set(
- // child,
- // child.getBoundingClientRect().top + window.scrollY,
- // );
- // });
- // window.addEventListener("scroll", parallaxScrollHandler);
- // };
-
- // const stopParallax = () => {
- // window.removeEventListener("scroll", parallaxScrollHandler);
- // };
-
- // // Intersection Observer
- // const obsv = new IntersectionObserver(
- // (entries) => {
- // entries.forEach((entry) => {
- // if (entry.isIntersecting) {
- // startParallax();
- // } else {
- // stopParallax();
- // }
- // });
- // },
- // { threshold: 0.1 },
- // );
-
- // obsv.observe(projectWrapper);
- // startParallax();
-
- // return () => {
- // stopParallax();
- // obsv.disconnect();
- // };
- // }, []);
-
- return (
-
- {/* anchor div */}
-
-
-
-
- Selected Projects
-
-
-
-
- {projects.map((project, idx) => (
-
setActiveIndex(idx)}
- onMouseLeave={() => setActiveIndex(null)}
- >
-
- {/* Left Content */}
-
-
-
-
- {project.summary}
-
-
-
-
- {project.description}
-
-
-
- {project.technologies.map((tech, i) => (
-
- {tech}
-
- ))}
-
-
-
-
- {/* Right Content - Image */}
-
-
-
-
-
-
-
-
- {/* Project Type Badge */}
- {/*
- {project.type}
-
*/}
-
- ))}
-
- );
-};
-
-export default ProjectsSection;
+import { ProjectsSection as Desk } from "./Desk";
+import { ProjectsSection as Mob } from "./Mob";
+
+export default function Exp() {
+ return (
+
+ );
+}
diff --git a/src/components/Main/ProjectsSection/newP.css b/src/components/Main/ProjectsSection/newP.css
index 5113a5c..12d3149 100644
--- a/src/components/Main/ProjectsSection/newP.css
+++ b/src/components/Main/ProjectsSection/newP.css
@@ -1,57 +1,75 @@
#s3-projects {
- height: auto;
- /* border: 1px solid blue; */
+ height: auto;
+ /* border: 1px solid blue; */
}
+/*@media screen and (width <= 768px) {
+ #s3-projects {
+ height: fit-content;
+ }
+}*/
+
.project-heading-container {
- position: relative;
- margin: 0;
- padding-top: 0px;
- width: 100%;
+ position: relative;
+ margin: 0;
+ padding-top: 0px;
+ width: 100%;
}
.exp {
- margin: 200px 30px 30px var(--margin-left);
- font-size: var(--heading-text-size);
- font-weight: var(--heading-weight);
+ margin: 200px 30px 30px var(--margin-left);
+ font-size: var(--heading-text-size);
+ font-weight: var(--heading-weight);
}
summary {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
details {
- line-height: 1.5rem;
+ line-height: 1.5rem;
+}
+
+/* new */
+.prwc {
+ position: relative;
+ width: 100%;
+ height: 120vh;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.projects-wrapper {
- box-sizing: border-box;
- margin-top: 6vh;
- width: fit-content !important;
- margin-left: 10vw;
- margin-right: 10vw;
- transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+/* Centering the Title Wrapper */
+.prwx {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 0;
+ text-align: center;
+ width: auto !important;
+ margin: 0 !important; /* Overriding previous margins to force center */
+ pointer-events: none; /* Let clicks pass through to cards if they overlap slightly */
}
-@media screen and (min-width: 1025px) {
- details {
- line-height: 1.1rem;
- }
+/* Existing Glass Card Styles */
+.glass-card {
+ background: rgba(255, 255, 255, 0.05);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
-@media screen and (max-width: 1024px) {
- #project-heading {
- font-size: xx-large;
- }
- .projects-wrapper {
- margin-top: 6vh;
- margin-left: 5vw;
- margin-right: 5vw;
- }
+.project-card-image {
+ border-radius: 1.5rem;
+ box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
-@media screen and (max-width: 768px) {
- .projects-wrapper {
- margin-top: 2vh;
- margin-left: 3vw;
- margin-right: 3vw;
- }
+.no-scrollbar::-webkit-scrollbar {
+ display: none;
+}
+.no-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
diff --git a/src/components/Main/ProjectsSection/projectsData.js b/src/components/Main/ProjectsSection/projectsData.js
new file mode 100644
index 0000000..2c3a8de
--- /dev/null
+++ b/src/components/Main/ProjectsSection/projectsData.js
@@ -0,0 +1,134 @@
+const projects = [
+ {
+ title: "OpenCanvas",
+ summary: "A site for art-lovers to browse and share all types of arts.",
+ description: "Currently IN MAKING.",
+ technologies: ["Next.js", "Typescript", "MongoDB", "React", "TailwindCSS"],
+ link: "https://www.opencanvas.blog",
+ image: "/images/projects-imgs/opencanvas.jpeg",
+ },
+
+ {
+ title: "DSA Animations",
+ summary: "Data Structures and Algorithms visualiser",
+ description:
+ "An interactive web platform for visualizing Data Structures and Algorithms through animations. Built to make learning DSA concepts intuitive and engaging.",
+ technologies: ["React", "TailwindCSS"],
+ link: "https://dsa-experiments.vercel.app",
+ image: "/images/projects-imgs/dsa.png",
+ },
+
+ {
+ title: "SortAlgo",
+ summary: "A detailed guide through sorting algorithms",
+ description:
+ "Interactive Blog Posts On Sorting Algorithms & Computer Science, with step by step animation, mathematical derivations.",
+ technologies: ["Next.js", "Typescript", "TailwindCSS"],
+ link: "https://sortalgo.space",
+ image: "https://www.sortalgo.space/_next/image?url=%2Fcross.png&w=256&q=75",
+ },
+
+ {
+ title: "Simulations",
+ summary: "Simulations of some interesting problems.",
+ description: "Simulations of some interesting problems.",
+ technologies: ["Next.js", "React", "Typescript"],
+ link: "https://pseudo-random.vercel.app",
+ image: "https://pseudo-random.vercel.app/favicon.ico",
+ },
+
+ // {
+ // title: "markdown2pdf",
+ // summary: "Highquality markdown, latex editor and pdf converter for free",
+ // description:
+ // "webapp to edit markdown documents and latex, insert images, links. Easily export to PDF/txt/md. completely free.",
+ // technologies: ["React", "TailwindCSS", "jsPDF"],
+ // link: "https://www.opencanvas.blog/markdown2pdf",
+ // image: "/images/projects-imgs/md2pdf.jpeg",
+ // },
+
+ {
+ title: "LumiFeed",
+ summary: "A neat platform for reading news.",
+ description:
+ "A rss reader with clutterless UI to read news without advertisements, along with A.I. Summary of each news available. Many other mindblowing features available.",
+ technologies: [
+ "Flask",
+ "postgresql",
+ "sqlite",
+ "React",
+ "TailwindCSS",
+ "Dexie.js",
+ "Web Scraping",
+ "AI Summary(API)",
+ ],
+ link: "https://lumifeed.vercel.app",
+ image: "/images/projects-imgs/lumifeed.jpeg",
+ },
+
+ {
+ title: "myClassroom",
+ summary: "Distraction-free platform for focused selfstudy",
+ description:
+ "webapp to create courses from youtube playlists. Design own courses, study without any ads or distractions. Track course progress, to-do, goals, study hours.",
+ technologies: [
+ "flask",
+ "yt_dlp",
+ "MongoDB",
+ "pymongo",
+ "jwt",
+ "React",
+ "TailwindCSS",
+ ],
+ link: "https://github.com/Dream-World-Coder/myClassroom",
+ image: "/images/projects-imgs/myclassroom.jpeg",
+ },
+
+ {
+ title: "Zentunes",
+ summary: "Android Audio Player Application",
+ description: "A music streaming platform for retro lovers.",
+ technologies: ["Capacitor", "React", "SCSS"],
+ link: "https://github.com/Dream-World-Coder/zentunes/tree/android-app",
+ image: "/images/projects-imgs/zentunes.png",
+ },
+
+ {
+ title: "EncryptEase",
+ summary: "Encrypt messages or files easily.",
+ description:
+ "A powerful webapp to encrypt messages and files easily that are highly secure and cannot be decrypted without the encryption KEY.",
+ technologies: ["Flask", "Cryptography", "AJAX"],
+ link: "https://encryptease.pythonanywhere.com",
+ image: "/images/projects-imgs/encryptease.jpeg",
+ },
+
+ {
+ title: "Portfolio",
+ summary: "This portfolio website you are visiting right now.",
+ description: "A portfolio Website to easily introduce myself to everyone.",
+ technologies: ["React", "TailwindCSS", "GSAP", "figma"],
+ link: "https://github.com/Subha-Py-c/subhajit",
+ image: "/images/projects-imgs/portfolio.jpeg",
+ },
+
+ // {
+ // title: "TithiRekha",
+ // summary: "Modern themed Bangla Calendar.",
+ // description: "A webapp to easily check bengali date and occations.",
+ // technologies: ["React", "TailwindCSS", "Web Scraping"],
+ // link: "https://bangla-calendar.vercel.app",
+ // image: "/images/projects-imgs/tithirekha.jpeg",
+ // },
+
+ {
+ title: "Maze Battle Game",
+ summary: "Player vs CPU maze running game",
+ description: "",
+ technologies: ["HTML", "CSS", "JavaScript"],
+ link: "https://mazebattle.netlify.app",
+ image: "/images/projects-imgs/maze-battle.jpeg",
+ },
+];
+
+export default projects;
diff --git a/src/components/Main/SkillsSection/SkillsSection.css b/src/components/Main/SkillsSection/SkillsSection.css
index 946b780..12a5667 100644
--- a/src/components/Main/SkillsSection/SkillsSection.css
+++ b/src/components/Main/SkillsSection/SkillsSection.css
@@ -1,111 +1,117 @@
/*------- root ------------------------------------------------------ */
:root {
- --card-container-width: 650px;
- --card-container-height: 400px;
- --margin-dist: 100px;
- --card-font-size: 1.3em;
- --s-list-font-size: 2em;
+ --card-container-width: 650px;
+ --card-container-height: 400px;
+ --margin-dist: 100px;
+ --card-font-size: 1.3em;
+ --s-list-font-size: 2em;
}
/* ------- SKILLS ------------------------------------------------------ */
-#s2-skills {
+@media screen and (width < 1025px) {
+ #s2-skills {
height: 120vh;
/* border: 1px solid black; */
+ }
}
.d3 {
- position: relative;
- margin: 0;
+ position: relative;
+ margin: 0;
}
#SK,
#SS {
- border: none;
+ border: none;
}
.progress-bar {
- margin-top: 10px;
- display: flex;
- height: 12px;
- background-color: var(--bg3);
- width: 100%;
- border-radius: 6px;
- justify-content: flex-start !important;
+ margin-top: 10px;
+ display: flex;
+ height: 12px;
+ background-color: var(--bg3);
+ width: 100%;
+ border-radius: 6px;
+ justify-content: flex-start !important;
}
.growth {
- display: flex;
- position: relative;
- height: 100%;
- width: 0%;
- border-radius: 6px;
- background-color: rgb(0, 172, 148);
- transition: all 0.4s ease-out;
+ display: flex;
+ position: relative;
+ height: 100%;
+ width: 0%;
+ border-radius: 6px;
+ background-color: rgb(0, 172, 148);
+ transition: all 0.4s ease-out;
}
mark {
- background-color: #ff0;
- font-size: larger;
- border-radius: 15px;
- margin-bottom: 1.5rem;
- font-size: 36px;
- font-family: title, serif;
- font-weight: lighter;
+ background-color: #ff0;
+ font-size: larger;
+ border-radius: 15px;
+ margin-bottom: 1.5rem;
+ font-size: 36px;
+ font-family: title, serif;
+ font-weight: lighter;
}
html.invert mark {
- color: white;
- background: var(--mark-clr);
+ color: white;
+ background: var(--mark-clr);
}
/* exps = skill heading span */
.exps {
- padding-top: 30px;
- margin-left: var(--margin-left);
- margin-top: 100px;
- font-size: var(--heading-text-size);
- font-weight: var(--heading-weight);
+ padding-top: 30px;
+ margin-left: var(--margin-left);
+ margin-top: 100px;
+ font-size: var(--heading-text-size);
+ font-weight: var(--heading-weight);
- @media (max-width: 768px) {
- font-size: xx-large;
- }
+ @media (max-width: 768px) {
+ font-size: xx-large;
+ }
}
/* ------- for phone ----------------------------------------------- */
.skill__container {
- margin-left: 10vw;
- margin-right: 10vw;
+ margin-left: 10vw;
+ margin-right: 10vw;
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(5, auto);
- gap: 20px;
- font-family: "Mondia", sans-serif;
- display: none;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(5, auto);
+ gap: 20px;
+ font-family: "Mondia", sans-serif;
+ display: none;
+
+ @media screen and (min-width: 768px) {
+ grid-template-columns: repeat(4, 1fr);
+ }
}
.skill__container .skill__box img {
- display: block;
- width: 60%;
- height: 60%;
+ display: block;
+ width: 60%;
+ height: 60%;
}
.skill__box {
- border-radius: 15px;
- background-color: var(--card-container-color);
- padding: 10px;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- align-items: center;
- font-size: small;
+ border-radius: 15px;
+ background-color: var(--card-container-color);
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ font-size: small;
}
@media (width < 1025px) {
- html.invert .progress-bar {
- background-color: white;
- }
+ html.invert .progress-bar {
+ background-color: white;
+ }
}
/* skill wrapper has 2 childs> card container and skill list/ s-list */
@@ -115,92 +121,111 @@ html.invert mark {
--------------------------------------------------------- */
.skill-wrapper {
- margin-top: 6vh;
- display: flex;
- align-items: center;
- justify-content: center;
+ margin-top: 6vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
#skill-list {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- margin-right: calc(7vw + 60px);
- margin-left: 60px;
- border-radius: 15px;
- width: 600px;
-
- font-family: "Mondia", sans-serif;
- font-weight: 200;
- font-size: var(--s-list-font-size);
-
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-end;
-
- position: relative;
- transform: translateX(60vh) rotateZ(-5deg);
- transition: cubic-bezier(1, 0, 0, 1);
- opacity: 0;
- box-shadow:
- -40px 20px 20px rgba(100, 100, 100, 0.1),
- -40px 20px 40px rgba(100, 100, 100, 0.2);
-}
-
-html.invert #skill-list {
- box-shadow:
- -40px 20px 20px rgba(200, 200, 200, 0.1),
- -40px 20px 40px rgba(200, 200, 200, 0.2);
-}
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ margin-right: calc(7vw + 60px);
+ margin-left: 60px;
+ border-radius: 15px;
+ width: 600px;
+
+ font-family: "Mondia", sans-serif;
+ font-weight: 200;
+ font-size: var(--s-list-font-size);
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-end;
+
+ position: relative;
+ /* transform: translateX(60vh) rotateZ(-5deg); */
+ transition: cubic-bezier(1, 0, 0, 1);
+ opacity: 0;
+ /* box-shadow:
+ -40px 20px 20px rgba(100, 100, 100, 0.1),
+ -40px 20px 40px rgba(100, 100, 100, 0.2);
+ */
+}
+
+/* html.invert #skill-list { */
+/* box-shadow:
+ -40px 20px 20px rgba(200, 200, 200, 0.1),
+ -40px 20px 40px rgba(200, 200, 200, 0.2);
+ */
+/* } */
.card-container {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
- padding: 0;
- margin: 0;
+ padding: 0;
+ margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
- transform: translateX(-60vh) rotateZ(5deg);
- opacity: 0;
+ transform: translateX(-60vh) rotateZ(5deg);
+ opacity: 0;
}
html.invert .card-container {
- color: white;
+ color: white;
}
.card {
- width: calc(var(--card-container-width) - 20px);
+ width: calc(var(--card-container-width) - 20px);
+ height: calc(var(--card-container-height) - 20px);
+ border-radius: 30px;
+ background-color: var(--card-container-color);
+ padding: 0px 30px 0px 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-size: var(--card-font-size);
+ /* border: 1px solid rgb(226, 200, 193); */
+ /* box-shadow: 3px 3px 0 rgb(226, 200, 193); */
+ /* -webkit-box-reflect: below 0px
+ linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+ -moz-box-reflect: below 0px
+ linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); */
+
+ border: 1px solid rgb(206, 180, 173);
+
+ &:hover {
+ box-shadow: none;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 4px;
+ width: calc(var(--card-container-width) - 46px);
height: calc(var(--card-container-height) - 20px);
+ border: 1px solid rgb(206, 180, 173);
border-radius: 30px;
- background-color: var(--card-container-color);
- padding: 0px 30px 0px 30px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- font-size: var(--card-font-size);
- border: 1px solid rgb(226, 200, 193);
- /* box-shadow: 3px 3px 0 rgb(226, 200, 193); */
- -webkit-box-reflect: below 0px
- linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
- -moz-box-reflect: below 0px
- linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
-
- &:hover {
- box-shadow: none;
- }
+ z-index: -1;
+ }
}
html.invert .card {
- border: 1px solid rgb(35, 35, 35);
- /* box-shadow: 3px 3px 0 rgb(35, 35, 35); */
+ border: 1px solid rgb(35, 35, 35);
+ /* box-shadow: 3px 3px 0 rgb(35, 35, 35); */
+
+ &:hover {
+ box-shadow: none;
+ }
- &:hover {
- box-shadow: none;
- }
+ &::after {
+ border: 1px solid rgb(35, 35, 35);
+ }
}
/* -------------------------------------------------
@@ -208,116 +233,133 @@ html.invert .card {
---------------------------------------------------- */
.inverse2 {
- position: relative;
- width: 100%;
- z-index: 80;
- padding-right: 10px;
- height: 60px;
- transition:
- transform 0.5s ease-out,
- opacity 0.5s ease-out;
- animation: padd 400ms forwards;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- background-color: var(--skill-list-color);
- border-right: 1px solid rgb(246, 220, 217);
- border-left: 1px solid rgb(226, 200, 193);
+ position: relative;
+ width: 100%;
+ z-index: 80;
+ padding-right: 10px;
+ height: 60px;
+ transition:
+ transform 0.5s ease-out,
+ opacity 0.5s ease-out;
+ animation: padd 400ms forwards;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ background-color: var(--skill-list-color);
+ border-right: 1px solid rgb(246, 220, 217);
+ border-left: 1px solid rgb(226, 200, 193);
}
html.invert .inverse2 {
- border-right: 2px solid rgb(180, 180, 180);
- border-left: 1px solid rgb(207, 207, 207);
+ border-right: 2px solid rgb(180, 180, 180);
+ border-left: 1px solid rgb(207, 207, 207);
}
.first-x {
- border-radius: 15px 15px 0 0px;
+ border-radius: 15px 15px 0 0px;
}
.lst {
- border-radius: 0px 0 15px 15px;
- border-bottom: 1px solid rgb(246, 220, 217);
+ border-radius: 0px 0 15px 15px;
+ border-bottom: 1px solid rgb(246, 220, 217);
}
@keyframes padd {
- 0% {
- padding-left: 30px;
- }
+ 0% {
+ padding-left: 30px;
+ }
- 100% {
- padding-left: 10px;
- }
+ 100% {
+ padding-left: 10px;
+ }
}
.card-elem {
- display: none;
- width: 65%;
+ display: none;
+ width: 65%;
}
.card-elem:nth-child(1) {
- display: block;
- width: 65%;
+ display: block;
+ width: 65%;
}
.list-elem.clicked {
- /* background-color: var(--skill-list-clicked-clr); */
- background-color: rgb(226, 200, 193);
- color: black;
-}
+ /* background-color: var(--skill-list-clicked-clr); */
+ background-color: rgb(226, 200, 193);
+ color: black;
+}
+.list-elem.clicked::before {
+ content: "";
+ position: absolute;
+ top: calc(50% - 4px);
+ left: 0;
+ width: 50%;
+ height: 8px;
+ z-index: 60;
+ /* background-color: rgb(226, 200, 193); */
+ transform: translateX(-100%);
+ background-image: url("/icons/la.svg");
+ background-size: contain;
+}
+
+/* html.invert .list-elem.clicked::before { */
+/* background-color: #ccc; */
+/* } */
.strech {
- background-color: transparent;
- font-size: 0px;
- width: 0px;
- transition-duration: 0.3s;
+ background-color: transparent;
+ font-size: 0px;
+ width: 0px;
+ transition-duration: 0.3s;
}
.strech.active {
- transition-duration: 0.3s;
- font-size: 30px;
- width: 35px;
+ transition-duration: 0.3s;
+ font-size: 30px;
+ width: 35px;
}
/* ------------------------{MEDIA QUERY}-------------------------------------------- */
@media screen and (max-width: 1025px) {
- :root {
- --card-container-width: 150px;
- --card-container-height: 350px;
- --margin-dist: 150px;
- --card-font-size: 0.8em;
- --s-list-font-size: 1.2em;
- }
-
- #s2-skills {
- height: auto;
- }
-
- .skill-wrapper {
- display: none;
- }
+ :root {
+ --card-container-width: 150px;
+ --card-container-height: 350px;
+ --margin-dist: 150px;
+ --card-font-size: 0.8em;
+ --s-list-font-size: 1.2em;
+ }
+
+ #s2-skills {
+ height: auto;
+ }
+
+ .skill-wrapper {
+ display: none;
+ }
- .skill__container {
- display: grid;
- }
+ .skill__container {
+ display: grid;
+ }
}
@media screen and (max-width: 768px) {
- #skill {
- font-size: xx-large;
- }
-
- .progress-bar {
- height: 8px;
- border-radius: 4px;
- }
-
- #SS {
- margin-bottom: 3vh;
- }
-
- .skill__container .skill__box img {
- display: block;
- width: 40%;
- height: 40%;
- }
+ #skill {
+ font-size: xx-large;
+ }
+
+ .progress-bar {
+ height: 8px;
+ border-radius: 4px;
+ }
+
+ #SS {
+ margin-bottom: 3vh;
+ }
+
+ .skill__container .skill__box img {
+ display: block;
+ width: 40%;
+ height: 40%;
+ }
}
diff --git a/src/components/Main/SkillsSection/SkillsSection.jsx b/src/components/Main/SkillsSection/SkillsSection.jsx
index 5d8de3a..c54228a 100644
--- a/src/components/Main/SkillsSection/SkillsSection.jsx
+++ b/src/components/Main/SkillsSection/SkillsSection.jsx
@@ -6,228 +6,208 @@ import cardElements from "./cardData";
import mobileSkills from "./mobileData";
const SkillsSection = () => {
- const [activeIndex, setActiveIndex] = useState(0);
- const [isIntersecting, setIsIntersecting] = useState(false);
- const skillContainerRef = useRef(null);
- const progressBarsRef = useRef([]);
-
- useEffect(() => {
- gsap.registerPlugin(ScrollTrigger);
-
- const isMobile = window.innerWidth < 1025;
-
- if (isMobile) {
- const options = {
- root: null,
- rootMargin: "0px",
- threshold: 0.55,
- };
-
- const observer = new IntersectionObserver((entries) => {
- entries.forEach((entry) => {
- if (entry.isIntersecting) {
- setIsIntersecting(true);
- }
- });
- }, options);
-
- if (skillContainerRef.current) {
- observer.observe(skillContainerRef.current);
- }
-
- return () => observer.disconnect();
- } else {
- // Set initial active state for desktop
- setActiveIndex(0);
- }
-
- var tl4 = gsap.timeline({
- scrollTrigger: {
- trigger: "#SK",
- start: "top-=200 center",
- end: "bottom-=400 center",
- scrub: true,
- markers: false,
- onLeave: () => {
- applySkillListEffect();
- },
- },
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [isIntersecting, setIsIntersecting] = useState(false);
+ const skillContainerRef = useRef(null);
+ const progressBarsRef = useRef([]);
+
+ useEffect(() => {
+ gsap.registerPlugin(ScrollTrigger);
+
+ const isMobile = window.innerWidth < 1025;
+
+ if (isMobile) {
+ const options = {
+ root: null,
+ rootMargin: "0px",
+ threshold: 0.55,
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setIsIntersecting(true);
+ }
});
+ }, options);
+
+ if (skillContainerRef.current) {
+ observer.observe(skillContainerRef.current);
+ }
+
+ return () => observer.disconnect();
+ } else {
+ // Set initial active state for desktop
+ setActiveIndex(0);
+ }
+
+ var tl4 = gsap.timeline({
+ scrollTrigger: {
+ trigger: "#SK",
+ start: "top-=200 center",
+ end: "bottom-=400 center",
+ scrub: true,
+ markers: false,
+ onLeave: () => {
+ applySkillListEffect();
+ },
+ },
+ });
+
+ tl4.to(".card-container", {
+ x: 0,
+ rotateZ: 0,
+ opacity: 1,
+ ease: "power2.out",
+ });
+
+ tl4.to(
+ "#skill-list",
+ {
+ x: 0,
+ rotateZ: 0,
+ opacity: 1,
+ ease: "power2.out",
+ },
+ "<",
+ );
- tl4.to(".card-container", {
- x: 0,
- rotateZ: 0,
- opacity: 1,
- ease: "power2.out",
+ function applySkillListEffect() {
+ const skillList = document.getElementById("skill-list");
+ let coeff = 150;
+
+ if (
+ window.innerWidth > 1025 &&
+ !/Mobi|Android/i.test(navigator.userAgent)
+ ) {
+ document.addEventListener("mousemove", (ev) => {
+ skillList.style.transform = `translate3d(${ev.pageX / coeff}px, ${
+ ev.pageY / coeff
+ }px, 0)`;
});
+ }
+ }
- tl4.to(
- "#skill-list",
- {
- x: 0,
- rotateZ: 0,
- opacity: 1,
- ease: "power2.out",
- },
- "<",
- );
-
- function applySkillListEffect() {
- const skillList = document.getElementById("skill-list");
- let coeff = 100;
-
- if (
- window.innerWidth > 1025 &&
- !/Mobi|Android/i.test(navigator.userAgent)
- ) {
- document.addEventListener("mousemove", (ev) => {
- skillList.style.transform = `translate3d(${ev.pageX / coeff}px, ${
- ev.pageY / coeff
- }px, 0)`;
- });
- }
- }
-
- return () => {
- ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
- };
- }, []);
-
- // Handle desktop skill item click
- const handleSkillClick = (index) => {
- setActiveIndex(index);
- // Reset and animate progress bar
- if (progressBarsRef.current[index]) {
- progressBarsRef.current[index].style.width = "0%";
- // Force reflow
- progressBarsRef.current[index].offsetHeight;
- progressBarsRef.current[index].style.width =
- cardElements[index].value;
- }
- };
-
- // Progress bar width handler
- const getProgressWidth = (value) => {
- if (window.innerWidth < 1025) {
- return isIntersecting ? value : "0%";
- }
- return undefined; // Let CSS handle desktop state
+ return () => {
+ ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
};
-
- return (
-
-
-
+ }, []);
+
+ // Handle desktop skill item click
+ const handleSkillClick = (index) => {
+ setActiveIndex(index);
+ // Reset and animate progress bar
+ if (progressBarsRef.current[index]) {
+ progressBarsRef.current[index].style.width = "0%";
+ // Force reflow
+ progressBarsRef.current[index].offsetHeight;
+ progressBarsRef.current[index].style.width = cardElements[index].value;
+ }
+ };
+
+ // Progress bar width handler
+ const getProgressWidth = (value) => {
+ if (window.innerWidth < 1025) {
+ return isIntersecting ? value : "0%";
+ }
+ return undefined; // Let CSS handle desktop state
+ };
+
+ return (
+
+
+
+
+ Skills
+
+
+
+ {/* Desktop View */}
+
+
+
+ {cardElements.map((elem, index) => (
+
+
+
+ {elem.title}
+
+
+ {elem.content}
+
- Skills
-
-
-
- {/* Desktop View */}
-
-
-
- {cardElements.map((elem, index) => (
-
-
-
- {elem.title}
-
-
- {elem.content}
-
-
- (progressBarsRef.current[
- index
- ] = el)
- }
- style={{
- width:
- activeIndex === index
- ? elem.value
- : "0%",
- transition:
- "width 0.4s ease-out",
- }}
- />
-
- {elem.value}
-
- ))}
-
-
-
-
- {cardElements.map((elem, index) => (
-
handleSkillClick(index)}
- >
- {elem.title}
-
- •••
-
-
- ))}
-
+ className="growth"
+ ref={(el) => (progressBarsRef.current[index] = el)}
+ style={{
+ width: activeIndex === index ? elem.value : "0%",
+ transition: "width 0.4s ease-out",
+ }}
+ />
+
+ {elem.value}
+
- {/* Mobile View */}
-
+ {cardElements.map((elem, index) => (
+
handleSkillClick(index)}
+ >
+ {elem.title}
+
- {mobileSkills.map((skill, index) => (
-
-
- {skill.title}
-
-
-
+ •••
+
+
+ ))}
+
+
+
+ {/* Mobile View */}
+
+ {mobileSkills.map((skill, index) => (
+
+
+ {skill.title}
+
+
-
- );
+ ))}
+
+
+ );
};
export default SkillsSection;
diff --git a/src/components/Main/SkillsSection/cardData.jsx b/src/components/Main/SkillsSection/cardData.jsx
index 16c104f..6d5b2d7 100644
--- a/src/components/Main/SkillsSection/cardData.jsx
+++ b/src/components/Main/SkillsSection/cardData.jsx
@@ -1,134 +1,97 @@
const cardElements = [
- {
- title: "Web Development",
- value: "70%",
- content: (
- <>
-
- Frontend:
-
- React
-
- Backend:
-
- Flask , SQL [SQLite, MySQL, PostgreSQL]
-
- Tools:
-
-
- Libraries:
-
-
- Languages:
-
-
- Concepts:
- */}
- {/*
- Concepts:
-
-
- Some libraries I have used in personal projects:
-
-
- Libraries:
-
-
- api:
-
-
- Collaboration experience:
-
-
+ Frontend:
+
+
+ Backend:
+
+
+ DevOps:
+
+
+ Data Structures
+ Algorithms
+ Relational Database Management Systems
+ Operating Systems
+ Object Oriented System Design
+ Digital Logic, Computer Organisation & Architecture
+
+
+ Libraries:
+
+
+ Experience:
+
+
-
- {navItems.map((item, index) => (
-
setHoveredIndex(index)}
- onMouseLeave={() => setHoveredIndex(null)}
- >
-
-
- {item.text}
-
-
-
- ))}
-
-
-
+
+ {navItems.map((item, index) => (
+
setHoveredIndex(index)}
+ onMouseLeave={() => setHoveredIndex(null)}
+ >
+
+
+ {item.text}
+
+
+
+ ))}
+
+
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
}>
+
+
+
+
+ {/* Render children here with z-index to sit on top of pattern */}
+
+ {children}
+
+
+
+
+ {icon && {icon} }
+ {text}
+
+ );
+ };
+
+ return (
+
+ {/* Vertical dashed line */}
+
+
+ {experiences.map((experience, index) => (
+
+ {/* Logo/Icon */}
+
+ {experience.logo ? (
+
+ ) : (
+
+
+ {experience.organization?.charAt(0) ||
+ experience.title?.charAt(0) ||
+ "E"}
+
+
+ )}
+
+
+ {/* Content */}
+
+ {/* Date */}
+
+ {experience.date}
+
+
+ {/* Title */}
+
+ {experience.title}
+
+
+ {/* Status */}
+ {experience.status && (
+
+ {experience.status}
+
+ )}
+
+ {/* Description */}
+
+
+ {/* Badges */}
+ {experience.badges && experience.badges.length > 0 && (
+
+ {experience.badges.map((badge, badgeIndex) => (
+
{renderBadge(badge)}
+ ))}
+
+ )}
+
+
+ ))}
+
- Blog
-
-
-
-
-
-
- sun-icon
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- I
- Am
- Subha
- /Dev
-
-
-
- MERN & Flask Stack Developer / Web Designer. Information
- Technology student at
-
- IIEST Shibpur.
- Interested in Deep Learning and Blockchain technologies.
-
-
- Nothing more to say, thanks for visiting my website. Don't
- forget to explore my projects. I'm eager to collaborate with
- interested people.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- GDSC[Google Developer Student Club] IIEST SHibpur, Development
- Team Member
-
-
- October 2024 - Present
-
-
-
-
-
-
-
- SWOC[Social Winter Of Code] Contributor
-
-
- December 2024
-
-
-
-
-
-
-
- Completed HactoberFest'24 OpenSource Contribution Event
-
-
- October 2024
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pimary Studies
-
-
-
-
-
- Institution:
- Narendranath School
-
-
-
-
- Year:
- 2010-2015
-
-
-
-
- Grade:
- A+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Secondary Education
-
-
-
-
-
- Institution:
- Bishnupur High School
-
-
-
-
- Year:
- 2015-2021
-
-
-
-
- Grade:
- 96.42%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Higher Secondary Education
-
-
-
-
-
- Institution:
- Bishnupur High School
-
-
-
-
- Year:
- 2021-2023
-
-
-
-
- Grade:
- 88%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- B.Tech in Information Technology
-
-
-
-
-
- Institution:
- IIEST Shibpur
-
-
-
-
- Year:
- 2023-present
-
-
-
-
- Grade:
- 8.46
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Web Development
-
Frontend:
-
- HTML, CSS, JavaScript, SASS, Tailwind CSS,
-
jQuery, ReactJS
-
-
-
Backend:
-
- Node.js, Express,
-
Flask
- ,SQL databases [SQLite, PostgreSQL]
-
-
-
-
- 70%
-
-
-
-
- UI/UX
-
Tools:
-
- Figma, GIMP
-
-
-
Libraries:
-
- GSAP, AOS, tilt.js, Typed.js, LENIS(locomotive scroll),
- Split-type
-
-
-
-
- 70%
-
-
-
-
- Data Structures
-
Languages:
-
- Python, C, C++
-
-
-
Concepts:
-
- Time & Space Complexity, Function call Stack, Array, String,
- Stack, Queue, LinkedList, Tree, Searching, Sorting
-
-
-
-
- 85%
-
-
-
-
- Python
-
Concepts:
-
- OOPs, DSA, Data Visualisation using numpy & matplotlib[small
- scale], Web Development[flask]
-
-
-
Some libraries I have used in personal projects:
-
- • numpy, matplotlib, PIL, Tesseract, OpenCV, reportlab, bs4,
- selenium etc
-
-
-
-
- 85%
-
-
-
-
- Web Scraping
-
Libraries:
-
- requests, BeautifulSoup, Selenium
-
-
-
api:
-
- Scrapeowl
-
-
-
- 60%
-
-
-
-
- Collaboration
- Can easily collaborate with team members using GitHub
-
-
Collaboration experience:
-
- Hactoberfest'24, College GDG Dev Team members
-
-
-
-
- 70%
-
-
-
-
- Telegram Bots
- I have created several telgram bots.
-
-
-
- Scripting
- Linux and MAC OS shell scripting, and python Scripting for
- automation
-
-
-
-
- 50%
-
-
-
-
-
-
- Web Development
- •••
-
-
-
- UI/UX
- •••
-
-
-
- Data Structures
- •••
-
-
-
- Python
- •••
-
-
-
- Web Scraping
- •••
-
-
-
- Collaboration
- •••
-
-
-
- Others
- •••
-
-
-
-
-
-
-
-
- Web Development
-
-
-
-
-
-
- UI-UX
-
-
-
-
-
-
- Data Structures
-
-
-
-
-
-
- PYTHON
-
-
-
-
-
-
- Web Scraping
-
-
-
-
-
-
- Node + Express
-
-
-
-
-
-
- React
-
-
-
-
-
-
- JavaScript
-
-
-
-
-
-
- Git & GitHub
-
-
-
-
-
-
- Flask
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
LumiFeed
-
- A neat platform for reading news.
- A webapp with clutterless UI to read news without
- advertisements, along with summary of each news available. Many
- other mindblowing features available.
- -- Solo Project
- Technologies used:
-
- flask (for backend)
- SQL database [postgresql & sqlite]
- JavaScript AJAX and Fetch api
- Web Scraping [requests, bs4]
- HTML, CSS, SASS, figma
- AI Summary api
-
-
-
- visit
-
-
-
-
-
-
-
-
-
-
-
encryptease
-
- Encrypt your data easily. (fun app)
- A powerful webapp to encrypt messages and files easily that are
- highly secure and cannot be decrypted without the encryption
- KEY.
- -- Solo Project
- Technologies used:
-
- flask
- Cryptography Module (python)
- JavaScript AJAX
- HTML - CSS - JS
-
-
-
- visit
-
-
-
-
-
-
-
-
-
-
-
Portfolio
-
- This portfolio website you are in right now.
- A portfolio Website to easily introduce me to everyone.
- -- solo project
- Technologies used:
-
- HTML-CSS-JavaScript
- GSAP
- locomotive scroll
- UI-UX
- figma
-
-
-
- see code in github
-
-
-
-
-
-
-
-
-
-
-
opencanvas.blog
-
- A retro blogging site for everyone.
- Currently IN MAKING. various blogs and journals will be
- published here later on.
- -- Collaborative project
- Technologies used:
-
- Mongo - Express - React - Node [MERN]
- TailwindCSS & SASS
- websocket
- ...
-
-
-
- visit [incomple now :(]
-
-
-
-
-
-
-
-
-
-
-
Zentunes
-
- Ear-soothing music anywhere.
- A music streaming platform for retro lovers.
- -- Solo Project.
- Some development is yet to do, sorry!!.
-
- HTML
- CSS
- JavaScript
- SCSS
- React
-
-
-
- visit
-
-
-
-
-
-
-
-
-
-
-
Maze Battle Game
-
- Player vs CPU maze runnig game
- -- solo project
- Technologies used:
-
- JavaScript
- CSS
- HTML
-
-
-
- visit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Thanks For Visiting
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/version1.17.10/src/fonts/JetBrainsMono-Regular.woff2 b/version1.17.10/src/fonts/JetBrainsMono-Regular.woff2
deleted file mode 100644
index 40da427..0000000
Binary files a/version1.17.10/src/fonts/JetBrainsMono-Regular.woff2 and /dev/null differ
diff --git a/version1.17.10/src/fonts/Tangerine/OFL.txt b/version1.17.10/src/fonts/Tangerine/OFL.txt
deleted file mode 100644
index 5ad69bd..0000000
--- a/version1.17.10/src/fonts/Tangerine/OFL.txt
+++ /dev/null
@@ -1,93 +0,0 @@
-Copyright (c) 2010, Toshi Omagari (tosche@mac.com)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://openfontlicense.org
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/version1.17.10/src/fonts/Tangerine/Tangerine-Bold.ttf b/version1.17.10/src/fonts/Tangerine/Tangerine-Bold.ttf
deleted file mode 100644
index 0fb137c..0000000
Binary files a/version1.17.10/src/fonts/Tangerine/Tangerine-Bold.ttf and /dev/null differ
diff --git a/version1.17.10/src/fonts/Tangerine/Tangerine-Regular.ttf b/version1.17.10/src/fonts/Tangerine/Tangerine-Regular.ttf
deleted file mode 100644
index 8f342e0..0000000
Binary files a/version1.17.10/src/fonts/Tangerine/Tangerine-Regular.ttf and /dev/null differ
diff --git a/version1.17.10/src/fonts/Tangerine/tangerine.woff2 b/version1.17.10/src/fonts/Tangerine/tangerine.woff2
deleted file mode 100644
index 45b28f9..0000000
Binary files a/version1.17.10/src/fonts/Tangerine/tangerine.woff2 and /dev/null differ
diff --git a/version1.17.10/src/fonts/dahlia.woff2 b/version1.17.10/src/fonts/dahlia.woff2
deleted file mode 100644
index 481195f..0000000
Binary files a/version1.17.10/src/fonts/dahlia.woff2 and /dev/null differ
diff --git a/version1.17.10/src/fonts/inter.woff2 b/version1.17.10/src/fonts/inter.woff2
deleted file mode 100644
index 147665c..0000000
Binary files a/version1.17.10/src/fonts/inter.woff2 and /dev/null differ
diff --git a/version1.17.10/src/fonts/mondia-thin.woff2 b/version1.17.10/src/fonts/mondia-thin.woff2
deleted file mode 100644
index bde0749..0000000
Binary files a/version1.17.10/src/fonts/mondia-thin.woff2 and /dev/null differ
diff --git a/version1.17.10/src/fonts/mondia.woff2 b/version1.17.10/src/fonts/mondia.woff2
deleted file mode 100644
index d92fbc9..0000000
Binary files a/version1.17.10/src/fonts/mondia.woff2 and /dev/null differ
diff --git a/version1.17.10/src/fonts/scribe.woff2 b/version1.17.10/src/fonts/scribe.woff2
deleted file mode 100644
index 030c1d9..0000000
Binary files a/version1.17.10/src/fonts/scribe.woff2 and /dev/null differ
diff --git a/version1.17.10/src/images/1.webp b/version1.17.10/src/images/1.webp
deleted file mode 100644
index 947fb57..0000000
Binary files a/version1.17.10/src/images/1.webp and /dev/null differ
diff --git a/version1.17.10/src/images/bhs1.gif b/version1.17.10/src/images/bhs1.gif
deleted file mode 100644
index 745a5d1..0000000
Binary files a/version1.17.10/src/images/bhs1.gif and /dev/null differ
diff --git a/version1.17.10/src/images/bhs2.jpg b/version1.17.10/src/images/bhs2.jpg
deleted file mode 100644
index 0b85dca..0000000
Binary files a/version1.17.10/src/images/bhs2.jpg and /dev/null differ
diff --git a/version1.17.10/src/images/bhs3.gif b/version1.17.10/src/images/bhs3.gif
deleted file mode 100644
index b1733df..0000000
Binary files a/version1.17.10/src/images/bhs3.gif and /dev/null differ
diff --git a/version1.17.10/src/images/black-lotus-3.webp b/version1.17.10/src/images/black-lotus-3.webp
deleted file mode 100644
index 771d8bf..0000000
Binary files a/version1.17.10/src/images/black-lotus-3.webp and /dev/null differ
diff --git a/version1.17.10/src/images/boy.webp b/version1.17.10/src/images/boy.webp
deleted file mode 100644
index 5b64682..0000000
Binary files a/version1.17.10/src/images/boy.webp and /dev/null differ
diff --git a/version1.17.10/src/images/favicon.png b/version1.17.10/src/images/favicon.png
deleted file mode 100644
index 7ce0153..0000000
Binary files a/version1.17.10/src/images/favicon.png and /dev/null differ
diff --git a/version1.17.10/src/images/girl.webp b/version1.17.10/src/images/girl.webp
deleted file mode 100644
index 079bee5..0000000
Binary files a/version1.17.10/src/images/girl.webp and /dev/null differ
diff --git a/version1.17.10/src/images/holopin.jpeg b/version1.17.10/src/images/holopin.jpeg
deleted file mode 100644
index f6c4d2e..0000000
Binary files a/version1.17.10/src/images/holopin.jpeg and /dev/null differ
diff --git a/version1.17.10/src/images/iiest1.jpeg b/version1.17.10/src/images/iiest1.jpeg
deleted file mode 100644
index d85f6ad..0000000
Binary files a/version1.17.10/src/images/iiest1.jpeg and /dev/null differ
diff --git a/version1.17.10/src/images/iiest3.jpeg b/version1.17.10/src/images/iiest3.jpeg
deleted file mode 100644
index eaed4e3..0000000
Binary files a/version1.17.10/src/images/iiest3.jpeg and /dev/null differ
diff --git a/version1.17.10/src/images/iiest4.jpeg b/version1.17.10/src/images/iiest4.jpeg
deleted file mode 100644
index c16d718..0000000
Binary files a/version1.17.10/src/images/iiest4.jpeg and /dev/null differ
diff --git a/version1.17.10/src/images/iiest6.jpeg b/version1.17.10/src/images/iiest6.jpeg
deleted file mode 100644
index 41d1ff7..0000000
Binary files a/version1.17.10/src/images/iiest6.jpeg and /dev/null differ
diff --git a/version1.17.10/src/images/logo-hacktoberfest.svg b/version1.17.10/src/images/logo-hacktoberfest.svg
deleted file mode 100644
index 32b6fba..0000000
--- a/version1.17.10/src/images/logo-hacktoberfest.svg
+++ /dev/null
@@ -1 +0,0 @@
-Subhajit Gorai - Developer
-
-
- Please enable JavaScript to visit this website.
-
-
-
-
-
-
-
-
-
-
- Blog
-
-
-
-
-
-
- sun-icon
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- I
- Am
- Subha/Dev
-
-
-
- MERN & Flask Stack Developer / Web Designer.
- Information Technology student at
- IIEST Shibpur.
- Interested in Deep Learning and Blockchain technologies.
-
-
- Nothing more to say, thanks for visiting my website. Don't
- forget to explore my projects. I'm eager to collaborate with
- interested people.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
GDSC[Google Developer Student Club] IIEST SHibpur, Development Team Member
-
October 2024 - Present
-
-
-
-
-
-
SWOC[Social Winter Of Code] Contributor
-
December 2024
-
-
-
-
-
-
Completed HactoberFest'24 OpenSource Contribution Event
-
October 2024
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pimary Studies
-
-
-
-
-
- Institution:
- Narendranath School
-
-
-
-
- Year:
- 2010-2015
-
-
-
-
- Grade:
- A+
-
-
-
-
-
-
-
-
-
-
-
-
-
- Secondary Education
-
-
-
-
-
- Institution:
- Bishnupur High School
-
-
-
-
- Year:
- 2015-2021
-
-
-
-
- Grade:
- 96.42%
-
-
-
-
-
-
-
-
-
-
-
-
-
- Higher Secondary Education
-
-
-
-
-
- Institution:
- Bishnupur High School
-
-
-
-
- Year:
- 2021-2023
-
-
-
-
- Grade:
- 88%
-
-
-
-
-
-
-
-
-
-
-
-
-
- B.Tech in Information Technology
-
-
-
-
-
- Institution:
- IIEST Shibpur
-
-
-
-
- Year:
- 2023-present
-
-
-
-
- Grade:
- 8.46
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Web Development
-
Frontend:
-
- HTML, CSS, JavaScript, SASS, Tailwind CSS,
-
jQuery, ReactJS
-
-
-
Backend:
-
- Node.js, Express,
-
Flask
- ,SQL databases [SQLite, PostgreSQL]
-
-
-
-
- 70%
-
-
-
-
- UI/UX
-
Tools:
-
- Figma, GIMP
-
-
-
Libraries:
-
- GSAP, AOS, tilt.js, Typed.js, LENIS(locomotive scroll), Split-type
-
-
-
-
- 70%
-
-
-
-
- Data Structures
-
Languages:
-
- Python, C, C++
-
-
-
Concepts:
-
- Time & Space Complexity, Function call Stack, Array, String, Stack, Queue, LinkedList, Tree, Searching, Sorting
-
-
-
-
- 85%
-
-
-
-
- Python
-
Concepts:
-
- OOPs, DSA, Data Visualisation using numpy & matplotlib[small scale], Web Development[flask]
-
-
-
Some libraries I have used in personal projects:
-
- • numpy, matplotlib, PIL, Tesseract, OpenCV, reportlab, bs4, selenium etc
-
-
-
-
- 85%
-
-
-
-
- Web Scraping
-
Libraries:
-
- requests, BeautifulSoup, Selenium
-
-
-
api:
-
- Scrapeowl
-
-
-
- 60%
-
-
-
-
- Collaboration
- Can easily collaborate with team members using GitHub
-
-
Collaboration experience:
-
- Hactoberfest'24, College GDG Dev Team members
-
-
-
-
- 70%
-
-
-
-
- Telegram Bots
- I have created several telgram bots.
-
-
-
- Scripting
- Linux and MAC OS shell scripting, and python Scripting for
- automation
-
-
-
-
- 50%
-
-
-
-
-
-
- Web Development
- •••
-
-
-
- UI/UX
- •••
-
-
-
- Data Structures
- •••
-
-
-
- Python
- •••
-
-
-
- Web Scraping
- •••
-
-
-
- Collaboration
- •••
-
-
-
- Others
- •••
-
-
-
-
-
-
-
-
- Web Development
-
-
-
-
-
-
- UI-UX
-
-
-
-
-
-
- Data Structures
-
-
-
-
-
-
- PYTHON
-
-
-
-
-
-
- Web Scraping
-
-
-
-
-
-
- Node + Express
-
-
-
-
-
-
- React
-
-
-
-
-
-
- JavaScript
-
-
-
-
-
-
- Git & GitHub
-
-
-
-
-
-
- Flask
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
LumiFeed
-
- A neat platform for reading news.
- A webapp with clutterless UI to read news without advertisements, along with summary of each news available.
- Many other mindblowing features available.
- -- Solo Project
- Technologies used:
-
- flask (for backend)
- SQL database [postgresql & sqlite]
- JavaScript AJAX and Fetch api
- Web Scraping [requests, bs4]
- HTML, CSS, SASS, figma
- AI Summary api
-
-
-
- visit
-
-
-
-
-
-
-
-
-
-
-
encryptease
-
- Encrypt your data easily. (fun app)
- A powerful webapp to encrypt messages and files easily that are highly secure and cannot be decrypted without the encryption KEY.
- -- Solo Project
- Technologies used:
-
- flask
- Cryptography Module (python)
- JavaScript AJAX
- HTML - CSS - JS
-
-
-
- visit
-
-
-
-
-
-
-
-
-
-
-
Portfolio
-
- This portfolio website you are in right now.
- A portfolio Website to easily introduce me to everyone.
- -- solo project
- Technologies used:
-
- HTML-CSS-JavaScript
- GSAP
- locomotive scroll
- UI-UX
- figma
-
-
-
- see code in github
-
-
-
-
-
-
-
-
-
-
-
opencanvas.blog
-
- A retro blogging site for everyone.
- Currently IN MAKING. various blogs and journals will be published here later on.
- -- Collaborative project
- Technologies used:
-
- Mongo - Express - React - Node [MERN]
- TailwindCSS & SASS
- websocket
- ...
-
-
-
- visit [incomple now :(]
-
-
-
-
-
-
-
-
-
-
-
Zentunes
-
- Ear-soothing music anywhere.
- A music streaming platform for retro lovers.
- -- Solo Project.
- Some development is yet to do, sorry!!.
-
- HTML
- CSS
- JavaScript
- SCSS
- React
-
-
-
- visit
-
-
-
-
-
-
-
-
-
-
-
Maze Battle Game
-
- Player vs CPU maze runnig game
- -- solo project
- Technologies used:
-
- JavaScript
- CSS
- HTML
-
-
-
- visit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Thanks For Visiting
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/vite.config.js b/vite.config.js
index 8205ee4..990a880 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,36 +1,32 @@
+import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import compression from "vite-plugin-compression";
import { visualizer } from "rollup-plugin-visualizer";
export default defineConfig({
- plugins: [
- react(),
- compression(), // Enable gzip compression for production
- visualizer({
- open: false, // Automatically opens the visualization report
- }),
- ],
- // base: "/subhajit/", // Replace with your GitHub repository name
- base: "/", // Replace with your GitHub repository name
- build: {
- outDir: "dist", // Output directory for production build
- sourcemap: true, // Generate sourcemaps for debugging production code
- rollupOptions: {
- output: {
- manualChunks: {
- // Example of chunk splitting
- vendor: ["react", "react-dom"],
- },
- },
+ plugins: [
+ react(),
+ compression(),
+ visualizer({
+ open: false,
+ }),
+ ],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+ base: "/",
+ build: {
+ outDir: "dist",
+ sourcemap: true,
+ rollupOptions: {
+ output: {
+ manualChunks: {
+ vendor: ["react", "react-dom"],
},
+ },
},
+ },
});
-
-// import { defineConfig } from 'vite'
-// import react from '@vitejs/plugin-react'
-
-// // https://vite.dev/config/
-// export default defineConfig({
-// plugins: [react()],
-// })
- 
+ 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- Web Development
-
- 
- UI-UX
-
- 
- Data Structures
-
- 
- PYTHON
-
- 
- Web Scraping
-
- 
- Node + Express
-
- 
- React
-
- 
- JavaScript
-
- 
- Git & GitHub
-
- 
- Flask
-
- 
-
- 
- 
- 
- 
- 
- 
-