├── README.md ├── source-folio-backend ├── .gitignore ├── ExpressError.js ├── JoiSchemas.js ├── package-lock.json ├── package.json ├── src │ ├── Model │ │ └── schema.js │ ├── Router │ │ ├── api.js │ │ ├── edit.js │ │ └── portfolio.js │ ├── Utils │ │ └── utilityMethod.js │ └── server.js └── vercel.json └── source-folio ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── 1.jpg ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── Components │ ├── Aboutme.js │ ├── Achivements.js │ ├── Contact.js │ ├── CssFiles │ │ ├── aboutme.css │ │ ├── achivements.css │ │ ├── contact.css │ │ ├── dashboard.css │ │ ├── education.css │ │ ├── experience.css │ │ ├── footer.css │ │ ├── home.css │ │ ├── information.css │ │ ├── loading.css │ │ ├── navbar.css │ │ ├── portfolio.css │ │ ├── project.css │ │ └── skills.css │ ├── DashBoard.js │ ├── Dashboard-Components │ │ ├── AboutUs.js │ │ ├── Banner.js │ │ ├── DashNavbar.js │ │ ├── DropDownMenu.js │ │ ├── SearchBox.js │ │ ├── banner.css │ │ └── dashnavbar.css │ ├── Data.js │ ├── Education.js │ ├── ErrorPage.js │ ├── Experience.js │ ├── Footer.js │ ├── Form-Components │ │ ├── AboutMe.js │ │ ├── AchievementsForm.js │ │ ├── BioForm.js │ │ ├── ContactForm.js │ │ ├── CustomSelect.js │ │ ├── Duration.js │ │ ├── EditForm.js │ │ ├── EducationForm.js │ │ ├── ExperienceForm.js │ │ ├── Form.js │ │ ├── InputBox.js │ │ ├── MainDesignations.js │ │ ├── ProfilePictureEditForm.js │ │ ├── ProgrammingSkills.js │ │ ├── ProjectDescription.js │ │ ├── ProjectsForm.js │ │ ├── SkillsForm.js │ │ ├── TextArea.js │ │ ├── ToolsAndFrameworks.js │ │ └── WorkDescription.js │ ├── Home.js │ ├── Info.js │ ├── Information.js │ ├── Loading.js │ ├── Login.js │ ├── NavBar.js │ ├── Portfolio.js │ ├── Preview │ │ ├── NavBar.js │ │ └── Preview.js │ ├── ProgrammingSkills.js │ ├── Projects.js │ ├── Skills.js │ ├── Social.js │ └── ToolsAndFramework.js ├── asset │ ├── font │ │ ├── CentraNo2-Bold.ttf │ │ ├── CentraNo2-Book.ttf │ │ └── CentraNo2-Medium.ttf │ └── image │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── Moon.svg │ │ ├── Sun.svg │ │ ├── about.jpg │ │ ├── back.jpg │ │ ├── banner-bg.png │ │ ├── files.svg │ │ ├── hand.svg │ │ ├── profile.jpg │ │ └── send.svg ├── hooks │ └── useUser.js ├── index.css ├── index.js ├── logo.svg ├── redux │ ├── features │ │ └── portfolioSlice.js │ └── store.js ├── reportWebVitals.js └── setupTests.js ├── tailwind.config.js └── tailwind.js /README.md: -------------------------------------------------------------------------------- 1 | # SourceFolio 2 | Welcome to the README page for [Sourcefolio](https://source-folio.vercel.app/)! 3 | 4 | Sourcefolio is a web application that allows users to create and showcase their portfolio. It is designed to help developers to share their work with others, and potentially attract job opportunities. 5 | 6 | **Getting started:** 7 | To use Sourcefolio, simply visit the website and create an account. Once you're logged in, you can click on "Create SourceFolio" button to get to a form. On filling this form correctly with most logical and appropriate data, you can make your own sourcefolio. 8 | 9 | **Features:** 10 | - Portfolio display: Your projects will be displayed in a visually appealing portfolio format, making it easy for others to view and navigate through them. 11 | - Sharing: You can share your portfolio with others by simply sharing the link to your portfolio page. 12 | - Attractive UI: It has a simple and eye-catching UI. 13 | 14 | **Languages and Frameworks:** 15 | Sourcefolio is built using a variety of languages and frameworks, including: 16 | - React.js for the front-end 17 | - Node.js and Express.js for the back-end 18 | - Mongoose and MongoDB Atlas for the database 19 | - CSS for styling 20 | 21 | **Contributors:** 22 | - [Devanshi Gupta](https://github.com/Devanshi449) 23 | - [Sumit Verma](https://github.com/sumit-6) 24 | - [Deepak Dass](https://github.com/iamdeepakdass) 25 | - [Rahul Verma](https://github.com/anonymouse003) 26 | 27 | **Support:** 28 | If you encounter any issues or have any questions about Sourcefolio, please email sourcefolio2023@gmail.com 29 | 30 | **Follow:** 31 | You can follow SourceFolio on [instagram](https://www.instagram.com/sourcefolio2023/). 32 | 33 | Thank you for using [Sourcefolio](https://source-folio.vercel.app/)! 34 | 35 | # Demo 36 | https://github.com/sumit-6/SourceFolio/assets/75926522/b6b609ec-2cbc-4e39-997e-859e10dda867 37 | -------------------------------------------------------------------------------- /source-folio-backend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .env 25 | credentials.json -------------------------------------------------------------------------------- /source-folio-backend/ExpressError.js: -------------------------------------------------------------------------------- 1 | class ExpressError extends Error { 2 | constructor(message, statusCode) { 3 | super(); 4 | this.message = message; 5 | this.statusCode = statusCode; 6 | } 7 | } 8 | 9 | export default ExpressError; -------------------------------------------------------------------------------- /source-folio-backend/JoiSchemas.js: -------------------------------------------------------------------------------- 1 | import BaseJoi from 'joi'; 2 | import sanitizeHTML from 'sanitize-html'; 3 | 4 | const extension = (joi) => ({ 5 | type: 'string', 6 | base: joi.string(), 7 | messages: { 8 | 'string.escapeHTML': '{{#label}} must not include HTML!' 9 | }, 10 | rules: { 11 | escapeHTML: { 12 | validate(value, helpers) { 13 | const clean = sanitizeHTML(value, { 14 | allowedTags: [], 15 | allowedAttributes: {}, 16 | }); 17 | if(clean !== value) return helpers.error('string.escapeHTML', {value}) 18 | return clean; 19 | } 20 | } 21 | } 22 | }); 23 | 24 | const Joi = BaseJoi.extend(extension); 25 | 26 | const educationSchema = Joi.object({ 27 | institutionName: Joi.string().allow(''), 28 | place: Joi.string().allow(''), 29 | year: Joi.number().default(0).allow(), 30 | aggregate: Joi.number().default(0).allow(), 31 | coursePursuied: Joi.string().allow('') 32 | }); 33 | 34 | const durationSchema = Joi.object({ 35 | start: Joi.string().allow(''), 36 | end: Joi.string().allow('') 37 | }); 38 | 39 | const experienceSchema = Joi.object({ 40 | role: Joi.string().allow(''), 41 | duration: durationSchema, 42 | company: Joi.string().allow(''), 43 | workDescription: Joi.array().items(Joi.string().allow('')), 44 | certificate: Joi.string().allow('') 45 | }); 46 | 47 | const projectSchema = Joi.object({ 48 | projectName: Joi.string().allow(''), 49 | description: Joi.array().items(Joi.string().allow('')), 50 | gitHubLink: Joi.string().allow(''), 51 | projectLink: Joi.string().allow('') 52 | }); 53 | 54 | const skillProElementSchema = Joi.object({ 55 | skillName: Joi.string().allow(''), 56 | skillLevel: Joi.string().valid('Expert', 'Intermediate', 'Beginner', '') 57 | }); 58 | 59 | const skillToolElementSchema = Joi.object({ 60 | toolName: Joi.string().allow(''), 61 | toolLevel: Joi.string().valid('Expert', 'Intermediate', 'Beginner', '') 62 | }); 63 | 64 | const skillsSchema = Joi.object({ 65 | programmingSkills: Joi.array().items(skillProElementSchema), 66 | toolsAndFrameworks: Joi.array().items(skillToolElementSchema) 67 | }); 68 | 69 | const imageSchema = Joi.object({ 70 | url: Joi.string().allow(''), 71 | filename: Joi.string().allow('') 72 | }); 73 | 74 | const portfolioSchema = Joi.object({ 75 | user_id: Joi.string().required(), 76 | name: Joi.string().allow(''), 77 | bio: Joi.string().allow(''), 78 | githubProfile: Joi.string().allow(''), 79 | numberOfProjects: Joi.string().valid('Beginner', '1-2 Projects', '3-5 Projects', '5-10 Projects', '10+ Projects', ''), 80 | yearsOfExperience: Joi.string().valid('Fresher', '6+ Months', '1-2 Years', '3-5 Years', '5-10 Years', '10+ Years', ''), 81 | mainDesignations: Joi.array().items(Joi.string().allow('')), 82 | description: Joi.string().allow(''), 83 | profilePicture: imageSchema, 84 | myEducation: Joi.array().items(educationSchema).default([]), 85 | myExperience: Joi.array().items(experienceSchema).default([]), 86 | myProjects: Joi.array().items(projectSchema).default([]), 87 | mySkills: skillsSchema, 88 | myAchievements: Joi.array().items(Joi.string().allow('')).default([]), 89 | linkedIn: Joi.string().allow(''), 90 | email: Joi.string().allow(''), 91 | instagram: Joi.string().allow(''), 92 | telephone: Joi.number().default(0) 93 | }); 94 | 95 | export default portfolioSchema; -------------------------------------------------------------------------------- /source-folio-backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "source-folio-backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "start": "node src/server.js", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "cloudinary": "^1.35.0", 16 | "connect-flash": "^0.1.1", 17 | "connect-mongodb-session": "^3.1.1", 18 | "cors": "^2.8.5", 19 | "dotenv": "^16.0.3", 20 | "ejs": "^3.1.9", 21 | "express": "^4.18.2", 22 | "express-mongo-sanitize": "^2.2.0", 23 | "express-session": "^1.17.3", 24 | "firebase-admin": "^11.6.0", 25 | "helmet": "^6.1.5", 26 | "joi": "^17.9.1", 27 | "mongoose": "^7.0.3", 28 | "multer": "^1.4.5-lts.1", 29 | "multer-storage-cloudinary": "^4.0.0", 30 | "nodemon": "^2.0.22", 31 | "sanitize-html": "^2.10.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /source-folio-backend/src/Model/schema.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const Schema = mongoose.Schema; 4 | const EducationSchema = new Schema({ 5 | institutionName: String, 6 | place: String, 7 | year: Number, 8 | aggregate: Number, 9 | coursePursuied: String, 10 | }); 11 | 12 | const DurationSchema = new Schema({ 13 | start: { type: String }, 14 | end: { type: String }, 15 | }); 16 | 17 | const ExperienceSchema = new Schema({ 18 | role: String, 19 | duration: DurationSchema, 20 | company: String, 21 | workDescription: [String], 22 | certificate: String, 23 | }); 24 | 25 | const ProjectSchema = new Schema({ 26 | projectName: String, 27 | description: [String], 28 | gitHubLink: String, 29 | projectLink: String, 30 | }); 31 | 32 | const skillProElementSchema = new Schema({ 33 | skillName: String, 34 | skillLevel: String, 35 | }); 36 | 37 | const skillToolElementSchema = new Schema({ 38 | toolName: String, 39 | toolLevel: String, 40 | }); 41 | 42 | const SkillsSchema = new Schema({ 43 | programmingSkills: [skillProElementSchema], 44 | toolsAndFrameworks: [skillToolElementSchema], 45 | }); 46 | 47 | const ImageSchema = new Schema({ 48 | url: String, 49 | filename: String, 50 | }); 51 | 52 | ImageSchema.virtual("thumbnail").get(function () { 53 | return this.url.replace("/upload", "/upload/w_200"); 54 | }); 55 | 56 | const PortfolioSchema = new Schema({ 57 | user_id: String, 58 | name: String, 59 | bio: String, 60 | githubProfile: String, 61 | numberOfProjects: String, 62 | yearsOfExperience: String, 63 | mainDesignations: [String], 64 | description: String, 65 | profilePicture: ImageSchema, 66 | myEducation: [EducationSchema], 67 | myExperience: [ExperienceSchema], 68 | myProjects: [ProjectSchema], 69 | mySkills: SkillsSchema, 70 | myAchievements: [String], 71 | linkedIn: String, 72 | email: String, 73 | instagram: String, 74 | telephone: Number, 75 | }, {timestamps: true}); 76 | 77 | const Portfolio = mongoose.model("Portfolio", PortfolioSchema); 78 | export default Portfolio; 79 | -------------------------------------------------------------------------------- /source-folio-backend/src/Router/api.js: -------------------------------------------------------------------------------- 1 | import Portfolio from "../Model/schema.js"; 2 | import express from "express"; 3 | const apiRouter = express.Router(); 4 | 5 | apiRouter.route('/getID/:id').get(async (req, res) => { 6 | if(req.user && (req.user.user_id === req.params.id)) { 7 | const id = req.params.id; 8 | const data = await Portfolio.findOne({"user_id": id}); 9 | if(data) res.status(200).send(data._id); 10 | else res.status(400).send("Failure"); 11 | } else { 12 | res.status(400).send("Failure"); 13 | } 14 | }); 15 | 16 | apiRouter.route('/portfolio/:id').get(async(req, res) => { 17 | const id = req.params.id; 18 | try { 19 | const data = await Portfolio.findById(id); 20 | res.json(data); 21 | } 22 | catch(e) { 23 | res.status(404).send("error"); 24 | } 25 | }); 26 | 27 | apiRouter.route('/search/name/:q').get(async(req, res) => { 28 | const query = req.params.q; 29 | try { 30 | const portfolios = await Portfolio.find( 31 | {name: { $regex: new RegExp(query, 'i') }} 32 | ); 33 | res.send(portfolios); 34 | } catch(e) { 35 | res.status(404).send(e); 36 | } 37 | }); 38 | 39 | apiRouter.route('/search/skills/:q').get(async(req, res) => { 40 | const query = req.params.q; 41 | try { 42 | const portfolios = await Portfolio.find( 43 | { 44 | $or: [ 45 | { 46 | 'mySkills.programmingSkills': { 47 | $elemMatch: { skillName: { $regex: new RegExp(query, 'i') } } 48 | } 49 | }, 50 | { 51 | 'mySkills.toolsAndFrameworks': { 52 | $elemMatch: { toolName: { $regex: new RegExp(query, 'i') } } 53 | } 54 | } 55 | ] 56 | } 57 | ); 58 | res.send(portfolios); 59 | } catch(e) { 60 | res.status(404).send(e); 61 | } 62 | }); 63 | 64 | apiRouter.route('/search/experience/:q').get(async(req, res) => { 65 | const query = req.params.q; 66 | try { 67 | const portfolios = await Portfolio.find( 68 | { 69 | $or: [ 70 | { 71 | 'myExperience': { 72 | $elemMatch: { 73 | $or: [ 74 | { 'company': { $regex: new RegExp(query, 'i') } }, 75 | { 'role': { $regex: new RegExp(query, 'i') } }, 76 | ], 77 | }, 78 | }, 79 | }, 80 | { 'mainDesignations': { $regex: new RegExp(query, 'i') } }, 81 | { 'yearsOfExperience': { $regex: new RegExp(query, 'i') } } 82 | ], 83 | 84 | } 85 | ); 86 | res.send(portfolios); 87 | } catch(e) { 88 | res.status(404).send(e); 89 | } 90 | }); 91 | 92 | apiRouter.route('/search/education/:q').get(async(req, res) => { 93 | const query = req.params.q; 94 | try { 95 | const portfolios = await Portfolio.find( 96 | { 97 | $or: [ 98 | { 99 | 'myEducation.institutionName': { $regex: new RegExp(query, 'i') } 100 | }, 101 | { 102 | 'myEducation.coursePursuied': { $regex: new RegExp(query, 'i') } 103 | } 104 | ] 105 | 106 | } 107 | ); 108 | res.send(portfolios); 109 | } catch(e) { 110 | res.status(404).send(e); 111 | } 112 | }); 113 | 114 | 115 | 116 | export default apiRouter; -------------------------------------------------------------------------------- /source-folio-backend/src/Router/edit.js: -------------------------------------------------------------------------------- 1 | import Portfolio from "../Model/schema.js"; 2 | import express from "express"; 3 | import multer from 'multer'; 4 | import cl from 'cloudinary'; 5 | import { CloudinaryStorage } from 'multer-storage-cloudinary'; 6 | import convertJSON from "../Utils/utilityMethod.js"; 7 | import dotenv from "dotenv" 8 | import portfolioSchema from "../../JoiSchemas.js"; 9 | import ExpressError from "../../ExpressError.js" 10 | if(process.env.NODE_ENV !== 'production') { 11 | dotenv.config(); 12 | } 13 | const editRouter = express.Router(); 14 | 15 | const validatePortfolio = (doc) => { 16 | const {error} = portfolioSchema.validate(doc); 17 | 18 | if(error) { 19 | const msg = error.details.map(ele => ele.message).join(',') 20 | throw new ExpressError(msg, 400); 21 | } 22 | } 23 | const cloudinary = cl.v2; 24 | cloudinary.config({ 25 | cloud_name: process.env.CLOUDINARY_CLOUD_NAME, 26 | api_key: process.env.CLOUDINARY_KEY, 27 | api_secret: process.env.CLOUDINARY_SECRET 28 | }) 29 | 30 | const storage = new CloudinaryStorage({ 31 | cloudinary, 32 | params: { 33 | folder: 'SourceFolio', 34 | allowedFormats: ['jpeg', 'jpg', 'png'] 35 | } 36 | }) 37 | 38 | const upload = multer({storage}); 39 | 40 | editRouter.route('/profilePicture/:id').post(upload.single('profilePicture'), async(req, res) => { 41 | try { 42 | const id = req.params.id; 43 | const data = await Portfolio.findById(id); 44 | if(req.user && data.user_id === req.user.user_id) { 45 | if(data.profilePicture && data.profilePicture.filename) await cloudinary.uploader.destroy(data.profilePicture.filename) 46 | const file = req.file; 47 | const obj = {profilePicture: {url: file !== undefined ? file.path : "https://res.cloudinary.com/dk26fyzkl/image/upload/v1707765680/SourceFolio/no-user-image_no8zkv.gif", 48 | filename: file !== undefined ? file.filename : "no-user-image_no8zkvcs" }}; 49 | await Portfolio.findByIdAndUpdate(id, obj); 50 | res.status(200).send(`Success`); 51 | } 52 | else { 53 | await cloudinary.uploader.destroy(req.file.filename); 54 | res.status(400).send("Failure"); 55 | } 56 | } catch(err) { 57 | console.log(err); 58 | } 59 | }) 60 | 61 | editRouter.route('/portfolio/:id').post(async(req, res) => { 62 | const id = req.params.id; 63 | const updatedData = req.body; 64 | const data = await Portfolio.findById(id); 65 | 66 | if(req.user && data.user_id === req.user.user_id) { 67 | const resultantObj = convertJSON(updatedData); 68 | resultantObj.user_id = req.user.user_id; 69 | validatePortfolio(resultantObj); 70 | await Portfolio.findByIdAndUpdate(id, resultantObj, {new: true}); 71 | res.status(200).send(`Success`); 72 | } else { 73 | res.status(400).send("Failure"); 74 | } 75 | }) 76 | 77 | export default editRouter; 78 | 79 | -------------------------------------------------------------------------------- /source-folio-backend/src/Router/portfolio.js: -------------------------------------------------------------------------------- 1 | import Portfolio from "../Model/schema.js"; 2 | import multer from 'multer'; 3 | import express from "express"; 4 | import convertJSON from "../Utils/utilityMethod.js"; 5 | import cl from 'cloudinary'; 6 | import { CloudinaryStorage } from 'multer-storage-cloudinary'; 7 | import portfolioSchema from "../../JoiSchemas.js"; 8 | import dotenv from "dotenv"; 9 | import ExpressError from "../../ExpressError.js" 10 | if(process.env.NODE_ENV !== 'production') { 11 | dotenv.config(); 12 | } 13 | const validatePortfolio = (doc) => { 14 | const {error} = portfolioSchema.validate(doc); 15 | 16 | if(error) { 17 | const msg = error.details.map(ele => ele.message).join(',') 18 | throw new ExpressError(msg, 400); 19 | } 20 | } 21 | const cloudinary = cl.v2; 22 | cloudinary.config({ 23 | cloud_name: process.env.CLOUDINARY_CLOUD_NAME, 24 | api_key: process.env.CLOUDINARY_KEY, 25 | api_secret: process.env.CLOUDINARY_SECRET 26 | }) 27 | 28 | const portfolioRouter = express.Router(); 29 | 30 | const storage = new CloudinaryStorage({ 31 | cloudinary, 32 | params: { 33 | folder: 'SourceFolio', 34 | allowedFormats: ['jpeg', 'jpg', 'png'] 35 | } 36 | }) 37 | 38 | const upload = multer({storage}); 39 | 40 | 41 | portfolioRouter.route('/delete/:id').post(async(req, res) => { 42 | const id = req.params.id; 43 | const data = await Portfolio.findById(id); 44 | 45 | if(req.user && (data.user_id === req.user.user_id)) { 46 | if(data.profilePicture && data.profilePicture.filename) await cloudinary.uploader.destroy(data.profilePicture.filename) 47 | await Portfolio.findByIdAndDelete(id); 48 | res.status(200).send("Success") 49 | } else { 50 | res.status(400).send("Failure"); 51 | } 52 | }); 53 | 54 | portfolioRouter.route('/insert').post(upload.single('profilePicture'), async (req, res) => { 55 | if(req.user) { 56 | const obj = req.body; 57 | obj.profilePicture = req.file; 58 | 59 | const resultantObj = convertJSON(obj); 60 | resultantObj.user_id = req.user.user_id; 61 | 62 | validatePortfolio(resultantObj); 63 | const mongooseObj = new Portfolio(resultantObj); 64 | await mongooseObj.save(); 65 | res.status(200).send("Success"); 66 | } else { 67 | await cloudinary.uploader.destroy(req.file.filename); 68 | res.status(400).send("Failure"); 69 | } 70 | }); 71 | 72 | export default portfolioRouter; -------------------------------------------------------------------------------- /source-folio-backend/src/server.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import path from 'path'; 3 | import mongoose from 'mongoose'; 4 | import helmet from 'helmet'; 5 | import dotenv from 'dotenv'; 6 | import session from 'express-session'; 7 | import MongoDBStorePackage from 'connect-mongodb-session'; 8 | import mongoSanitize from 'express-mongo-sanitize'; 9 | import apiRouter from './Router/api.js'; 10 | import admin from 'firebase-admin'; 11 | import { fileURLToPath } from 'url'; 12 | import editRouter from './Router/edit.js'; 13 | import portfolioRouter from './Router/portfolio.js'; 14 | 15 | const credentials = {}; 16 | 17 | if(process.env.NODE_ENV !== 'production') { 18 | dotenv.config(); 19 | } 20 | 21 | credentials['type'] = process.env.TYPE; 22 | credentials['project_id'] = process.env.PROJECT_ID; 23 | credentials['private_key_id'] = process.env.PRIVATE_KEY_ID; 24 | credentials['private_key'] = process.env.PRIVATE_KEY; 25 | credentials['client_email'] = process.env.CLIENT_EMAIL; 26 | credentials['client_id'] = process.env.CLIENT_ID; 27 | credentials['auth_uri'] = process.env.AUTH_URI; 28 | credentials['token_uri'] = process.env.TOKEN_URI; 29 | credentials['auth_provider_x509_cert_url'] = process.env.AUTH_PROVIDER_X509_CERT_URL; 30 | credentials['client_x509_cert_url'] = process.env.CLIENT_X509_CERT_URL; 31 | 32 | admin.initializeApp({ 33 | credential: admin.credential.cert(credentials), 34 | }); 35 | 36 | const __filename = fileURLToPath(import.meta.url); 37 | const __dirname = path.dirname(__filename); 38 | 39 | const app = express(); 40 | 41 | app.use(helmet.crossOriginOpenerPolicy()); 42 | app.use(helmet.crossOriginResourcePolicy()); 43 | app.use(helmet.dnsPrefetchControl()); 44 | app.use(helmet.expectCt()); 45 | app.use(helmet.frameguard()); 46 | app.use(helmet.hidePoweredBy()); 47 | app.use(helmet.hsts()); 48 | app.use(helmet.ieNoOpen()); 49 | app.use(helmet.noSniff()); 50 | app.use(helmet.originAgentCluster()); 51 | app.use(helmet.permittedCrossDomainPolicies()); 52 | app.use(helmet.referrerPolicy()); 53 | app.use(helmet.xssFilter()); 54 | 55 | const scriptSrcUrls = [ 56 | "https://stackpath.bootstrapcdn.com/", 57 | "https://api.tiles.mapbox.com/", 58 | "https://api.mapbox.com/", 59 | "https://kit.fontawesome.com/", 60 | "https://cdnjs.cloudflare.com/", 61 | "https://cdn.jsdelivr.net/", 62 | ]; 63 | const styleSrcUrls = [ 64 | "https://kit-free.fontawesome.com/", 65 | "https://stackpath.bootstrapcdn.com/", 66 | "https://api.mapbox.com/", 67 | "https://api.tiles.mapbox.com/", 68 | "https://fonts.googleapis.com/", 69 | "https://use.fontawesome.com/", 70 | "https://cdn.jsdelivr.net/" 71 | ]; 72 | const connectSrcUrls = [ 73 | "https://api.mapbox.com/", 74 | "https://a.tiles.mapbox.com/", 75 | "https://b.tiles.mapbox.com/", 76 | "https://events.mapbox.com/", 77 | ]; 78 | const fontSrcUrls = []; 79 | 80 | const cloudinary_val = process.env.CLOUDINARY_CLOUD_NAME 81 | app.use( 82 | helmet.contentSecurityPolicy({ 83 | directives: { 84 | defaultSrc: [], 85 | connectSrc: ["'self'", ...connectSrcUrls], 86 | scriptSrc: ["'unsafe-inline'", "'self'", ...scriptSrcUrls], 87 | styleSrc: ["'self'", "'unsafe-inline'", ...styleSrcUrls], 88 | workerSrc: ["'self'", "blob:"], 89 | objectSrc: [], 90 | imgSrc: [ 91 | "'self'", 92 | "blob:", 93 | "data:", 94 | `https://res.cloudinary.com/${cloudinary_val}/`, 95 | "https://images.unsplash.com/", 96 | ], 97 | fontSrc: ["'self'", ...fontSrcUrls], 98 | } 99 | }) 100 | ); 101 | 102 | app.use(function(req, res, next) { 103 | res.header("Access-Control-Allow-Origin", "*"); 104 | res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, authtoken, file"); 105 | next(); 106 | }); 107 | 108 | const dbUrl = process.env.DB_URL; 109 | mongoose.connect(dbUrl); 110 | 111 | const db = mongoose.connection; 112 | db.on('error', console.error.bind(console, 'connection error:')); 113 | db.once('open', function() { 114 | console.log("connection open"); 115 | }); 116 | 117 | app.set('view engine', 'ejs'); 118 | app.set('views', path.join(__dirname, '../views')); 119 | app.use(express.urlencoded({ extended: true })); 120 | app.use(express.static(path.join(__dirname, 'public'))); 121 | app.use(express.json()); 122 | app.use(async (req, res, next) => { 123 | const { authtoken, file } = req.headers; 124 | if(file) { 125 | req.file = file; 126 | } 127 | if(authtoken) { 128 | try { 129 | req.user = await admin.auth().verifyIdToken(authtoken); 130 | } 131 | catch (e) { 132 | return res.sendStatus(400); 133 | } 134 | } 135 | req.user = req.user || {}; 136 | next(); 137 | }); 138 | 139 | app.use(mongoSanitize()); 140 | const secret = process.env.SECRET; 141 | const MongoDBStore = MongoDBStorePackage(session); 142 | const store = new MongoDBStore({ 143 | uri : dbUrl, 144 | secret: secret, 145 | touchAfter: 24 * 60 * 60 146 | }); 147 | 148 | store.on('error', function(error) { 149 | console.log("Session Store Error", error); 150 | }) 151 | app.use(session({ 152 | store, 153 | name: 'session', 154 | secret: secret, 155 | resave: false, 156 | saveUninitialized: true, 157 | cookie: { 158 | httpOnly: true, 159 | expires: Date.now() + 1000 * 60 * 60, 160 | maxAge: 1000 * 60 * 60 161 | } 162 | })); 163 | 164 | app.get("/", (req, res) => { 165 | res.send("Hello, Welcome to My backend!!"); 166 | }) 167 | 168 | app.use('/api', apiRouter); 169 | app.use('/edit', editRouter); 170 | app.use('/portfolio', portfolioRouter); 171 | 172 | const port = process.env.PORT || 8000; 173 | 174 | app.listen(port, () => { 175 | console.log(`server is listening on ${process.env.BACKEND_URL}`); 176 | }); 177 | 178 | export default app; -------------------------------------------------------------------------------- /source-folio-backend/vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "builds": [ 4 | { 5 | "src": "./src/server.js", 6 | "use": "@vercel/node" 7 | } 8 | ], 9 | "routes": [ 10 | { 11 | "src": "/(.*)", 12 | "dest": "/src/server.js" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /source-folio/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | .env 3 | 4 | # dependencies 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /source-folio/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /source-folio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "source-folio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.6", 7 | "@emotion/styled": "^11.10.6", 8 | "@mui/material": "^5.12.0", 9 | "@reduxjs/toolkit": "^2.2.5", 10 | "@testing-library/jest-dom": "^5.16.5", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "axios": "^1.3.5", 14 | "bootstrap": "^5.2.3", 15 | "cookie-parser": "^1.4.6", 16 | "copy-to-clipboard": "^3.3.3", 17 | "firebase": "^9.19.1", 18 | "react": "^18.2.0", 19 | "react-bootstrap": "^2.7.4", 20 | "react-bootstrap-icons": "^1.10.3", 21 | "react-dom": "^18.2.0", 22 | "react-helmet": "^6.1.0", 23 | "react-icons": "^4.8.0", 24 | "react-multi-carousel": "^2.8.3", 25 | "react-on-screen": "^2.1.1", 26 | "react-redux": "^9.1.2", 27 | "react-router-dom": "^6.10.0", 28 | "react-scripts": "5.0.1", 29 | "react-scroll": "^1.8.9", 30 | "react-slick": "^0.29.0", 31 | "react-switch": "^7.0.0", 32 | "redux": "^5.0.1", 33 | "redux-persist": "^6.0.0", 34 | "sanitize-html": "^2.10.0", 35 | "slick-carousel": "^1.8.1", 36 | "typewriter-effect": "^2.19.0", 37 | "web-vitals": "^2.1.4" 38 | }, 39 | "scripts": { 40 | "start": "react-scripts start", 41 | "build": "react-scripts build", 42 | "test": "react-scripts test", 43 | "eject": "react-scripts eject" 44 | }, 45 | "eslintConfig": { 46 | "extends": [ 47 | "react-app", 48 | "react-app/jest" 49 | ] 50 | }, 51 | "browserslist": { 52 | "production": [ 53 | ">0.2%", 54 | "not dead", 55 | "not op_mini all" 56 | ], 57 | "development": [ 58 | "last 1 chrome version", 59 | "last 1 firefox version", 60 | "last 1 safari version" 61 | ] 62 | }, 63 | "devDependencies": { 64 | "autoprefixer": "^9.8.8", 65 | "postcss": "^8.4.29", 66 | "postcss-cli": "^10.1.0", 67 | "tailwindcss": "^3.3.3" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /source-folio/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /source-folio/public/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/public/1.jpg -------------------------------------------------------------------------------- /source-folio/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/public/favicon.ico -------------------------------------------------------------------------------- /source-folio/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 23 | 24 | 25 | 29 | 30 | 39 | 40 | SourceFolio 41 | 45 | 49 | 50 | 51 | 52 |
53 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /source-folio/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/public/logo192.png -------------------------------------------------------------------------------- /source-folio/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/public/logo512.png -------------------------------------------------------------------------------- /source-folio/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /source-folio/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /source-folio/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import { Routes,Route } from 'react-router'; 4 | import Portfolio from './Components/Portfolio'; 5 | import Dashboard from './Components/DashBoard'; 6 | import Login from './Components/Login'; 7 | import ErrorPage from './Components/ErrorPage'; 8 | import Form from './Components/Form-Components/Form'; 9 | import EditForm from './Components/Form-Components/EditForm'; 10 | import ProfilePictureEditForm from './Components/Form-Components/ProfilePictureEditForm'; 11 | import AboutUs from './Components/Dashboard-Components/AboutUs'; 12 | 13 | function App() { 14 | 15 | return ( 16 |
17 | 18 | } /> 19 | } /> 20 | } /> 21 | } /> 22 | } /> 23 | } /> 24 | } 27 | /> 28 | } 31 | /> 32 | 33 |
34 | ); 35 | } 36 | 37 | export default App; 38 | 39 | -------------------------------------------------------------------------------- /source-folio/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /source-folio/src/Components/Aboutme.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CssFiles/aboutme.css"; 3 | import Info from "./Info"; 4 | import { Link } from "react-scroll"; 5 | import { useSelector } from "react-redux"; 6 | 7 | const About = () => { 8 | const { profilePicture, yearsOfExperience, numberOfProjects, bio } = useSelector(state => state.portfolio.data); 9 | return ( 10 |
11 |

