Experiences
+ {/* Loop through all experiences */}
{workExperiences.experience.map((card, i) => {
return (
);
}
- return null;
+
+ return null; // If workExperiences.display is false, return null (no content rendered)
}
diff --git a/src/portfolio.js b/src/portfolio.js
index f37660fdf0..a495183357 100644
--- a/src/portfolio.js
+++ b/src/portfolio.js
@@ -4,12 +4,12 @@
import emoji from "react-easy-emoji";
import splashAnimation from "./assets/lottie/splashAnimation"; // Rename to your file name for custom animation
-
-// Splash Screen
+import canopasLogo from "./assets/images/images.jpeg";
const splashScreen = {
enabled: true, // set false to disable splash screen
animation: splashAnimation,
+ username: "princyvithani", // Your GitHub username
duration: 2000 // Set animation duration as per your animation
};
@@ -20,129 +20,54 @@ 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",
+ subtitle:
+ "I'm a passionate Frontend Web Developer π with experience building responsive and interactive web applications using JavaScript, React.js, and modern CSS. I love creating smooth, user-friendly interfaces that bring designs to life.",
+ 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("Building responsive and accessible UIs with HTML, CSS & JavaScript"),
+ emoji("Creating seamless experiences using React.js and modern frameworks"),
emoji(
- "β‘ Develop highly interactive Front end / User Interfaces for your web and mobile applications"
- ),
- emoji("β‘ Progressive Web Applications ( PWA ) in normal and SPA Stacks"),
- emoji(
- "β‘ Integration of third party services such as Firebase/ AWS / Digital Ocean"
+ "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 +83,7 @@ const techStack = {
},
{
Stack: "Backend",
- progressPercentage: "70%"
+ progressPercentage: "50%"
},
{
Stack: "Programming",
@@ -174,29 +99,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: canopasLogo,
+ 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 +125,94 @@ 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: "Creative Todo App",
+ projectDesc:
+ "A feature-rich React Todo app with emoji picker, category filters, motivational messages, smart suggestions, and animated UI β all built with React.",
footerLink: [
{
- name: "Visit Website",
- url: "http://saayahealth.com/"
+ name: "GitHub Repo",
+ url: "https://github.com/pr862/to-do_list"
+ },
+ {
+ name: "Live Demo",
+ url: "https://pr862.github.io/to-do_list/"
}
- // you can add extra buttons here.
]
},
{
- image: require("./assets/images/nextuLogo.webp"),
- projectName: "Nextu",
- 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://nextu.se/"
+ name: "GitHub Repo",
+ url: "https://github.com/pr862/developerFolio"
+ },
+ {
+ name: "Live Demo",
+ url: "https://pr862.github.io/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: canopasLogo,
+ 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 +231,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 +260,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
-
-
![Skills]({require("../../assets/images/skill.svg")})
- )}
- 
