9 | 10 | 11 | 12 | ) 13 | } -------------------------------------------------------------------------------- /pages/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { } from "react"; 2 | // import Builder from "./builder"; 3 | import Hero from "../components/hero/Hero"; 4 | 5 | const ResumeBuilder = () => { 6 | return ( 7 | <> 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default ResumeBuilder; 14 | 15 | -------------------------------------------------------------------------------- /pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /components/preview/Language.jsx: -------------------------------------------------------------------------------- 1 | const Language = ({ title, languages }) => { 2 | return ( 3 | languages.length > 0 && ( 4 |

5 |

6 | {title} 7 |

8 |

{languages.join(", ")}

9 |

10 | ) 11 | ); 12 | }; 13 | 14 | export default Language; -------------------------------------------------------------------------------- /components/utility/DateRange.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | const DateRange = ({ startYear, endYear, id }) => { 4 | const start = new Date(startYear); 5 | const end = new Date(endYear); 6 | return ( 7 |

8 | {start.toLocaleString('default', { month: 'short' })}, {start.getFullYear()} - {end != "Invalid Date" ? end.toLocaleString('default', { month: 'short' }) + ', ' + end.getFullYear() : 'Present'} 9 |

10 | ); 11 | }; 12 | 13 | export default DateRange; -------------------------------------------------------------------------------- /.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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | .env 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /components/utility/WinPrint.js: -------------------------------------------------------------------------------- 1 | import { MdPictureAsPdf } from "react-icons/md"; 2 | 3 | const WinPrint = () => { 4 | 5 | const print = () => { 6 | window.print(); 7 | }; 8 | 9 | return ( 10 | 17 | ); 18 | }; 19 | 20 | export default WinPrint; 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /components/preview/Certification.jsx: -------------------------------------------------------------------------------- 1 | const Certification = ({ title, certifications }) => { 2 | if (!certifications || certifications.length === 0) { 3 | return null; 4 | } 5 | 6 | return ( 7 |

8 |

{title}

9 |

12 | {certification.name} 13 | {certification.issuer && ( 14 | - {certification.issuer} 15 | )} 16 |

19 |

20 | ); 21 | }; 22 | 23 | export default Certification; -------------------------------------------------------------------------------- /components/form/FormButton.jsx: -------------------------------------------------------------------------------- 1 | import { MdAddCircle, MdRemoveCircle } from "react-icons/md"; 2 | 3 | const FormButton = ({ size, remove, add }) => { 4 | 5 | return ( 6 |

7 | 12 | { 13 | size > 0 && 14 | 19 | } 20 |

21 | ) 22 | } 23 | 24 | export default FormButton; -------------------------------------------------------------------------------- /components/form/FormCP.jsx: -------------------------------------------------------------------------------- 1 | import React, { } from "react"; 2 | import { BsFillArrowRightCircleFill, BsFillArrowLeftCircleFill } from "react-icons/bs" 3 | 4 | const FormCP = ({ formClose, setFormClose }) => { 5 | return ( 6 | 13 | ) 14 | } 15 | 16 | export default FormCP; 17 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | colors: { 12 | background: "var(--background)", 13 | foreground: "var(--foreground)", 14 | }, 15 | animation: { 16 | shimmer: "shimmer 2s linear infinite" 17 | }, 18 | keyframes: { 19 | shimmer: { 20 | from: { 21 | backgroundPosition: "0 0" 22 | }, 23 | to: { 24 | backgroundPosition: "-200% 0" 25 | } 26 | } 27 | } 28 | }, 29 | }, 30 | plugins: [], 31 | }; 32 | export default config; 33 | -------------------------------------------------------------------------------- /components/preview/ContactInfo.jsx: -------------------------------------------------------------------------------- 1 | import React, { } from "react"; 2 | 3 | const ContactInfo = ({ mainclass, linkclass, teldata, emaildata, addressdata, telicon, emailicon, addressicon }) => { 4 | return ( 5 |

6 | 9 | {telicon} {teldata} 10 | 11 | 14 | {emailicon} {emaildata} 15 | 16 |

19 | {addressicon} {addressdata} 20 |

21 |

22 | ); 23 | } 24 | 25 | export default ContactInfo; -------------------------------------------------------------------------------- /components/preview/Skills.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { ResumeContext } from "../../pages/builder"; 3 | 4 | const Skills = ({ title, skills }) => { 5 | const { resumeData, setResumeData } = useContext(ResumeContext); 6 | 7 | const handleTitleChange = (e) => { 8 | const newSkills = [...resumeData.skills]; 9 | newSkills.find((skillType) => skillType.title === title).title = e.target.innerText; 10 | setResumeData({ ...resumeData, skills: newSkills }); 11 | }; 12 | 13 | return ( 14 | skills.length > 0 && ( 15 | <> 16 |

17 | {title} 18 |

19 |

{skills.join(", ")}

20 | 21 | ) 22 | ); 23 | }; 24 | 25 | export default Skills; -------------------------------------------------------------------------------- /components/form/Summary.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { ResumeContext } from "../../pages/builder"; 3 | import AISuggestionButton from '../ai/AISuggestionButton'; 4 | 5 | const Summary = () => { 6 | const { resumeData, handleChange } = useContext(ResumeContext); 7 | 8 | return ( 9 |

10 |

11 |

Summary

12 | 16 |

17 |

18 |

26 |       </div>
27 |     </div>
28 |   );
29 | };
30 | 
31 | export default Summary;
32 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "free-resume-maker",
 3 |   "version": "0.3.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@google/generative-ai": "^0.21.0",
13 |     "@tsparticles/engine": "^3.8.1",
14 |     "@tsparticles/react": "^3.0.0",
15 |     "@tsparticles/slim": "^3.8.1",
16 |     "@types/node": "18.11.18",
17 |     "@types/react": "18.0.27",
18 |     "@types/react-dom": "18.0.10",
19 |     "clsx": "^2.1.1",
20 |     "eslint": "8.33.0",
21 |     "eslint-config-next": "13.1.6",
22 |     "motion": "^12.4.3",
23 |     "next": "14.2.15",
24 |     "react": "^18",
25 |     "react-beautiful-dnd": "^13.1.1",
26 |     "react-dom": "^18",
27 |     "react-icons": "^4.7.1",
28 |     "react-simple-typewriter": "^5.0.1",
29 |     "tailwind-merge": "^3.0.1"
30 |   },
31 |   "devDependencies": {
32 |     "autoprefixer": "^10.4.13",
33 |     "postcss": "^8",
34 |     "tailwindcss": "^3.4.1",
35 |     "typescript": "^5"
36 |   }
37 | }
38 |

--------------------------------------------------------------------------------
/components/form/Language.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { ResumeContext } from "../../pages/builder";
 3 | import FormButton from "./FormButton";
 4 | 
 5 | const Language = () => {
 6 |   const { resumeData, setResumeData } = useContext(ResumeContext);
 7 |   const skillType = "languages";
 8 |   const title = "Languages";
 9 |   const placeholder = "Language";
10 | 
11 |   const handleSkills = (e, index, skillType) => {
12 |     const newSkills = [...resumeData[skillType]];
13 |     newSkills[index] = e.target.value;
14 |     setResumeData({ ...resumeData, [skillType]: newSkills });
15 |   };
16 | 
17 |   const addSkill = () => {
18 |     setResumeData({ ...resumeData, [skillType]: [...resumeData[skillType], ""] });
19 |   };
20 | 
21 |   const removeSkill = (index) => {
22 |     const newSkills = [...resumeData[skillType]];
23 |     newSkills.splice(-1, 1);
24 |     setResumeData({ ...resumeData, [skillType]: newSkills });
25 |   };  
26 | 
27 |   return (
28 |     <div className="flex-col-gap-2">
29 |       <h2 className="input-title">{title}</h2>
30 |       {resumeData[skillType].map((skill, index) => (
31 |         <div key={index} className="f-col">
32 |           <input
33 |             type="text"
34 |             placeholder={placeholder}
35 |             name="skill"
36 |             className="w-full other-input"
37 |             value={skill}
38 |             onChange={(e) => handleSkills(e, index, skillType)}
39 |           />
40 |         </div>
41 |       ))}
42 |       <FormButton size={resumeData[skillType].length} add={addSkill} remove={removeSkill} />
43 |     </div>
44 |   );
45 | };
46 | 
47 | export default Language;

--------------------------------------------------------------------------------
/components/ai/AIAnalysis.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { analyzeResume } from '../../utils/gemini';
 3 | import { FaRobot, FaSpinner } from 'react-icons/fa';
 4 | 
 5 | const AIAnalysis = ({ resumeData }) => {
 6 |   const [analysis, setAnalysis] = useState('');
 7 |   const [loading, setLoading] = useState(false);
 8 | 
 9 |   const handleAnalyze = async () => {
10 |     setLoading(true);
11 |     try {
12 |       const result = await analyzeResume(resumeData);
13 |       setAnalysis(result);
14 |     } catch (error) {
15 |       console.error('Analysis error:', error);
16 |     }
17 |     setLoading(false);
18 |   };
19 | 
20 |   return (
21 |     <div className="fixed bottom-4 right-4 z-50">
22 |       <button
23 |         onClick={handleAnalyze}
24 |         className="bg-zinc-800 text-white p-3 rounded-full hover:bg-zinc-700 transition-colors"
25 |         disabled={loading}
26 |       >
27 |         {loading ? <FaSpinner className="animate-spin" /> : <FaRobot />}
28 |       </button>
29 |       
30 |       {analysis && (
31 |         <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 
32 |                       bg-white p-6 rounded-lg shadow-xl max-w-2xl max-h-[80vh] overflow-y-auto">
33 |           <h2 className="text-xl font-bold mb-4">AI Resume Analysis</h2>
34 |           <div className="whitespace-pre-line">{analysis}</div>
35 |           <button
36 |             onClick={() => setAnalysis('')}
37 |             className="mt-4 bg-zinc-800 text-white px-4 py-2 rounded"
38 |           >
39 |             Close
40 |           </button>
41 |         </div>
42 |       )}
43 |     </div>
44 |   );
45 | };
46 | 
47 | export default AIAnalysis;

--------------------------------------------------------------------------------
/pages/api/suggestions.js:
--------------------------------------------------------------------------------
 1 | import { getSuggestions } from '../../utils/gemini';
 2 | 
 3 | export default async function handler(req, res) {
 4 |   if (req.method !== 'POST') {
 5 |     return res.status(405).json({ 
 6 |       error: 'Method not allowed',
 7 |       message: 'Only POST requests are accepted' 
 8 |     });
 9 |   }
10 | 
11 |   const { section, content } = req.body;
12 | 
13 |   if (!section || !content) {
14 |     return res.status(400).json({ 
15 |       error: 'VALIDATION_ERROR',
16 |       message: 'Missing required fields: section and content' 
17 |     });
18 |   }
19 | 
20 |   try {
21 |     const suggestions = await getSuggestions(section, content);
22 |     return res.status(200).json({ suggestions });
23 |   } catch (error) {
24 |     console.error('API Error:', error);
25 |     
26 |     // Handle specific error types
27 |     if (error.message.startsWith('CONTENT_ERROR:')) {
28 |       return res.status(400).json({
29 |         error: 'CONTENT_ERROR',
30 |         message: error.message.replace('CONTENT_ERROR: ', '')
31 |       });
32 |     }
33 |     
34 |     if (error.message.startsWith('QUOTA_ERROR:')) {
35 |       return res.status(429).json({
36 |         error: 'QUOTA_ERROR',
37 |         message: error.message.replace('QUOTA_ERROR: ', '')
38 |       });
39 |     }
40 |     
41 |     if (error.message.startsWith('API_ERROR:')) {
42 |       return res.status(500).json({
43 |         error: 'API_ERROR',
44 |         message: error.message.replace('API_ERROR: ', '')
45 |       });
46 |     }
47 | 
48 |     if (error.message.startsWith('RATE_ERROR:')) {
49 |       return res.status(429).json({
50 |         error: 'RATE_ERROR',
51 |         message: error.message.replace('RATE_ERROR: ', '')
52 |       });
53 |     }
54 | 
55 |     // Generic error fallback
56 |     return res.status(500).json({
57 |       error: 'UNKNOWN_ERROR',
58 |       message: 'An unexpected error occurred. Please try again.'
59 |     });
60 |   }
61 | }

--------------------------------------------------------------------------------
/components/ai/AISuggestionButton.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { FaLightbulb, FaSpinner } from 'react-icons/fa';
 3 | import { getSuggestions } from '../../utils/gemini';
 4 | 
 5 | const AISuggestionButton = ({ section, content }) => {
 6 |   const [suggestions, setSuggestions] = useState('');
 7 |   const [loading, setLoading] = useState(false);
 8 | 
 9 |   const handleGetSuggestions = async () => {
10 |     setLoading(true);
11 |     try {
12 |       const response = await fetch('/api/suggestions', {
13 |         method: 'POST',
14 |         headers: {
15 |           'Content-Type': 'application/json',
16 |         },
17 |         body: JSON.stringify({
18 |           section,
19 |           content
20 |         }),
21 |       });
22 |       const data = await response.json();
23 |       setSuggestions(data.suggestions);
24 |     } catch (error) {
25 |       console.error('Suggestions error:', error);
26 |     }
27 |     setLoading(false);
28 |   };
29 | 
30 |   return (
31 |     <div className="flex-col-gap-2 mb-4">
32 |       <div className="flex justify-end">
33 |         <button
34 |           onClick={handleGetSuggestions}
35 |           className="bg-zinc-800 text-white p-2 rounded hover:bg-zinc-700 transition-colors"
36 |           disabled={loading}
37 |         >
38 |           {loading ? <FaSpinner className="animate-spin" /> : <FaLightbulb />}
39 |         </button>
40 |       </div>
41 |       
42 |       {suggestions && (
43 |         <div className="bg-zinc-100 p-4 rounded mt-2 -ml-20 shadow-md">
44 |           <h3 className="text-zinc-800 font-semibold mb-2 text-left">AI Suggestions:</h3>
45 |           <div className="text-zinc-700 whitespace-pre-line">{suggestions}</div>
46 |           <button
47 |             onClick={() => setSuggestions('')}
48 |             className="mt-2 bg-zinc-800 text-white px-3 py-1 rounded hover:bg-zinc-700"
49 |           >
50 |             Dismiss
51 |           </button>
52 |         </div>
53 |       )}
54 |     </div>
55 |   );
56 | };
57 | 
58 | export default AISuggestionButton;