12 | About Me 13 |

14 | My introduction 15 | 16 |
17 | 22 | 23 |
24 | 28 | 29 |

{bio}

30 | 35 | {/* download="" href={CV} */} 36 | Read More... 37 | 45 | 49 | 53 | 57 | 61 | 62 | 63 |
64 |
65 |
66 | ); 67 | }; 68 | 69 | export default About; 70 | -------------------------------------------------------------------------------- /source-folio/src/Components/Achivements.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CssFiles/achivements.css" 3 | import { SlGraduation } from "react-icons/sl"; 4 | import { useSelector } from "react-redux"; 5 | 6 | const Achivements=()=>{ 7 | const { myAchievements } = useSelector(state => state.portfolio.data); 8 | return ( 9 |
10 |

11 | My Achievements. 12 |

13 | What are my accomplishments!! 14 | 15 |
16 |
17 |
18 |
19 | 20 |
{" "} 21 | Achievements 22 |
23 | 24 | {/*
25 | Achievements 26 |
*/} 27 |
28 | 29 |
30 |
31 | {myAchievements.map((x, i) => { 32 | 33 | if(i & 1) { 34 | return ( 35 |
36 |
37 |
38 | 39 |
40 |
41 |
42 |

43 | {x} 44 |

45 |
46 |
47 | ) 48 | } else { 49 | return ( 50 |
51 |
52 |

53 | {x} 54 |

55 |
56 | 57 |
58 | 59 |
60 |
61 |
62 | ) 63 | } 64 | })} 65 | 66 |
67 |
68 |
69 |
70 | ); 71 | } 72 | 73 | export default Achivements; -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/aboutme.css: -------------------------------------------------------------------------------- 1 | .about__container{ 2 | grid-template-columns: repeat (2,1fr); 3 | align-items: center; 4 | column-gap: 4rem; 5 | display: flex; 6 | } 7 | 8 | .about__img{ 9 | width: 350px; 10 | border-radius:1.5rem; 11 | justify-self:center; 12 | } 13 | 14 | .about__info{ 15 | grid-template-columns: repeat(2,140px); 16 | gap:0.5rem; 17 | margin-bottom: var(--mb-2); 18 | } 19 | 20 | .about__box{ 21 | background-color: white; 22 | border: 1px solid rgba(0,0,0,0.1); 23 | border-radius: 0.75rem ; 24 | text-align: center; 25 | padding : 1rem 1.25rem; 26 | 27 | } 28 | 29 | .about__icon{ 30 | font-size: 1.5rem; 31 | color: var(--title-color); 32 | margin-bottom: var(--mb-0-5); 33 | margin: auto; 34 | } 35 | 36 | .about__title{ 37 | font-size: var(--small-font-size); 38 | font-weight: var(--font-medium); 39 | } 40 | 41 | .about__title{ 42 | font-size : var(--tiny-font-size); 43 | } 44 | 45 | .about__description{ 46 | padding: 0 4rem 0 0; 47 | margin-bottom: var(--mb-2-5); 48 | } 49 | 50 | @media screen and (max-width: 992px ){ 51 | 52 | .about__container{ 53 | grid-template-columns: 1fr ; 54 | row-gap: 2.5rem; 55 | display: grid; 56 | } 57 | 58 | .about__img{ 59 | width: 220px; 60 | 61 | } 62 | 63 | .about__box{ 64 | padding: 0.75rem 0.5rem; 65 | } 66 | 67 | .about__data{ 68 | text-align: center; 69 | } 70 | 71 | .about__info{ 72 | justify-content: center; 73 | } 74 | 75 | .about__description 76 | { 77 | padding: 0 5rem; 78 | margin-bottom: 2rem; 79 | } 80 | } 81 | 82 | @media screen and (max-width: 768px) { 83 | 84 | } 85 | 86 | /* @media screen and (max-width: 576px) { 87 | 88 | } 89 | 90 | @media screen and (max-width: 350px) { 91 | 92 | } */ 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/achivements.css: -------------------------------------------------------------------------------- 1 | .qualification__container{ 2 | max-width: 768px; 3 | } 4 | 5 | .qualification__tabs{ 6 | display: flex; 7 | justify-content: center; 8 | margin: var(--mb-2); 9 | } 10 | 11 | .qualification__button{ 12 | font-size: var(--h3-font-size); 13 | font-weight: var(--font-medium); 14 | color: white; 15 | margin: 0 var(--mb-1); 16 | cursor: pointer; 17 | } 18 | 19 | .qualification__button:hover{ 20 | color : orange; 21 | } 22 | 23 | .qualification__icon{ 24 | font-size: 1.8rem; 25 | margin-right: var(--mb-0-25); 26 | } 27 | 28 | .qualification__sections{ 29 | display:grid; 30 | grid-template-columns: 0.9fr; 31 | justify-content: center; 32 | } 33 | 34 | /* .qualification__content{ 35 | display: none; 36 | } */ 37 | 38 | .qualification__content-active{ 39 | display:block; 40 | } 41 | 42 | .qualification__data{ 43 | display: grid; 44 | grid-template-columns: 1fr max-content 1fr; 45 | column-gap: 1.5rem; 46 | 47 | } 48 | 49 | .data_education{ 50 | display: grid; 51 | grid-template-columns: 0.2fr max-content 1fr; 52 | column-gap: 1.5rem; 53 | 54 | } 55 | 56 | 57 | .qualification__title{ 58 | font-size: var(--normal-font-size); 59 | font-weight: var(--font-medium); 60 | color: rgb(192, 188, 188); 61 | } 62 | 63 | .qualification__calender{ 64 | font-size: var(--small-font-size); 65 | } 66 | 67 | .qualification__rounder{ 68 | display: inline-block; 69 | width : 13px; 70 | height: 13px; 71 | background-color: rgb(235, 155, 6); 72 | border-radius: 50%; 73 | } 74 | 75 | .education__rounder{ 76 | display: inline-block; 77 | width : 10px; 78 | height: 10px; 79 | background-color: rgb(235, 155, 6); 80 | border-radius: 50%; 81 | } 82 | 83 | .qualification__line{ 84 | display: block; 85 | width: 1px; 86 | height: 100%; 87 | background-color: rgb(130, 130, 130); 88 | transform: translate(6px,-7px) 89 | } 90 | 91 | @media screen and (max-width : 992px) { 92 | .qualification__container{ 93 | margin-left: auto ; 94 | margin-right: auto; 95 | } 96 | } 97 | 98 | @media screen and (max-width : 768px) { 99 | .qualification__container{ 100 | margin-left: var(--mb-1-5); 101 | margin-right: var(--mb-1-5); 102 | } 103 | } 104 | 105 | @media screen and (max-width : 576px) { 106 | .qualification__sections{ 107 | grid-template-columns: initial; 108 | } 109 | 110 | .qualification__button{ 111 | margin: 0 var(--mb-0-75); 112 | } 113 | } 114 | 115 | /*for small device */ 116 | @media screen and (max-width : 350px) { 117 | .qualification__data{ 118 | gap:0.5rem; 119 | } 120 | } -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/contact.css: -------------------------------------------------------------------------------- 1 | 2 | .contact__container{ 3 | grid-template-columns: repeat(2,max-content); 4 | justify-content: center; 5 | column-gap: 6rem; 6 | padding-bottom: 3rem; 7 | } 8 | 9 | .contact__title{ 10 | text-align: center; 11 | font-size: var(--h3-font-size); 12 | font-weight: var(--font-medium); 13 | margin-bottom: var(--mb-1-5); 14 | color:white; 15 | } 16 | 17 | .contact__info{ 18 | display: grid; 19 | row-gap: 1rem; 20 | grid-template-columns: 300px; 21 | 22 | } 23 | 24 | .contact__form{ 25 | width: 360px; 26 | } 27 | 28 | .contact__card{ 29 | background-color: rgb(54 54 54); 30 | /* border : 1px solid orange; */ 31 | padding : 1rem; 32 | border-radius: 0.75rem; 33 | text-align: center; 34 | margin-bottom: 0.8rem; 35 | } 36 | 37 | .contact__card-icon{ 38 | font-size: 2rem; 39 | color: orange; 40 | margin-bottom: 0.2rem; 41 | display: flex; 42 | justify-content: center; 43 | } 44 | 45 | .contact__card-title, 46 | .contact__card-data{ 47 | font-size : var(--small-font-size); 48 | } 49 | 50 | .contact__card-title{ 51 | font-weight: var(--font-medium); 52 | color: white; 53 | } 54 | 55 | .contact__card-data{ 56 | display: block; 57 | margin-bottom: var(--mb-0-75); 58 | } 59 | 60 | .contact__button{ 61 | color : white; 62 | font-size: var(--small-font-size); 63 | display: inline-flex; 64 | align-items: center; 65 | justify-content: center; 66 | column-gap: 0.25rem ; 67 | } 68 | 69 | .contact__button-icon{ 70 | font-size: 1rem; 71 | transition : 0.3s 72 | } 73 | 74 | .contact__button:hover .contact__button-icon{ 75 | transform: translate(0.25rem); 76 | } 77 | 78 | .contact__form{ 79 | width : 360px; 80 | } 81 | 82 | .contact__form-div{ 83 | position: relative; 84 | margin-bottom : var(--mb-2); 85 | height : 4rem; 86 | /* background-color: blue; */ 87 | } 88 | 89 | .contact__form-input{ 90 | position : absolute; 91 | top: 0; 92 | left : 0; 93 | width: 100%; 94 | height : 100%; 95 | border: 2px solid rgba(0,0,0,0.3); 96 | background: none; 97 | color: var(--text-color); 98 | outline: none; 99 | border-radius : 0.75rem; 100 | padding : 1.5rem; 101 | z-index:1; 102 | /* background-color: brown; */ 103 | font-size: 1rem; 104 | 105 | } 106 | 107 | .contact__form-tag{ 108 | position : absolute; 109 | top: -0.75rem; 110 | left : 9.25rem; 111 | font-size: var(--smaller-font-size); 112 | padding : 0.25rem; 113 | z-index : 10; 114 | background-color: #18162d; 115 | color: white; 116 | /* background-color: rgb(54 54 54); */ 117 | } 118 | 119 | .contact__form-area{ 120 | height:11rem; 121 | } 122 | 123 | .contact__form-area textarea{ 124 | resize:none; 125 | } 126 | 127 | @media screen and (max-width : 992px) { 128 | .contact__container{ 129 | column-gap: 3rem; 130 | } 131 | 132 | 133 | } 134 | 135 | @media screen and (max-width : 768px) { 136 | .contact__container{ 137 | grid-template-columns: 1fr; 138 | row-gap: 3rem; 139 | } 140 | 141 | .contact__info{ 142 | justify-content: center; 143 | } 144 | 145 | .contact__form{ 146 | margin : 0 auto; 147 | } 148 | } 149 | 150 | @media screen and (max-width : 576px) { 151 | .contact__info{ 152 | grid-template-columns: 1fr; 153 | } 154 | 155 | .contact__form{ 156 | width: 100%; 157 | } 158 | } 159 | 160 | @media screen and (max-width : 350px) { 161 | 162 | } 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/dashboard.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .dashboard{ 4 | width : 100%; 5 | height : 100vh ; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/education.css: -------------------------------------------------------------------------------- 1 | .education__container{ 2 | display : block; 3 | } 4 | 5 | .education__title{ 6 | font-size: var(--h3-font-size); 7 | margin-bottom: var(--mb-1); 8 | color: white; 9 | font-weight: var(--font-medium); 10 | } 11 | 12 | .education__heading{ 13 | display: block; 14 | background-image: url("../../asset/image/4.jpg"); 15 | background-repeat: no repeat; 16 | background-size: cover; 17 | color : white; 18 | height : 11rem; 19 | border-radius: 12px; 20 | width:100%; 21 | font-size: 1.1rem; 22 | font-weight: var(--font-medium); 23 | } 24 | 25 | .education__marks{ 26 | display: flex; 27 | margin-top: 3.4rem; 28 | margin-left: 1.5rem; 29 | font-weight: var(--font-semi-bold); 30 | font-family: 'Courier New', Courier, monospace; 31 | white-space: nowrap; 32 | 33 | } 34 | 35 | .education__name{ 36 | display: flex; 37 | margin-left: 1.5rem; 38 | 39 | } 40 | 41 | .education__field{ 42 | margin-top: 1.5rem; 43 | margin-left: 1.5rem; 44 | font-size: 1.9rem; 45 | font-family: 'Courier New', Courier, monospace; 46 | } 47 | 48 | .education__year{ 49 | margin-left: 1.45rem; 50 | } 51 | 52 | .education__place{ 53 | margin-left: 3rem; 54 | font-size: 0.8rem; 55 | margin-top: 0; 56 | 57 | } 58 | 59 | .education__college{ 60 | font-size: 1.3rem; 61 | width : 28%; 62 | white-space: nowrap; 63 | /* white-space: nowrap; */ 64 | 65 | } 66 | 67 | .education__pencil { 68 | color: orange; 69 | margin-top: 1.4rem; 70 | font-size: 1.5rem; 71 | } 72 | 73 | h4{ 74 | color : rgb(101, 97, 97); 75 | width: 20%; 76 | font-size: 1rem; 77 | 78 | } 79 | 80 | h6{ 81 | color: orange; 82 | font-size: 0.8rem; 83 | } 84 | 85 | @media screen and (max-width : 992px) { 86 | h4{ 87 | font-size: 0.9rem; 88 | } 89 | 90 | .education__college{ 91 | font-size: 1.1rem; 92 | } 93 | 94 | 95 | span { 96 | word-wrap: break-word; 97 | 98 | } 99 | 100 | h6{ 101 | font-size: 0.7rem; 102 | } 103 | 104 | .education__pencil { 105 | 106 | font-size: 1.4rem; 107 | } 108 | } 109 | 110 | @media screen and (max-width : 768px) { 111 | 112 | h4 { 113 | font-size: 0.7rem; 114 | } 115 | 116 | .education__college { 117 | font-size: 1rem; 118 | } 119 | .education__pencil { 120 | 121 | font-size: 1.3rem; 122 | } 123 | 124 | span{ 125 | word-wrap: break-word; 126 | 127 | } 128 | 129 | h6 { 130 | font-size: 0.6rem; 131 | } 132 | } 133 | 134 | @media screen and (max-width : 576px) { 135 | 136 | h4 { 137 | font-size: 0.6rem; 138 | } 139 | 140 | .education__college { 141 | font-size: 0.8rem; 142 | 143 | } 144 | .education__detail { 145 | display: block; 146 | } 147 | .pipe { 148 | display: none; 149 | } 150 | .education__pencil { 151 | 152 | font-size: 1.2rem; 153 | } 154 | 155 | span { 156 | word-wrap: break-word; 157 | 158 | } 159 | h6 { 160 | font-size: 0.35rem; 161 | } 162 | } 163 | 164 | /*for small device */ 165 | @media screen and (max-width : 350px) { 166 | 167 | h4 { 168 | font-size: 0.6rem; 169 | } 170 | 171 | span { 172 | word-wrap: break-word; 173 | 174 | } 175 | 176 | .education__college { 177 | font-size: 0.7rem; 178 | } 179 | .education__detail { 180 | display: block; 181 | } 182 | .pipe { 183 | display: none; 184 | } 185 | .education__pencil { 186 | 187 | font-size: 1rem; 188 | } 189 | 190 | 191 | h6 { 192 | font-size: 0.35rem; 193 | } 194 | } 195 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/experience.css: -------------------------------------------------------------------------------- 1 | .experience__container{ 2 | grid-template-columns: repeat(3,270px); 3 | justify-content: center; 4 | column-gap: 1.8rem; 5 | } 6 | 7 | .experience__modal{ 8 | display: none; 9 | } 10 | 11 | .experience__content{ 12 | position: relative; 13 | border: 1px solid rgba(142, 64, 64, 0.1); 14 | /* background-color: rgb(76, 74, 74); */ 15 | background-image: url("../../asset/image/2.jpg"); 16 | background-repeat: no repeat; 17 | padding: 6rem 0 2rem 2.5rem; 18 | background-size: cover; 19 | opacity: 3; 20 | } 21 | 22 | .experience__content_like{ 23 | position: relative; 24 | border: 1px solid rgba(142, 64, 64, 0.1); 25 | /* background-color: rgb(76, 74, 74); */ 26 | 27 | background-repeat: no repeat; 28 | padding: 6rem 0 2rem 2.5rem; 29 | background-size: cover; 30 | opacity: 3; 31 | } 32 | 33 | .Experience__icon{ 34 | display: block; 35 | font-size: 1.5rem; 36 | color: orange; 37 | margin-bottom: var(--mb-1); 38 | } 39 | 40 | .experience__title{ 41 | font-size: var(--h3-font-size); 42 | margin-bottom: var(--mb-1); 43 | color: white; 44 | font-weight: var(--font-medium); 45 | } 46 | 47 | .experience__button{ 48 | color: white; 49 | font-size: var(--small-font-size); 50 | display: inline-flex; 51 | align-items: center; 52 | column-gap: 0.25rem; 53 | cursor: pointer; 54 | margin-bottom: 6px; 55 | } 56 | 57 | .experience__button-icon{ 58 | font-size: 1rem; 59 | transition: 0.3s; 60 | } 61 | 62 | .experience__button:hover .experience__button-icon{ 63 | transform: translateX(00.25rem); 64 | } 65 | 66 | .experience__modal{ 67 | position:fixed; 68 | top:0; 69 | left:0; 70 | right:0; 71 | bottom:0; 72 | background-color: rgba(0,0,0,0.5); 73 | z-index:var(--z-modal); 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | padding: 0 1rem; 78 | opacity:0; 79 | visibility: hidden; 80 | transition:.3s; 81 | 82 | } 83 | 84 | .experience__modal-content{ 85 | width: 500px; 86 | position: relative; 87 | background-color: var(--container-color); 88 | padding: 4.5rem 2.5rem 2.5rem; 89 | border-radius: 20px; 90 | } 91 | 92 | .experience__modal-close{ 93 | position: absolute; 94 | top:1.5rem; 95 | right: 1.5rem; 96 | font-size: 1.5rem; 97 | color: orange; 98 | cursor:pointer; 99 | } 100 | 101 | .experience__modal-title, 102 | .experience__modal-description{ 103 | text-align: center; 104 | } 105 | 106 | .experience__modal-title{ 107 | font-size: var(--h3-font-size); 108 | font-weight: var(--font-medium); 109 | margin-bottom: var(--mb-1); 110 | } 111 | 112 | .experience__modal-description{ 113 | font-size:var(--small-font-size); 114 | padding: 0 3.5rem; 115 | margin-bottom: var(--mb-2); 116 | } 117 | 118 | .experience__modal-experience{ 119 | row-gap: 0.75rem; 120 | } 121 | 122 | .experience__modal-experience{ 123 | display: flex; 124 | align-items: center; 125 | column-gap: .5rem ; 126 | } 127 | 128 | .experience__modal-icon{ 129 | /* color: orange; */ 130 | font-size: 1.1rem; 131 | } 132 | 133 | .experience__modal-info{ 134 | font-size: var(--small-font-size); 135 | } 136 | 137 | 138 | 139 | .active-modal{ 140 | opacity:1; 141 | visibility: visible; 142 | } 143 | 144 | @media screen and (max-width : 992px) { 145 | .experience__container{ 146 | grid-template-columns: repeat(3,218px); 147 | } 148 | } 149 | 150 | @media screen and (max-width : 768px) { 151 | .experience__container{ 152 | grid-template-columns: repeat(2,1fr); 153 | } 154 | 155 | .experience__content{ 156 | padding: 3.5rem 0.5rem 1.25rem 1.5rem; 157 | } 158 | 159 | .experience__icon{ 160 | font-size: 1rem; 161 | } 162 | } 163 | 164 | @media screen and (max-width : 576px) { 165 | .experience__modal-content{ 166 | padding: 4.5rem 1.5rem 2.5rem; 167 | } 168 | 169 | .experience__modal-description{ 170 | padding:0; 171 | } 172 | } 173 | 174 | /*for small device */ 175 | @media screen and (max-width : 350px) { 176 | .experience__container{ 177 | grid-template-columns: max-content; 178 | } 179 | 180 | .experience__content{ 181 | padding-right: 6rem; 182 | } 183 | 184 | } 185 | 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/footer.css: -------------------------------------------------------------------------------- 1 | .footer__copy{ 2 | display: flex; 3 | justify-content: space-around; 4 | color: white; 5 | margin-bottom: 2rem; 6 | 7 | } 8 | 9 | .buttonn:hover{ 10 | cursor: pointer; 11 | color : orange; 12 | transition: .3s; 13 | font-size: 1.1rem; 14 | } 15 | 16 | .home__icon{ 17 | color : orange; 18 | font-size: 1.3rem; 19 | margin-left: 0.4rem; 20 | margin-top: 0.2rem; 21 | } 22 | 23 | .delete{ 24 | margin-left: 2rem; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/home.css: -------------------------------------------------------------------------------- 1 | .home__content{ 2 | grid-template-columns: 116px repeat(2,1fr); 3 | padding-top: 5.5rem; 4 | column-gap : 2rem ; 5 | align-items: center; 6 | } 7 | 8 | 9 | .home__img{ 10 | background-repeat: no-repeat; 11 | background-position: center; 12 | background-size: cover; 13 | box-shadow: inset 0 0 0 9px rgb(255 255 255/30%); 14 | order:1; 15 | justify-self:center; 16 | width: 300px; 17 | height: 300px; 18 | animation : profile__animate 8s ease-in-out infinite 1s; 19 | } 20 | 21 | @keyframes profile__animate{ 22 | 0%{ 23 | border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; 24 | } 25 | 26 | 50%{ 27 | border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; 28 | } 29 | 30 | 100%{ 31 | border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; 32 | } 33 | } 34 | 35 | .home__title{ 36 | color:white; 37 | font-size: 2rem ; 38 | margin-bottom: var(--mb-0-25); 39 | } 40 | 41 | .home__social{ 42 | display: grid; 43 | grid-template-columns: max-content; 44 | row-gap: 1rem; 45 | 46 | } 47 | 48 | .home__social-icon{ 49 | font-size:1.25rem; 50 | color:white; 51 | margin-bottom: 5px; 52 | } 53 | 54 | .home__social-icon:hover{ 55 | color: #DA7328; 56 | } 57 | 58 | .home_description{ 59 | max-width: 400px; 60 | margin-bottom: var(--mb-5); 61 | color: rgb(98, 94, 94); 62 | } 63 | 64 | .home__hand{ 65 | width : 38px; 66 | height : 38px; 67 | margin-left: 0.4rem; 68 | color: #DA7328; 69 | } 70 | 71 | .home__hand{ 72 | animation-name: wave-animation; 73 | /* Refers to the name of your @keyframes element below */ 74 | animation-duration: 2.5s; 75 | /* Change to speed up or slow down */ 76 | animation-iteration-count: infinite; 77 | /* Never stop waving :) */ 78 | transform-origin: 70% 70%; 79 | /* Pivot around the bottom-left palm */ 80 | display: inline-block; 81 | } 82 | 83 | @keyframes wave-animation { 84 | 0% { 85 | transform: rotate(0.0deg) 86 | } 87 | 88 | 10% { 89 | transform: rotate(14.0deg) 90 | } 91 | 92 | /* The following five values can be played with to make the waving more or less extreme */ 93 | 20% { 94 | transform: rotate(-8.0deg) 95 | } 96 | 97 | 30% { 98 | transform: rotate(14.0deg) 99 | } 100 | 101 | 40% { 102 | transform: rotate(-4.0deg) 103 | } 104 | 105 | 50% { 106 | transform: rotate(10.0deg) 107 | } 108 | 109 | 60% { 110 | transform: rotate(0.0deg) 111 | } 112 | 113 | /* Reset for the last half to pause */ 114 | 100% { 115 | transform: rotate(0.0deg) 116 | } 117 | } 118 | 119 | .home__subtitle{ 120 | position: relative; 121 | font-weight:lighter; 122 | padding-left: 4.4rem; 123 | margin-bottom: var(--mb-1); 124 | font-size: 1.5rem; 125 | color: white; 126 | } 127 | 128 | .home__subtitle::before{ 129 | content:''; 130 | position:absolute; 131 | width:50px; 132 | height:1.1px; 133 | background-color:#DA7328; 134 | left:0; 135 | top:1rem; 136 | } 137 | 138 | .button{ 139 | color:rgb(98, 94, 94); 140 | } 141 | 142 | @media screen and (max-width : 992px) { 143 | .home__content{ 144 | grid-template-columns: 100px repeat(2,1fr); 145 | column-gap: 1.25rem; 146 | } 147 | 148 | .home__hand{ 149 | width: 26px; 150 | height : 26px; 151 | } 152 | 153 | .home__subtitle{ 154 | padding-left: 3.4rem; 155 | margin-bottom: var(--mb-1); 156 | } 157 | 158 | .home__description{ 159 | max-width: initial; 160 | margin-bottom: var(--mb-2-5); 161 | } 162 | 163 | .home__subtitle::before{ 164 | width : 28px; 165 | top: 0.8rem; 166 | } 167 | 168 | .home__img{ 169 | width:250px; 170 | height: 250px; 171 | box-shadow: inset 0 0 0 8px rgb(255 255 255/30%); 172 | margin-left : 0.6rem; 173 | } 174 | 175 | } 176 | 177 | @media screen and (max-width: 768px) { 178 | .home__content{ 179 | grid-template-columns: 0.5fr 3fr; 180 | padding-top: 3.5rem; 181 | } 182 | 183 | .home__img{ 184 | order:initial; 185 | justify-self: initial; 186 | 187 | } 188 | 189 | .home__data{ 190 | grid-column: 1/3; 191 | 192 | } 193 | 194 | .home__img{ 195 | box-shadow: inset 0 0 0 6px rgb(255 255 255/30%); 196 | width: 200px; 197 | height: 200px; 198 | /* margin: 0.6rem; */ 199 | } 200 | } 201 | 202 | @media screen and (max-width: 350px ) { 203 | .home__img{ 204 | width: 180px; 205 | height:180px; 206 | 207 | } 208 | 209 | .home__hand{ 210 | width: 22px; 211 | height: 22px; 212 | } 213 | } 214 | 215 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/information.css: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | visibility: hidden; 3 | opacity: 0; 4 | } 5 | 6 | .tooltip-on-hover:hover .tooltip { 7 | visibility: visible; 8 | opacity: 1; 9 | } 10 | 11 | .tooltip-triangle { 12 | width: 0; 13 | height: 0; 14 | border-left: 10px solid transparent; 15 | border-right: 10px solid transparent; 16 | border-bottom: 10px solid white; 17 | } 18 | 19 | @keyframes fadeInUp { 20 | from { 21 | transform: translate3d(0, 40px, 0); 22 | } 23 | 24 | to { 25 | transform: translate3d(0, 0, 0); 26 | opacity: 1; 27 | } 28 | } 29 | 30 | @-webkit-keyframes fadeInUp { 31 | from { 32 | transform: translate3d(0, 40px, 0); 33 | } 34 | 35 | to { 36 | transform: translate3d(0, 0, 0); 37 | opacity: 1; 38 | } 39 | } 40 | 41 | .animated { 42 | animation-duration: 1s; 43 | animation-fill-mode: both; 44 | -webkit-animation-duration: 1s; 45 | -webkit-animation-fill-mode: both; 46 | } 47 | 48 | .animatedFadeInUp { 49 | opacity: 0; 50 | } 51 | 52 | .fadeInUp { 53 | opacity: 0; 54 | animation-name: fadeInUp; 55 | -webkit-animation-name: fadeInUp; 56 | } -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/loading.css: -------------------------------------------------------------------------------- 1 | .BODY { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #18162d; 5 | } 6 | 7 | .loading { 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100vh; 13 | } 14 | 15 | .loading-bar { 16 | width: 50%; 17 | height: 20px; 18 | background-color: #ebebeb; 19 | border-radius: 10px; 20 | position: relative; 21 | margin-bottom: 10px; 22 | } 23 | 24 | .loading-bar::after { 25 | content: ""; 26 | display: block; 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | width: 0%; 31 | height: 100%; 32 | background-color: orange; 33 | border-radius: 10px; 34 | animation: progress 2s linear infinite; 35 | } 36 | 37 | .loading-text { 38 | font-size: 24px; 39 | font-weight: bold; 40 | color: #f7f7f7; 41 | } 42 | 43 | @keyframes progress { 44 | 0% { 45 | width: 0%; 46 | } 47 | 100% { 48 | width: 100%; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/navbar.css: -------------------------------------------------------------------------------- 1 | .header{ 2 | width: 100%; 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | z-index: var(--z-fixed); 7 | /* background-color: var(--container-color); */ 8 | } 9 | 10 | .switch{ 11 | margin-top: 0px; 12 | height: 20px; 13 | } 14 | 15 | .nav__logo{ 16 | font-size: 1.2rem; 17 | } 18 | 19 | .nav{ 20 | height : calc(var(--header-height) + 1.5rem); 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | column-gap: 1rem; 25 | } 26 | 27 | .nav__logo,.nav_toggle{ 28 | font-weight : var(--font-medium); 29 | color : var(--title-color) 30 | } 31 | 32 | .nav__list{ 33 | display:flex; 34 | column-gap:2rem; 35 | margin-top: 1.5rem; 36 | } 37 | 38 | .nav__link{ 39 | display:flex; 40 | flex-direction:column; 41 | align-items:center; 42 | font-size: var(--small-font-size); 43 | color:var(--title-color); 44 | font-weight: var(--font-medium); 45 | transition: .3s; 46 | } 47 | 48 | .nav__icon, 49 | .nav__close, 50 | .nav_toggle{ 51 | display:none; 52 | } 53 | 54 | .active-link, 55 | .nav__link:hover{ 56 | color:var(--title-color-dark); 57 | } 58 | .navbar__menu__list { 59 | display: none; 60 | } 61 | 62 | @media screen and (max-width : 992px) { 63 | .nav__container { 64 | margin-left : var(--mb-1-5); 65 | margin-right: var(--mb-1-5); 66 | } 67 | } 68 | 69 | @media screen and (max-width : 768px) 70 | { 71 | .header{ 72 | top:initial; 73 | bottom:0; 74 | } 75 | 76 | .nav{ 77 | height: var(--header-height); 78 | } 79 | 80 | .nav__menu{ 81 | position: fixed; 82 | bottom: -100%; 83 | left: 0; 84 | width: 100%; 85 | background-color: rgb(21, 20, 19); 86 | padding: 2rem 1.5rem 4rem; 87 | box-shadow: 0 -1px 4px rgba(0,0,0,0.15); 88 | border-radius: 1.5rem 1.5rem 0 0; 89 | transition: 0.3s; 90 | } 91 | 92 | /****SHOW MENU ***/ 93 | .show-menu{ 94 | bottom:0; 95 | } 96 | 97 | .nav__toggle{ 98 | font-size: 1.1rem; 99 | cursor : pointer; 100 | } 101 | 102 | 103 | .nav__list{ 104 | display: grid; 105 | grid-template-columns: repeat(3,1fr); 106 | gap: 2rem ; 107 | } 108 | 109 | .nav__icon{ 110 | font-size: 1.2rem; 111 | } 112 | 113 | .nav__close{ 114 | position: absolute; 115 | right:1.3rem; 116 | bottom: .5rem; 117 | font-size: 1.5rem; 118 | cursor: pointer; 119 | color: var(--title-color); 120 | } 121 | 122 | .nav__icon, 123 | .nav__close, 124 | .nav_toggle{ 125 | display: block; 126 | } 127 | .navbar__menu__list { 128 | display: inline; 129 | } 130 | } 131 | 132 | @media screen and (max-width : 350px) { 133 | .nav__menu{ 134 | padding : 2rem 0.25rem 4rem; 135 | } 136 | 137 | .nav__list{ 138 | column-gap: 0; 139 | } 140 | .navbar__menu__list { 141 | display: inline; 142 | } 143 | } 144 | 145 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/portfolio.css: -------------------------------------------------------------------------------- 1 | .Portfolio{ 2 | background-color: #18162b; 3 | } -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/project.css: -------------------------------------------------------------------------------- 1 | button { 2 | height: 28px; 3 | /* font-size: 0.8rem; */ 4 | } 5 | 6 | .button__links { 7 | margin-right: 0.8em; 8 | border-radius: 5px; 9 | width: 25%; 10 | font-size: 0.8rem; 11 | height: 30px; 12 | background-color: white; 13 | } 14 | 15 | .project__content { 16 | margin-right: 1.9rem; 17 | position: relative; 18 | border: 1px solid rgba(142, 64, 64, 0.1); 19 | background-image: url("../../asset/image/3.jpg"); 20 | background-repeat: no repeat; 21 | padding: 6rem 0 2rem 2.5rem; 22 | background-size: cover; 23 | opacity: 3; 24 | border-radius: 1.3rem; 25 | } 26 | 27 | @media screen and (max-width: 992px) { 28 | .button__links { 29 | width: 31%; 30 | font-size: 0.6rem; 31 | } 32 | } 33 | 34 | @media screen and (max-width: 576px) { 35 | .button__links { 36 | width: 25%; 37 | font-size: 0.5rem; 38 | } 39 | } 40 | 41 | /*for small device */ 42 | @media screen and (max-width: 350px) { 43 | .button__links { 44 | width: 25%; 45 | font-size: 0.45rem; 46 | height: 25px; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /source-folio/src/Components/CssFiles/skills.css: -------------------------------------------------------------------------------- 1 | .section__title{ 2 | color: white; 3 | } 4 | 5 | .skills__container{ 6 | grid-template-columns: repeat(2,350px); 7 | column-gap: 3rem; 8 | justify-content: center; 9 | } 10 | 11 | .skills__name { 12 | color: white; 13 | font-size: 1.05rem; 14 | line-height: 18px; 15 | font-weight: var(--title-color); 16 | } 17 | 18 | 19 | .skills__content{ 20 | background-color: rgb(54 54 54); 21 | border: 1px solid black(0,0,0,0.1); 22 | padding:2rem 4rem; 23 | border-radius: 1.25rem; 24 | /* opacity: 0.7; */ 25 | } 26 | 27 | .skills__title{ 28 | font-size: 1rem; 29 | font-weight: var(--font-medium); 30 | text-align: center; 31 | margin-bottom: var(--mb-1-5); 32 | color: white; 33 | } 34 | 35 | .skills__box{ 36 | display: flex; 37 | justify-content: center; 38 | column-gap: 2.5rem; 39 | } 40 | 41 | .skills__group{ 42 | display: grid; 43 | align-items: flex-start; 44 | row-gap: 1rem; 45 | } 46 | 47 | .skills__data{ 48 | display: flex; 49 | column-gap:0.5rem; 50 | } 51 | 52 | 53 | .badge{ 54 | font-size: 1rem; 55 | color: orange; 56 | } 57 | 58 | .skills__level{ 59 | font-size: 0.8rem; 60 | color: rgb(146, 145, 143); 61 | } 62 | 63 | @media screen and (max-width : 992px) { 64 | .skills__container{ 65 | grid-template-columns: max-content; 66 | row-gap: 2rem ; 67 | } 68 | } 69 | 70 | @media screen and (max-width : 576px) { 71 | .skills__container{ 72 | grid-template-columns: 1fr; 73 | } 74 | 75 | .skills__content{ 76 | padding : 1.5rem; 77 | } 78 | } 79 | 80 | /*for small device */ 81 | @media screen and (max-width : 350px) { 82 | .skills__box{ 83 | column-gap: 1.25rem ; 84 | } 85 | 86 | .skills__name{ 87 | font-size: var(--small-font-size); 88 | } 89 | } 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /source-folio/src/Components/DashBoard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "./Dashboard-Components/DashNavbar"; 3 | import "./CssFiles/dashboard.css" 4 | const Dashboard = () => { 5 | 6 | return ( 7 | <> 8 |
9 | 10 |
11 | 12 | ); 13 | }; 14 | 15 | export default Dashboard; 16 | -------------------------------------------------------------------------------- /source-folio/src/Components/Dashboard-Components/AboutUs.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useNavigate } from "react-router-dom"; 3 | import { Link } from "react-scroll"; 4 | // import NavBar from "./DashNavbar"; 5 | // import NavBar from "../NavBar"; 6 | // import { IoMdArrowRoundBack } from "react-icons/io"; 7 | 8 | const team = [ 9 | { 10 | name: "Sumit Verma", 11 | role: "Backend Developer", 12 | imageUrl: 13 | "https://drive.google.com/thumbnail?id=19tLaK5OHbL3tO20-zUOIbr4KYoQkfG-D&sz=w500", 14 | }, 15 | { 16 | name: "Devanshi Gupta", 17 | role: "Frontend Developer", 18 | imageUrl:"https://drive.google.com/thumbnail?id=1D3qMv-eYednp2ew8ShaBBibYfwHkeF7F&sz=w1000" }, 19 | { 20 | name: "Rahul Verma", 21 | role: "Frontend Developer", 22 | imageUrl: 23 | "https://drive.google.com/thumbnail?id=1iXtEMStuvgrOplUuxbgpvP-ku3eGnRov&sz=w1000", 24 | }, 25 | { 26 | name: "Deepak Das", 27 | role: "Backend Developer", 28 | imageUrl: 29 | "https://drive.google.com/thumbnail?id=1QMpoQ05yznD8fqc-Ovu0mTyMiBdr_ExV&sz=w1000", 30 | }, 31 | ]; 32 | 33 | const AboutUs = () => { 34 | 35 | const navigate = useNavigate(); 36 | 37 | return ( 38 | <> 39 |
40 |
41 | 42 | SourceFolio . 43 | 44 |
45 | {/* */} 46 |

