-
diff --git a/src/components/socialMedia/SocialMedia.scss b/src/components/socialMedia/SocialMedia.scss
index aec6fc0b9f..af084953a7 100644
--- a/src/components/socialMedia/SocialMedia.scss
+++ b/src/components/socialMedia/SocialMedia.scss
@@ -26,6 +26,19 @@
width: 2.6rem;
margin-bottom: 10px;
transition: 0.2s ease-in;
+ background: #fff;
+ border: 3px solid transparent;
+ box-shadow: 0 2px 12px rgba(161, 140, 209, 0.1);
+ position: relative;
+ z-index: 1;
+ overflow: hidden;
+}
+.icon-button i:hover {
+ transform: scale(1.18) rotate(-10deg);
+ box-shadow: 0 0 24px #fbc2eb, 0 0 40px #a18cd1;
+ color: #fff;
+ background: linear-gradient(135deg, #a18cd1, #fbc2eb);
+ border: 3px solid #a18cd1;
}
.facebook i {
diff --git a/src/components/softwareSkills/SoftwareSkill.scss b/src/components/softwareSkills/SoftwareSkill.scss
index 4d302a1b4d..0e52dda2ce 100644
--- a/src/components/softwareSkills/SoftwareSkill.scss
+++ b/src/components/softwareSkills/SoftwareSkill.scss
@@ -4,8 +4,8 @@
padding-left: 0;
list-style: none;
font-size: 3rem;
- margin-bottom: 0px;
- margin-top: 0px;
+ margin-bottom: 0;
+ margin-top: 0;
text-align: center;
}
@@ -13,19 +13,53 @@
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
+ position: relative;
+ transition: transform 0.25s cubic-bezier(0.4, 2, 0.6, 1);
}
.software-skill-inline > i {
color: $subTitle;
+ transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
+ box-shadow: 0 2px 12px rgba(161, 140, 209, 0.08);
+ border-radius: 16px;
+ background: #fff;
+ padding: 10px;
}
.software-skill-inline > i:hover {
- color: $skillsColor;
+ color: #fff;
+ background: linear-gradient(135deg, #a18cd1, #fbc2eb);
+ transform: scale(1.18) rotate(-8deg);
+ box-shadow: 0 8px 32px 0 #a18cd1, 0 0 24px #fbc2eb;
+ cursor: pointer;
}
+
.software-skill-inline > p {
color: $subTitle;
- font-size: 10px;
+ font-size: 12px;
+ margin-top: 8px;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ left: 50%;
+ top: 110%;
+ transform: translateX(-50%) translateY(10px);
+ background: rgba(251, 194, 235, 0.95);
+ padding: 4px 14px;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px rgba(161, 140, 209, 0.12);
+ transition: opacity 0.3s, transform 0.3s;
+ white-space: nowrap;
+ z-index: 2;
+}
+
+.software-skill-inline:hover > p {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ color: #a18cd1;
+ font-weight: 600;
}
-.software-skill-inline > i:hover ~ p {
- color: $skillsColor;
+
+.software-skill-inline:hover {
+ transform: scale(1.08);
}
diff --git a/src/components/talkCard/TalkCard.scss b/src/components/talkCard/TalkCard.scss
index 0fc003de83..88289751aa 100644
--- a/src/components/talkCard/TalkCard.scss
+++ b/src/components/talkCard/TalkCard.scss
@@ -19,6 +19,20 @@
}
.rectangle:hover {
box-shadow: 0 20px 40px $textColorDark;
+ transform: scale(1.04) translateY(-8px) rotate(-1deg);
+ box-shadow: 0 20px 60px 0 #a18cd1, 0 0 40px #fbc2eb;
+ border: 3px solid #a18cd1;
+}
+@keyframes float {
+ 0% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+ 100% {
+ transform: translateY(0);
+ }
}
.dark-rectangle {
box-shadow: 0px 0px 20px 0px;
@@ -40,6 +54,7 @@
line-height: normal;
overflow: hidden;
display: -webkit-box;
+ font-size: clamp(1.25rem, 2vw, 2rem);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
diff --git a/src/containers/Main.scss b/src/containers/Main.scss
index 9081d3f1b9..eecb659989 100644
--- a/src/containers/Main.scss
+++ b/src/containers/Main.scss
@@ -2,6 +2,7 @@
.dark-mode {
background-color: $darkBackground;
- color: white;
+ color: rgb(255, 255, 255);
transition: "0.1s";
+ background: linear-gradient(135deg, #ffffff, #f3e8ff);
}
diff --git a/src/containers/StartupProjects/StartupProjects.scss b/src/containers/StartupProjects/StartupProjects.scss
index 1f6be1be3f..36651fcef7 100644
--- a/src/containers/StartupProjects/StartupProjects.scss
+++ b/src/containers/StartupProjects/StartupProjects.scss
@@ -1,90 +1,127 @@
@import "../../_globalColor";
-.card-image {
- max-width: 100%;
- height: auto;
- width: 250px;
-}
-.card-title {
- color: $titleColor;
- font-size: 22px;
- line-height: 24px;
- font-weight: 700;
- margin: 15px 0 0 0;
-}
-.card-subtitle {
- color: $cardSubtitle;
- font-size: 17px;
- line-height: 1.5rem;
-}
.project-card {
+ position: relative;
display: flex;
flex-direction: column;
- background-color: $lightBackground2;
- padding: 1.5rem;
- border-radius: 10px;
- border: 1px solid $lightBorder1;
- justify-content: center;
+ background: linear-gradient(
+ 135deg,
+ #ffffff,
+ #fce8ee
+ ); // soft version of light maroon
+ border-radius: 20px;
+ padding: 2rem;
+ border: none;
+ box-shadow: #e589aa;
+ overflow: hidden;
+ transition: transform 0.4s ease, box-shadow 0.4s ease;
+ z-index: 1;
}
-.project-card-light {
- box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
- -webkit-transition: all 0.3s ease;
- -o-transition: all 0.3s ease;
- transition: all 0.3s ease;
+
+.project-card:hover {
+ transform: translateY(-12px) scale(1.015);
+ box-shadow: 0 20px 50px rgba(229, 137, 170, 0.3); // light maroon glow
}
-.project-card-dark {
- box-shadow: 0px 10px 30px -15px $darkBoxShadow;
- -webkit-transition: all 0.3s ease;
- -o-transition: all 0.3s ease;
- transition: all 0.25s ease;
+.project-card::before {
+ content: "";
+ position: absolute;
+ top: -40px;
+ right: -40px;
+ width: 120px;
+ height: 120px;
+ background: radial-gradient(
+ circle,
+ #801336 0%,
+ transparent 70%
+ ); // deep maroon glow
+ filter: blur(50px);
+ z-index: 0;
}
-.project-detail {
- text-align: center;
+.card-image {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+ border-radius: 15px;
+ margin-bottom: 1rem;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+ transition: transform 0.3s ease;
}
-.project-card-light:hover {
- box-shadow: $lightBoxShadowDark 0px 20px 30px -10px;
+
+.project-card:hover .card-image {
+ transform: scale(1.05);
}
-.project-card-dark:hover {
- box-shadow: 0px 20px 30px -10px $darkBoxShadow;
+
+.card-title {
+ font-size: 24px;
+ font-weight: 800;
+ text-align: center;
+ margin-top: 1rem;
+ margin-bottom: 0.5rem;
+ background: linear-gradient(90deg, #801336, #e589aa);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: fadeInUp 0.5s ease-in-out;
+ z-index: 1;
+ text-shadow: 0 2px 10px rgba(229, 137, 170, 0.4);
}
-.project-image {
- position: relative;
- height: 250px;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
+
+.card-subtitle {
+ text-align: center;
+ color: $textColor;
+ font-size: 16px;
+ margin-bottom: 1.5rem;
+ animation: fadeInUp 0.6s ease-in-out;
}
-.projects-container {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 1rem 1rem;
+.project-card-footer {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 0.5rem;
}
-.project-card-footer span.project-tag {
- background: $buttonColor;
- color: $lightBackground3;
- vertical-align: middle;
- align-items: center;
- border-radius: 4px;
- display: inline-flex;
+.project-tag {
+ background: linear-gradient(90deg, #801336, #e589aa);
+ color: white;
font-size: 0.75rem;
- height: 2em;
- justify-content: center;
- white-space: nowrap;
- line-height: 1.5;
- margin: 0 0.5rem 0.5rem 0;
- padding: 0 0.75em;
+ padding: 0.4rem 0.8rem;
+ border-radius: 999px;
+ transition: background 0.3s;
cursor: pointer;
- transition: 0.2s ease-in;
+ box-shadow: 0 4px 12px rgba(229, 137, 170, 0.3);
+}
+
+.project-tag:hover {
+ background: linear-gradient(90deg, #e589aa, #801336);
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(15px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Responsive Grid */
+.projects-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: 2rem;
+ padding: 2rem 0;
}
@media (max-width: 768px) {
- .project-subtitle {
- font-size: 16px;
- text-align: center;
+ .card-title {
+ font-size: 20px;
+ }
+
+ .card-subtitle {
+ font-size: 14px;
}
}
diff --git a/src/containers/achievement/Achievement.scss b/src/containers/achievement/Achievement.scss
index 684f009b08..0707db1e1a 100644
--- a/src/containers/achievement/Achievement.scss
+++ b/src/containers/achievement/Achievement.scss
@@ -2,30 +2,61 @@
.achievement-heading {
font-size: 56px;
- font-weight: 400;
- line-height: normal;
- margin: 0px;
+ font-weight: 900;
+ line-height: 1.2;
+ margin: 0;
+ color: #111; // pure dark gray for elegance
+ text-align: left;
+ letter-spacing: -1px;
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); // soft elevation effect
+ padding-left: 1rem;
+ animation: fadeInUp 0.6s ease-in-out;
}
+
.achievement-subtitle {
text-transform: uppercase;
- margin: 0px;
+ font-weight: 600;
+ letter-spacing: 1.5px;
+ font-size: 18px;
+ color: #555; // medium gray
+ margin: 0;
margin-bottom: 50px;
+ animation: fadeInUp 0.7s ease-in-out;
+ text-align: left;
+ border-bottom: 2px solid #ddd; // underline divider
+ display: inline-block;
+ padding-bottom: 0.25rem;
}
+
.subTitle {
color: $subTitle;
}
-/* Media Query */
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(15px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Responsive Design */
@media (max-width: 1380px) {
.achievement-heading {
font-size: 40px;
}
}
+
@media (max-width: 768px) {
.achievement-heading {
font-size: 30px;
text-align: center;
}
+
.achievement-subtitle {
font-size: 16px;
line-height: normal;
diff --git a/src/containers/blogs/Blog.scss b/src/containers/blogs/Blog.scss
index 9be97efb7c..317b138291 100644
--- a/src/containers/blogs/Blog.scss
+++ b/src/containers/blogs/Blog.scss
@@ -6,7 +6,7 @@
height: 430px;
background: $textColorDark;
border-radius: 4px;
- box-shadow: 0px 20px 50px $darkBoxShadow;
+ box-shadow: 0px 20px 50px rgba(229, 137, 170, 0.3); // maroon shadow
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
@@ -14,7 +14,7 @@
}
.square:hover {
- box-shadow: 0 20px 40px $lightBoxShadow;
+ box-shadow: 0 20px 40px rgba(229, 137, 170, 0.4); // stronger maroon on hover
}
.blog-header-text {
@@ -25,22 +25,27 @@
.blog-subtitle {
text-transform: uppercase;
}
+
.blog-main-div > * {
flex: 1;
margin-bottom: 30px;
}
+
.blog-main-div {
display: flex;
}
+
.blog-image-div > img {
max-width: 100%;
height: auto;
}
+
.blog-text-div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 32px;
}
+
.subTitle {
color: $subTitle;
}
@@ -51,11 +56,13 @@
font-size: 40px;
}
}
+
@media (max-width: 768px) {
.blog-header-text {
font-size: 30px;
text-align: center;
}
+
.blog-subtitle {
font-size: 16px;
line-height: normal;
diff --git a/src/containers/greeting/Greeting.js b/src/containers/greeting/Greeting.js
index dbcd469bd5..9dae693382 100644
--- a/src/containers/greeting/Greeting.js
+++ b/src/containers/greeting/Greeting.js
@@ -15,7 +15,7 @@ export default function Greeting() {
return null;
}
return (
-
+
+ {/* β
Only one experience-banner */}
+
getColorArrays()}
+ src={require("../../assets/images/images.jpeg")}
+ alt="Canopas"
/>
+
diff --git a/src/components/footer/Footer.js b/src/components/footer/Footer.js
index 0453914bf2..01fa08cbd5 100644
--- a/src/components/footer/Footer.js
+++ b/src/components/footer/Footer.js
@@ -10,16 +10,16 @@ export default function Footer() {
-
{cardInfo.company}
+Canopas
- {cardInfo.role} + Frontend Developer Intern
- {cardInfo.date} + June 2025 β Present
- {cardInfo.desc} + Worked on developing and maintaining modern, responsive UI using + React, SCSS, and reusable components.
-
-
- + {item} + + ))}
- {emoji("Made with β€οΈ by DeveloperFolio Team")} + {emoji("Made with β€οΈ by Princy Vithani")}
- Theme by{" "} + Theme by{""} | - developerFolio + princy
diff --git a/src/containers/skillProgress/Progress.scss b/src/containers/skillProgress/Progress.scss
index a448e9af31..8697df7bc2 100644
--- a/src/containers/skillProgress/Progress.scss
+++ b/src/containers/skillProgress/Progress.scss
@@ -1,56 +1,77 @@
@import "../../_globalColor";
+/* Progress bar container */
.meter {
height: 20px;
position: relative;
- background: $progressBarBackground;
- -moz-border-radius: 25px;
- -webkit-border-radius: 25px;
+ background: #e0e0e0; // Soft grey background
border-radius: 25px;
+ overflow: hidden;
}
+
+/* Filled portion of the progress bar */
.meter > span {
display: block;
height: 100%;
- border-top-right-radius: 6px;
- border-bottom-right-radius: 6px;
- border-top-left-radius: 20px;
- border-bottom-left-radius: 20px;
- background-color: $progressBarSpanBG;
+ border-radius: 25px;
+ background-color: #e589aa; // Custom purple
position: relative;
overflow: hidden;
+ transition: width 0.6s ease-in-out;
}
+
+/* Individual skill entry */
.skill {
line-height: 3.5vw;
+ margin-bottom: 20px;
}
-.skill-bars {
- font-size: 28px;
- width: 40%;
-}
+
+/* Container for the skill and progress bars */
.skills-container {
display: flex;
width: 90%;
padding: 20px 10px;
- margin: 0px auto;
- margin-top: 2rem;
+ margin: 2rem auto;
+ flex-wrap: wrap;
+ gap: 2rem;
}
+
+/* Left side (bars) and right side (Lottie) */
.skills-container > * {
flex: 1;
- margin-bottom: 30px;
+ min-width: 300px;
}
+
+/* Image (right side Lottie or SVG) */
.skills-image > img {
margin-left: 80px;
max-width: 90%;
height: auto;
}
-/* Media Query */
+/* Heading */
+.skills-heading {
+ font-size: 40px;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ color: $textColor;
+}
+
+/* Description bullets */
+.proficiency-description {
+ padding-left: 1rem;
+ margin-bottom: 1rem;
+ font-size: 1rem;
+ color: $subTitle;
+ list-style-type: "πΉ ";
+}
+/* Responsive Design */
@media (max-width: 1456px) {
.skills-bar {
line-height: 4rem;
}
.skills-image {
- display: none;
order: 2;
}
}
@@ -58,13 +79,16 @@
@media (max-width: 768px) {
.skills-container {
flex-direction: column;
+ align-items: center;
}
+
.skills-bar {
line-height: 3rem;
margin: 20px;
+ width: 100%;
}
+
.skills-image {
display: none;
- order: 2;
}
}
diff --git a/src/containers/skillProgress/skillProgress.js b/src/containers/skillProgress/skillProgress.js
index 6fdb87dc7d..b3596b27f9 100644
--- a/src/containers/skillProgress/skillProgress.js
+++ b/src/containers/skillProgress/skillProgress.js
@@ -2,44 +2,48 @@ import React from "react";
import "./Progress.scss";
import {illustration, techStack} from "../../portfolio";
import {Fade} from "react-reveal";
-import Build from "../../assets/lottie/build";
+import Build from "../../assets/lottie/build.json"; // β
Lottie JSON
import DisplayLottie from "../../components/displayLottie/DisplayLottie";
export default function StackProgress() {
- if (techStack.viewSkillBars) {
- return (
-
-
-
-
diff --git a/src/containers/workExperience/WorkExperience.scss b/src/containers/workExperience/WorkExperience.scss
index 69e64e2638..df13cb46f9 100644
--- a/src/containers/workExperience/WorkExperience.scss
+++ b/src/containers/workExperience/WorkExperience.scss
@@ -7,6 +7,8 @@
.experience-heading {
font-size: 56px;
font-weight: 400;
+ text-shadow: 0 4px 20px rgba(186, 85, 211, 0.4);
+ z-index: 1;
}
.experience-container {
diff --git a/src/portfolio.js b/src/portfolio.js
index f37660fdf0..171cd18f7d 100644
--- a/src/portfolio.js
+++ b/src/portfolio.js
@@ -5,8 +5,6 @@
import emoji from "react-easy-emoji";
import splashAnimation from "./assets/lottie/splashAnimation"; // Rename to your file name for custom animation
-// Splash Screen
-
const splashScreen = {
enabled: true, // set false to disable splash screen
animation: splashAnimation,
@@ -20,129 +18,57 @@ const illustration = {
};
const greeting = {
- username: "Saad Pasta",
- title: "Hi all, I'm Saad",
- subTitle: emoji(
- "A passionate Full Stack Software Developer π having an experience of building Web and Mobile applications with JavaScript / Reactjs / Nodejs / React Native and some other cool libraries and frameworks."
- ),
- resumeLink:
- "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing", // Set to empty to hide the button
- displayGreeting: true // Set false to hide this section, defaults to true
+ title: "Hi, I'm Princy Vithani.",
+ subtitle: "Web Developer | Coder | Learner",
+ displayGreeting: true
};
// Social Media Links
const socialMediaLinks = {
- github: "https://github.com/saadpasta",
- linkedin: "https://www.linkedin.com/in/saadpasta/",
- gmail: "saadpasta70@gmail.com",
- gitlab: "https://gitlab.com/saadpasta",
- facebook: "https://www.facebook.com/saad.pasta7",
- medium: "https://medium.com/@saadpasta",
- stackoverflow: "https://stackoverflow.com/users/10422806/saad-pasta",
- // Instagram, Twitter and Kaggle are also supported in the links!
- // To customize icons and social links, tweak src/components/SocialMedia
+ github: "https://github.com/pr862",
+ linkedin: "https://www.linkedin.com/in/princyvithani/",
+ gmail: "princyvithani09@gmail.com",
display: true // Set true to display this section, defaults to false
};
// Skills Section
const skillsSection = {
- title: "What I do",
- subTitle: "CRAZY FULL STACK DEVELOPER WHO WANTS TO EXPLORE EVERY TECH STACK",
+ title: "Crafting the Web",
+ subTitle: "PASSIONATE FRONTEND DEVELOPER EXPLORING THE DIGITAL UNIVERSE",
skills: [
emoji(
- "β‘ Develop highly interactive Front end / User Interfaces for your web and mobile applications"
+ "β‘ Building responsive and accessible UIs with HTML, CSS & JavaScript"
),
- emoji("β‘ Progressive Web Applications ( PWA ) in normal and SPA Stacks"),
emoji(
- "β‘ Integration of third party services such as Firebase/ AWS / Digital Ocean"
+ "β‘ Creating seamless experiences using React.js and modern frameworks"
+ ),
+ emoji(
+ "β‘ Connecting APIs & tools like Firebase, REST, and Git to bring data to life"
)
],
-
- /* Make Sure to include correct Font Awesome Classname to view your icon
-https://fontawesome.com/icons?d=gallery */
-
softwareSkills: [
- {
- skillName: "html-5",
- fontAwesomeClassname: "fab fa-html5"
- },
- {
- skillName: "css3",
- fontAwesomeClassname: "fab fa-css3-alt"
- },
- {
- skillName: "sass",
- fontAwesomeClassname: "fab fa-sass"
- },
- {
- skillName: "JavaScript",
- fontAwesomeClassname: "fab fa-js"
- },
- {
- skillName: "reactjs",
- fontAwesomeClassname: "fab fa-react"
- },
- {
- skillName: "nodejs",
- fontAwesomeClassname: "fab fa-node"
- },
- {
- skillName: "swift",
- fontAwesomeClassname: "fab fa-swift"
- },
- {
- skillName: "npm",
- fontAwesomeClassname: "fab fa-npm"
- },
- {
- skillName: "sql-database",
- fontAwesomeClassname: "fas fa-database"
- },
- {
- skillName: "aws",
- fontAwesomeClassname: "fab fa-aws"
- },
- {
- skillName: "firebase",
- fontAwesomeClassname: "fas fa-fire"
- },
- {
- skillName: "python",
- fontAwesomeClassname: "fab fa-python"
- },
- {
- skillName: "docker",
- fontAwesomeClassname: "fab fa-docker"
- }
+ {skillName: "HTML5", fontAwesomeClassname: "fab fa-html5"},
+ {skillName: "CSS3", fontAwesomeClassname: "fab fa-css3-alt"},
+ {skillName: "JavaScript", fontAwesomeClassname: "fab fa-js"},
+ {skillName: "React", fontAwesomeClassname: "fab fa-react"},
+ {skillName: "Git", fontAwesomeClassname: "fab fa-git"},
+ {skillName: "Firebase", fontAwesomeClassname: "fas fa-fire"}
],
- display: true // Set false to hide this section, defaults to true
+ display: true
};
// Education Section
const educationInfo = {
- display: true, // Set false to hide this section, defaults to true
+ display: true,
schools: [
{
- schoolName: "Harvard University",
- logo: require("./assets/images/harvardLogo.png"),
- subHeader: "Master of Science in Computer Science",
- duration: "September 2017 - April 2019",
- desc: "Participated in the research of XXX and published 3 papers.",
- descBullets: [
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
- ]
- },
- {
- schoolName: "Stanford University",
- logo: require("./assets/images/stanfordLogo.png"),
- subHeader: "Bachelor of Science in Computer Science",
- duration: "September 2013 - April 2017",
- desc: "Ranked top 10% in the program. Took courses about Software Engineering, Web Security, Operating Systems, ...",
- descBullets: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit"]
+ schoolName: "SHREE SWAMI ATMANAND SARASWATI INSTITUTE OF TECHNOLOGY",
+ subHeader: "Bachelor in Computer Engineering",
+ duration: "2022 - Present",
+ desc: "Focusing on Web Development and Software Fundamentals"
}
]
};
@@ -158,7 +84,7 @@ const techStack = {
},
{
Stack: "Backend",
- progressPercentage: "70%"
+ progressPercentage: "65%"
},
{
Stack: "Programming",
@@ -174,29 +100,23 @@ const workExperiences = {
display: true, //Set it to true to show workExperiences Section
experience: [
{
- role: "Software Engineer",
- company: "Facebook",
- companylogo: require("./assets/images/facebookLogo.png"),
- date: "June 2018 β Present",
- desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
- descBullets: [
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+ title: "Work Experience",
+ subtitle:
+ "I have completed an internship at Canopas where I worked on real-world projects and improved my development skills.",
+ experiences: [
+ {
+ role: "Frontend Developer Intern",
+ company: "Canopas",
+ companylogo: require("./assets/images/images.jpeg"),
+ date: "June 2025 β Present",
+ desc: "Working on developing and maintaining modern, responsive UI using React, SCSS, and reusable components.",
+ descBullets: [
+ "Built user interfaces with clean and maintainable code",
+ "Collaborated with the design and backend teams",
+ "Worked with Git and GitHub for version control"
+ ]
+ }
]
- },
- {
- role: "Front-End Developer",
- company: "Quora",
- companylogo: require("./assets/images/quoraLogo.png"),
- date: "May 2017 β May 2018",
- desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
- },
- {
- role: "Software Engineer Intern",
- company: "Airbnb",
- companylogo: require("./assets/images/airbnbLogo.png"),
- date: "Jan 2015 β Sep 2015",
- desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
};
@@ -206,125 +126,75 @@ To know how to get github key look at readme.md */
const openSource = {
showGithubProfile: "true", // Set true or false to show Contact profile using Github, defaults to true
- display: true // Set false to hide this section, defaults to true
+ display: false // Set false to hide this section, defaults to true
};
// Some big projects you have worked on
-
const bigProjects = {
- title: "Big Projects",
- subtitle: "SOME STARTUPS AND COMPANIES THAT I HELPED TO CREATE THEIR TECH",
+ title: "Mini Projects",
+ subtitle: "Projects I'm currently building and customizing",
projects: [
{
- image: require("./assets/images/saayaHealthLogo.webp"),
- projectName: "Saayahealth",
- projectDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+ projectName: "DevFolio",
+ projectDesc:
+ "A personalized portfolio site built using React and DeveloperFolio, showcasing my internship and frontend projects.",
footerLink: [
{
- name: "Visit Website",
- url: "http://saayahealth.com/"
- }
- // you can add extra buttons here.
- ]
- },
- {
- image: require("./assets/images/nextuLogo.webp"),
- projectName: "Nextu",
- projectDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
- footerLink: [
- {
- name: "Visit Website",
- url: "http://nextu.se/"
+ name: "GitHub Repo",
+ url: "https://github.com/pr862/developerFolio"
}
]
}
],
- display: true // Set false to hide this section, defaults to true
+ display: true
};
// Achievement Section
// Include certificates, talks etc
const achievementSection = {
- title: emoji("Achievements And Certifications π "),
- subtitle:
- "Achievements, Certifications, Award Letters and Some Cool Stuff that I have done !",
+ title: emoji("Achievements & Certifications π"),
+ subtitle: "My internship certification and learning milestones.",
achievementsCards: [
{
- title: "Google Code-In Finalist",
- subtitle:
- "First Pakistani to be selected as Google Code-in Finalist from 4000 students from 77 different countries.",
- image: require("./assets/images/codeInLogo.webp"),
- imageAlt: "Google Code-In Logo",
- footerLink: [
- {
- name: "Certification",
- url: "https://drive.google.com/file/d/0B7kazrtMwm5dYkVvNjdNWjNybWJrbndFSHpNY2NFV1p4YmU0/view?usp=sharing"
- },
- {
- name: "Award Letter",
- url: "https://drive.google.com/file/d/0B7kazrtMwm5dekxBTW5hQkg2WXUyR3QzQmR0VERiLXlGRVdF/view?usp=sharing"
- },
- {
- name: "Google Code-in Blog",
- url: "https://opensource.googleblog.com/2019/01/google-code-in-2018-winners.html"
- }
- ]
- },
- {
- title: "Google Assistant Action",
+ title: "Internship at Canopas",
subtitle:
- "Developed a Google Assistant Action JavaScript Guru that is available on 2 Billion devices world wide.",
- image: require("./assets/images/googleAssistantLogo.webp"),
- imageAlt: "Google Assistant Action Logo",
+ "Completed a frontend development internship at Canopas, working on real-world React projects and UI design.",
+ image: require("./assets/images/images.jpeg"), // Replace with your logo image path
+ imageAlt: "Canopas Logo",
footerLink: [
{
- name: "View Google Assistant Action",
- url: "https://assistant.google.com/services/a/uid/000000100ee688ee?hl=en"
- }
- ]
- },
-
- {
- title: "PWA Web App Developer",
- subtitle: "Completed Certifcation from SMIT for PWA Web App Development",
- image: require("./assets/images/pwaLogo.webp"),
- imageAlt: "PWA Logo",
- footerLink: [
- {name: "Certification", url: ""},
- {
- name: "Final Project",
- url: "https://pakistan-olx-1.firebaseapp.com/"
+ name: "View Certificate",
+ url: "https://drive.google.com/file/d/174QX13ffIVCAMwFx9_xrScAwd8SC4mEd/view?usp=sharing" // Replace with your actual certificate URL (e.g., Google Drive link)
}
]
}
],
- display: true // Set false to hide this section, defaults to true
+ display: true
};
// Blogs Section
-
const blogSection = {
- title: "Blogs",
+ title: "Tech Stack Highlights",
subtitle:
- "With Love for Developing cool stuff, I love to write and teach others what I have learnt.",
- displayMediumBlogs: "true", // Set true to display fetched medium blogs instead of hardcoded ones
+ "These are the essential tools I use to design, code, and manage modern frontend projects.",
+ displayMediumBlogs: "false",
blogs: [
{
- url: "https://blog.usejournal.com/create-a-google-assistant-action-and-win-a-google-t-shirt-and-cloud-credits-4a8d86d76eae",
- title: "Win a Google Assistant Tshirt and $200 in Google Cloud Credits",
+ url: "https://create-react-app.dev/docs/adding-a-sass-stylesheet/",
+ title: "React & SCSS",
description:
- "Do you want to win $200 and Google Assistant Tshirt by creating a Google Assistant Action in less then 30 min?"
+ "Official guide on how to integrate SCSS (Sass) with React using Create React App for modular and maintainable styling."
},
{
- url: "https://medium.com/@saadpasta/why-react-is-the-best-5a97563f423e",
- title: "Why REACT is The Best?",
+ url: "https://www.freecodecamp.org/learn",
+ title: "JavaScript & Git",
description:
- "React is a JavaScript library for building User Interface. It is maintained by Facebook and a community of individual developers and companies."
+ "FreeCodeCampβs hands-on curriculum to learn JavaScript fundamentals and Git version control for real-world web development."
}
],
- display: true // Set false to hide this section, defaults to true
+ display: true
};
// Talks Sections
@@ -343,20 +213,21 @@ const talkSection = {
event_url: "https://www.facebook.com/events/2339906106275053/"
}
],
- display: true // Set false to hide this section, defaults to true
+ display: false // Set false to hide this section, defaults to true
};
// Podcast Section
const podcastSection = {
title: emoji("Podcast ποΈ"),
- subtitle: "I LOVE TO TALK ABOUT MYSELF AND TECHNOLOGY",
+ subtitle:
+ "I love sharing my developer journey, learnings, and insights about frontend development.",
- // Please Provide with Your Podcast embeded Link
+ // Replace the link below with your actual podcast URL or embed link
podcast: [
- "https://anchor.fm/codevcast/embed/episodes/DevStory---Saad-Pasta-from-Karachi--Pakistan-e9givv/a-a15itvo"
+ "https://anchor.fm/examplepodcast/embed/episodes/Internship-Experience-at-Canopas-e1a2b3c"
],
- display: true // Set false to hide this section, defaults to true
+ display: false // Set to false if you want to hide this section
};
// Resume Section
@@ -371,9 +242,9 @@ const resumeSection = {
const contactInfo = {
title: emoji("Contact Me βοΈ"),
subtitle:
- "Discuss a project or just want to say hi? My Inbox is open for all.",
- number: "+92-0000000000",
- email_address: "saadpasta70@gmail.com"
+ "Discuss a project or just want to say hi? My inbox is open β feel free to reach out!",
+ number: "+91-XXXXXXXXXX", // Replace with your actual number if you want it public
+ email_address: "princyvithani09@gmail.com"
};
// Twitter Section
Proficiency
- {techStack.experience.map((exp, i) => { - const progressStyle = { - width: exp.progressPercentage - }; - return ( -
-
+
- );
- }
- return null;
+
+
+ );
}
diff --git a/src/containers/workExperience/WorkExperience.js b/src/containers/workExperience/WorkExperience.js
index 9bf360afca..f3e5963f33 100644
--- a/src/containers/workExperience/WorkExperience.js
+++ b/src/containers/workExperience/WorkExperience.js
@@ -2,8 +2,12 @@ import React, {useContext} from "react";
import "./WorkExperience.scss";
import ExperienceCard from "../../components/experienceCard/ExperienceCard";
import {workExperiences} from "../../portfolio";
+<<<<<<< HEAD
+import "./WorkExperience.scss"; // Make sure this SCSS file exists
+=======
import {Fade} from "react-reveal";
import StyleContext from "../../contexts/StyleContext";
+>>>>>>> 88e96ff (init code)
export default function WorkExperience() {
const {isDark} = useContext(StyleContext);
@@ -18,17 +22,17 @@ export default function WorkExperience() {
{workExperiences.experience.map((card, i) => {
return (
{exp.Stack}
-
-
-
+ if (!techStack.viewSkillBars) return null;
+
+ return (
+
+
-
+
+ );
+ })}
+ Proficiency
+ + {/* β Add a list of descriptions above the progress bars */} +-
+
- β‘ Expertise in building responsive UI with HTML, CSS, JS +
- β‘ Comfortable with React and component architecture +
- β‘ Basic understanding of backend and API integration +
+
+ {exp.Stack}
+
+
- );
- })}
-
- {illustration.animated ? (
- ![Skills]({require("../../assets/images/skill.svg")})
- )}
-
+
- )}
-
+ {illustration.animated ? (
+
-
+ )}