--------------------------------------------------------------------------------
/components/form/PersonalInformation.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { ResumeContext } from "../../pages/builder";
 3 | const PersonalInformation = ({}) => {
 4 |   const { resumeData, setResumeData, handleProfilePicture, handleChange } =
 5 |     useContext(ResumeContext);
 6 | 
 7 |   return (
 8 |     <div className="flex-col-gap-2">
 9 |       <h2 className="input-title">Personal Information</h2>
10 |       <div className="grid-4">
11 |         <input
12 |           type="text"
13 |           placeholder="Full Name"
14 |           name="name"
15 |           className="pi"
16 |           value={resumeData.name}
17 |           onChange={handleChange}
18 |         />
19 |         <input
20 |           type="text"
21 |           placeholder="Job Title"
22 |           name="position"
23 |           className="pi"
24 |           value={resumeData.position}
25 |           onChange={handleChange}
26 |         />
27 |         <input
28 |           type="text"
29 |           placeholder="Contact Information"
30 |           name="contactInformation"
31 |           className="pi"
32 |           value={resumeData.contactInformation}
33 |           onChange={handleChange}
34 |           minLength="10"
35 |           maxLength="15"
36 |         />
37 |         <input
38 |           type="email"
39 |           placeholder="Email"
40 |           name="email"
41 |           className="pi"
42 |           value={resumeData.email}
43 |           onChange={handleChange}
44 |         />
45 |         <input
46 |           type="text"
47 |           placeholder="Address"
48 |           name="address"
49 |           className="pi"
50 |           value={resumeData.address}
51 |           onChange={handleChange}
52 |         />
53 |         <input
54 |           type="file"
55 |           name="profileImage"
56 |           accept="image/*"
57 |           className="profileInput"
58 |           onChange={handleProfilePicture}
59 |           placeholder="Profile Picture"
60 |         />
61 |       </div>
62 |     </div>
63 |   );
64 | };
65 | 
66 | export default PersonalInformation;
67 |

--------------------------------------------------------------------------------
/components/form/certification.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { ResumeContext } from "../../pages/builder";
 3 | import FormButton from "./FormButton";
 4 | 
 5 | const Certification = () => {
 6 |   const { resumeData, setResumeData } = useContext(ResumeContext);
 7 |   const skillType = "certifications";
 8 |   const title = "Certifications";
 9 | 
10 |   const handleCertification = (e, index) => {
11 |     const newCertifications = [...resumeData[skillType]];
12 |     newCertifications[index] = {
13 |       ...newCertifications[index],
14 |       [e.target.name]: e.target.value
15 |     };
16 |     setResumeData({ ...resumeData, [skillType]: newCertifications });
17 |   };
18 | 
19 |   const addCertification = () => {
20 |     setResumeData({
21 |       ...resumeData,
22 |       [skillType]: [
23 |         ...resumeData[skillType],
24 |         { name: "", issuer: "" }
25 |       ]
26 |     });
27 |   };
28 | 
29 |   const removeCertification = () => {
30 |     const newCertifications = [...resumeData[skillType]];
31 |     newCertifications.pop();
32 |     setResumeData({ ...resumeData, [skillType]: newCertifications });
33 |   };
34 | 
35 |   return (
36 |     <div className="flex-col-gap-2">
37 |       <h2 className="input-title">{title}</h2>
38 |       {resumeData[skillType].map((certification, index) => (
39 |         <div key={index} className="f-col">
40 |           <input
41 |             type="text"
42 |             placeholder="Certification Name"
43 |             name="name"
44 |             className="w-full other-input"
45 |             value={certification.name}
46 |             onChange={(e) => handleCertification(e, index)}
47 |           />
48 |           <input
49 |             type="text"
50 |             placeholder="Issuer"
51 |             name="issuer"
52 |             className="w-full other-input"
53 |             value={certification.issuer}
54 |             onChange={(e) => handleCertification(e, index)}
55 |           />
56 |         </div>
57 |       ))}
58 |       <FormButton 
59 |         size={resumeData[skillType].length} 
60 |         add={addCertification} 
61 |         remove={removeCertification} 
62 |       />
63 |     </div>
64 |   );
65 | };
66 | 
67 | export default Certification;

--------------------------------------------------------------------------------
/components/form/SocialMedia.jsx:
--------------------------------------------------------------------------------
 1 | import FormButton from "./FormButton";
 2 | import React, { useContext } from "react";
 3 | import { ResumeContext } from "../../pages/builder";
 4 | 
 5 | const SocialMedia = () => {
 6 |   const { resumeData, setResumeData } = useContext(ResumeContext);
 7 | 
 8 |   // social media
 9 |   const handleSocialMedia = (e, index) => {
10 |     const newSocialMedia = [...resumeData.socialMedia];
11 |     newSocialMedia[index][e.target.name] = e.target.value.replace(
12 |       "https://",
13 |       ""
14 |     );
15 |     setResumeData({ ...resumeData, socialMedia: newSocialMedia });
16 |   };
17 | 
18 |   const addSocialMedia = () => {
19 |     setResumeData({
20 |       ...resumeData,
21 |       socialMedia: [...resumeData.socialMedia, { socialMedia: "", link: "" }],
22 |     });
23 |   };
24 | 
25 |   const removeSocialMedia = (index) => {
26 |     const newSocialMedia = [...resumeData.socialMedia];
27 |     newSocialMedia[index] = newSocialMedia[newSocialMedia.length - 1];
28 |     newSocialMedia.pop();
29 |     setResumeData({ ...resumeData, socialMedia: newSocialMedia });
30 |   };
31 | 
32 |   return (
33 |     <div className="flex-col-gap-2">
34 |       <h2 className="input-title">Social Media</h2>
35 |       {resumeData.socialMedia.map((socialMedia, index) => (
36 |         <div key={index} className="flex-wrap-gap-2 flex items-center">
37 |           <input
38 |             type="text"
39 |             placeholder="Social Media"
40 |             name="socialMedia"
41 |             className="other-input w-1/3 p-2 border border-gray-300 rounded"
42 |             value={socialMedia.socialMedia}
43 |             onChange={(e) => handleSocialMedia(e, index)}
44 |           />
45 |           <input
46 |             type="text"
47 |             placeholder="Link"
48 |             name="link"
49 |             className="other-input w-2/3 p-2 border border-gray-300 rounded"
50 |             value={socialMedia.link}
51 |             onChange={(e) => handleSocialMedia(e, index)}
52 |           />
53 |         </div>
54 |       ))}
55 |       <FormButton
56 |         size={resumeData.socialMedia.length}
57 |         add={addSocialMedia}
58 |         remove={removeSocialMedia}
59 |       />
60 |     </div>
61 |   );
62 | };
63 | 
64 | export default SocialMedia;
65 |

--------------------------------------------------------------------------------
/components/form/LoadUnload.jsx:
--------------------------------------------------------------------------------
 1 | import { FaCloudUploadAlt, FaCloudDownloadAlt } from "react-icons/fa";
 2 | import React, { useContext } from "react";
 3 | import { ResumeContext } from "../../pages/builder";
 4 | 
 5 | const LoadUnload = () => {
 6 |   const { resumeData, setResumeData } = useContext(ResumeContext);
 7 | 
 8 |   // load backup resume data
 9 |   const handleLoad = (event) => {
10 |     const file = event.target.files[0];
11 |     const reader = new FileReader();
12 |     reader.onload = (event) => {
13 |       const resumeData = JSON.parse(event.target.result);
14 |       setResumeData(resumeData);
15 |     };
16 |     reader.readAsText(file);
17 |   };
18 | 
19 |   // download resume data
20 |   const handleDownload = (data, filename, event) => {
21 |     event.preventDefault();
22 |     const jsonData = JSON.stringify(data);
23 |     const blob = new Blob([jsonData], { type: "application/json" });
24 |     const link = document.createElement("a");
25 |     link.href = URL.createObjectURL(blob);
26 |     link.download = filename;
27 |     link.click();
28 |   };
29 | 
30 |   return (
31 |     <div className="flex flex-wrap gap-4 mb-2 justify-center">
32 |       <div className="inline-flex flex-row items-center gap-2">
33 |         <h2 className="text-[1.2rem] text-white">Load Data</h2>
34 |         <label className="p-2 text-white bg-zinc-800 rounded cursor-pointer hover:bg-zinc-700 transition-colors">
35 |           <FaCloudUploadAlt className="text-[1.2rem] text-white" />
36 |           <input
37 |             aria-label="Load Data"
38 |             type="file"
39 |             className="hidden"
40 |             onChange={handleLoad}
41 |             accept=".json"
42 |           />
43 |         </label>
44 |       </div>
45 |       <div className="inline-flex flex-row items-center gap-2">
46 |         <h2 className="text-[1.2rem] text-white">Save Data</h2>
47 |         <button
48 |           aria-label="Save Data"
49 |           className="p-2 text-white bg-zinc-800 rounded hover:bg-zinc-700 transition-colors"
50 |           onClick={(event) =>
51 |             handleDownload(
52 |               resumeData,
53 |               resumeData.name + " by ATSResume.json",
54 |               event
55 |             )
56 |           }
57 |         >
58 |           <FaCloudDownloadAlt className="text-[1.2rem] text-white" />
59 |         </button>
60 |       </div>
61 |     </div>
62 |   );
63 | };
64 | 
65 | export default LoadUnload;
66 |

--------------------------------------------------------------------------------
/components/form/Skill.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { ResumeContext } from "../../pages/builder";
 3 | import FormButton from "./FormButton";
 4 | 
 5 | const Skill = ({ title }) => {
 6 |   const { resumeData, setResumeData } = useContext(ResumeContext);
 7 | 
 8 |   // skills
 9 |   const handleSkill = (e, index, title) => {
10 |     const newSkills = [
11 |       ...resumeData.skills.find((skillType) => skillType.title === title)
12 |         .skills,
13 |     ];
14 |     newSkills[index] = e.target.value;
15 |     setResumeData((prevData) => ({
16 |       ...prevData,
17 |       skills: prevData.skills.map((skill) =>
18 |         skill.title === title ? { ...skill, skills: newSkills } : skill
19 |       ),
20 |     }));
21 |   };
22 | 
23 |   const addSkill = (title) => {
24 |     setResumeData((prevData) => {
25 |       const skillType = prevData.skills.find(
26 |         (skillType) => skillType.title === title
27 |       );
28 |       const newSkills = [...skillType.skills, ""];
29 |       const updatedSkills = prevData.skills.map((skill) =>
30 |         skill.title === title ? { ...skill, skills: newSkills } : skill
31 |       );
32 |       return {
33 |         ...prevData,
34 |         skills: updatedSkills,
35 |       };
36 |     });
37 |   };
38 | 
39 |   const removeSkill = (title, index) => {
40 |     setResumeData((prevData) => {
41 |       const skillType = prevData.skills.find(
42 |         (skillType) => skillType.title === title
43 |       );
44 |       const newSkills = [...skillType.skills];
45 |       newSkills.pop();
46 |       const updatedSkills = prevData.skills.map((skill) =>
47 |         skill.title === title ? { ...skill, skills: newSkills } : skill
48 |       );
49 |       return {
50 |         ...prevData,
51 |         skills: updatedSkills,
52 |       };
53 |     });
54 |   };
55 | 
56 |   const skillType = resumeData.skills.find(
57 |     (skillType) => skillType.title === title
58 |   );
59 | 
60 |   return (
61 |     <div className="flex-col-gap-2">
62 |       <h2 className="input-title">{title}</h2>
63 |       {skillType.skills.map((skill, index) => (
64 |         <div key={index} className="f-col">
65 |           <input
66 |             type="text"
67 |             placeholder={title}
68 |             name={title}
69 |             className="w-full other-input"
70 |             value={skill}
71 |             onChange={(e) => handleSkill(e, index, title)}
72 |           />
73 |         </div>
74 |       ))}
75 |       <FormButton
76 |         size={skillType.skills.length}
77 |         add={() => addSkill(title)}
78 |         remove={() => removeSkill(title)}
79 |       />
80 |     </div>
81 |   );
82 | };
83 | 
84 | export default Skill;
85 |

--------------------------------------------------------------------------------
/components/form/Education.jsx:
--------------------------------------------------------------------------------
 1 | import FormButton from "./FormButton";
 2 | import React, { useContext } from "react";
 3 | import { ResumeContext } from "../../pages/builder";
 4 | 
 5 | const Education = () => {
 6 |     const { resumeData, setResumeData} = useContext(ResumeContext);
 7 | 
 8 |     const handleEducation = (e, index) => {
 9 |       const newEducation = [...resumeData.education];
10 |       newEducation[index][e.target.name] = e.target.value;
11 |       setResumeData({ ...resumeData, education: newEducation });
12 |     };
13 |   
14 |     const addEducation = () => {
15 |       setResumeData({
16 |         ...resumeData,
17 |         education: [
18 |           ...resumeData.education,
19 |           { school: "", degree: "", startYear: "", endYear: "" },
20 |         ],
21 |       });
22 |     };
23 |   
24 |     const removeEducation = (index) => {
25 |       const newEducation = [...resumeData.education];
26 |       newEducation[index] = newEducation[newEducation.length - 1];
27 |       newEducation.pop();
28 |       setResumeData({ ...resumeData, education: newEducation });
29 |     };
30 |     
31 |     return (
32 |       <div className="flex-col-gap-2">
33 |         <h2 className="input-title">Education</h2>
34 |         {resumeData.education.map((education, index) => (
35 |           <div key={index} className="f-col">
36 |             <input
37 |               type="text"
38 |               placeholder="School"
39 |               name="school"
40 |               className="w-full other-input"
41 |               value={education.school}
42 |               onChange={(e) => handleEducation(e, index)} />
43 |             <input
44 |               type="text"
45 |               placeholder="Degree"
46 |               name="degree"
47 |               className="w-full other-input"
48 |               value={education.degree}
49 |               onChange={(e) => handleEducation(e, index)} />
50 |             <div className="flex-wrap-gap-2">
51 |               <input
52 |                 type="date"
53 |                 placeholder="Start Year"
54 |                 name="startYear"
55 |                 className="other-input"
56 |                 value={education.startYear}
57 |                 onChange={(e) => handleEducation(e, index)} />
58 |               <input
59 |                 type="date"
60 |                 placeholder="End Year"
61 |                 name="endYear"
62 |                 className="other-input"
63 |                 value={education.endYear}
64 |                 onChange={(e) => handleEducation(e, index)} />
65 |             </div>
66 |           </div>
67 |         ))}
68 |         <FormButton size={resumeData.education.length} add={addEducation} remove={removeEducation} />
69 |       </div>
70 |     )
71 |   }
72 | 
73 | export default Education;