navigate(`/`)}>Back to home

47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |

56 | OUR TEAM 57 |

58 |
59 |

60 | Meet our amazing team. We worked on SourceFolio together. Build your amazing portfolio with SourceFolio. 61 |

62 |
63 |
    65 | {team.map((person) => ( 66 |
  • 67 | 72 |

    73 | {person.name} 74 |

    75 |

    76 | {person.role} 77 |

    78 |
    • 79 | ))} 80 |
81 |
82 |
83 |
84 | 85 | ); 86 | }; 87 | 88 | export default AboutUs; 89 | -------------------------------------------------------------------------------- /source-folio/src/Components/Dashboard-Components/Banner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // import cloud from "../../asset/image/mobilee.jpg" 3 | import "./banner.css" 4 | import Typewriter from "typewriter-effect"; 5 | import { useSelector } from 'react-redux'; 6 | 7 | const DashHome=(props)=>{ 8 | const { user } = useSelector(state => state.portfolio.auth) 9 | console.log(user) 10 | return ( 11 |
12 |
13 | {/* */} 14 | 15 |

16 | 24 |

25 |

Create, inspire, succeed with our portfolio builder.

26 | {user && props.id &&
27 | 28 | View Sourcefolio 29 | 30 |
} 31 | {user && !props.id && 32 |
33 | 34 | Create Sourcefolio 35 | 36 |
37 | } 38 | {!user && 39 |
40 | 41 | Create Sourcefolio 42 | 43 |
44 | } 45 |
46 |
47 | ); 48 | } 49 | 50 | export default (DashHome); -------------------------------------------------------------------------------- /source-folio/src/Components/Dashboard-Components/DropDownMenu.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | function DropdownMenu(props) { 4 | const [filter, setFilter] = useState("name"); 5 | 6 | const array = ["skills", "experience", "education"]; 7 | function handleChange(e) { 8 | const text = e.target.value 9 | setFilter(text); 10 | props.handleSearchChange(text); 11 | } 12 | 13 | return ( 14 |
15 |
16 | 23 |
24 | 25 |
26 |
27 |
28 | ); 29 | } 30 | 31 | export default DropdownMenu; 32 | -------------------------------------------------------------------------------- /source-folio/src/Components/Dashboard-Components/SearchBox.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState, useRef } from "react"; 3 | 4 | function SearchBox(props) { 5 | const ref = useRef(null); 6 | const [searchText, setSearchText] = useState(""); 7 | const handleChange = (e) => { 8 | const text = e.target.value; 9 | setSearchText(text); 10 | props.handleInputChange(text); 11 | } 12 | return ( 13 | <> 14 |
15 | {handleChange(e)}}> 23 | 24 | 25 | 26 |
27 | 28 | ); 29 | } 30 | 31 | export default SearchBox; -------------------------------------------------------------------------------- /source-folio/src/Components/Dashboard-Components/banner.css: -------------------------------------------------------------------------------- 1 | .banner{ 2 | width : 100%; 3 | height : 100vh; 4 | background-image : url("../../asset/image/banner-bg.png"); 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | /* opacity : 0.5; */ 8 | position : relative; 9 | padding : 0 5%; 10 | display : flex; 11 | align-items: center; 12 | justify-content: center; 13 | 14 | box-sizing: border-box; 15 | font-family: 'poppins',sans-serif; 16 | } 17 | 18 | .content { 19 | text-align: center; 20 | margin-top: auto; 21 | margin-bottom: auto; 22 | 23 | } 24 | 25 | .content h1{ 26 | font-size: 3.5rem; 27 | color : #fff; 28 | font-weight: 600; 29 | } 30 | 31 | .content a{ 32 | position : relative; 33 | text-decoration: none; 34 | display: inline-flex; 35 | color : #fff; 36 | font-size: 1rem; 37 | border : 2px solid #fff; 38 | padding : 14px 70px; 39 | border-radius: 50px; 40 | margin-top: 1.5rem; 41 | z-index:1; 42 | overflow: hidden; 43 | transition: 0.5s; 44 | cursor: pointer; 45 | font-weight: bold; 46 | 47 | } 48 | 49 | .content_a a:hover{ 50 | color: #fff; 51 | } 52 | 53 | .content_a a::before{ 54 | content: ''; 55 | position: absolute; 56 | top: 0; 57 | left: 0; 58 | width: 0; 59 | height: 100%; 60 | background: #00abf0; 61 | z-index: -1; 62 | transition: 0.5s; 63 | } 64 | 65 | .content_a a:hover::before{ 66 | width:100%; 67 | } 68 | 69 | .content p{ 70 | font-size: 1.3rem; 71 | } 72 | 73 | @media screen and (max-width : 992px) { 74 | .content_a{ 75 | font-size: 0.8rem; 76 | } 77 | 78 | .content h1{ 79 | font-size: 3rem; 80 | } 81 | 82 | .content p{ 83 | font-size: 1.1rem; 84 | } 85 | } 86 | 87 | @media screen and (max-width : 576px) { 88 | .skills__container { 89 | grid-template-columns: 1fr; 90 | } 91 | 92 | .skills__content { 93 | padding: 1.5rem; 94 | } 95 | } 96 | 97 | /*for small device */ 98 | @media screen and (max-width : 350px) { 99 | .content_a { 100 | font-size: 0.5rem; 101 | } 102 | 103 | .content h1 { 104 | font-size: 1.1rem; 105 | } 106 | 107 | .content p { 108 | font-size: 0.9rem; 109 | } 110 | } 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /source-folio/src/Components/Dashboard-Components/dashnavbar.css: -------------------------------------------------------------------------------- 1 | .header { 2 | width: 100%; 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | z-index: var(--z-fixed); 7 | /* margin-top: 1rem; */ 8 | /* background-color: var(--container-color); */ 9 | } 10 | 11 | .switch { 12 | margin-top: 0px; 13 | height: 20px; 14 | } 15 | 16 | .nav__item :hover{ 17 | color : orange ; 18 | font-size: 1.2rem; 19 | cursor: pointer; 20 | } 21 | 22 | .nav { 23 | height: calc(var(--header-height) + 1.5rem); 24 | display: flex; 25 | justify-content: space-between; 26 | align-items:first baseline; 27 | column-gap: 1rem; 28 | } 29 | 30 | .dash__logo{ 31 | font-size: 1.5rem; 32 | font-weight: bold; 33 | margin-top: 1rem; 34 | } 35 | 36 | .dash__logo, 37 | .nav_toggle { 38 | font-weight: var(--font-medium); 39 | color: var(--title-color) 40 | } 41 | 42 | .nav__list { 43 | display: flex; 44 | column-gap: 2rem; 45 | 46 | } 47 | 48 | .nav__link { 49 | display: flex; 50 | flex-direction: column; 51 | align-items: center; 52 | font-size: var(--small-font-size); 53 | color: var(--title-color); 54 | font-weight: var(--font-medium); 55 | transition: .3s; 56 | } 57 | 58 | 59 | 60 | .nav__icon, 61 | .nav__close, 62 | .nav_toggle { 63 | display: none; 64 | } 65 | 66 | .active-link, 67 | .nav__link:hover { 68 | color: var(--title-color-dark); 69 | } 70 | 71 | .navbar__menu__list { 72 | display: none; 73 | } 74 | 75 | @media screen and (max-width : 992px) { 76 | .nav__container { 77 | margin-left: var(--mb-1-5); 78 | margin-right: var(--mb-1-5); 79 | } 80 | } 81 | 82 | @media screen and (max-width : 768px) { 83 | .header { 84 | top: initial; 85 | bottom: 0; 86 | } 87 | 88 | .nav { 89 | height: var(--header-height); 90 | } 91 | 92 | .nav__menu { 93 | position: fixed; 94 | bottom: -100%; 95 | left: 0; 96 | width: 100%; 97 | background-color: rgb(21, 20, 19); 98 | padding: 2rem 1.5rem 4rem; 99 | box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15); 100 | border-radius: 1.5rem 1.5rem 0 0; 101 | transition: 0.3s; 102 | } 103 | 104 | /****SHOW MENU ***/ 105 | .show-menu { 106 | bottom: 0; 107 | } 108 | 109 | .nav__toggle { 110 | font-size: 1.1rem; 111 | cursor: pointer; 112 | } 113 | 114 | 115 | .nav__list { 116 | display: grid; 117 | grid-template-columns: repeat(3, 1fr); 118 | gap: 2rem; 119 | } 120 | 121 | .nav__icon { 122 | font-size: 1.2rem; 123 | } 124 | 125 | .nav__close { 126 | position: absolute; 127 | right: 1.3rem; 128 | bottom: .5rem; 129 | font-size: 1.5rem; 130 | cursor: pointer; 131 | color: var(--title-color); 132 | } 133 | 134 | .nav__icon, 135 | .nav__close, 136 | .nav_toggle { 137 | display: block; 138 | } 139 | 140 | .navbar__menu__list { 141 | display: inline; 142 | } 143 | } 144 | 145 | @media screen and (max-width : 350px) { 146 | .nav__menu { 147 | padding: 2rem 0.25rem 4rem; 148 | } 149 | 150 | .nav__list { 151 | column-gap: 0; 152 | } 153 | 154 | .navbar__menu__list { 155 | display: inline; 156 | } 157 | 158 | .nav__icon{ 159 | font-size: 1rem; 160 | } 161 | } -------------------------------------------------------------------------------- /source-folio/src/Components/Data.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CssFiles/home.css" 3 | import Typewriter from "typewriter-effect" 4 | import { Link } from "react-scroll"; 5 | import { useSelector } from "react-redux"; 6 | 7 | const Data = () => { 8 | const { description, mainDesignations, name } = useSelector(state => state.portfolio.data); 9 | const listOfDesignations = mainDesignations.map((x) => {return `I'm ${x}`});; 10 | return ( 11 |
12 | {name !== "" ?

13 | I am {`${name}`} 14 | 22 | 26 | 30 | 34 | 38 | 42 | 46 | 50 | 54 | 58 | 62 | 63 |

: null} 64 | {listOfDesignations.length !== 0 ?

: null} 67 | {description !== "" ?

68 | {description} 69 |

: null} 70 | {description ? 75 | Say Hello 76 | 84 | 88 | 92 | 93 | : null} 94 |
95 | ); 96 | } 97 | 98 | export default Data; 99 | -------------------------------------------------------------------------------- /source-folio/src/Components/Education.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CssFiles/education.css"; 3 | import { useSelector } from "react-redux"; 4 | 5 | const Education = () => { 6 | const { myEducation } = useSelector(state => state.portfolio.data); 7 | return ( 8 |
9 |