--------------------------------------------------------------------------------
/components/meta/Meta.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | 
 3 | export default function Meta({ title, keywords, description }) {
 4 |     const homepage = "https://free-next-resume-maker.vercel.app";
 5 |     const logo = "/assets/logo.png";
 6 |     const fevicon = "/assets/logo.png";
 7 |     function isiteJsonLd() {
 8 |         return {
 9 |             __html: `{
10 |                 "@context": "https://schema.org",
11 |                 "@type": "Organization",
12 |                 "url": ${homepage},
13 |                 "logo": ${logo},
14 |                 "contactPoint": {
15 |                     "@type": "ContactPoint",
16 |                     "telephone": "+91 1234567890",
17 |                     "contactType": "customer service"
18 |                 },
19 |                 "image": ${logo},
20 |                 "description": ${description},
21 |                 "founder": "HOT HEAD",
22 |                 "foundingDate": "2024",
23 |                 "foundingLocation": "IN",
24 |                 "email": "xyz@gmail.com",
25 |                 "telephone": "+91 1234567890",
26 |                 "areaServed": "IN",
27 |                 "keywords": ${keywords},
28 |                 "mainEntityOfPage": ${homepage},
29 |                 "knowsAbout": ${keywords},
30 |                 "knowsLanguage": "English",
31 |                 "memberOf": "Oensource",
32 |                 "owns": "HOT HEAD",
33 |                 "publishingPrinciples": ${homepage},
34 |                 "slogan": "free resume maker for humanity"
35 |             }`
36 |         }
37 |     }
38 | 
39 | 
40 |     return (
41 |         <Head>
42 |             <meta name="viewport" content="width=device-width, initial-scale=1" />
43 |             <meta name="keywords" content={keywords} />
44 |             <meta name="description" content={description} />
45 |             <meta charSet="utf-8" />
46 |             <link rel="icon" href={fevicon} />
47 |             <title>{title}</title>
48 |             <meta type="copyright" content="Resume Maker" />
49 |             <meta type="author" content="HOT HEAD" />
50 |             {/* Open Graph */}
51 |             <meta property="og:type" content="website" />
52 |             <meta property="og:url" content={homepage} />
53 |             <meta property="og:title" content={title} />
54 |             <meta
55 |                 property="og:description"
56 |                 content={description} />
57 |             <meta property="og:image" content={logo} />
58 |             {/* Twitter */}
59 |             <meta property="twitter:card" content="summary_large_image" />
60 |             <meta property="twitter:url" content={homepage} />
61 |             <meta property="twitter:title" content={title} />
62 |             <meta
63 |                 property="twitter:description"
64 |                 content={description} />
65 |             <meta property="twitter:image" content={logo} />
66 |             <script
67 |                 type="application/ld+json"
68 |                 dangerouslySetInnerHTML={isiteJsonLd()}
69 |                 key="isiteJsonLd"
70 |             />
71 |         </Head>
72 |     );
73 | }
74 |

--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |     
  7 |     body {
  8 |         @apply font-[sans-serif];
  9 |     }
 10 | 
 11 |     ::-webkit-scrollbar {
 12 |         @apply w-2.5 h-2.5;
 13 |     }
 14 | 
 15 |     ::-webkit-scrollbar-track {
 16 |         @apply bg-gray-200;
 17 |     }
 18 | 
 19 |     ::-webkit-scrollbar-thumb {
 20 |         @apply bg-zinc-700;
 21 |     }
 22 | 
 23 |     ::-webkit-scrollbar-thumb:hover {
 24 |         @apply bg-zinc-600; 
 25 |     }
 26 | 
 27 |     textarea, input:focus {
 28 |         @apply focus:outline-none;
 29 |     }
 30 | 
 31 |     .ul-padding{
 32 |         padding-inline-start: 0.9rem;
 33 |     }
 34 | 
 35 |     .ul-padding-none{
 36 |         padding-inline-start: 0;
 37 |     }
 38 | }
 39 | 
 40 | @layer components{
 41 |     .pi{
 42 |         @apply p-2 mb-2 text-white bg-zinc-800/70 backdrop-blur-sm rounded text-[0.9rem] border border-white/10;
 43 |     }
 44 | 
 45 |     .profileInput{
 46 |         @apply pi file:border-0 file:bg-zinc-800 file:text-white file:rounded-sm;
 47 |     }
 48 | 
 49 |     .flex-col-gap-2{
 50 |         @apply flex flex-col gap-2;
 51 |     }
 52 | 
 53 |     .flex-wrap-gap-2{
 54 |         @apply flex flex-wrap gap-2;
 55 |     }
 56 | 
 57 |     .other-input{
 58 |         @apply p-2 mb-2 text-white bg-zinc-800/70 backdrop-blur-sm rounded focus:placeholder-transparent border border-white/10;
 59 |     }
 60 | 
 61 |     .input-title{
 62 |         @apply text-[1rem] text-white font-semibold;
 63 |     }
 64 | 
 65 |     .f-col{
 66 |         @apply flex flex-col;
 67 |     }
 68 | 
 69 |     .grid-4{
 70 |         @apply grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4;
 71 |     }
 72 | 
 73 |     .editable{
 74 |         @apply hover:bg-gray-100 hover:cursor-text outline-none;
 75 |     }
 76 | 
 77 | }
 78 | 
 79 | .name{
 80 |     font-size: 20px;
 81 |     font-weight: 700;
 82 | }
 83 | 
 84 | .profession{
 85 |     font-size: 16px;
 86 |     font-weight: 500;
 87 | }
 88 | 
 89 | .contact{
 90 |     font-size: 14px;
 91 |     font-weight: 400;
 92 | }
 93 | 
 94 | .social-media{
 95 |     font-size: 12px;
 96 |     font-weight: 400;
 97 | }
 98 | 
 99 | .section-title{
100 |     font-size: 16px;
101 |     font-weight: 700;
102 | }
103 | 
104 | .content{
105 |     font-size: 14px;
106 |     font-weight: 400;
107 | }
108 | 
109 | .sub-content{
110 |     font-size: 12px;
111 |     font-weight: 400;
112 | }
113 | 
114 | .i-bold{
115 |     font-weight: 700 !important;
116 | }
117 | 
118 | @media print {
119 |     .exclude-print {
120 |         display: none !important;
121 |     }
122 | 
123 |     .rm-padding-print {
124 |         padding: 0;
125 |     }
126 | 
127 |     @page {
128 |         size: A4;
129 |         margin: 10mm;
130 |     }
131 | 
132 |     .preview {
133 |         overflow-y: visible !important;
134 |     }
135 | 
136 |     .preview::after {
137 |         content: "Made using : free-next-resume-maker.vercel.app ";
138 |         position: fixed;
139 |         bottom: 0;
140 |         right: 0;
141 |         opacity: 0.2;
142 |         font-size: small;
143 |         text-align: center;
144 |         z-index: -1;
145 |     }
146 | }
147 |