10 | My Education. 11 |

12 | My education places 13 | 14 |
15 |
16 |
17 |
18 | {myEducation.map((x, i) => { 19 | return ( 20 |
21 |
22 |
{x.year}
23 |
24 |
25 |
26 |
27 |
28 |
29 |

30 | 31 | 32 | {" "} 33 | {x.institutionName} 34 | {" "} 35 | |{" "} 36 | {x.place} 37 |

38 |
39 | 40 | Aggregate - {x.aggregate} 41 | {" "} 42 | |{" "} 43 | 44 | Course - {x.coursePursuied} 45 | 46 |
47 |
48 |
49 |
50 | ); 51 | })} 52 |
53 |
54 |
55 |
56 |
57 | ); 58 | }; 59 | 60 | export default Education; 61 | -------------------------------------------------------------------------------- /source-folio/src/Components/ErrorPage.js: -------------------------------------------------------------------------------- 1 | import { useNavigate } from "react-router-dom"; 2 | 3 | function ErrorPage() { 4 | const navigate = useNavigate(); 5 | return ( 6 | <> 7 |
12 |

Error 404 - Page Not Found

15 |

We're sorry, but the page you're looking for doesn't seem to exist on our website. Please check the URL and try again. If you're still having trouble finding what you're looking for, please contact our support team at support@portfoliomaker.com.

18 | 19 |
20 | 21 | ); 22 | } 23 | 24 | export default ErrorPage; -------------------------------------------------------------------------------- /source-folio/src/Components/Experience.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AiFillCaretRight } from "react-icons/ai"; 3 | import { AiOutlineCheckCircle } from "react-icons/ai"; 4 | import { AiOutlineCloseCircle } from "react-icons/ai"; 5 | import { FaRegHeart } from "react-icons/fa"; 6 | import { useState } from "react"; 7 | import "./CssFiles/experience.css"; 8 | import { useSelector } from "react-redux"; 9 | 10 | const Experience=()=>{ 11 | const { myExperience } = useSelector(state => state.portfolio.data); 12 | function formatDate(dateString) { 13 | if(dateString === undefined) dateString = "" 14 | const months = [ 15 | "January", "February", "March", "April", "May", "June", "July", "August", 16 | "September", "October", "November", "December" 17 | ]; 18 | const dateParts = dateString.split("-"); 19 | const day = dateParts[2]; 20 | const monthIndex = parseInt(dateParts[1]) - 1; 21 | const monthName = months[monthIndex]; 22 | const year = dateParts[0]; 23 | 24 | return `${monthName !== undefined ? monthName : ''} ${year !== '' ? year : "Present"}`; 25 | } 26 | const [toggleState,setToggleState]=useState(0); 27 | 28 | const toggleTab=(index)=>{ 29 | setToggleState(index); 30 | } 31 | return ( 32 |
33 | {myExperience.length ?

34 | My Experience. 35 |

: ""} 36 | {myExperience.length ? My work Places : ""} 37 | 38 |
39 | {myExperience.map((x, i) => { 40 | return ( 41 |
45 |
46 |
47 | 48 |
49 |

50 | {x.role.split(' ').map((unit, j) => {return ( 51 | <> 52 | {unit} {(j < x.role.split(' ').length) &&
} 53 | 54 | );})} 55 |

56 |
57 | 58 | toggleTab(i+1)}> 59 | View More 60 |
61 | 62 |
63 | 64 | 65 |
72 |
73 |
{ 76 | toggleTab(0); 77 | }} 78 | > 79 | 80 |
81 |

{x.role}

82 |

83 | {x.role} at {x.company}, {formatDate(x.duration.start)} to {formatDate(x.duration.end)} 84 |

85 |
    86 | { 87 | x.workDescription.map((desc) => { 88 | return ( 89 |
  • 90 |
    91 | 92 |
    93 |

    94 | {desc} 95 |

    96 |
    • 97 | ); 98 | }) 99 | 100 | } 101 | 102 | { 103 | x.certificate && 104 |
  • 105 |
    106 | 107 |
    108 |

    109 | 113 | Letter Of Completion 114 | 115 |

    116 |
    • 117 | } 118 |
119 |
120 |
121 |
122 | ); 123 | })} 124 | 125 | 126 | 127 | 128 | 129 |
130 |
131 | ); 132 | } 133 | 134 | export default Experience; -------------------------------------------------------------------------------- /source-folio/src/Components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CssFiles/footer.css" 3 | import { AiOutlineHome } from "react-icons/ai"; 4 | import { useNavigate } from "react-router-dom"; 5 | import { useSelector, useDispatch } from "react-redux"; 6 | import axios from "axios"; 7 | import { delete_portfolio } from "../redux/features/portfolioSlice"; 8 | 9 | const Footer=()=>{ 10 | const dispatch = useDispatch(); 11 | const { user, token, isLoading } = useSelector(state => state.portfolio.auth); 12 | const { _id, user_id } = useSelector(state => state.portfolio.data); 13 | const navigate = useNavigate(); 14 | const handleDelete = async (e) => { 15 | e.preventDefault(); 16 | const config = { 17 | headers: { 18 | 'authtoken': token 19 | } 20 | } 21 | 22 | const response = await axios.post(`${process.env.REACT_APP_BACKEND_URL}/portfolio/delete/${_id}`, {}, config); 23 | if(response.data === "Success") { 24 | dispatch(delete_portfolio()) 25 | navigate("/") 26 | } else { 27 | navigate("/pageDoesn'tExist") 28 | } 29 | } 30 | return ( 31 |
32 |
33 | {!isLoading && user && token && user.uid === user_id && ( 34 | { 38 | navigate(`/edit/${_id}`); 39 | }} 40 | > 41 | Edit SourceFolio 42 | 43 | )} 44 | {!isLoading && user && token && user.uid === user_id && ( 45 | 46 | Delete SourceFolio 47 | 48 | )} 49 |
50 | {!isLoading && user && token && user.uid === user_id && ( 51 |
52 |
53 | { 57 | navigate("/"); 58 | }} 59 | > 60 | Back to home 61 | 62 | 63 | 64 | 65 |
66 |
67 | )} 68 |
69 | ); 70 | } 71 | 72 | export default Footer; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/AboutMe.js: -------------------------------------------------------------------------------- 1 | import { useSelector, useDispatch } from "react-redux"; 2 | import React, {useState} from "react"; 3 | import CustomSelect from "./CustomSelect"; 4 | import TextArea from "./TextArea"; 5 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 6 | 7 | const AboutMe = (props) => { 8 | const dispatch = useDispatch(); 9 | const { yearsOfExperience, numberOfProjects, description } = useSelector(state => state.portfolio.data); 10 | const handleinputchange=(e)=>{ 11 | const {name, value} = e.target; 12 | const obj = { 13 | [name]: value 14 | }; 15 | 16 | dispatch(update_portfolio(obj)); 17 | } 18 | const experienceLevelOptions = ['Fresher', '6+ Months', '1-2 Years', '3-5 Years', '5-10 Years', '10+ Years']; 19 | const projectNumberOptions = ['Beginner', '1-2 Projects', '3-5 Projects', '5-10 Projects', '10+ Projects']; 20 | 21 | return ( 22 |
26 |
About Me Details!
27 |
28 | 36 | 44 |
45 | 54 |
55 | ); 56 | }; 57 | 58 | export default AboutMe; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/AchievementsForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TextArea from "./TextArea"; 3 | import { IoIosAddCircleOutline, IoIosRemoveCircleOutline } from "react-icons/io"; 4 | import { useDispatch, useSelector } from "react-redux"; 5 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 6 | 7 | const AchievementsForm = (props) => { 8 | const dispatch = useDispatch(); 9 | const { myAchievements } = useSelector(state => state.portfolio.data); 10 | const handleInputChange = (e, index) => { 11 | const {value} = e.target; 12 | const list = [...myAchievements]; 13 | list[index] = value; 14 | dispatch(update_portfolio({ 15 | myAchievements: list 16 | })); 17 | } 18 | 19 | const handleRemove= (event, index)=>{ 20 | event.preventDefault(); 21 | const list=[...myAchievements]; 22 | list.splice(index,1); 23 | dispatch(update_portfolio({ 24 | myAchievements: list 25 | })); 26 | } 27 | 28 | const handleAddClick=()=>{ 29 | dispatch(update_portfolio({ 30 | myAchievements: [...myAchievements, ""] 31 | })); 32 | } 33 | 34 | return ( 35 |
39 |
40 | Achievements Details! 41 |
42 | 43 | {myAchievements.map((box, index) => { 44 | return ( 45 |
46 |
47 | 56 |
57 |
58 | {myAchievements.length - 1 === index && ( 59 | handleAddClick(e)} 62 | /> 63 | )} 64 | 65 | {myAchievements.length !== 1 && ( 66 | handleRemove(e, index)} 69 | /> 70 | )} 71 |
72 |
73 | ); 74 | })} 75 |
76 | ); 77 | }; 78 | 79 | export default AchievementsForm; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/BioForm.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from "react"; 2 | import InputBox from "./InputBox"; 3 | import TextArea from "./TextArea"; 4 | import MainDesignations from "./MainDesignations"; 5 | import { useNavigate } from "react-router-dom"; 6 | import { useSelector, useDispatch } from "react-redux"; 7 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 8 | 9 | const BioForm=(props)=>{ 10 | const dispatch = useDispatch(); 11 | const { name, profilePicture, bio, instagram, linkedIn, githubProfile } = useSelector(state => state.portfolio.data); 12 | const navigate = useNavigate(); 13 | const handleinputchange=(e)=>{ 14 | const { name, value } = e.target; 15 | dispatch(update_portfolio({ 16 | [name]: value 17 | })) 18 | } 19 | 20 | return ( 21 |
25 |
26 |
Bio Details
27 |
28 | 37 | {profilePicture === undefined || profilePicture.url === undefined || profilePicture.url === "" ? : 45 |
46 |
47 | 50 |
51 |
52 | 61 |
62 |
} 63 |
64 | 65 |
66 | 74 |
75 |
76 | 77 |
78 |
Social Handles!
79 |
80 | 89 | 98 | 107 |
108 |
109 |
110 | ); 111 | } 112 | 113 | export default BioForm; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/ContactForm.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from "react"; 2 | import InputBox from "./InputBox"; 3 | import { useDispatch, useSelector } from "react-redux"; 4 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 5 | 6 | const ContactForm = (props) => { 7 | const dispatch = useDispatch(); 8 | const { email, telephone } = useSelector(state => state.portfolio.data); 9 | const handleinputchange = (e) => { 10 | const {name, value} = e.target; 11 | const obj = { 12 | email: email, 13 | telephone: telephone 14 | }; 15 | obj[name] = value; 16 | dispatch(update_portfolio(obj)); 17 | } 18 | return ( 19 |
23 |
Contact Details!
24 |
25 | 34 | 43 |
44 |
45 | ); 46 | }; 47 | 48 | export default ContactForm; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/CustomSelect.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const CustomSelect = (props) => { 4 | const {field, id, value="", array=[], name, handleChange, index=0, noField=false} = props; 5 | return ( 6 |
7 |
8 | 14 |
15 |
16 | 23 |
24 | 25 |
26 |
27 |
28 | ); 29 | }; 30 | 31 | export default CustomSelect; 32 | -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/Duration.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import InputBox from "./InputBox"; 3 | import { useSelector, useDispatch } from "react-redux"; 4 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 5 | 6 | function Duration(props) { 7 | const dispatch = useDispatch(); 8 | const { myExperience } = useSelector(state => state.portfolio.data); 9 | 10 | const handleinputchange=(e)=>{ 11 | const {name, value} = e.target; 12 | const obj = {...myExperience[props.index].duration}; 13 | obj[name] = value; 14 | 15 | const updatedExperience = { 16 | ...myExperience[props.index], 17 | duration: {...obj} 18 | } 19 | const experience = [ 20 | ...myExperience 21 | ] 22 | experience[props.index] = updatedExperience; 23 | dispatch(update_portfolio({ 24 | myExperience: experience 25 | })) 26 | } 27 | 28 | return ( 29 | <> 30 | 31 | 32 | 33 | ); 34 | } 35 | 36 | export default Duration; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/EducationForm.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from "react"; 2 | import InputBox from "./InputBox"; 3 | import { IoIosAddCircleOutline, IoIosRemoveCircleOutline } from "react-icons/io"; 4 | import { useDispatch, useSelector } from "react-redux"; 5 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 6 | 7 | const EducationForm=(props)=>{ 8 | const dispatch = useDispatch(); 9 | const { myEducation } = useSelector(state => state.portfolio.data); 10 | const handleinputchange=(e, index)=>{ 11 | e.preventDefault(); 12 | const { name, value }= e.target; 13 | let list= [...myEducation]; 14 | const obj = { 15 | ...list[index], 16 | [name]: value 17 | } 18 | list[index] = obj; 19 | dispatch(update_portfolio({ 20 | 'myEducation': list 21 | })) 22 | } 23 | 24 | const handleremove= (event, index)=>{ 25 | event.preventDefault(); 26 | const list=[...myEducation]; 27 | list.splice(index,1); 28 | dispatch(update_portfolio({ 29 | 'myEducation': list 30 | })) 31 | } 32 | 33 | const handleaddclick=(e)=>{ 34 | e.preventDefault(); 35 | dispatch(update_portfolio({ 36 | 'myEducation': [...myEducation, {institutionName: "", place: "", year: 0, aggregate: 0, coursePursuied: ""}] 37 | })); 38 | } 39 | return ( 40 |
44 |
Education Details!
45 | {myEducation.map((x, index) => { 46 | return ( 47 |
48 | 58 | 68 | 78 |
79 |
80 | 86 |
87 |
88 | handleinputchange(e, index)} 97 | /> 98 |
99 |
100 | 110 |
111 | {myEducation.length - 1 === index && ( 112 | handleaddclick(e)} 115 | > 116 | )} 117 | { ( 118 | handleremove(e, index)} 121 | > 122 | )} 123 |
124 |
125 | ); 126 | })} 127 |
128 | {myEducation.length === 0 && ( 129 | handleaddclick(e)} 132 | > 133 | )} 134 | 135 |
136 |
137 | ); 138 | } 139 | 140 | export default EducationForm; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/ExperienceForm.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from "react"; 2 | import InputBox from "./InputBox"; 3 | import WorkDescription from "./WorkDescription"; 4 | import { IoIosAddCircleOutline, IoIosRemoveCircleOutline } from "react-icons/io"; 5 | import Duration from "./Duration"; 6 | import { useSelector, useDispatch } from "react-redux"; 7 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 8 | 9 | const ExperienceForm=(props)=>{ 10 | const dispatch = useDispatch(); 11 | const { myExperience } = useSelector(state => state.portfolio.data); 12 | 13 | const handleinputchange=(e, index)=>{ 14 | const {name, value}= e.target; 15 | const list= [...myExperience]; 16 | const obj = { 17 | ...list[index], 18 | [name]: value 19 | } 20 | list[index] = obj; 21 | dispatch(update_portfolio({ 22 | myExperience: list 23 | })); 24 | } 25 | 26 | const handleremove= (event, index)=>{ 27 | event.preventDefault(); 28 | const list=[...myExperience]; 29 | list.splice(index,1); 30 | dispatch(update_portfolio({ 31 | myExperience: list 32 | })); 33 | } 34 | 35 | const handleaddclick=()=>{ 36 | dispatch(update_portfolio({ 37 | myExperience: [...myExperience, {role: "", company: "", certificate: "", workDescription: [""], duration: {start: "", end: ""}}] 38 | })); 39 | } 40 | return ( 41 |
45 |
46 | Experience Details! 47 |
48 | {myExperience.map((x, index) => { 49 | return ( 50 | <> 51 |
52 | 62 | 63 | 66 | 67 | 77 | 87 | 91 |
92 | {myExperience.length - 1 === index && ( 93 | handleaddclick(e)} 96 | > 97 | )} 98 | { 99 | handleremove(e, index)} 102 | > 103 | } 104 |
105 |
106 | 107 | ); 108 | })} 109 |
110 | {myExperience.length === 0 && ( 111 | handleaddclick(e)} 114 | /> 115 | )} 116 |
117 |
118 | ); 119 | } 120 | 121 | export default ExperienceForm; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/InputBox.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const InputBox = (props) => { 4 | const {field, name, type, id, handleChange = ()=>{}, placeholder="", value="", index=0, isSelected = true} = props; 5 | 6 | return ( 7 |
8 |
9 | 12 |
13 | 14 | {type !== 'file' ? 15 |
16 | { 24 | handleChange(e, index); 25 | }} 26 | /> 27 |
: 28 |
29 | { 37 | handleChange(e, index); 38 | }} 39 | /> 40 |
41 | } 42 | 43 | 44 |
45 | ); 46 | }; 47 | 48 | export default InputBox; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/MainDesignations.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import InputBox from "./InputBox"; 3 | import { IoIosAddCircleOutline, IoIosRemoveCircleOutline } from "react-icons/io"; 4 | import { useDispatch, useSelector } from "react-redux"; 5 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 6 | 7 | function MainDesignations() { 8 | const { mainDesignations } = useSelector(state => state.portfolio.data); 9 | const dispatch = useDispatch(); 10 | 11 | const handleinputchange=(e, index)=>{ 12 | const {value}= e.target; 13 | const list= [...mainDesignations]; 14 | list[index]= value; 15 | dispatch(update_portfolio({ mainDesignations: list })); 16 | } 17 | 18 | const handleRemove= (event, index) => { 19 | event.preventDefault(); 20 | let list=[...mainDesignations]; 21 | list.splice(index,1); 22 | dispatch(update_portfolio({ mainDesignations: list })); 23 | } 24 | 25 | const handleAddClick=()=>{ 26 | dispatch(update_portfolio({ mainDesignations: [...mainDesignations, ""] })); 27 | } 28 | return ( 29 | <> 30 | {mainDesignations.map((x, index) => { 31 | return ( 32 |
33 |
34 | 35 |
36 |
37 | { 38 | mainDesignations.length - 1 === index && 39 | handleAddClick(e)}/> 40 | } 41 | { 42 | mainDesignations.length !== 1 && 43 | handleRemove(e, index)}/> 44 | } 45 |
46 |
47 | ); 48 | }) 49 | } 50 | 51 | 52 | 53 | ); 54 | } 55 | 56 | export default MainDesignations; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/ProfilePictureEditForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState, useEffect } from "react"; 3 | import axios from 'axios'; 4 | import useUser from "../../hooks/useUser"; 5 | import { useLocation } from "react-router-dom"; 6 | import { useNavigate } from "react-router-dom"; 7 | import InputBox from "./InputBox"; 8 | import { useDispatch, useSelector } from "react-redux"; 9 | import { set_portfolio } from "../../redux/features/portfolioSlice"; 10 | 11 | const ProfilePictureEditForm= () => { 12 | const dispatch = useDispatch(); 13 | const data = useSelector(state => state.portfolio.data); 14 | const navigate = useNavigate(); 15 | const path = useLocation().pathname; 16 | const ID = path.split("/")[3]; 17 | const {user, isLoading} = useUser(); 18 | const [Token, setToken] = useState(null); 19 | useEffect(() => {(async() => { 20 | const token = user && await user.getIdToken(); 21 | setToken(token); 22 | })(); 23 | 24 | }, [ID, user]) 25 | const handleSubmit = async (e) => { 26 | e.preventDefault(); 27 | const form = document.querySelector('.form'); 28 | 29 | const formData_empty = new FormData(form); 30 | const formData = {}; 31 | for(const key of formData_empty.entries()) { 32 | formData[key[0]] = key[1]; 33 | } 34 | 35 | const config = { 36 | headers: { 37 | 'authtoken': Token, 38 | 'Content-Type': 'multipart/form-data' 39 | }, 40 | enctype: 'multipart/form-data' 41 | } 42 | 43 | const response = await axios.post(`${process.env.REACT_APP_BACKEND_URL}/edit/profilePicture/${ID}`, formData, config) 44 | if(response.data === "Success") { 45 | const response = await axios.get( 46 | `${process.env.REACT_APP_BACKEND_URL}/api/portfolio/${ID}` 47 | ); 48 | dispatch(set_portfolio({ 49 | ...data, 50 | profilePicture: response.data.profilePicture 51 | })); 52 | navigate(`/edit/${ID}`); 53 | } else { 54 | navigate("/pageDoesn'tExist"); 55 | } 56 | } 57 | 58 | return ( 59 |
60 |
61 | Update your Profile Picture here!! 62 |
63 |
handleSubmit(e)} 67 | > 68 | 69 | 70 | 78 | 84 |
85 |
86 | ); 87 | } 88 | 89 | export default ProfilePictureEditForm; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/ProgrammingSkills.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import InputBox from "./InputBox"; 3 | import CustomSelect from "./CustomSelect"; 4 | import { 5 | IoIosAddCircleOutline, 6 | IoIosRemoveCircleOutline, 7 | } from "react-icons/io"; 8 | import { useSelector, useDispatch } from "react-redux"; 9 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 10 | 11 | const ProgrammingSkills = () => { 12 | const dispatch = useDispatch(); 13 | const { mySkills } = useSelector(state => state.portfolio.data); 14 | const handleinputchange = (e, index) => { 15 | const { name, value } = e.target; 16 | const listOfProgrammingSkills = [...mySkills.programmingSkills]; 17 | const obj = { 18 | ...listOfProgrammingSkills[index], 19 | [name]: value 20 | } 21 | listOfProgrammingSkills[index] = obj; 22 | dispatch(update_portfolio({ 23 | mySkills: { 24 | ...mySkills, 25 | programmingSkills: listOfProgrammingSkills 26 | } 27 | })) 28 | }; 29 | 30 | const handleremove = (event, index) => { 31 | event.preventDefault(); 32 | const listOfProgrammingSkills = [...mySkills.programmingSkills]; 33 | listOfProgrammingSkills.splice(index, 1); 34 | //listOfProgrammingSkills[index] = obj; 35 | dispatch(update_portfolio({ 36 | mySkills: { 37 | ...mySkills, 38 | programmingSkills: listOfProgrammingSkills 39 | } 40 | })) 41 | }; 42 | 43 | const handleaddclick = () => { 44 | dispatch(update_portfolio({ 45 | mySkills: { 46 | ...mySkills, 47 | programmingSkills: [...mySkills.programmingSkills, { 48 | skillName: "", 49 | skillLevel: "" 50 | }] 51 | } 52 | })) 53 | }; 54 | const skillLevelOptions = ["Expert", "Intermediate", "Beginner"]; 55 | return ( 56 | <> 57 | {mySkills.programmingSkills.map((x, index) => { 58 | return ( 59 | <> 60 |
61 | 71 | 80 |
81 | {mySkills.programmingSkills.length - 1 === index && ( 82 | handleaddclick(e)} 85 | > 86 | )} 87 | {mySkills.programmingSkills.length !== 1 && ( 88 | handleremove(e, index)} 91 | > 92 | )} 93 |
94 |
95 | 96 | ); 97 | })} 98 | 99 | ); 100 | }; 101 | 102 | export default ProgrammingSkills; 103 | -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/ProjectDescription.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TextArea from "./TextArea"; 3 | import { IoIosAddCircleOutline, IoIosRemoveCircleOutline } from "react-icons/io"; 4 | import { useSelector, useDispatch } from "react-redux"; 5 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 6 | 7 | const ProjectDescription = (props) => { 8 | const dispatch = useDispatch(); 9 | const { myProjects } = useSelector(state => state.portfolio.data); 10 | 11 | const handleinputchange=(e, index)=>{ 12 | e.preventDefault(); 13 | const {value}= e.target; 14 | const list= [...myProjects]; 15 | const listOfDescription = [...list[props.index].description]; 16 | listOfDescription[index] = value; 17 | const project = { 18 | ...list[props.index], 19 | description: listOfDescription 20 | } 21 | list[props.index] = project 22 | dispatch(update_portfolio({ 23 | myProjects: list 24 | })) 25 | } 26 | 27 | const handleremove= (event, index)=>{ 28 | event.preventDefault(); 29 | const list=[...myProjects]; 30 | const projectDescriptionList = [...myProjects[props.index].description] 31 | projectDescriptionList.splice(index,1); 32 | list[props.index] = { 33 | ...myProjects[props.index], 34 | description: projectDescriptionList 35 | } 36 | dispatch(update_portfolio({ 37 | myProjects: list 38 | })) 39 | } 40 | 41 | const handleaddclick=()=>{ 42 | const list=[...myProjects]; 43 | const projectDescriptionList = [...myProjects[props.index].description, ""] 44 | 45 | list[props.index] = { 46 | ...myProjects[props.index], 47 | description: projectDescriptionList 48 | } 49 | dispatch(update_portfolio({ 50 | myProjects: list 51 | })) 52 | } 53 | 54 | 55 | return ( 56 | <> 57 | {myProjects[props.index].description.map((x, i) => { 58 | return ( 59 | <> 60 |
61 |
62 | 69 |
70 |
71 | { 72 | myProjects[props.index].description.length - 1 === i && 73 | handleaddclick(e)}/> 74 | } 75 | { 76 | myProjects[props.index].description.length !== 1 && 77 | handleremove(e, i)}/> 78 | } 79 | 80 |
81 |
82 | 83 | ); 84 | })} 85 | 86 | 87 | ); 88 | } 89 | 90 | export default ProjectDescription; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/ProjectsForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import InputBox from "./InputBox"; 3 | import { IoIosAddCircleOutline, IoIosRemoveCircleOutline } from "react-icons/io"; 4 | import ProjectDescription from "./ProjectDescription"; 5 | import { useDispatch, useSelector } from "react-redux"; 6 | import { update_portfolio } from "../../redux/features/portfolioSlice"; 7 | 8 | const ProjectsForm = (props) => { 9 | const dispatch = useDispatch(); 10 | const { myProjects } = useSelector(state => state.portfolio.data); 11 | 12 | const handleinputchange=(e, index)=>{ 13 | e.preventDefault(); 14 | const {name, value}= e.target; 15 | const list= [...myProjects]; 16 | const project = { 17 | ...list[index], 18 | [name]: value 19 | } 20 | list[index] = project; 21 | dispatch(update_portfolio({ 22 | myProjects: list 23 | })); 24 | } 25 | 26 | const handleremove= (event, index)=>{ 27 | event.preventDefault(); 28 | const list=[...myProjects]; 29 | list.splice(index,1); 30 | dispatch(update_portfolio({ 31 | myProjects: list 32 | })); 33 | } 34 | 35 | const handleaddclick=()=>{ 36 | dispatch(update_portfolio({ 37 | myProjects: [...myProjects, {projectName: "", gitHubLink: "", projectLink: "", description: [""]}] 38 | })); 39 | } 40 | return ( 41 | <> 42 |
46 |
47 | Projects Details! 48 |
49 | {myProjects.map((x, index) => { 50 | return ( 51 | <> 52 |
53 | 63 |
64 | 67 |
68 | 79 | 89 |
90 |
91 | {myProjects.length - 1 === index && ( 92 | handleaddclick(e)} 95 | > 96 | )} 97 | { 98 | handleremove(e, index)} 101 | > 102 | } 103 |
104 | 105 | ); 106 | })} 107 |
108 | {myProjects.length === 0 && ( 109 | handleaddclick(e)} 112 | /> 113 | )} 114 |
115 |
116 | 117 | ); 118 | } 119 | 120 | export default ProjectsForm; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/SkillsForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ProgrammingSkills from "./ProgrammingSkills"; 3 | import ToolsAndFrameworks from "./ToolsAndFrameworks"; 4 | 5 | const SkillsForm = (props) => { 6 | 7 | return ( 8 |
12 | 13 |
14 |
Programming Skills Details
15 | 16 |
17 |
18 |
Tools and Frameworks Details
19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default SkillsForm; -------------------------------------------------------------------------------- /source-folio/src/Components/Form-Components/TextArea.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const TextArea = (props) => { 4 | const {field, id, name, handleChange, placeholder="", value="", index=0} = props; 5 | return ( 6 |
7 |
8 | 14 |
15 |
16 | 78 |
79 |
80 | { 81 | workDescription.length - 1 === i && 82 | handleaddclick(e)}/> 83 | } 84 | { 85 | workDescription.length !== 1 && 86 | handleremove(e, i)}/> 87 | } 88 |
89 |
90 | 91 | ); 92 | })} 93 | 94 | ); 95 | } 96 | 97 | export default WorkDescription; -------------------------------------------------------------------------------- /source-folio/src/Components/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Data from "./Data"; 3 | import "./CssFiles/home.css" 4 | import Social from "./Social"; 5 | import { useSelector } from "react-redux"; 6 | 7 | const Home=()=>{ 8 | 9 | const { profilePicture } = useSelector(state => state.portfolio.data); 10 | function getThumbnail(url) { 11 | return url.replace('/upload', '/upload/c_scale,h_300,w_300') 12 | } 13 | 14 | return( 15 |
16 |
17 |
18 | 19 | 20 |
21 | 22 | 23 |
24 |
25 |
26 | ) 27 | } 28 | 29 | export default Home; -------------------------------------------------------------------------------- /source-folio/src/Components/Info.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BiAward, BiBriefcase, BiSupport } from "react-icons/bi"; 3 | import "./CssFiles/aboutme.css"; 4 | 5 | const Info=(props)=>{ 6 | return ( 7 |
8 |
9 | 10 |

Experience

11 | {props.yearsOfExperience} 12 |
13 | 14 |
15 | 16 |

Completed

17 | {props.numberOfProjects} 18 |
19 | 20 | {/*
21 | 22 |

Support

23 | Online 24/7 24 |
*/} 25 |
26 | ); 27 | } 28 | 29 | export default Info -------------------------------------------------------------------------------- /source-folio/src/Components/Information.js: -------------------------------------------------------------------------------- 1 | import { FaRegShareSquare } from "react-icons/fa"; 2 | import "./CssFiles/information.css" 3 | import copy from "copy-to-clipboard" 4 | import { useState } from "react"; 5 | import { ImCancelCircle } from "react-icons/im"; 6 | 7 | function Information() { 8 | const [visible, setVisible] = useState(false); 9 | 10 | const path = window.location.href; 11 | function onClickCopy(text) { 12 | copy(text); 13 | } 14 | return ( 15 | 16 |
17 |
31 | 32 | ); 33 | } 34 | 35 | export default Information; -------------------------------------------------------------------------------- /source-folio/src/Components/Loading.js: -------------------------------------------------------------------------------- 1 | import "./CssFiles/loading.css"; 2 | 3 | function Loading() { 4 | return ( 5 |
6 |
7 |
8 |
Loading...
9 |
10 |
11 | ); 12 | } 13 | 14 | export default Loading; -------------------------------------------------------------------------------- /source-folio/src/Components/Login.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { useNavigate } from "react-router-dom"; 3 | import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth"; 4 | 5 | const Login = (props) => { 6 | const [email, setEmail] = useState(""); 7 | const [password, setPassword] = useState(""); 8 | const [confirmPassword, setConfirmPassword] = useState(""); 9 | const [error, setError] = useState(""); 10 | 11 | const navigate = useNavigate(); 12 | 13 | const logIn = async (e) => { 14 | e.preventDefault(); 15 | try { 16 | if(!email || !password) { 17 | setError("All fields are mandatory"); 18 | return; 19 | } 20 | await signInWithEmailAndPassword(getAuth(), email, password); 21 | navigate("/"); 22 | } catch (err) { 23 | setError(err.message); 24 | } 25 | }; 26 | 27 | const createAccount = async (e) => { 28 | e.preventDefault(); 29 | try { 30 | if(!email||!password||!confirmPassword){ 31 | setError("All fields are mandatory") 32 | return;; 33 | } 34 | if (password !== confirmPassword) { 35 | setError("Password and confirm password do not match"); 36 | return; 37 | } 38 | 39 | await createUserWithEmailAndPassword(getAuth(), email, password); 40 | navigate("/"); 41 | } catch (err) { 42 | setError(err.message); 43 | } 44 | }; 45 | 46 | const clear = () => { 47 | setError(""); 48 | } 49 | 50 | return ( 51 |
52 |
53 | 54 |
55 |
56 | 57 | setEmail(e.target.value)} required /> 59 | setPassword(e.target.value)} required /> 61 | {error!==""?
*{error}
:""} 62 | 63 | 64 |
65 |
66 | 80 | 81 |
82 |
83 | ); 84 | }; 85 | 86 | export default Login; 87 | -------------------------------------------------------------------------------- /source-folio/src/Components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from "react"; 2 | import "./CssFiles/navbar.css" 3 | import { RxCross2 } from "react-icons/rx"; 4 | import { AiOutlineMenu } from "react-icons/ai"; 5 | import { Link } from "react-scroll"; 6 | import { useSelector } from "react-redux"; 7 | 8 | const NavBar=()=>{ 9 | const { name, myProjects, myEducation, myExperience } = useSelector(state => state.portfolio.data) 10 | const [Toggle,showMenu]=useState(false); 11 | const [onFocus, setOnFocus] = useState("aboutme") 12 | return ( 13 |
17 | 178 |
179 | ); 180 | } 181 | 182 | export default NavBar; -------------------------------------------------------------------------------- /source-folio/src/Components/Portfolio.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import NavBar from "./NavBar"; 3 | import Home from "./Home"; 4 | import "../App.css"; 5 | import Aboutme from "./Aboutme.js"; 6 | import Skills from "./Skills"; 7 | import Achivements from "./Achivements"; 8 | import { useLocation } from "react-router-dom"; 9 | import Experience from "./Experience"; 10 | import Projects from "./Projects"; 11 | import Contact from "./Contact"; 12 | import Education from "./Education"; 13 | import "./CssFiles/portfolio.css"; 14 | import "../index.css"; 15 | import Footer from "./Footer"; 16 | import axios from "axios"; 17 | import { useDispatch } from "react-redux"; 18 | import { set_portfolio } from "../redux/features/portfolioSlice.js"; 19 | 20 | const Portfolio = () => { 21 | const [isLoading, setIsLoading] = useState(true) 22 | const [data, setData] = useState({myExperience: [], myProjects: [], myEducation: []}); 23 | const dispatch = useDispatch(); 24 | //const data = useSelector(state => state.portfolio.data); 25 | 26 | const path = useLocation().pathname; 27 | const ID = path.split("/")[2]; 28 | 29 | useEffect(() => { 30 | 31 | (async () => { 32 | const response = await axios.get( 33 | `${process.env.REACT_APP_BACKEND_URL}/api/portfolio/${ID}` 34 | ); 35 | if (typeof response.data === "object") { 36 | const portfolio = response.data; 37 | dispatch(set_portfolio(portfolio)); 38 | setIsLoading(false); 39 | setData(portfolio); 40 | } 41 | })(); 42 | 43 | }, []) 44 | 45 | return ( 46 | <> 47 |
48 | {!isLoading && ( 49 | 50 | )} 51 | {!isLoading && ( 52 |
53 | 54 |
55 | 56 |
57 | {data.myEducation.length ? <> 58 |
: null} 59 | {data.myExperience.length ? ( 60 | <> 61 | 62 |
63 | 64 | ) : ( 65 | null 66 | )} 67 | {data.myProjects.length ? (<> 68 | 69 |
70 | 71 | ) : ( 72 | null 73 | )} 74 | 75 |
76 | 77 |
78 | 79 |
80 |
81 | )} 82 |
83 | 84 | ); 85 | }; 86 | 87 | export default Portfolio; 88 | -------------------------------------------------------------------------------- /source-folio/src/Components/Preview/NavBar.js: -------------------------------------------------------------------------------- 1 | import React,{ useState } from "react"; 2 | import { RxCross2 } from "react-icons/rx"; 3 | import { Link } from "react-scroll"; 4 | import { useSelector } from "react-redux"; 5 | 6 | const NavBar = () => { 7 | const { name, myEducation, myExperience, myProjects } = useSelector(state => state.portfolio.data); 8 | const handleClickScroll = (name) => { 9 | const element = document.getElementById(name); 10 | if (element) { 11 | element.scrollIntoView({ behavior: 'smooth' }); 12 | } 13 | }; 14 | 15 | const [Toggle,showMenu]=useState(false); 16 | const [onFocus, setOnFocus] = useState("aboutme") 17 | return ( 18 |
21 | 122 |
123 | ); 124 | } 125 | 126 | export default NavBar; -------------------------------------------------------------------------------- /source-folio/src/Components/Preview/Preview.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import NavBar from "./NavBar.js"; 3 | import Home from "../Home.js"; 4 | import "../../App.css"; 5 | import Aboutme from "../Aboutme.js"; 6 | import Skills from "../Skills.js"; 7 | import Achivements from "../Achivements.js"; 8 | import Experience from "../Experience.js"; 9 | import Projects from "../Projects.js"; 10 | import Contact from "../Contact.js"; 11 | import Education from "../Education.js"; 12 | import "../CssFiles/portfolio.css"; 13 | import "../../index.css"; 14 | import { useSelector } from "react-redux"; 15 | 16 | const Preview = () => { 17 | const { myProjects, myEducation, myExperience } = useSelector(state => state.portfolio.data); 18 | 19 | return ( 20 |
21 | 22 |
23 | 24 |
25 | 26 |
27 | {myEducation.length ? <> 28 |
: null} 29 | {myExperience.length ? ( 30 | <> 31 | 32 |
33 | 34 | ) : ( 35 | null 36 | )} 37 | {myProjects.length ? (<> 38 | 39 |
40 | 41 | ) : ( 42 | null 43 | )} 44 | 45 |
46 | 47 |
48 | 49 |
50 |
51 | ); 52 | }; 53 | 54 | export default Preview; 55 | -------------------------------------------------------------------------------- /source-folio/src/Components/ProgrammingSkills.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BiBadgeCheck } from "react-icons/bi"; 3 | import "./CssFiles/skills.css" 4 | 5 | const Programmingskills=(props)=>{ 6 | return ( 7 |
8 |

Programming Languages

9 | 10 |
11 |
12 | {props.data.map((x, i) => { 13 | return ( 14 |
15 | 16 |
17 |

{x.skillName}

18 | {x.skillLevel} 19 |
20 |
21 | ); 22 | }) 23 | } 24 |
25 |
26 |
27 | ); 28 | } 29 | 30 | export default Programmingskills; -------------------------------------------------------------------------------- /source-folio/src/Components/Projects.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CssFiles/project.css"; 3 | 4 | import { AiFillCaretRight } from "react-icons/ai"; 5 | import { AiOutlineCheckCircle } from "react-icons/ai"; 6 | import { AiOutlineCloseCircle } from "react-icons/ai"; 7 | import { FaRegHeart } from "react-icons/fa"; 8 | import { useState } from "react"; 9 | import { useSelector } from "react-redux"; 10 | 11 | // import backgroundd from "../asset/image/back.jpg"; 12 | import Carousel from "react-multi-carousel"; 13 | import "react-multi-carousel/lib/styles.css"; 14 | import "./CssFiles/experience.css" 15 | 16 | const Projects=()=>{ 17 | const { myProjects } = useSelector(state => state.portfolio.data); 18 | const responsive = { 19 | superLargeDesktop: { 20 | // the naming can be any, depends on you. 21 | breakpoint: { max: 4000, min: 3000 }, 22 | items: 5, 23 | }, 24 | desktop: { 25 | breakpoint: { max: 3000, min: 1024 }, 26 | items: 3, 27 | }, 28 | tablet: { 29 | breakpoint: { max: 1024, min: 464 }, 30 | items: 2, 31 | }, 32 | mobile: { 33 | breakpoint: { max: 464, min: 0 }, 34 | items: 1, 35 | }, 36 | }; 37 | 38 | const [toggleState, setToggleState] = useState(0); 39 | 40 | const toggleTab = (index) => { 41 | setToggleState(index); 42 | }; 43 | 44 | return ( 45 |
46 |
47 |

48 | My Projects. 49 |

50 | My work 51 | 52 | { 53 | myProjects.map((x, i) => { 54 | return ( 55 |
56 |
57 |
58 | 59 |
60 |

61 | {x.projectName.split(" ").map((unit, j) => { 62 | return ( 63 | <> 64 | {unit} {j % 2 === 1 && j < x.projectName.split(" ").length &&
} 65 | 66 | ); 67 | })} 68 |

69 |
70 | 71 | toggleTab(i + 1)} 74 | > 75 | View More 76 |
77 | 78 |
79 | 80 | 81 |
82 | {x.projectLink && ( 83 | 91 | )} 92 | 93 | {x.gitHubLink && ( 94 | 102 | )} 103 |
104 |
105 | ); 106 | }) 107 | 108 | } 109 | 110 | 111 | 112 | {(toggleState !== 0) &&
119 |
120 |
{ 123 | toggleTab(0); 124 | }} 125 | > 126 | 127 |
128 |

{myProjects[toggleState-1].projectName}

129 | 130 |
    131 | { 132 | myProjects[toggleState-1].description.map((desc) => { 133 | return ( 134 |
  • 135 |
    136 | 137 |
    138 |

    139 | {desc} 140 |

    141 |
    • 142 | ); 143 | }) 144 | 145 | } 146 |