--------------------------------------------------------------------------------
/utils/gemini.js:
--------------------------------------------------------------------------------
 1 | const { GoogleGenerativeAI } = require("@google/generative-ai");
 2 | 
 3 | // Initialize with API version v1
 4 | const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
 5 | 
 6 | export async function analyzeResume(resumeData) {
 7 |   if (!process.env.GEMINI_API_KEY) {
 8 |     throw new Error("Missing Gemini API key");
 9 |   }
10 | 
11 |   const model = genAI.getGenerativeModel({ model: "gemini-pro" });
12 | 
13 |   const prompt = `Analyze this resume data and provide feedback on:
14 |   1. Overall strength and weaknesses
15 |   2. ATS optimization suggestions
16 |   3. Content improvement recommendations
17 |   
18 |   Resume Data:
19 |   ${JSON.stringify(resumeData, null, 2)}`;
20 | 
21 |   try {
22 |     const result = await model.generateContent(prompt);
23 |     const response = await result.response;
24 |     return response.text();
25 |   } catch (error) {
26 |     console.error("Error analyzing resume:", error);
27 |     return "Error analyzing resume. Please try again.";
28 |   }
29 | }
30 | 
31 | export async function getSuggestions(section, currentContent) {
32 |   // Check for API key first
33 |   if (!process.env.GEMINI_API_KEY) {
34 |     throw new Error("API_ERROR: Missing or invalid Gemini API key");
35 |   }
36 | 
37 |   // Validate content
38 |   if (!currentContent || currentContent.trim() === '') {
39 |     throw new Error("CONTENT_ERROR: Please write something first to get suggestions");
40 |   }
41 | 
42 |   // Check for minimum content length
43 |   if (currentContent.trim().length < 10) {
44 |     throw new Error("CONTENT_ERROR: Please write at least a few words to get meaningful suggestions");
45 |   }
46 | 
47 |   try {
48 |     const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
49 |     
50 |     const prompt = `You are a friendly resume writing assistant. Look at this ${section} content and suggest 2 slightly improved versions. 
51 |     Keep the same meaning and information, but make it flow better. Use natural, conversational language - no complex jargon.
52 |     Make it sound like a real person wrote it.
53 | 
54 |     Important guidelines:
55 |     - Keep the same key points and achievements
56 |     - Use simple, clear language
57 |     - Make it sound natural and conversational
58 |     - Keep a similar length
59 |     - Don't add new information
60 |     
61 |     Current content:
62 |     ${currentContent}
63 | 
64 |     Format your response as:
65 |     Option 1:
66 |     [first natural improvement]
67 | 
68 |     Option 2:
69 |     [second natural improvement]`;
70 | 
71 |     const result = await model.generateContent(prompt);
72 |     return result.response.text();
73 |   } catch (error) {
74 |     console.error("Gemini API Error:", error);
75 |     
76 |     // Handle specific API errors
77 |     if (error.message?.includes('quota')) {
78 |       throw new Error("QUOTA_ERROR: API quota exceeded. Please try again later");
79 |     }
80 |     if (error.message?.includes('invalid')) {
81 |       throw new Error("API_ERROR: Invalid API key");
82 |     }
83 |     if (error.message?.includes('rate')) {
84 |       throw new Error("RATE_ERROR: Too many requests. Please wait a moment");
85 |     }
86 |     
87 |     // Generic error fallback
88 |     throw new Error(`API_ERROR: ${error.message || 'Failed to generate suggestions'}`);
89 |   }
90 | }

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🚀 Free Resume Maker
  2 | 
  3 | ### A modern, AI-powered, ATS-optimized resume builder featuring professionally designed templates and smart content suggestions.
  4 | 
  5 | ## GitAds Sponsored
  6 | [![Sponsored by GitAds](https://gitads.dev/v1/ad-serve?source=hothead01th/free-resume-maker@github)](https://gitads.dev/v1/ad-track?source=hothead01th/free-resume-maker@github)
  7 | 
  8 | 
  9 | 
 10 | <p align="center">
 11 |   <img src="preview.png" width="45%" />
 12 |   <img src="preview2.png" width="45%" />
 13 | </p>
 14 | 
 15 | 
 16 | 
 17 | ## ✨ Key Features
 18 | 
 19 | - **AI-Powered Content Suggestions**: Smart content optimization using Google's Gemini API
 20 | - **Multiple Professional Templates**: Choose from carefully crafted, industry-standard resume layouts
 21 | - **Smart Content Enhancement**: Get real-time suggestions to improve your resume content
 22 | - **ATS-Friendly**: Engineered to pass Applicant Tracking Systems with flying colors
 23 | - **Real-time Preview**: Instant visual feedback as you build your resume
 24 | - **Drag & Drop Sections**: Easily customize section order to highlight your strengths
 25 | - **Project Links**: Showcase your work with integrated project links and icons
 26 | - **Modern UI/UX**: Clean, intuitive interface with a seamless user experience
 27 | - **Export to PDF**: One-click PDF download for your polished resume
 28 | - **Responsive Design**: Perfect resume building experience across all devices
 29 | - **Zero Cost**: Completely free and open-source
 30 | 
 31 | ## 🛠️ Built With
 32 | 
 33 | - Next.js - React Framework
 34 | - Tailwind CSS - Styling
 35 | - Google Gemini API - AI Content Suggestions
 36 | - React Beautiful DnD - Drag and Drop functionality
 37 | - React Icons - Professional icons
 38 | 
 39 | ## 📦 Installation
 40 | 
 41 | 1. Clone the repository:
 42 | ```bash
 43 | git clone https://github.com/HOTHEAD01TH/free-resume-maker.git
 44 | ```
 45 | 
 46 | 2. Navigate to the project directory:
 47 | ```bash
 48 | cd free-resume-maker
 49 | ```
 50 | 
 51 | 3. Install dependencies:
 52 | ```bash
 53 | npm install
 54 | ```
 55 | 
 56 | 4. Set up environment variables:
 57 | ```bash
 58 | GEMINI_API_KEY=your_api_key_here
 59 | ```
 60 | 
 61 | 5. Start the development server:
 62 | ```bash
 63 | npm run dev
 64 | ```
 65 | 
 66 | 6. Open your browser and navigate to `http://localhost:3000` to see the application in action.
 67 | 
 68 | ## 📝 Usage Tips
 69 | 
 70 | 1. **AI Suggestions**: Click the lightbulb icon to get smart content improvements
 71 | 2. **Profile Section**: Start with your personal information and professional summary
 72 | 3. **Experience & Projects**: Use action verbs and quantify achievements
 73 | 4. **Skills & Certifications**: Include relevant technical and soft skills
 74 | 5. **Project Links**: Add GitHub/live links to showcase your work
 75 | 6. **Customization**: Drag and drop sections to create the perfect layout
 76 | 7. **Download**: Before downloading, disable header/footer in print settings for optimal PDF output
 77 | 
 78 | ## 🤝 Contributing
 79 | 
 80 | Contributions are welcome! Please feel free to submit a Pull Request.
 81 | 
 82 | ## 📄 License
 83 | 
 84 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
 85 | 
 86 | ## 🙏 Acknowledgments
 87 | 
 88 | - Special thanks to the open-source community and [Github Projects](https://x.com/githubprojects)
 89 | - Inspired by modern recruitment needs and ATS requirements
 90 | 
 91 | ## ⚠️ Important Note
 92 | 
 93 | When downloading your resume as PDF, ensure you disable header and footer in your browser's print settings for the best results.
 94 | 
 95 | ## Star History
 96 | 
 97 | [![Star History Chart](https://api.star-history.com/svg?repos=HOTHEAD01TH/free-resume-maker&type=Date)](https://star-history.com/#HOTHEAD01TH/free-resume-maker&Date)
 98 | 
 99 | ---
100 | 
101 | Made with ❤️ by Zaid for job seekers worldwide!
102 |

--------------------------------------------------------------------------------
/components/form/Projects.jsx:
--------------------------------------------------------------------------------
  1 | import FormButton from "./FormButton";
  2 | import React, { useContext } from "react";
  3 | import { ResumeContext } from "../../pages/builder";
  4 | import AISuggestionButton from '../ai/AISuggestionButton';
  5 | 
  6 | const Projects = () => {
  7 |   const { resumeData, setResumeData } = useContext(ResumeContext);
  8 | 
  9 |   const handleProjects = (e, index) => {
 10 |     const newProjects = [...resumeData.projects];
 11 |     newProjects[index][e.target.name] = e.target.value;
 12 |     setResumeData({ ...resumeData, projects: newProjects });
 13 |   };
 14 | 
 15 |   const addProjects = () => {
 16 |     setResumeData({
 17 |       ...resumeData,
 18 |       projects: [
 19 |         ...resumeData.projects,
 20 |         {
 21 |           title: "",
 22 |           link: "",
 23 |           description: "",
 24 |           keyAchievements: "",
 25 |           startYear: "",
 26 |           endYear: "",
 27 |         },
 28 |       ],
 29 |     });
 30 |   };
 31 | 
 32 |   const removeProjects = (index) => {
 33 |     const newProjects = [...resumeData.projects];
 34 |     newProjects[index] = newProjects[newProjects.length - 1];
 35 |     newProjects.pop();
 36 |     setResumeData({ ...resumeData, projects: newProjects });
 37 |   };
 38 | 
 39 |   return (
 40 |     <div className="flex-col-gap-2">
 41 |       <h2 className="input-title">Projects</h2>
 42 |       {resumeData.projects.map((project, index) => (
 43 |         <div key={index} className="f-col">
 44 |           <input
 45 |             type="text"
 46 |             placeholder="Project Name"
 47 |             name="name"
 48 |             className="w-full other-input"
 49 |             value={project.name}
 50 |             onChange={(e) => handleProjects(e, index)}
 51 |           />
 52 |           <input
 53 |             type="text"
 54 |             placeholder="Include https:// in the link"
 55 |             name="link"
 56 |             className="w-full other-input"
 57 |             value={project.link}
 58 |             onChange={(e) => handleProjects(e, index)}
 59 |           />
 60 |           <div className="flex justify-between items-center">
 61 |             <label>Description</label>
 62 |             <AISuggestionButton 
 63 |               section="project description" 
 64 |               content={project.description} 
 65 |             />
 66 |           </div>
 67 |           <textarea
 68 |             type="text"
 69 |             placeholder="Description"
 70 |             name="description"
 71 |             className="w-full other-input h-32"
 72 |             value={project.description}
 73 |             maxLength="250"
 74 |             onChange={(e) => handleProjects(e, index)}
 75 |           />
 76 |           <div className="flex justify-between items-center">
 77 |             <label>Key Achievements</label>
 78 |             <AISuggestionButton 
 79 |               section="project achievements" 
 80 |               content={project.keyAchievements} 
 81 |             />
 82 |           </div>
 83 |           <textarea
 84 |             type="text"
 85 |             placeholder="Key Achievements"
 86 |             name="keyAchievements"
 87 |             className="w-full other-input h-40"
 88 |             value={project.keyAchievements}
 89 |             onChange={(e) => handleProjects(e, index)}
 90 |           />
 91 |           <div className="flex-wrap-gap-2">
 92 |             <input
 93 |               type="date"
 94 |               placeholder="Start Year"
 95 |               name="startYear"
 96 |               className="other-input"
 97 |               value={project.startYear}
 98 |               onChange={(e) => handleProjects(e, index)}
 99 |             />
100 |             <input
101 |               type="date"
102 |               placeholder="End Year"
103 |               name="endYear"
104 |               className="other-input"
105 |               value={project.endYear}
106 |               onChange={(e) => handleProjects(e, index)}
107 |             />
108 |           </div>
109 |         </div>
110 |       ))}
111 |       <FormButton
112 |         size={resumeData.projects.length}
113 |         add={addProjects}
114 |         remove={removeProjects}
115 |       />
116 |     </div>
117 |   );
118 | };
119 | 
120 | export default Projects;
121 |

--------------------------------------------------------------------------------
/components/form/WorkExperience.jsx:
--------------------------------------------------------------------------------
  1 | import FormButton from "./FormButton";
  2 | import React, { useContext } from "react";
  3 | import { ResumeContext } from "../../pages/builder";
  4 | import AISuggestionButton from '../ai/AISuggestionButton';
  5 | 
  6 | const WorkExperience = () => {
  7 |   const {
  8 |     resumeData,
  9 |     setResumeData,
 10 |   } = useContext(ResumeContext);
 11 | 
 12 |   const handleWorkExperience = (e, index) => {
 13 |     const newworkExperience = [...resumeData.workExperience];
 14 |     newworkExperience[index][e.target.name] = e.target.value;
 15 |     setResumeData({ ...resumeData, workExperience: newworkExperience });
 16 |   };
 17 | 
 18 |   const addWorkExperience = () => {
 19 |     setResumeData({
 20 |       ...resumeData,
 21 |       workExperience: [
 22 |         ...resumeData.workExperience,
 23 |         {
 24 |           company: "",
 25 |           position: "",
 26 |           description: "",
 27 |           keyAchievements: "",
 28 |           startYear: "",
 29 |           endYear: "",
 30 |         },
 31 |       ],
 32 |     });
 33 |   };
 34 | 
 35 |   const removeWorkExperience = (index) => {
 36 |     const newworkExperience = [...resumeData.workExperience];
 37 |     newworkExperience[index] = newworkExperience[newworkExperience.length - 1];
 38 |     newworkExperience.pop();
 39 |     setResumeData({ ...resumeData, workExperience: newworkExperience });
 40 |   };
 41 | 
 42 |   return (
 43 |     <div className="flex-col-gap-2">
 44 |       <h2 className="input-title">Work Experience</h2>
 45 |       {resumeData.workExperience.map((workExperience, index) => (
 46 |         <div key={index} className="f-col">
 47 |           <input
 48 |             type="text"
 49 |             placeholder="Company"
 50 |             name="company"
 51 |             className="w-full other-input"
 52 |             value={workExperience.company}
 53 |             onChange={(e) => handleWorkExperience(e, index)}
 54 |           />
 55 |           <input
 56 |             type="text"
 57 |             placeholder="Job Title"
 58 |             name="position"
 59 |             className="w-full other-input"
 60 |             value={workExperience.position}
 61 |             onChange={(e) => handleWorkExperience(e, index)}
 62 |           />
 63 |           <div className="flex justify-between items-center">
 64 |             <label>Description</label>
 65 |             <AISuggestionButton 
 66 |               section="work experience description" 
 67 |               content={workExperience.description} 
 68 |             />
 69 |           </div>
 70 |           <textarea
 71 |             type="text"
 72 |             placeholder="Description"
 73 |             name="description"
 74 |             className="w-full other-input h-32"
 75 |             value={workExperience.description}
 76 |             maxLength="250"
 77 |             onChange={(e) => handleWorkExperience(e, index)}
 78 |           />
 79 |           <div className="flex justify-between items-center">
 80 |             <label>Key Achievements</label>
 81 |             <AISuggestionButton 
 82 |               section="work achievements" 
 83 |               content={workExperience.keyAchievements} 
 84 |             />
 85 |           </div>
 86 |           <textarea
 87 |             type="text"
 88 |             placeholder="Key Achievements"
 89 |             name="keyAchievements"
 90 |             className="w-full other-input h-40"
 91 |             value={workExperience.keyAchievements}
 92 |             onChange={(e) => handleWorkExperience(e, index)}
 93 |           />
 94 |           <div className="flex-wrap-gap-2">
 95 |             <input
 96 |               type="date"
 97 |               placeholder="Start Year"
 98 |               name="startYear"
 99 |               className="other-input"
100 |               value={workExperience.startYear}
101 |               onChange={(e) => handleWorkExperience(e, index)}
102 |             />
103 |             <input
104 |               type="date"
105 |               placeholder="End Year"
106 |               name="endYear"
107 |               className="other-input"
108 |               value={workExperience.endYear}
109 |               onChange={(e) => handleWorkExperience(e, index)}
110 |             />
111 |           </div>
112 |         </div>
113 |       ))}
114 |       <FormButton
115 |         size={resumeData.workExperience.length}
116 |         add={addWorkExperience}
117 |         remove={removeWorkExperience}
118 |       />
119 |     </div>
120 |   );
121 | };
122 | 
123 | export default WorkExperience;
124 |

--------------------------------------------------------------------------------
/pages/templates.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Link from "next/link";
  3 | import { motion } from "framer-motion";
  4 | import { SparklesCore } from "../components/ui/sparkles";
  5 | 
  6 | const templates = [
  7 |   {
  8 |     id: 1,
  9 |     name: "Google Style",
 10 |     image: "/assets/resume.jpg",
 11 |     description: "Clean, metrics-driven format preferred by Google recruiters",
 12 |     style: "modern",
 13 |     features: [
 14 |       "Quantifiable achievements",
 15 |       "Clear section hierarchy",
 16 |       "Bullet-point focused"
 17 |     ]
 18 |   },
 19 |   {
 20 |     id: 2,
 21 |     name: "Amazon Leadership",
 22 |     image: "/assets/resume.jpg",
 23 |     description: "Emphasizes leadership principles and results",
 24 |     style: "leadership",
 25 |     features: [
 26 |       "STAR format bullets",
 27 |       "Leadership principles aligned",
 28 |       "Metrics highlighted"
 29 |     ]
 30 |   },
 31 |   {
 32 |     id: 3,
 33 |     name: "Meta Technical",
 34 |     image: "/assets/resume.jpg",
 35 |     description: "Technical skills-focused layout for engineering roles",
 36 |     style: "technical",
 37 |     features: [
 38 |       "Technical skills matrix",
 39 |       "Project highlights",
 40 |       "System design experience"
 41 |     ]
 42 |   },
 43 |   {
 44 |     id: 4,
 45 |     name: "Apple Design",
 46 |     image: "/assets/resume.jpg",
 47 |     description: "Clean, minimalist design with strong typography",
 48 |     style: "minimal",
 49 |     features: [
 50 |       "Typography focused",
 51 |       "Whitespace optimized",
 52 |       "Visual hierarchy"
 53 |     ]
 54 |   },
 55 |   {
 56 |     id: 5,
 57 |     name: "Minimal Classic",
 58 |     image: "/assets/resume.jpg",
 59 |     description: "Simple, elegant, and professional layout",
 60 |     style: "minimal",
 61 |     features: [
 62 |       "Clean typography",
 63 |       "Perfect spacing",
 64 |       "Traditional structure"
 65 |     ]
 66 |   }
 67 | ];
 68 | 
 69 | export default function TemplatesPage() {
 70 |   return (
 71 |     <div className="min-h-screen relative w-full bg-black flex flex-col items-center justify-center overflow-hidden">
 72 |       {/* Sparkles Background */}
 73 |       <div className="w-full absolute inset-0">
 74 |         <SparklesCore
 75 |           id="tsparticlesfullpage"
 76 |           background="transparent"
 77 |           minSize={0.6}
 78 |           maxSize={1.4}
 79 |           particleDensity={100}
 80 |           className="w-full h-full"
 81 |           particleColor="#FFFFFF"
 82 |         />
 83 |       </div>
 84 |       
 85 |       <div className="relative z-10 pt-20 pb-16 px-4 max-w-7xl mx-auto">
 86 |         <h1 className="text-4xl md:text-6xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 pb-8">
 87 |           Choose Your Template
 88 |         </h1>
 89 |         
 90 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
 91 |           {templates.map((template) => (
 92 |             <TemplateCard key={template.id} template={template} />
 93 |           ))}
 94 |         </div>
 95 |       </div>
 96 |     </div>
 97 |   );
 98 | }
 99 | 
100 | function TemplateCard({ template }) {
101 |   return (
102 |     <motion.div
103 |       whileHover={{ scale: 1.05 }}
104 |       className="relative group rounded-xl border border-white/10 bg-black/50 backdrop-blur-sm overflow-hidden"
105 |     >
106 |       <div className="aspect-[4/3] relative">
107 |         <img
108 |           src={template.image}
109 |           alt={template.name}
110 |           className="object-contain w-full h-full p-4 bg-white/5"
111 |         />
112 |         <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
113 |           <Link
114 |             href={`/builder?template=${template.id}`}
115 |             className="relative inline-flex h-12 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
116 |           >
117 |             Use Template
118 |           </Link>
119 |         </div>
120 |       </div>
121 |       <div className="p-4">
122 |         <h3 className="text-xl font-semibold text-white">{template.name}</h3>
123 |         <p className="text-slate-400 mt-2 text-sm">{template.description}</p>
124 |       </div>
125 |     </motion.div>
126 |   );
127 | }

--------------------------------------------------------------------------------
/pages/builder.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, createContext, useContext } from "react";
  2 | import Language from "../components/form/Language";
  3 | import Meta from "../components/meta/Meta";
  4 | import FormCP from "../components/form/FormCP";
  5 | import LoadUnload from "../components/form/LoadUnload";
  6 | import Preview from "../components/preview/Preview";
  7 | import DefaultResumeData from "../components/utility/DefaultResumeData";
  8 | import SocialMedia from "../components/form/SocialMedia";
  9 | import WorkExperience from "../components/form/WorkExperience";
 10 | import Skill from "../components/form/Skill";
 11 | import PersonalInformation from "../components/form/PersonalInformation";
 12 | import Summary from "../components/form/Summary";
 13 | import Projects from "../components/form/Projects";
 14 | import Education from "../components/form/Education";
 15 | import dynamic from "next/dynamic";
 16 | import Certification from "../components/form/certification";
 17 | import { SparklesCore } from "../components/ui/sparkles";
 18 | 
 19 | const ResumeContext = createContext(DefaultResumeData);
 20 | 
 21 | // server side rendering false
 22 | const Print = dynamic(() => import("../components/utility/WinPrint"), {
 23 |   ssr: false,
 24 | });
 25 | 
 26 | export default function Builder(props) {
 27 |   // resume data
 28 |   const [resumeData, setResumeData] = useState(DefaultResumeData);
 29 | 
 30 |   // form hide/show
 31 |   const [formClose, setFormClose] = useState(false);
 32 | 
 33 |   // profile picture
 34 |   const handleProfilePicture = (e) => {
 35 |     const file = e.target.files[0];
 36 | 
 37 |     if (file instanceof Blob) {
 38 |       const reader = new FileReader();
 39 |       reader.onload = (event) => {
 40 |         setResumeData({ ...resumeData, profilePicture: event.target.result });
 41 |       };
 42 |       reader.readAsDataURL(file);
 43 |     } else {
 44 |       console.error("Invalid file type");
 45 |     }
 46 |   };
 47 | 
 48 |   const handleChange = (e) => {
 49 |     setResumeData({ ...resumeData, [e.target.name]: e.target.value });
 50 |     console.log(resumeData);
 51 |   };
 52 | 
 53 |   return (
 54 |     <>
 55 |       <ResumeContext.Provider
 56 |         value={{
 57 |           resumeData,
 58 |           setResumeData,
 59 |           handleProfilePicture,
 60 |           handleChange,
 61 |         }}
 62 |       >
 63 |         <Meta
 64 |           title="Free Resume Maker"
 65 |           description="free resume maker for humanity."
 66 |           keywords="ATS-friendly, Resume optimization, Keyword-rich resume, ATS resume builder, ATS resume templates, ATS-compliant resume, ATS-optimized CV, ATS-friendly format, ATS resume tips, Resume writing services, Career guidance, Job search in India, Resume tips for India, Professional resume builder, Cover letter writing, Interview preparation, Job interview tips, Career growth, Online job applications, resume builder, free resume builder, resume ats, best free resume builder, resume creator, resume cv, resume design, resume editor, resume maker"
 67 |         />
 68 |         <div className="f-col gap-4 md:flex-row justify-evenly max-w-full md:mx-auto md:h-screen">
 69 |           {!formClose && (
 70 |             <div className="relative w-full h-full md:overflow-y-scroll exclude-print bg-black">
 71 |               <div className="w-full absolute inset-0 z-0">
 72 |                 <SparklesCore
 73 |                   id="tsparticlesfullpage"
 74 |                   background="transparent"
 75 |                   minSize={0.6}
 76 |                   maxSize={1.4}
 77 |                   particleDensity={100}
 78 |                   className="w-full h-full"
 79 |                   particleColor="#FFFFFF"
 80 |                 />
 81 |               </div>
 82 |               <form className="relative z-10 p-4 bg-black/30">
 83 |                 <LoadUnload/>
 84 |                 <PersonalInformation />
 85 |                 <SocialMedia />
 86 |                 <Summary />
 87 |                 <Education />
 88 |                 <WorkExperience />
 89 |                 <Projects />
 90 |                 {resumeData.skills.map((skill, index) => (
 91 |                   <Skill
 92 |                     title={skill.title}
 93 |                     key={index}
 94 |                   />
 95 |                 ))}
 96 |                 <Language />
 97 |                 <Certification />
 98 |               </form>
 99 |             </div>
100 |           )}
101 |           <Preview className="w-full h-full" />
102 |         </div>
103 |         <FormCP formClose={formClose} setFormClose={setFormClose} />
104 |         <Print />
105 |       </ResumeContext.Provider>
106 |     </>
107 |   );
108 | }
109 | export { ResumeContext };
110 |

--------------------------------------------------------------------------------
/components/utility/DefaultResumeData.jsx:
--------------------------------------------------------------------------------
  1 | const DefaultResumeData = {
  2 |   name: "ZAID ADIL",
  3 |   position: "Full Stack Developer",
  4 |   contactInformation: "+91 123456789",
  5 |   email: "hothead01th@gmail.com",
  6 |   address: "Kashmir, India",
  7 |   profilePicture: "",
  8 |   socialMedia: [
  9 |     {
 10 |       socialMedia: "Github",
 11 |       link: "github.com//HOTHEAD01TH",
 12 |     },
 13 |     {
 14 |       socialMedia: "LinkedIn",
 15 |       link: "linkedin.com/in/hothead01th",
 16 |     },
 17 |     {
 18 |       socialMedia: "Website",
 19 |       link: "hothead.vercel.app",
 20 |     },
 21 |   ],
 22 |   summary: "A Full Stack Developer with 3 years of experience in web development, specializing in building dynamic and responsive web applications. Passionate about Web3 and DevOps, with a keen interest in decentralized technologies and automation in the development process. Skilled in both front-end and back-end development, with a focus on delivering efficient and scalable solutions.",
 23 |   education: [
 24 |     {
 25 |       "school": "Kashmir University",
 26 |       "degree": "Bachelors in Computer Application",
 27 |       "startYear": "2022-10-01",
 28 |       "endYear": "2025-07-01"
 29 |     },
 30 |   ],
 31 |   workExperience: [
 32 |     {
 33 |       "company": "Techflare",
 34 |       "position": "Full Stack Developer",
 35 |       "description": "Worked as a full stack developer on multiple client projects, focusing on building scalable web applications using modern technologies. Collaborated with cross-functional teams to deliver high-quality solutions.",
 36 |       "keyAchievements": "Successfully delivered 5+ client projects with 100% satisfaction rate\nReduced application load time by 40% through optimization techniques",
 37 |       "startYear": "2023-10-01",
 38 |       "endYear": "2024-03-01"
 39 |     },
 40 |     {
 41 |       "company": "Techbug",
 42 |       "position": "Frontend Developer Intern",
 43 |       "description": "Contributed to the development of user interfaces for various web applications. Worked closely with senior developers to implement responsive designs and improve user experience.",
 44 |       "keyAchievements": "Developed responsive web interfaces using React and Tailwind CSS\nCollaborated with the design team to implement pixel-perfect UI components",
 45 |       "startYear": "2023-06-01",
 46 |       "endYear": "2023-09-01"
 47 |     }
 48 |   ],
 49 |   projects: [
 50 |    
 51 |     {
 52 |       "name": "AI Resume Maker",
 53 |       "description": "Developed an intelligent resume builder using Next.js with AI-powered content suggestions, multiple templates, and real-time preview functionality. Integrated with Google's Gemini API for smart content optimization.",
 54 |       "keyAchievements": "Implemented drag-and-drop functionality for section reordering\nIntegrated AI-powered content suggestions using Gemini API",
 55 |       "startYear": "2024-02-20",
 56 |       "endYear": "2024-03-15",
 57 |       "link": "https://github.com/HOTHEAD01TH/free-resume-maker"
 58 |     },
 59 |     {
 60 |       "name": "Paytm",
 61 |       "description": "Created a monorepo-based banking application using Express and AWS services. Implemented microservices architecture with features like transaction management, account services, and real-time notifications.",
 62 |       "keyAchievements": "Designed and implemented microservices architecture using Express\nImplemented real-time transaction notifications using AWS SNS",
 63 |       "startYear": "2024-03-20",
 64 |       "endYear": "2024-04-15",
 65 |       "link": "https://github.com/HOTHEAD01TH/paytm-advanced"
 66 |     }
 67 |   ],
 68 |   skills: [
 69 |     {
 70 |       title: "Technical Skills",
 71 |       skills: [
 72 |         "React", "Next.js", "TypeScript", "Tailwind CSS", "MongoDB", "PostgreSQL", 
 73 |         "Express", "Python", "Java", "Docker", "AWS", "Kubernetes", "Jenkins",
 74 |         "Firebase", "Redis", "Node.js", "Git", "REST API"
 75 |       ]
 76 |     },
 77 |     {
 78 |       title: "Soft Skills",
 79 |       skills: [
 80 |         "Collaboration", "Problem-solving", "Communication", "Time management", "Result-oriented"
 81 |       ]
 82 |     },
 83 |     {
 84 |       title: "Additional Skills",
 85 |       skills: [
 86 |         "CI/CD", "Microservices", "System Design", "Cloud Architecture"
 87 |       ] 
 88 |     }
 89 |   ],
 90 |   languages: [
 91 |     "English",
 92 |     "Hindi",
 93 |     "Urdu",
 94 |     "Kashmiri",
 95 |   ],
 96 |   certifications: [
 97 |     {
 98 |       name: "Java and Object-Oriented Programming",
 99 |       issuer: "University of Pennsylvania"
100 |     },
101 |     {
102 |       name: "Introduction to Cloud Computing",
103 |       issuer: "IBM"
104 |     },
105 |     {
106 |       name: "Full Stack Development",
107 |       issuer: "john hopkins university"
108 |     },
109 |     {
110 |       name: "AI Primer Course",
111 |       issuer: "emly labs"
112 |     }
113 |   ],
114 | };
115 | 
116 | export default DefaultResumeData;
117 |

--------------------------------------------------------------------------------
/components/hero/Hero.jsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React from "react";
 3 | import { SparklesCore } from "../ui/sparkles";
 4 | import Link from "next/link";
 5 | import { Typewriter } from 'react-simple-typewriter';
 6 | import { Space_Grotesk } from 'next/font/google';
 7 | 
 8 | const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] });
 9 | 
10 | export default function Hero() {
11 |     return (
12 |         <div className="h-screen relative w-full bg-black flex flex-col items-center justify-center overflow-hidden rounded-md">
13 |             {/* GitHub Star Button */}
14 |             <a
15 |                 href="https://github.com/HOTHEAD01TH/free-resume-maker"
16 |                 target="_blank"
17 |                 rel="noopener noreferrer"
18 |                 className="absolute top-4 right-4 z-50 inline-flex items-center gap-2 rounded-lg border border-slate-800 bg-black px-4 py-2 text-sm text-slate-300 transition-colors hover:bg-slate-800"
19 |             >
20 |                 <svg
21 |                     xmlns="http://www.w3.org/2000/svg"
22 |                     width="20"
23 |                     height="20"
24 |                     fill="currentColor"
25 |                     viewBox="0 0 24 24"
26 |                 >
27 |                     <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
28 |                 </svg>
29 |                 Star on GitHub
30 |             </a>
31 | 
32 |             <div className="w-full absolute inset-0 h-screen">
33 |                 <SparklesCore
34 |                     id="tsparticlesfullpage"
35 |                     background="transparent"
36 |                     minSize={0.6}
37 |                     maxSize={1.4}
38 |                     particleDensity={100}
39 |                     className="w-full h-full"
40 |                     particleColor="#FFFFFF"
41 |                 />
42 |             </div>
43 |             
44 |             <h1 className={`${spaceGrotesk.className} md:text-8xl text-4xl lg:text-7xl font-bold text-center text-white relative z-20 tracking-tighter`}>
45 |                 Free Resume Maker
46 |             </h1>
47 | 
48 |             <div className={`${spaceGrotesk.className} text-center text-slate-500 text-xl mt-4 relative z-20`}>
49 |                 <Typewriter
50 |                     words={['ATS Friendly', 'Smart Suggestions', 'Professional & Perfect']}
51 |                     loop={0}
52 |                     cursor
53 |                     cursorStyle='|'
54 |                     typeSpeed={10}
55 |                     deleteSpeed={10}
56 |                     delaySpeed={800}
57 |                 />
58 |             </div>
59 | 
60 |             {/* Beam and additional sparkles container */}
61 |             <div className="w-[40rem] h-40 relative">
62 |                 {/* Beam gradients */}
63 |                 <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm" />
64 |                 <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
65 |                 <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm" />
66 |                 <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />
67 | 
68 |                 {/* Additional sparkles under text */}
69 |                 <SparklesCore
70 |                     background="transparent"
71 |                     minSize={0.4}
72 |                     maxSize={1}
73 |                     particleDensity={1200}
74 |                     className="w-full h-full"
75 |                     particleColor="#FFFFFF"
76 |                 />
77 | 
78 |                 {/* Radial gradient mask */}
79 |                 <div className="absolute inset-0 w-full h-full bg-black [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
80 |             </div>
81 | 
82 |             <Link
83 |                 href="/builder"
84 |                 className="relative z-20 -mt-20 inline-flex h-12 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
85 |             >
86 |                 Create Resume
87 |             </Link>
88 |         </div>
89 |     );
90 | }
91 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 |

--------------------------------------------------------------------------------
/components/preview/TemplateTwo.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import ContactInfo from "./ContactInfo";
  3 | import Link from "next/link";
  4 | import { FaExternalLinkAlt, FaGithub, FaLinkedin, FaTwitter, FaFacebook, FaInstagram, FaYoutube } from "react-icons/fa";
  5 | import { CgWebsite } from "react-icons/cg";
  6 | import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
  7 | import Certification from "./Certification";
  8 | 
  9 | const TemplateTwo = ({ 
 10 |   namedata, 
 11 |   positiondata, 
 12 |   contactdata, 
 13 |   emaildata, 
 14 |   addressdata, 
 15 |   telicon, 
 16 |   emailicon, 
 17 |   addressicon,
 18 |   summarydata,
 19 |   educationdata,
 20 |   projectsdata,
 21 |   workExperiencedata,
 22 |   skillsdata,
 23 |   languagesdata,
 24 |   certificationsdata,
 25 |   sectionOrder,
 26 |   onDragEnd,
 27 |   resumeData,
 28 |   setResumeData
 29 | }) => {
 30 | 
 31 |   const sections = [
 32 |     { id: "summary", title: "Summary", content: summarydata },
 33 |     { id: "education", title: "Education", content: educationdata },
 34 |     { id: "projects", title: "Projects", content: projectsdata },
 35 |     { id: "experience", title: "Work Experience", content: workExperiencedata },
 36 |     { id: "skills", title: "Technical Skills", content: skillsdata },
 37 |     { id: "softskills", title: "Soft Skills", content: skillsdata.find(skill => skill.title === "Soft Skills")?.skills || [] },
 38 |     { id: "languages", title: "Languages", content: languagesdata },
 39 |     { id: "certifications", title: "Certifications", content: certificationsdata }
 40 |   ];
 41 | 
 42 |   const orderedSections = sectionOrder
 43 |     .map(id => sections.find(section => section.id === id))
 44 |     .filter(section => section !== undefined);
 45 | 
 46 |   const renderSection = (section) => {
 47 |     switch(section.id) {
 48 |       case "certifications":
 49 |         return (
 50 |           <div>
 51 |             <h2 className="section-title border-b-2 border-gray-300 mb-1">Certifications</h2>
 52 |             <ul className="list-disc pl-4 content">
 53 |               {certificationsdata && certificationsdata.map((cert, i) => (
 54 |                 <li key={i} className="content">
 55 |                   {cert.name}
 56 |                   {cert.issuer && (
 57 |                     <span className="text-gray-600"> - {cert.issuer}</span>
 58 |                   )}
 59 |                 </li>
 60 |               ))}
 61 |             </ul>
 62 |           </div>
 63 |         );
 64 |       case "summary":
 65 |         return (
 66 |           <div>
 67 |             <h2 className="section-title border-b-2 border-gray-300 mb-1">Summary</h2>
 68 |             <p className="content">{summarydata}</p>
 69 |           </div>
 70 |         );
 71 |       case "education":
 72 |         return (
 73 |           <div>
 74 |             <h2 className="section-title border-b-2 border-gray-300 mb-1">Education</h2>
 75 |             {educationdata.map((edu, idx) => (
 76 |               <div key={idx} className="mb-1">
 77 |                 <p className="content font-semibold">{edu.school}</p>
 78 |                 <p className="content">{edu.degree}</p>
 79 |                 <p className="sub-content font-medium text-gray-600">
 80 |                   {new Date(edu.startYear).getFullYear()} - {new Date(edu.endYear).getFullYear()}
 81 |                 </p>
 82 |               </div>
 83 |             ))}
 84 |           </div>
 85 |         );
 86 |       case "projects":
 87 |         return (
 88 |           <div>
 89 |             <h2 className="section-title border-b-2 border-gray-300 mb-1">Projects</h2>
 90 |             <Droppable droppableId="projects" type="PROJECTS">
 91 |               {(provided) => (
 92 |                 <div {...provided.droppableProps} ref={provided.innerRef}>
 93 |                   {projectsdata.map((project, idx) => (
 94 |                     <Draggable key={project.name + idx} draggableId={`project-${idx}`} index={idx}>
 95 |                       {(provided, snapshot) => (
 96 |                         <div
 97 |                           ref={provided.innerRef}
 98 |                           {...provided.draggableProps}
 99 |                           {...provided.dragHandleProps}
100 |                           className={`mb-2 ${snapshot.isDragging ? "bg-gray-50" : ""}`}
101 |                         >
102 |                           <div className="flex justify-between items-center">
103 |                             <div className="flex items-center gap-2">
104 |                               <p className="content i-bold">{project.name}</p>
105 |                               {project.link && (
106 |                                 <Link
107 |                                   href={project.link}
108 |                                   target="_blank"
109 |                                   rel="noopener noreferrer"
110 |                                   className="text-blue-600 hover:text-blue-800"
111 |                                   title={project.link}
112 |                                 >
113 |                                   <FaExternalLinkAlt size={12} />
114 |                                 </Link>
115 |                               )}
116 |                             </div>
117 |                             <p className="sub-content font-medium text-gray-600">
118 |                               {new Date(project.startYear).getFullYear()} - {new Date(project.endYear).getFullYear()}
119 |                             </p>
120 |                           </div>
121 |                           <p className="content">{project.description}</p>
122 |                           {project.keyAchievements && (
123 |                             <ul className="list-disc pl-4 content">
124 |                               {project.keyAchievements.split('\n').map((achievement, i) => (
125 |                                 <li key={i} className="content">{achievement}</li>
126 |                               ))}
127 |                             </ul>
128 |                           )}
129 |                         </div>
130 |                       )}
131 |                     </Draggable>
132 |                   ))}
133 |                   {provided.placeholder}
134 |                 </div>
135 |               )}
136 |             </Droppable>
137 |           </div>
138 |         );
139 |       case "experience":
140 |         return (
141 |           <div>
142 |             <h2 className="section-title border-b-2 border-gray-300 mb-1">Work Experience</h2>
143 |             <Droppable droppableId="work-experience" type="WORK_EXPERIENCE">
144 |               {(provided) => (
145 |                 <div {...provided.droppableProps} ref={provided.innerRef}>
146 |                   {workExperiencedata.map((work, idx) => (
147 |                     <Draggable key={work.company + idx} draggableId={`work-${idx}`} index={idx}>
148 |                       {(provided, snapshot) => (
149 |                         <div
150 |                           ref={provided.innerRef}
151 |                           {...provided.draggableProps}
152 |                           {...provided.dragHandleProps}
153 |                           className={`mb-2 ${snapshot.isDragging ? "bg-gray-50" : ""}`}
154 |                         >
155 |                           <div className="flex justify-between items-center">
156 |                             <p className="content">
157 |                               <span className="font-bold">{work.company}</span>
158 |                               <span className="mx-1">-</span>
159 |                               <span>{work.position}</span>
160 |                             </p>
161 |                             <p className="sub-content font-medium text-gray-600">
162 |                               {new Date(work.startYear).getFullYear()} - {new Date(work.endYear).getFullYear()}
163 |                             </p>
164 |                           </div>
165 |                           <p className="content">{work.description}</p>
166 |                           <p className="content">{work.keyAchievements}</p>
167 |                         </div>
168 |                       )}
169 |                     </Draggable>
170 |                   ))}
171 |                   {provided.placeholder}
172 |                 </div>
173 |               )}
174 |             </Droppable>
175 |           </div>
176 |         );
177 |       case "skills":
178 |         return (
179 |           <div>
180 |             <h2 className="section-title border-b-2 border-gray-300 mb-1">Technical Skills</h2>
181 |             <p className="content">
182 |               {skillsdata.find(skill => skill.title === "Technical Skills")?.skills.join(", ")}
183 |             </p>
184 |           </div>
185 |         );
186 |       case "softskills":
187 |         return (
188 |           <div>
189 |             <h2 className="section-title border-b-2 border-gray-300 mb-1">Soft Skills</h2>
190 |             <p className="content">
191 |               {section.content.join(", ")}
192 |             </p>
193 |           </div>
194 |         );
195 |       case "languages":
196 |         return (
197 |           <div>
198 |             <h2 className="section-title border-b-2 border-gray-300 mb-1">Languages</h2>
199 |             <p className="content">
200 |               {section.content.join(", ")}
201 |             </p>
202 |           </div>
203 |         );
204 |       default:
205 |         return null;
206 |     }
207 |   };
208 | 
209 |   const icons = [
210 |     { name: "github", icon: <FaGithub /> },
211 |     { name: "linkedin", icon: <FaLinkedin /> },
212 |     { name: "twitter", icon: <FaTwitter /> },
213 |     { name: "facebook", icon: <FaFacebook /> },
214 |     { name: "instagram", icon: <FaInstagram /> },
215 |     { name: "youtube", icon: <FaYoutube /> },
216 |     { name: "website", icon: <CgWebsite /> },
217 |   ];
218 | 
219 |   // Function to extract username from URL
220 |   const getUsername = (url) => {
221 |     return url.split('/').pop();
222 |   };
223 | 
224 |   if (certificationsdata) {
225 |     console.log("Certifications data exists:", certificationsdata);
226 |     console.log("Section order includes certifications:", sectionOrder.includes("certifications"));
227 |     console.log("Ordered sections:", orderedSections);
228 |   }
229 | 
230 |   return (
231 |     <div className="w-full h-full bg-white p-4">
232 |       {/* Header Section */}
233 |       <div className="text-center mb-2">
234 |         <h1 className="name">{namedata}</h1>
235 |         <p className="profession">{positiondata}</p>
236 |         <ContactInfo
237 |           mainclass="flex flex-row gap-1 contact justify-center"
238 |           linkclass="inline-flex items-center gap-1"
239 |           teldata={contactdata}
240 |           emaildata={emaildata}
241 |           addressdata={addressdata}
242 |           telicon={telicon}
243 |           emailicon={emailicon}
244 |           addressicon={addressicon}
245 |         />
246 |         <div className="flex justify-center items-center gap-2 mt-1 text-sm">
247 |           {resumeData.socialMedia.map((socialMedia, index) => {
248 |             return (
249 |               <a
250 |                 href={`http://${socialMedia.link}`}
251 |                 aria-label={socialMedia.socialMedia}
252 |                 key={index}
253 |                 title={socialMedia.socialMedia}
254 |                 target="_blank"
255 |                 rel="noreferrer"
256 |                 className="inline-flex items-center gap-[2px] text-blue-600 hover:text-blue-800 transition-colors"
257 |               >
258 |                 {icons.map((icon, index) => {
259 |                   if (icon.name === socialMedia.socialMedia.toLowerCase()) {
260 |                     return <span key={index} className="text-sm">{icon.icon}</span>;
261 |                   }
262 |                 })}
263 |                 {getUsername(socialMedia.link)}
264 |               </a>
265 |             );
266 |           })}
267 |         </div>
268 |       </div>
269 | 
270 |       {/* Draggable Sections */}
271 |       <DragDropContext onDragEnd={onDragEnd}>
272 |         <Droppable droppableId="sections" type="SECTION">
273 |           {(provided) => (
274 |             <div {...provided.droppableProps} ref={provided.innerRef}>
275 |               {orderedSections.map((section, index) => (
276 |                 <Draggable key={section.id} draggableId={section.id} index={index}>
277 |                   {(provided, snapshot) => (
278 |                     <div
279 |                       ref={provided.innerRef}
280 |                       {...provided.draggableProps}
281 |                       {...provided.dragHandleProps}
282 |                       className={`mb-2 ${snapshot.isDragging ? "bg-gray-50" : ""}`}
283 |                     >
284 |                       {renderSection(section)}
285 |                     </div>
286 |                   )}
287 |                 </Draggable>
288 |               ))}
289 |               {provided.placeholder}
290 |             </div>
291 |           )}
292 |         </Droppable>
293 |       </DragDropContext>
294 |     </div>
295 |   );
296 | };
297 | 
298 | export default TemplateTwo;

--------------------------------------------------------------------------------
/components/ui/sparkles.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React, { useId, useMemo } from "react";
  3 | import { useEffect, useState } from "react";
  4 | import Particles, { initParticlesEngine } from "@tsparticles/react";
  5 | import type { Container, SingleOrMultiple } from "@tsparticles/engine";
  6 | import { loadSlim } from "@tsparticles/slim";
  7 | import { cn } from "@/lib/utils";
  8 | import { motion, useAnimation } from "framer-motion";
  9 | 
 10 | type ParticlesProps = {
 11 |   id?: string;
 12 |   className?: string;
 13 |   background?: string;
 14 |   particleSize?: number;
 15 |   minSize?: number;
 16 |   maxSize?: number;
 17 |   speed?: number;
 18 |   particleColor?: string;
 19 |   particleDensity?: number;
 20 | };
 21 | export const SparklesCore = (props: ParticlesProps) => {
 22 |   const {
 23 |     id,
 24 |     className,
 25 |     background,
 26 |     minSize,
 27 |     maxSize,
 28 |     speed,
 29 |     particleColor,
 30 |     particleDensity,
 31 |   } = props;
 32 |   const [init, setInit] = useState(false);
 33 |   useEffect(() => {
 34 |     initParticlesEngine(async (engine) => {
 35 |       await loadSlim(engine);
 36 |     }).then(() => {
 37 |       setInit(true);
 38 |     });
 39 |   }, []);
 40 |   const controls = useAnimation();
 41 | 
 42 |   const particlesLoaded = async (container?: Container) => {
 43 |     if (container) {
 44 |       controls.start({
 45 |         opacity: 1,
 46 |         transition: {
 47 |           duration: 1,
 48 |         },
 49 |       });
 50 |     }
 51 |   };
 52 | 
 53 |   const generatedId = useId();
 54 |   return (
 55 |     <motion.div animate={controls} className={cn("opacity-0", className)}>
 56 |       {init && (
 57 |         <Particles
 58 |           id={id || generatedId}
 59 |           className={cn("h-full w-full")}
 60 |           particlesLoaded={particlesLoaded}
 61 |           options={{
 62 |             background: {
 63 |               color: {
 64 |                 value: background || "#0d47a1",
 65 |               },
 66 |             },
 67 |             fullScreen: {
 68 |               enable: false,
 69 |               zIndex: 1,
 70 |             },
 71 | 
 72 |             fpsLimit: 120,
 73 |             interactivity: {
 74 |               events: {
 75 |                 onClick: {
 76 |                   enable: true,
 77 |                   mode: "push",
 78 |                 },
 79 |                 onHover: {
 80 |                   enable: false,
 81 |                   mode: "repulse",
 82 |                 },
 83 |                 resize: true as any,
 84 |               },
 85 |               modes: {
 86 |                 push: {
 87 |                   quantity: 4,
 88 |                 },
 89 |                 repulse: {
 90 |                   distance: 200,
 91 |                   duration: 0.4,
 92 |                 },
 93 |               },
 94 |             },
 95 |             particles: {
 96 |               bounce: {
 97 |                 horizontal: {
 98 |                   value: 1,
 99 |                 },
100 |                 vertical: {
101 |                   value: 1,
102 |                 },
103 |               },
104 |               collisions: {
105 |                 absorb: {
106 |                   speed: 2,
107 |                 },
108 |                 bounce: {
109 |                   horizontal: {
110 |                     value: 1,
111 |                   },
112 |                   vertical: {
113 |                     value: 1,
114 |                   },
115 |                 },
116 |                 enable: false,
117 |                 maxSpeed: 50,
118 |                 mode: "bounce",
119 |                 overlap: {
120 |                   enable: true,
121 |                   retries: 0,
122 |                 },
123 |               },
124 |               color: {
125 |                 value: particleColor || "#ffffff",
126 |                 animation: {
127 |                   h: {
128 |                     count: 0,
129 |                     enable: false,
130 |                     speed: 1,
131 |                     decay: 0,
132 |                     delay: 0,
133 |                     sync: true,
134 |                     offset: 0,
135 |                   },
136 |                   s: {
137 |                     count: 0,
138 |                     enable: false,
139 |                     speed: 1,
140 |                     decay: 0,
141 |                     delay: 0,
142 |                     sync: true,
143 |                     offset: 0,
144 |                   },
145 |                   l: {
146 |                     count: 0,
147 |                     enable: false,
148 |                     speed: 1,
149 |                     decay: 0,
150 |                     delay: 0,
151 |                     sync: true,
152 |                     offset: 0,
153 |                   },
154 |                 },
155 |               },
156 |               effect: {
157 |                 close: true,
158 |                 fill: true,
159 |                 options: {},
160 |                 type: {} as SingleOrMultiple<string> | undefined,
161 |               },
162 |               groups: {},
163 |               move: {
164 |                 angle: {
165 |                   offset: 0,
166 |                   value: 90,
167 |                 },
168 |                 attract: {
169 |                   distance: 200,
170 |                   enable: false,
171 |                   rotate: {
172 |                     x: 3000,
173 |                     y: 3000,
174 |                   },
175 |                 },
176 |                 center: {
177 |                   x: 50,
178 |                   y: 50,
179 |                   mode: "percent",
180 |                   radius: 0,
181 |                 },
182 |                 decay: 0,
183 |                 distance: {},
184 |                 direction: "none",
185 |                 drift: 0,
186 |                 enable: true,
187 |                 gravity: {
188 |                   acceleration: 9.81,
189 |                   enable: false,
190 |                   inverse: false,
191 |                   maxSpeed: 50,
192 |                 },
193 |                 path: {
194 |                   clamp: true,
195 |                   delay: {
196 |                     value: 0,
197 |                   },
198 |                   enable: false,
199 |                   options: {},
200 |                 },
201 |                 outModes: {
202 |                   default: "out",
203 |                 },
204 |                 random: false,
205 |                 size: false,
206 |                 speed: {
207 |                   min: 0.1,
208 |                   max: 1,
209 |                 },
210 |                 spin: {
211 |                   acceleration: 0,
212 |                   enable: false,
213 |                 },
214 |                 straight: false,
215 |                 trail: {
216 |                   enable: false,
217 |                   length: 10,
218 |                   fill: {},
219 |                 },
220 |                 vibrate: false,
221 |                 warp: false,
222 |               },
223 |               number: {
224 |                 density: {
225 |                   enable: true,
226 |                   width: 400,
227 |                   height: 400,
228 |                 },
229 |                 limit: {
230 |                   mode: "delete",
231 |                   value: 0,
232 |                 },
233 |                 value: particleDensity || 120,
234 |               },
235 |               opacity: {
236 |                 value: {
237 |                   min: 0.1,
238 |                   max: 1,
239 |                 },
240 |                 animation: {
241 |                   count: 0,
242 |                   enable: true,
243 |                   speed: speed || 4,
244 |                   decay: 0,
245 |                   delay: 0,
246 |                   sync: false,
247 |                   mode: "auto",
248 |                   startValue: "random",
249 |                   destroy: "none",
250 |                 },
251 |               },
252 |               reduceDuplicates: false,
253 |               shadow: {
254 |                 blur: 0,
255 |                 color: {
256 |                   value: "#000",
257 |                 },
258 |                 enable: false,
259 |                 offset: {
260 |                   x: 0,
261 |                   y: 0,
262 |                 },
263 |               },
264 |               shape: {
265 |                 close: true,
266 |                 fill: true,
267 |                 options: {},
268 |                 type: "circle",
269 |               },
270 |               size: {
271 |                 value: {
272 |                   min: minSize || 1,
273 |                   max: maxSize || 3,
274 |                 },
275 |                 animation: {
276 |                   count: 0,
277 |                   enable: false,
278 |                   speed: 5,
279 |                   decay: 0,
280 |                   delay: 0,
281 |                   sync: false,
282 |                   mode: "auto",
283 |                   startValue: "random",
284 |                   destroy: "none",
285 |                 },
286 |               },
287 |               stroke: {
288 |                 width: 0,
289 |               },
290 |               zIndex: {
291 |                 value: 0,
292 |                 opacityRate: 1,
293 |                 sizeRate: 1,
294 |                 velocityRate: 1,
295 |               },
296 |               destroy: {
297 |                 bounds: {},
298 |                 mode: "none",
299 |                 split: {
300 |                   count: 1,
301 |                   factor: {
302 |                     value: 3,
303 |                   },
304 |                   rate: {
305 |                     value: {
306 |                       min: 4,
307 |                       max: 9,
308 |                     },
309 |                   },
310 |                   sizeOffset: true,
311 |                 },
312 |               },
313 |               roll: {
314 |                 darken: {
315 |                   enable: false,
316 |                   value: 0,
317 |                 },
318 |                 enable: false,
319 |                 enlighten: {
320 |                   enable: false,
321 |                   value: 0,
322 |                 },
323 |                 mode: "vertical",
324 |                 speed: 25,
325 |               },
326 |               tilt: {
327 |                 value: 0,
328 |                 animation: {
329 |                   enable: false,
330 |                   speed: 0,
331 |                   decay: 0,
332 |                   sync: false,
333 |                 },
334 |                 direction: "clockwise",
335 |                 enable: false,
336 |               },
337 |               twinkle: {
338 |                 lines: {
339 |                   enable: false,
340 |                   frequency: 0.05,
341 |                   opacity: 1,
342 |                 },
343 |                 particles: {
344 |                   enable: false,
345 |                   frequency: 0.05,
346 |                   opacity: 1,
347 |                 },
348 |               },
349 |               wobble: {
350 |                 distance: 5,
351 |                 enable: false,
352 |                 speed: {
353 |                   angle: 50,
354 |                   move: 10,
355 |                 },
356 |               },
357 |               life: {
358 |                 count: 0,
359 |                 delay: {
360 |                   value: 0,
361 |                   sync: false,
362 |                 },
363 |                 duration: {
364 |                   value: 0,
365 |                   sync: false,
366 |                 },
367 |               },
368 |               rotate: {
369 |                 value: 0,
370 |                 animation: {
371 |                   enable: false,
372 |                   speed: 0,
373 |                   decay: 0,
374 |                   sync: false,
375 |                 },
376 |                 direction: "clockwise",
377 |                 path: false,
378 |               },
379 |               orbit: {
380 |                 animation: {
381 |                   count: 0,
382 |                   enable: false,
383 |                   speed: 1,
384 |                   decay: 0,
385 |                   delay: 0,
386 |                   sync: false,
387 |                 },
388 |                 enable: false,
389 |                 opacity: 1,
390 |                 rotation: {
391 |                   value: 45,
392 |                 },
393 |                 width: 1,
394 |               },
395 |               links: {
396 |                 blink: false,
397 |                 color: {
398 |                   value: "#fff",
399 |                 },
400 |                 consent: false,
401 |                 distance: 100,
402 |                 enable: false,
403 |                 frequency: 1,
404 |                 opacity: 1,
405 |                 shadow: {
406 |                   blur: 5,
407 |                   color: {
408 |                     value: "#000",
409 |                   },
410 |                   enable: false,
411 |                 },
412 |                 triangles: {
413 |                   enable: false,
414 |                   frequency: 1,
415 |                 },
416 |                 width: 1,
417 |                 warp: false,
418 |               },
419 |               repulse: {
420 |                 value: 0,
421 |                 enabled: false,
422 |                 distance: 1,
423 |                 duration: 1,
424 |                 factor: 1,
425 |                 speed: 1,
426 |               },
427 |             },
428 |             detectRetina: true,
429 |           }}
430 |         />
431 |       )}
432 |     </motion.div>
433 |   );
434 | };
435 |

--------------------------------------------------------------------------------
/components/preview/Preview.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   FaGithub,
  3 |   FaLinkedin,
  4 |   FaTwitter,
  5 |   FaFacebook,
  6 |   FaInstagram,
  7 |   FaYoutube,
  8 |   FaExchangeAlt,
  9 |   FaExternalLinkAlt,
 10 | } from "react-icons/fa";
 11 | import { MdEmail, MdLocationOn, MdPhone } from "react-icons/md";
 12 | import { CgWebsite } from "react-icons/cg";
 13 | import Skills from "./Skills";
 14 | import DateRange from "../utility/DateRange";
 15 | import ContactInfo from "./ContactInfo";
 16 | import Image from "next/image";
 17 | import Link from "next/link";
 18 | import React, { useContext, useState, useEffect } from "react";
 19 | import { ResumeContext } from "../../pages/builder";
 20 | import dynamic from "next/dynamic";
 21 | import Language from "./Language";
 22 | import Certification from "./Certification";
 23 | import TemplateTwo from "./TemplateTwo";
 24 | 
 25 | const DragDropContext = dynamic(
 26 |   () =>
 27 |     import("react-beautiful-dnd").then((mod) => {
 28 |       return mod.DragDropContext;
 29 |     }),
 30 |   { ssr: false }
 31 | );
 32 | const Droppable = dynamic(
 33 |   () =>
 34 |     import("react-beautiful-dnd").then((mod) => {
 35 |       return mod.Droppable;
 36 |     }),
 37 |   { ssr: false }
 38 | );
 39 | const Draggable = dynamic(
 40 |   () =>
 41 |     import("react-beautiful-dnd").then((mod) => {
 42 |       return mod.Draggable;
 43 |     }),
 44 |   { ssr: false }
 45 | );
 46 | 
 47 | const Preview = () => {
 48 |   const { resumeData, setResumeData } = useContext(ResumeContext);
 49 |   const [currentTemplate, setCurrentTemplate] = useState("template1");
 50 |   
 51 |   // Initialize sectionOrder with all sections including certifications
 52 |   const defaultSections = [
 53 |     "summary",
 54 |     "education",
 55 |     "projects",
 56 |     "experience",
 57 |     "skills",
 58 |     "softskills",
 59 |     "languages",
 60 |     "certifications"
 61 |   ];
 62 | 
 63 |   const [sectionOrder, setSectionOrder] = useState(defaultSections);
 64 | 
 65 |   const icons = [
 66 |     { name: "github", icon: <FaGithub /> },
 67 |     { name: "linkedin", icon: <FaLinkedin /> },
 68 |     { name: "twitter", icon: <FaTwitter /> },
 69 |     { name: "facebook", icon: <FaFacebook /> },
 70 |     { name: "instagram", icon: <FaInstagram /> },
 71 |     { name: "youtube", icon: <FaYoutube /> },
 72 |     { name: "website", icon: <CgWebsite /> },
 73 |   ];
 74 | 
 75 |   const onDragEnd = (result) => {
 76 |     const { destination, source } = result;
 77 | 
 78 |     if (!destination) return;
 79 | 
 80 |     if (
 81 |       destination.droppableId === source.droppableId &&
 82 |       destination.index === source.index
 83 |     )
 84 |       return;
 85 | 
 86 |     if (source.droppableId === "work-experience") {
 87 |       const newWorkExperience = [...resumeData.workExperience];
 88 |       const [removed] = newWorkExperience.splice(source.index, 1);
 89 |       newWorkExperience.splice(destination.index, 0, removed);
 90 |       setResumeData({ ...resumeData, workExperience: newWorkExperience });
 91 |     }
 92 | 
 93 |     if (source.droppableId.includes("WORK_EXPERIENCE_KEY_ACHIEVEMENT")) {
 94 |       const newWorkExperience = [...resumeData.workExperience];
 95 |       const workExperienceIndex = parseInt(source.droppableId.split("-")[1]);
 96 |       const keyAchievements =
 97 |         newWorkExperience[workExperienceIndex].keyAchievements.split("\n");
 98 |       const [removed] = keyAchievements.splice(source.index, 1);
 99 |       keyAchievements.splice(destination.index, 0, removed);
100 |       newWorkExperience[workExperienceIndex].keyAchievements =
101 |         keyAchievements.join("\n");
102 |       setResumeData({ ...resumeData, workExperience: newWorkExperience });
103 |     }
104 | 
105 |     if (source.droppableId === "skills") {
106 |       const newSkills = [...resumeData.skills];
107 |       const [removed] = newSkills.splice(source.index, 1);
108 |       newSkills.splice(destination.index, 0, removed);
109 |       setResumeData({ ...resumeData, skills: newSkills });
110 |     }
111 | 
112 |     if (source.droppableId.includes("projects")) {
113 |       const newProjects = [...resumeData.projects];
114 |       const [removed] = newProjects.splice(source.index, 1);
115 |       newProjects.splice(destination.index, 0, removed);
116 |       setResumeData({ ...resumeData, projects: newProjects });
117 |     }
118 | 
119 |     if (source.droppableId.includes("PROJECTS_KEY_ACHIEVEMENT")) {
120 |       const newProjects = [...resumeData.projects];
121 |       const projectIndex = parseInt(source.droppableId.split("-")[1]);
122 |       const keyAchievements =
123 |         newProjects[projectIndex].keyAchievements.split("\n");
124 |       const [removed] = keyAchievements.splice(source.index, 1);
125 |       keyAchievements.splice(destination.index, 0, removed);
126 |       newProjects[projectIndex].keyAchievements = keyAchievements.join("\n");
127 |       setResumeData({ ...resumeData, projects: newProjects });
128 |     }
129 |   };
130 | 
131 |   const handleTemplateTwoDragEnd = (result) => {
132 |     if (!result.destination) return;
133 |     
134 |     const items = Array.from(sectionOrder);
135 |     const [reorderedItem] = items.splice(result.source.index, 1);
136 |     items.splice(result.destination.index, 0, reorderedItem);
137 |     
138 |     
139 |     setSectionOrder(items);
140 |     localStorage.setItem('sectionOrder', JSON.stringify(items));
141 |   };
142 | 
143 |   useEffect(() => {
144 |     const savedOrder = localStorage.getItem('sectionOrder');
145 |     if (savedOrder) {
146 |       // Ensure certifications is included in the saved order
147 |       const parsedOrder = JSON.parse(savedOrder);
148 |       if (!parsedOrder.includes("certifications")) {
149 |         parsedOrder.push("certifications");
150 |       }
151 |       setSectionOrder(parsedOrder);
152 |     } else {
153 |       // If no saved order, use default sections
154 |       localStorage.setItem('sectionOrder', JSON.stringify(defaultSections));
155 |     }
156 |   }, []);
157 | 
158 |   return (
159 |     <div className="md:max-w-[60%] sticky top-0 preview rm-padding-print p-6 md:overflow-y-scroll md:h-screen">
160 |       <button
161 |         onClick={() => setCurrentTemplate(currentTemplate === "template1" ? "template2" : "template1")}
162 |         className="absolute top-4 right-4 z-50 p-2 bg-zinc-800 text-white rounded hover:bg-zinc-700 transition-colors exclude-print"
163 |         title="Switch Template"
164 |       >
165 |         <FaExchangeAlt />
166 |       </button>
167 |       <A4PageWrapper>
168 |         <DragDropContext onDragEnd={currentTemplate === "template1" ? onDragEnd : handleTemplateTwoDragEnd}>
169 |           {currentTemplate === "template1" ? (
170 |             <div className="w-full h-full bg-white p-4">
171 |               <div className="text-center mb-2">
172 |                 <h1 className="name">{resumeData.name}</h1>
173 |                 <p className="profession">{resumeData.position}</p>
174 |                 <ContactInfo
175 |                   mainclass="flex flex-row gap-1 contact justify-center"
176 |                   linkclass="inline-flex items-center gap-1"
177 |                   teldata={resumeData.contactInformation}
178 |                   emaildata={resumeData.email}
179 |                   addressdata={resumeData.address}
180 |                   telicon={<MdPhone />}
181 |                   emailicon={<MdEmail />}
182 |                   addressicon={<MdLocationOn />}
183 |                 />
184 |                 <div className="flex justify-center items-center gap-2 mt-1 text-sm">
185 |                   {resumeData.socialMedia.map((socialMedia, index) => {
186 |                     return (
187 |                       <a
188 |                         href={`http://${socialMedia.link}`}
189 |                         aria-label={socialMedia.socialMedia}
190 |                         key={index}
191 |                         title={socialMedia.socialMedia}
192 |                         target="_blank"
193 |                         rel="noreferrer"
194 |                         className="inline-flex items-center gap-[2px] text-blue-600 hover:text-blue-800 transition-colors"
195 |                       >
196 |                         {icons.map((icon, index) => {
197 |                           if (icon.name === socialMedia.socialMedia.toLowerCase()) {
198 |                             return <span key={index} className="text-sm">{icon.icon}</span>;
199 |                           }
200 |                         })}
201 |                         {socialMedia.link.split('/').pop()}
202 |                       </a>
203 |                     );
204 |                   })}
205 |                 </div>
206 |               </div>
207 |               <hr className="border-dashed my-2" />
208 |               {/* two column start */}
209 |               <div className="grid grid-cols-3 gap-6">
210 |                 <div className="col-span-1 space-y-2">
211 |                   {resumeData.summary.length > 0 && (
212 |                     <div className="mb-1">
213 |                       <h2 className="section-title mb-1 border-b-2 border-gray-300">
214 |                         Summary
215 |                       </h2>
216 |                       <p className="content break-words">{resumeData.summary}</p>
217 |                     </div>
218 |                   )}
219 |                   <div>
220 |                     {resumeData.education.length > 0 && (
221 |                       <div className="mb-1">
222 |                         <h2 className="section-title mb-1 border-b-2 border-gray-300">
223 |                           Education
224 |                         </h2>
225 |                         {resumeData.education.map((item, index) => (
226 |                           <div key={index} className="mb-1">
227 |                             <p className="content i-bold">{item.degree}</p>
228 |                             <p className="content">{item.school}</p>
229 |                             <DateRange
230 |                               startYear={item.startYear}
231 |                               endYear={item.endYear}
232 |                               id={`education-start-end-date`}
233 |                             />
234 |                           </div>
235 |                         ))}
236 |                       </div>
237 |                     )}
238 |                   </div>
239 |                   <Droppable droppableId="skills" type="SKILLS">
240 |                     {(provided) => (
241 |                       <div {...provided.droppableProps} ref={provided.innerRef}>
242 |                         {resumeData.skills.map((skill, index) => (
243 |                           <Draggable
244 |                             key={`SKILLS-${index}`}
245 |                             draggableId={`SKILLS-${index}`}
246 |                             index={index}
247 |                           >
248 |                             {(provided, snapshot) => (
249 |                               <div
250 |                                 ref={provided.innerRef}
251 |                                 {...provided.draggableProps}
252 |                                 {...provided.dragHandleProps}
253 |                                 className={`mb-1 ${
254 |                                   snapshot.isDragging &&
255 |                                   "outline-dashed outline-2 outline-gray-400 bg-white"
256 |                                 }`}
257 |                               >
258 |                                 <Skills title={skill.title} skills={skill.skills} />
259 |                               </div>
260 |                             )}
261 |                           </Draggable>
262 |                         ))}
263 |                         {provided.placeholder}
264 |                       </div>
265 |                     )}
266 |                   </Droppable>
267 |                   <Language title="Languages" languages={resumeData.languages} />
268 |                   <Certification
269 |                     title="Certifications"
270 |                     certifications={resumeData.certifications}
271 |                   />
272 |                 </div>
273 |                 <div className="col-span-2 space-y-2">
274 |                   {resumeData.workExperience.length > 0 && (
275 |                     <Droppable droppableId="work-experience" type="WORK_EXPERIENCE">
276 |                       {(provided) => (
277 |                         <div {...provided.droppableProps} ref={provided.innerRef}>
278 |                           <h2
279 |                             className="section-title mb-1 border-b-2 border-gray-300 editable"
280 |                             contentEditable
281 |                             suppressContentEditableWarning
282 |                           >
283 |                             Work Experience
284 |                           </h2>
285 |                           {resumeData.workExperience.map((item, index) => (
286 |                             <Draggable
287 |                               key={`${item.company}-${index}`}
288 |                               draggableId={`WORK_EXPERIENCE-${index}`}
289 |                               index={index}
290 |                             >
291 |                               {(provided, snapshot) => (
292 |                                 <div
293 |                                   ref={provided.innerRef}
294 |                                   {...provided.draggableProps}
295 |                                   {...provided.dragHandleProps}
296 |                                   className={`mb-1 ${
297 |                                     snapshot.isDragging &&
298 |                                     "outline-dashed outline-2 outline-gray-400 bg-white"
299 |                                   }`}
300 |                                 >
301 |                                   <p className="content i-bold">{item.company}</p>
302 |                                   <p className="content">{item.position}</p>
303 |                                   <DateRange
304 |                                     startYear={item.startYear}
305 |                                     endYear={item.endYear}
306 |                                     id={`work-experience-start-end-date`}
307 |                                   />
308 |                                   <p className="content hyphens-auto">{item.description}</p>
309 |                                   <Droppable
310 |                                     droppableId={`WORK_EXPERIENCE_KEY_ACHIEVEMENT-${index}`}
311 |                                     type="WORK_EXPERIENCE_KEY_ACHIEVEMENT"
312 |                                   >
313 |                                     {(provided) => (
314 |                                       <ul
315 |                                         className="list-disc ul-padding content"
316 |                                         {...provided.droppableProps}
317 |                                         ref={provided.innerRef}
318 |                                       >
319 |                                         {typeof item.keyAchievements === "string" &&
320 |                                           item.keyAchievements
321 |                                             .split("\n")
322 |                                             .map((achievement, subIndex) => (
323 |                                               <Draggable
324 |                                                 key={`${item.company}-${index}-${subIndex}`}
325 |                                                 draggableId={`WORK_EXPERIENCE_KEY_ACHIEVEMENT-${index}-${subIndex}`}
326 |                                                 index={subIndex}
327 |                                               >
328 |                                                 {(provided, snapshot) => (
329 |                                                   <li
330 |                                                     ref={provided.innerRef}
331 |                                                     {...provided.draggableProps}
332 |                                                     {...provided.dragHandleProps}
333 |                                                     className={`
334 |                                               hover:outline-dashed hover:outline-2 hover:outline-gray-400
335 |                                               ${
336 |                                                 snapshot.isDragging &&
337 |                                                 "outline-dashed outline-2 outline-gray-400 bg-white"
338 |                                               }`}
339 |                                                   >
340 |                                                     {achievement}
341 |                                                   </li>
342 |                                                 )}
343 |                                               </Draggable>
344 |                                             ))}
345 |                                         {provided.placeholder}
346 |                                       </ul>
347 |                                     )}
348 |                                   </Droppable>
349 |                                 </div>
350 |                               )}
351 |                             </Draggable>
352 |                           ))}
353 |                           {provided.placeholder}
354 |                         </div>
355 |                       )}
356 |                     </Droppable>
357 |                   )}
358 |                   {resumeData.projects.length > 0 && (
359 |                     <Droppable droppableId="projects" type="PROJECTS">
360 |                       {(provided) => (
361 |                         <div {...provided.droppableProps} ref={provided.innerRef}>
362 |                           <h2
363 |                             className="section-title mb-1 border-b-2 border-gray-300 editable"
364 |                             contentEditable
365 |                             suppressContentEditableWarning
366 |                           >
367 |                             Projects
368 |                           </h2>
369 |                           {resumeData.projects.map((item, index) => (
370 |                             <Draggable
371 |                               key={`${item.name}-${index}`}
372 |                               draggableId={`PROJECTS-${index}`}
373 |                               index={index}
374 |                             >
375 |                               {(provided, snapshot) => (
376 |                                 <div
377 |                                   ref={provided.innerRef}
378 |                                   {...provided.draggableProps}
379 |                                   {...provided.dragHandleProps}
380 |                                   className={`mb-1 ${
381 |                                     snapshot.isDragging &&
382 |                                     "outline-dashed outline-2 outline-gray-400 bg-white"
383 |                                   }`}
384 |                                 >
385 |                                   <div className="flex items-center gap-2">
386 |                                     <p className="content i-bold">{item.name}</p>
387 |                                     {item.link && (
388 |                                       <Link
389 |                                         href={item.link}
390 |                                         target="_blank"
391 |                                         rel="noopener noreferrer"
392 |                                         className="text-blue-600 hover:text-blue-800"
393 |                                         title={item.link}
394 |                                       >
395 |                                         <FaExternalLinkAlt size={12} />
396 |                                       </Link>
397 |                                     )}
398 |                                   </div>
399 |                                   <DateRange
400 |                                     startYear={item.startYear}
401 |                                     endYear={item.endYear}
402 |                                     id={`work-experience-start-end-date`}
403 |                                   />
404 |                                   <p className="content">{item.description}</p>
405 |                                   <Droppable
406 |                                     droppableId={`PROJECTS_KEY_ACHIEVEMENT-${index}`}
407 |                                     type="PROJECTS_KEY_ACHIEVEMENT"
408 |                                   >
409 |                                     {(provided) => (
410 |                                       <ul
411 |                                         className="list-disc ul-padding content"
412 |                                         {...provided.droppableProps}
413 |                                         ref={provided.innerRef}
414 |                                       >
415 |                                         {typeof item.keyAchievements === "string" &&
416 |                                           item.keyAchievements
417 |                                             .split("\n")
418 |                                             .map((achievement, subIndex) => (
419 |                                               <Draggable
420 |                                                 key={`${item.name}-${index}-${subIndex}`}
421 |                                                 draggableId={`PROJECTS_KEY_ACHIEVEMENT-${index}-${subIndex}`}
422 |                                                 index={subIndex}
423 |                                               >
424 |                                                 {(provided, snapshot) => (
425 |                                                   <li
426 |                                                     ref={provided.innerRef}
427 |                                                     {...provided.draggableProps}
428 |                                                     {...provided.dragHandleProps}
429 |                                                     className={`
430 |                                               hover:outline-dashed hover:outline-2 hover:outline-gray-400
431 |                                               ${
432 |                                                 snapshot.isDragging &&
433 |                                                 "outline-dashed outline-2 outline-gray-400 bg-white"
434 |                                               }`}
435 |                                                   >
436 |                                                     {achievement}
437 |                                                   </li>
438 |                                                 )}
439 |                                               </Draggable>
440 |                                             ))}
441 |                                         {provided.placeholder}
442 |                                       </ul>
443 |                                     )}
444 |                                   </Droppable>
445 |                                 </div>
446 |                               )}
447 |                             </Draggable>
448 |                           ))}
449 |                           {provided.placeholder}
450 |                         </div>
451 |                       )}
452 |                     </Droppable>
453 |                   )}
454 |                 </div>
455 |               </div>
456 |             </div>
457 |           ) : (
458 |             <TemplateTwo
459 |               namedata={resumeData.name}
460 |               positiondata={resumeData.position}
461 |               contactdata={resumeData.contactInformation}
462 |               emaildata={resumeData.email}
463 |               addressdata={resumeData.address}
464 |               telicon={<MdPhone />}
465 |               emailicon={<MdEmail />}
466 |               addressicon={<MdLocationOn />}
467 |               summarydata={resumeData.summary}
468 |               educationdata={resumeData.education}
469 |               projectsdata={resumeData.projects}
470 |               workExperiencedata={resumeData.workExperience}
471 |               skillsdata={resumeData.skills}
472 |               languagesdata={resumeData.languages}
473 |               certificationsdata={resumeData.certifications}
474 |               sectionOrder={sectionOrder}
475 |               onDragEnd={handleTemplateTwoDragEnd}
476 |               resumeData={resumeData}
477 |               setResumeData={setResumeData}
478 |             />
479 |           )}
480 |         </DragDropContext>
481 |       </A4PageWrapper>
482 |     </div>
483 |   );
484 | };
485 | 
486 | const A4PageWrapper = ({ children }) => {
487 | 
488 |   const alertA4Size = () => {
489 |     const preview = document.querySelector(".preview");
490 |     const previewHeight = preview.offsetHeight;
491 |     if (previewHeight > 1122) {
492 |       alert("A4 size exceeded");
493 |     }
494 |   };
495 | 
496 |   return <div className="w-8.5in" onLoad={alertA4Size}>{children}</div>;
497 | };
498 | 
499 | export default Preview;

--------------------------------------------------------------------------------