147 |
148 |
} 149 |
150 | 151 |
152 | ); 153 | } 154 | 155 | export default Projects; -------------------------------------------------------------------------------- /source-folio/src/Components/Skills.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Toolsandframework from "./ToolsAndFramework"; 3 | import Programmingskills from "./ProgrammingSkills"; 4 | import "./CssFiles/skills.css" 5 | import { useSelector } from "react-redux"; 6 | 7 | const Skills=()=>{ 8 | const { mySkills } = useSelector(state => state.portfolio.data); 9 | return ( 10 |
11 |

12 | My Skills. 13 |

14 | My Technical Skills 15 | 16 |
17 | 18 | 19 |
20 |
21 | ); 22 | } 23 | 24 | export default Skills; -------------------------------------------------------------------------------- /source-folio/src/Components/Social.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SiInstagram } from "react-icons/si"; 3 | import { SiLinkedin } from "react-icons/si"; 4 | import { SiGithub } from "react-icons/si"; 5 | import "./CssFiles/home.css" 6 | import { useSelector } from "react-redux"; 7 | import Information from "./Information"; 8 | 9 | const Social=()=>{ 10 | const { token, user, isLoading } = useSelector(state => state.portfolio.auth); 11 | const { user_id, instagram, linkedIn, githubProfile } = useSelector(state => state.portfolio.data); 12 | return ( 13 |
14 | {!isLoading && user && token && user.uid == user_id && } 15 | 16 | {instagram !== "" ? 21 | 22 | : null} 23 | 24 | {linkedIn !== "" ? 29 | 30 | : null} 31 | 32 | {githubProfile !== "" ? 37 | 38 | : null} 39 |
40 | ); 41 | } 42 | 43 | export default Social; -------------------------------------------------------------------------------- /source-folio/src/Components/ToolsAndFramework.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BiBadgeCheck } from "react-icons/bi"; 3 | import "./CssFiles/skills.css" 4 | 5 | const Toolsandframework = (props) => { 6 | return ( 7 |
8 |

Tools and Frameworks

9 | 10 |
11 |
12 | {props.data.map((x, i) => { 13 | return ( 14 |
15 | 16 |
17 |

{x.toolName}

18 | {x.toolLevel} 19 |
20 |
21 | ); 22 | }) 23 | 24 | } 25 | 26 | 27 |
28 |
29 |
30 | ); 31 | } 32 | 33 | export default Toolsandframework; 34 | -------------------------------------------------------------------------------- /source-folio/src/asset/font/CentraNo2-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/font/CentraNo2-Bold.ttf -------------------------------------------------------------------------------- /source-folio/src/asset/font/CentraNo2-Book.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/font/CentraNo2-Book.ttf -------------------------------------------------------------------------------- /source-folio/src/asset/font/CentraNo2-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/font/CentraNo2-Medium.ttf -------------------------------------------------------------------------------- /source-folio/src/asset/image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/image/2.jpg -------------------------------------------------------------------------------- /source-folio/src/asset/image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/image/3.jpg -------------------------------------------------------------------------------- /source-folio/src/asset/image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/image/4.jpg -------------------------------------------------------------------------------- /source-folio/src/asset/image/Moon.svg: -------------------------------------------------------------------------------- 1 | 3 | -------------------------------------------------------------------------------- /source-folio/src/asset/image/Sun.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /source-folio/src/asset/image/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/image/about.jpg -------------------------------------------------------------------------------- /source-folio/src/asset/image/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/image/back.jpg -------------------------------------------------------------------------------- /source-folio/src/asset/image/banner-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/image/banner-bg.png -------------------------------------------------------------------------------- /source-folio/src/asset/image/files.svg: -------------------------------------------------------------------------------- 1 | 9 | 13 | 17 | 21 | 25 | -------------------------------------------------------------------------------- /source-folio/src/asset/image/hand.svg: -------------------------------------------------------------------------------- 1 | 9 | 13 | 17 | 21 | 25 | 29 | 33 | 37 | 41 | 45 | 49 | -------------------------------------------------------------------------------- /source-folio/src/asset/image/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumit-6/SourceFolio/70af829ff888468588c201f2a3fab752641e3612/source-folio/src/asset/image/profile.jpg -------------------------------------------------------------------------------- /source-folio/src/asset/image/send.svg: -------------------------------------------------------------------------------- 1 | 9 | 13 | 17 | -------------------------------------------------------------------------------- /source-folio/src/hooks/useUser.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { getAuth, onAuthStateChanged } from 'firebase/auth'; 3 | 4 | const useUser = () => { 5 | const [user, setUser] = useState(null); 6 | const [isLoading, setIsLoading] = useState(true); 7 | 8 | useEffect(() => { 9 | const unsubscribe = onAuthStateChanged(getAuth(), user => { 10 | setUser(user); 11 | setIsLoading(false); 12 | }); 13 | 14 | return unsubscribe; 15 | }, []); 16 | 17 | return { user, isLoading }; 18 | } 19 | 20 | export default useUser; -------------------------------------------------------------------------------- /source-folio/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .navButton:hover, .navButton:focus{ 6 | background-color:rgb(219, 144, 5) ; 7 | } 8 | 9 | .navButton:visited{ 10 | background-color: rgb(219, 144, 5); 11 | } 12 | 13 | .navButton:active{ 14 | background-color: rgb(219, 144, 5); 15 | } 16 | :root{ 17 | --back-color : #82daee; 18 | } 19 | 20 | [data-theme="dark"] 21 | { 22 | --back-color : #18162b; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 28 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 29 | sans-serif; 30 | -webkit-font-smoothing: antialiased; 31 | -moz-osx-font-smoothing: grayscale; 32 | } 33 | 34 | code { 35 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 36 | monospace; 37 | } 38 | -------------------------------------------------------------------------------- /source-folio/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { BrowserRouter } from 'react-router-dom'; 7 | // Import the functions you need from the SDKs you need 8 | import { initializeApp } from "firebase/app"; 9 | import { getAuth } from "firebase/auth"; 10 | import { Provider } from 'react-redux'; 11 | import { store, persister } from './redux/store'; 12 | 13 | import { PersistGate } from 'redux-persist/integration/react'; 14 | // TODO: Add SDKs for Firebase products that you want to use 15 | // https://firebase.google.com/docs/web/setup#available-libraries 16 | 17 | // Your web app's Firebase configuration 18 | const firebaseConfig = { 19 | apiKey: "AIzaSyCVUr8VeU9CLWNEvPaAEggP8mF--uc1v7I", 20 | authDomain: "reactform-f9038.firebaseapp.com", 21 | projectId: "reactform-f9038", 22 | storageBucket: "reactform-f9038.appspot.com", 23 | messagingSenderId: "688060008187", 24 | appId: "1:688060008187:web:b889ce7a4cdeae23d9525e", 25 | }; 26 | 27 | // Initialize Firebase 28 | const app = initializeApp(firebaseConfig); 29 | 30 | const root = ReactDOM.createRoot(document.getElementById('root')); 31 | root.render( 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | 43 | // If you want to start measuring performance in your app, pass a function 44 | // to log results (for example: reportWebVitals(console.log)) 45 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 46 | reportWebVitals(); 47 | export const auth = getAuth(app); 48 | export default app; -------------------------------------------------------------------------------- /source-folio/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source-folio/src/redux/features/portfolioSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | const initialState = { 3 | loading: true, 4 | error: '', 5 | data: { 6 | _id: "", 7 | user_id: "", 8 | name: "", 9 | bio: "", 10 | githubProfile: "", 11 | numberOfProjects: "", 12 | yearsOfExperience: "", 13 | mainDesignations: [""], 14 | description: "", 15 | profilePicture: { 16 | url: "", 17 | filename: "", 18 | _id: "" 19 | }, 20 | myEducation: [], 21 | myExperience: [], 22 | myProjects: [], 23 | mySkills: { 24 | programmingSkills: [{skillName: "", skillLevel: ""}], 25 | toolsAndFrameworks: [{toolName: "", toolLevel: ""}], 26 | _id: "" 27 | }, 28 | myAchievements: [""], 29 | linkedIn: "", 30 | email: "", 31 | instagram: "", 32 | telephone: 0, 33 | __v: 0, 34 | updatedAt: "" 35 | }, 36 | auth: { 37 | user: null, 38 | token: null, 39 | isLoading: true 40 | } 41 | } 42 | 43 | export const portfolioSlice = createSlice({ 44 | name: 'portfolio', 45 | initialState, 46 | reducers: { 47 | login: (state, action) => { 48 | 49 | return { 50 | ...state, 51 | auth: action.payload, 52 | loading: false 53 | } 54 | }, 55 | 56 | logout: (state, action) => { 57 | return { 58 | ...state, 59 | auth: { 60 | user: null, 61 | token: null, 62 | isLoading: null 63 | }, 64 | data: { ...initialState.data }, 65 | loading: false 66 | } 67 | }, 68 | 69 | set_portfolio: (state, action) => { 70 | return { 71 | ...state, 72 | data: action.payload, 73 | loading: false 74 | } 75 | }, 76 | 77 | update_portfolio: (state, action) => { 78 | return { 79 | ...state, 80 | data: { 81 | ...state.data, 82 | ...action.payload 83 | }, 84 | loading: false 85 | } 86 | }, 87 | 88 | user_not_found: (state, action) => { 89 | return { 90 | ...state, 91 | data: { 92 | ...initialState.data 93 | }, 94 | auth: { 95 | user: null, 96 | token: null, 97 | isLoading: null 98 | }, 99 | error: action.payload 100 | } 101 | }, 102 | 103 | delete_portfolio: (state, action) => { 104 | return { 105 | ...state, 106 | data: { 107 | ...initialState.data 108 | } 109 | } 110 | } 111 | } 112 | }); 113 | 114 | export const {login, logout, set_portfolio, update_portfolio, user_not_found, delete_portfolio} = portfolioSlice.actions; 115 | export default portfolioSlice.reducer; -------------------------------------------------------------------------------- /source-folio/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import portfolioReducer from './features/portfolioSlice'; 3 | import { combineReducers } from '@reduxjs/toolkit'; 4 | import { persistReducer, persistStore } from 'redux-persist'; 5 | import storage from 'redux-persist/lib/storage'; 6 | const rootReducer = combineReducers({ 7 | portfolio: portfolioReducer 8 | }) 9 | const persistConfig = { 10 | key: 'root', 11 | storage, 12 | version: 1 13 | } 14 | const persistedReducer = persistReducer(persistConfig, rootReducer) 15 | 16 | export const store = configureStore({ 17 | reducer: persistedReducer, 18 | middleware: (getDefaultMiddleware) => getDefaultMiddleware({ 19 | serializableCheck: false, 20 | }), 21 | }); 22 | 23 | export const persister = persistStore(store) -------------------------------------------------------------------------------- /source-folio/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /source-folio/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /source-folio/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{js,jsx,ts,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } 11 | 12 | --------------------------------------------------------------------------------