├── 1.html ├── README.md ├── akash.html ├── curriculum.png ├── cv.png ├── cvpage.html ├── home-page-final.css ├── home-page-final.html ├── home-page-final.js ├── logo.png ├── lower-page-final.css ├── lower-page-final.html ├── lower-page-final.js ├── resume x ├── index.html ├── index.js └── styles.css ├── resumex project 1 ├── script.js ├── style.css ├── withimage.html ├── withimages ├── With1.jpg ├── With10.jpg ├── With2.jpg ├── With3.jpg ├── With4.jpg ├── With5.jpg ├── With6.jpg ├── With7.jpg ├── With8.jpg └── With9.jpg ├── withoutimage.html └── withoutimages ├── Out1.jpg ├── Out2.jpg ├── Out3.jpg ├── Out4.jpg ├── Out5.jpg ├── Out6.jpg ├── Out7.jpg ├── Out8.jpg └── Out9.jpg /1.html: -------------------------------------------------------------------------------- 1 |

akash

-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Resume Builder Website 2 | 3 | A simple and responsive resume-building website using **HTML** and **CSS**. This project allows users to create, preview, and download their resumes in an elegant and structured format. 4 | 5 | ## Features 6 | - **User-Friendly Interface**: Simple and easy-to-use UI for building resumes. 7 | - **Fully Responsive**: Works on all screen sizes (mobile, tablet, desktop). 8 | - **Customizable Sections**: Add personal details, education, experience, skills, and more. 9 | - **Download as PDF**: Generate and download the resume. 10 | - **CSS Styling**: Neumorphism and modern UI design. 11 | 12 | ## Technologies Used 13 | - **HTML5**: Structure of the website 14 | - **CSS3**: Styling and responsiveness 15 | 16 | ## Installation & Usage 17 | 1. Clone the repository: 18 | ```sh 19 | git clone https://github.com/aspatil0/resume-builder.git 20 | ``` 21 | 2. Navigate to the project folder: 22 | ```sh 23 | cd RESUMEX 24 | ``` 25 | 3. Open `index.html` in your browser. 26 | 27 | ## Folder Structure 28 | ``` 29 | resume-builder/ 30 | │── index.html # Main file 31 | │── styles.css # CSS file for styling 32 | │── assets/ # Images, icons, and other resources 33 | └── README.md # Project documentation 34 | ``` 35 | 36 | ## Contributing 37 | If you'd like to contribute, please fork the repository and submit a pull request with your changes. 38 | 39 | 40 | 41 | --- 42 | ### Contact 43 | For any inquiries, feel free to reach out to me at **[aspatil2904@gmail.com]** or connect on [LinkedIn](https://linkedin.com/in/adityarajpatil). 44 | -------------------------------------------------------------------------------- /akash.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | Aakash kulkarni 5 |

6 | 7 | -------------------------------------------------------------------------------- /curriculum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/curriculum.png -------------------------------------------------------------------------------- /cv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/cv.png -------------------------------------------------------------------------------- /cvpage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CV Resources 8 | 9 | 10 | 11 | 270 | 271 | 272 | 273 |
274 | 277 | 286 |
287 | 288 | 289 | 290 |
291 |

CV RESOURCES

292 |
293 |
294 |
295 | CV Icon 296 |
297 | how to write cv 298 |
299 | 300 |
301 | 302 |
303 |

What is a CV (Curriculum Vitae)?

304 |

CV (short for Curriculum Vitae) is the Latin word for "course of life."

305 |

In a nutshell, a CV is a summary of who you are as a professional, including your work history, 306 | education, and skills. Done right, a CV is supposed to “sell you” to potential employers and land 307 | you a job.

308 |
309 | 310 | 311 |
312 |

What’s the Difference Between a CV and a Resume?

313 |

Technically speaking, a CV and a resume are the same document. The only difference is that Americans 314 | call it a "resume," while Europeans and others refer to it as a CV.

315 |

A European CV can be between two and three pages long, depending on experience. A US resume is 316 | usually one or two pages max.

317 |

For more on the CV vs Resume topic, check out our article.

318 |
319 | 320 | 321 |
322 |

How to Write a CV?

323 |

There’s a lot that goes into writing an attention-grabbing CV, so you’re better off reading 324 | our comprehensive guide to improve your chances of getting hired. 325 |

    326 | That said, here are some effective tips to get you started: 327 |
  • Pick a CV template that suits your industry.
    • 328 |
  • Keep the layout professional with consistent headings, white space, and a readable font.
    • 329 |
  • Add essential contact details (name, job title, phone number, email, LinkedIn).
    • 330 |
  • Write a concise summary highlighting your top achievements.
    • 331 |
  • Showcase work experience with quantifiable achievements.
    • 332 |
  • Keep the education section brief, mentioning only the highest degree.
    • 333 |
  • List relevant soft and hard skills.
    • 334 |
  • Optionally, include sections like certifications, languages, or personal projects.
    • 335 |
  • Follow the tips in our CV builder to help you polish your CV.
    • 336 |
337 |

338 |
339 | 340 | 341 |
342 |

How Long Should a CV Be?

343 |

344 | For most jobs, a CV can be between one and three pages. 345 | That said, we always recommend keeping your CV short and to the point (i.e. one page long). The more 346 | concise you make your CV, the more likely it is for the hiring manager to read it from start to 347 | finish. 348 | If you’re based in the US, though, and you’re applying for a job or admission in academia, your CV 349 | can be as long as it needs to reflect your lengthy academic career (i.e. eight pages or more). 350 |

351 |
352 | 353 |
354 | 355 |
356 | CV vs Resume 357 | 358 | how long must be 359 | 360 |
361 |
362 | 363 | 364 |
365 |

Choose a Professional CV Template

366 |

Pick one of our CV templates, each meticulously designed with leading HR firms from around the world.

367 | Start with Random Template 368 |
369 | 370 | 371 |
372 |
373 |
374 | Creative CV 375 |

Creative

376 |

Perfect for startups and young companies.

377 |
378 |
379 | Basic CV 380 |

Basic

381 |

A simple and clean CV for all industries.

382 |
383 |
384 | Skill-Based CV 385 |

Skill-Based

386 |

Ideal for changing careers and industries.

387 |
388 |
389 | Minimalist CV 390 |

Minimalist

391 |

Perfect for corporate jobs in banking and law.

392 |
393 |
394 |
395 | 396 | 397 | 398 | -------------------------------------------------------------------------------- /home-page-final.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | :root { 10 | --primary-color: #ffffff; 11 | --text-color: #000000; 12 | --accent-color: #4a4a4a; 13 | --hover-color: #5a5a5a; 14 | --transition: all 0.3s ease; 15 | } 16 | 17 | body { 18 | font-family: 'Montserrat', sans-serif; 19 | background-color: var(--primary-color); 20 | color: var(--text-color); 21 | line-height: 1.6; 22 | overflow-x: hidden; 23 | } 24 | 25 | header { 26 | border-bottom: 1px solid #1a1a1a; 27 | position: fixed; 28 | width: 100%; 29 | top: 0; 30 | background-color: #000000; /* Changed to match the logo background */ 31 | backdrop-filter: blur(10px); 32 | z-index: 1000; 33 | transition: var(--transition); /* Added transition for smooth effect */ 34 | } 35 | 36 | nav { 37 | max-width: 1200px; 38 | margin: 0 auto; 39 | padding: 0.5rem; /* Reduced padding to make the navbar thinner */ 40 | display: flex; 41 | justify-content: space-between; 42 | align-items: center; 43 | } 44 | 45 | .logo img { 46 | height: 60px; /* Adjusted the height to make the logo more visible */ 47 | object-fit: contain; 48 | transition: var(--transition); 49 | } 50 | 51 | /* Remove the hover effect from the logo */ 52 | .logo img:hover { 53 | transform: none; 54 | } 55 | 56 | .nav-links { 57 | display: flex; 58 | gap: 2rem; 59 | align-items: center; /* Ensure text is parallel to the navbar */ 60 | } 61 | 62 | .nav-link { 63 | color: #ccc; /* Changed to a brighter shade of grey */ 64 | text-decoration: none; 65 | transition: var(--transition); 66 | position: relative; 67 | padding: 0.5rem 0; 68 | } 69 | 70 | .nav-link::after { 71 | content: ''; 72 | position: absolute; 73 | bottom: 0; 74 | left: 0; 75 | width: 0; 76 | height: 2px; 77 | background-color: var(--text-color); 78 | transition: var(--transition); 79 | } 80 | 81 | .nav-link:hover { 82 | color: #ffffff; /* Changed to bright white */ 83 | } 84 | 85 | .nav-link:hover::after { 86 | width: 100%; 87 | } 88 | 89 | main { 90 | max-width: 1200px; 91 | margin: 0 auto; 92 | padding: 8rem 1rem 4rem; 93 | text-align: center; 94 | } 95 | 96 | h1 { 97 | font-size: 3.5rem; 98 | font-weight: 300; 99 | max-width: 1000px; 100 | margin: 0 auto 4rem; 101 | line-height: 1.2; 102 | } 103 | 104 | .content-section { 105 | max-width: 800px; 106 | margin: 0 auto 4rem; 107 | } 108 | 109 | h2 { 110 | font-size: 2rem; 111 | font-weight: 300; 112 | margin-bottom: 3rem; 113 | } 114 | 115 | .buttons { 116 | display: flex; 117 | gap: 1.5rem; 118 | justify-content: center; 119 | } 120 | 121 | .btn { 122 | padding: 1rem 2.5rem; 123 | font-size: 1.125rem; 124 | border-radius: 9999px; 125 | border: none; 126 | cursor: pointer; 127 | transition: var(--transition); 128 | position: relative; 129 | overflow: hidden; 130 | } 131 | 132 | .btn span { 133 | position: relative; 134 | z-index: 1; 135 | } 136 | 137 | .btn-shine { 138 | position: absolute; 139 | top: -50%; 140 | left: -50%; 141 | width: 200%; 142 | height: 200%; 143 | background: linear-gradient( 144 | 45deg, 145 | transparent, 146 | rgba(255, 255, 255, 0.1), 147 | transparent 148 | ); 149 | transform: translateX(-100%); 150 | transition: var(--transition); 151 | } 152 | 153 | .btn:hover .btn-shine { 154 | transform: translateX(100%); 155 | } 156 | 157 | .create-btn { 158 | background-color: var(--accent-color); 159 | color: var(--text-color); 160 | } 161 | 162 | .create-btn:hover { 163 | background-color: var(--hover-color); 164 | transform: translateY(-2px); 165 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 166 | } 167 | 168 | .open-btn { 169 | background-color: var(--text-color); 170 | color: var(--primary-color); 171 | } 172 | 173 | .open-btn:hover { 174 | background-color: #f0f0f0; 175 | transform: translateY(-2px); 176 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 177 | } 178 | 179 | h3 { 180 | font-size: 2rem; 181 | font-weight: 300; 182 | margin-top: 4rem; 183 | text-decoration: underline; 184 | } 185 | 186 | .mobile-menu-btn { 187 | display: none; 188 | flex-direction: column; 189 | gap: 6px; 190 | background: none; 191 | border: none; 192 | cursor: pointer; 193 | padding: 0.5rem; 194 | } 195 | 196 | .mobile-menu-btn span { 197 | display: block; 198 | width: 25px; 199 | height: 2px; 200 | background-color: var(--text-color); 201 | transition: var(--transition); 202 | } 203 | 204 | .mobile-menu { 205 | position: fixed; 206 | top: 0; 207 | right: -100%; 208 | width: 100%; 209 | height: 100vh; 210 | background-color: var(--primary-color); 211 | display: flex; 212 | flex-direction: column; 213 | align-items: center; 214 | justify-content: center; 215 | gap: 2rem; 216 | transition: var(--transition); 217 | z-index: 999; 218 | } 219 | 220 | .mobile-menu.active { 221 | right: 0; 222 | } 223 | 224 | .mobile-menu a { 225 | color: var(--text-color); 226 | text-decoration: none; 227 | font-size: 1.5rem; 228 | transition: var(--transition); 229 | } 230 | 231 | .mobile-menu a:hover { 232 | color: #999; 233 | } 234 | 235 | /* Responsive Design */ 236 | @media (max-width: 768px) { 237 | .nav-links { 238 | display: none; 239 | } 240 | 241 | .mobile-menu-btn { 242 | display: flex; 243 | } 244 | 245 | h1 { 246 | font-size: 2.5rem; 247 | } 248 | 249 | h2 { 250 | font-size: 1.5rem; 251 | } 252 | 253 | .buttons { 254 | flex-direction: column; 255 | } 256 | 257 | .btn { 258 | width: 100%; 259 | } 260 | 261 | .mobile-menu-btn.active span:nth-child(1) { 262 | transform: translateY(8px) rotate(45deg); 263 | } 264 | 265 | .mobile-menu-btn.active span:nth-child(2) { 266 | opacity: 0; 267 | } 268 | 269 | .mobile-menu-btn.active span:nth-child(3) { 270 | transform: translateY(-8px) rotate(-45deg); 271 | } 272 | } -------------------------------------------------------------------------------- /home-page-final.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | ResumeX - Create Your Resume 9 | 10 | 11 | 12 | 13 |
14 | 31 |
32 | 33 |
34 |

35 | Create your resume in just a few clicks! Kickstart your career now with our advanced Resume builder tool 36 |

37 | 38 |
39 |

40 | Create a job-winning professional resume easily, or update your existing document from any device. Our builder features 30+ resume templates, step-by-step guidance, and endless customizable content options. 41 |

42 | 43 |
44 | 48 | 52 |
53 |
54 | 55 |

56 | Create resumes that get noticed simple, easy, fast, free 57 |

58 |
59 | 60 |
61 | Resumes 62 | About Us 63 | CV 64 | Cover Letters 65 | Contact Us 66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 76 | 77 | 78 | 79 | 80 | 81 | ResumeX - Create Your Resume 82 | 83 | 84 | 85 | 86 | 87 |
88 | 105 |
106 | 107 |
108 |

109 | Create your resume in just a few clicks! Kickstart your career now with our advanced Resume builder tool 110 |

111 | 112 |
113 |

114 | Create a job-winning professional resume easily, or update your existing document from any device. Our builder features 30+ resume templates, step-by-step guidance, and endless customizable content options. 115 |

116 | 117 |
118 | 122 | 126 |
127 |
128 | 129 |

130 | Create resumes that get noticed simple, easy, fast, free 131 |

132 |
133 | 134 |
135 |
136 | 137 |
138 |

Every detail on your resume, built to perfection

139 |

140 | Our resume templates are based on what employers actually look 141 | for in a candidate. How do we know? We've talked with thousand 142 | of employers to get the answers. 143 |

144 | 145 | 146 |
147 | 148 | 149 |
150 |
151 |
152 | Resume template 1 153 |
154 |
155 | Resume template 2 156 |
157 |
158 | Resume template 3 159 |
160 |
161 | Resume template 4 162 |
163 |
164 | 165 | 166 | 167 | 172 | 177 | 178 | 179 |
180 |
181 |
182 | 183 | 186 | 187 | 188 | 189 | 190 | 191 | --> 192 | -------------------------------------------------------------------------------- /home-page-final.js: -------------------------------------------------------------------------------- 1 | // Initialize AOS (Animate On Scroll) 2 | AOS.init({ 3 | duration: 1000, 4 | once: true, 5 | offset: 100 6 | }); 7 | 8 | // Mobile Menu Functionality 9 | const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); 10 | const mobileMenu = document.querySelector('.mobile-menu'); 11 | const body = document.body; 12 | 13 | mobileMenuBtn.addEventListener('click', () => { 14 | mobileMenuBtn.classList.toggle('active'); 15 | mobileMenu.classList.toggle('active'); 16 | body.style.overflow = body.style.overflow === 'hidden' ? '' : 'hidden'; 17 | }); 18 | 19 | // Close mobile menu when clicking on a link 20 | document.querySelectorAll('.mobile-menu a').forEach(link => { 21 | link.addEventListener('click', () => { 22 | mobileMenuBtn.classList.remove('active'); 23 | mobileMenu.classList.remove('active'); 24 | body.style.overflow = ''; 25 | }); 26 | }); 27 | 28 | // Smooth scroll for navigation links 29 | document.querySelectorAll('a[href^="#"]').forEach(anchor => { 30 | anchor.addEventListener('click', function (e) { 31 | e.preventDefault(); 32 | const target = document.querySelector(this.getAttribute('href')); 33 | if (target) { 34 | target.scrollIntoView({ 35 | behavior: 'smooth', 36 | block: 'start' 37 | }); 38 | } 39 | }); 40 | }); 41 | 42 | // Button hover effects 43 | const buttons = document.querySelectorAll('.btn'); 44 | buttons.forEach(button => { 45 | button.addEventListener('mouseover', function() { 46 | this.style.transform = 'translateY(-2px)'; 47 | }); 48 | 49 | button.addEventListener('mouseout', function() { 50 | this.style.transform = 'translateY(0)'; 51 | }); 52 | }); 53 | 54 | // Header scroll effect 55 | let lastScroll = 0; 56 | const header = document.querySelector('header'); 57 | 58 | window.addEventListener('scroll', () => { 59 | const currentScroll = window.pageYOffset; 60 | 61 | if (currentScroll <= 0) { 62 | header.style.transform = 'translateY(0)'; 63 | return; 64 | } 65 | 66 | if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) { 67 | header.style.transform = 'translateY(-100%)'; 68 | } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) { 69 | header.style.transform = 'translateY(0)'; 70 | } 71 | 72 | lastScroll = currentScroll; 73 | }); 74 | 75 | // Create Resume Button Click Handler 76 | document.getElementById('createBtn').addEventListener('click', () => { 77 | // Add animation class 78 | const btn = document.getElementById('createBtn'); 79 | btn.classList.add('clicked'); 80 | 81 | // Remove animation class after animation completes 82 | setTimeout(() => { 83 | btn.classList.remove('clicked'); 84 | // Add your create resume functionality here 85 | console.log('Creating new resume...'); 86 | }, 300); 87 | }); 88 | 89 | // Open Resume Button Click Handler 90 | document.getElementById('openBtn').addEventListener('click', () => { 91 | // Add animation class 92 | const btn = document.getElementById('openBtn'); 93 | btn.classList.add('clicked'); 94 | 95 | // Remove animation class after animation completes 96 | setTimeout(() => { 97 | btn.classList.remove('clicked'); 98 | // Add your open resume functionality here 99 | console.log('Opening existing resume...'); 100 | }, 300); 101 | }); -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/logo.png -------------------------------------------------------------------------------- /lower-page-final.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #000000; /* Change button color to black */ 3 | --primary-hover: #333333; /* Darker shade for hover effect */ 4 | --background: #ffffff; 5 | --foreground: #000000; /* Change accent color to black */ 6 | --muted: #f1f5f9; 7 | --muted-foreground: #64748b; 8 | } 9 | 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: 'Montserrat', sans-serif; 18 | background-color: var(--background); 19 | color: var(--foreground); /* Ensure body text uses the foreground color */ 20 | line-height: 1.5; 21 | } 22 | 23 | .container { 24 | min-height: 100vh; 25 | padding: 2rem; 26 | } 27 | 28 | .content-wrapper { 29 | max-width: 1280px; 30 | margin: 0 auto; 31 | display: grid; 32 | gap: 2rem; 33 | padding: 2rem; 34 | } 35 | 36 | .content-left { 37 | display: flex; 38 | flex-direction: column; 39 | gap: 1.5rem; 40 | } 41 | 42 | .content-left h1 { 43 | font-size: 2.5rem; 44 | font-weight: 700; 45 | line-height: 1.2; 46 | } 47 | 48 | .content-left p { 49 | font-size: 1.125rem; 50 | color: var(--foreground); /* Ensure paragraph text uses the foreground color */ 51 | } 52 | 53 | .create-resume-btn { 54 | display: inline-flex; 55 | align-items: center; 56 | justify-content: center; 57 | padding: 1rem 2rem; 58 | font-size: 1.125rem; 59 | font-weight: 500; 60 | background-color: var(--primary); 61 | color: white; 62 | border: none; 63 | border-radius: 9999px; 64 | cursor: pointer; 65 | transition: all 0.2s ease; 66 | width: fit-content; 67 | } 68 | 69 | .create-resume-btn:hover { 70 | background-color: var(--primary-hover); 71 | transform: scale(1.05); 72 | } 73 | 74 | .create-resume-btn:active { 75 | transform: scale(0.95); 76 | } 77 | 78 | /* Carousel Styles */ 79 | .carousel-container { 80 | position: relative; 81 | border-radius: 0.5rem; 82 | overflow: hidden; 83 | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); 84 | touch-action: pan-y pinch-zoom; 85 | } 86 | 87 | .carousel-wrapper { 88 | position: relative; 89 | height: 0; 90 | padding-bottom: 75%; /* 4:3 Aspect Ratio */ 91 | } 92 | 93 | .carousel-slide { 94 | position: absolute; 95 | top: 0; 96 | left: 0; 97 | width: 100%; 98 | height: 100%; 99 | opacity: 0; 100 | transition: opacity 0.5s ease; 101 | pointer-events: none; 102 | } 103 | 104 | .carousel-slide.active { 105 | opacity: 1; 106 | pointer-events: auto; 107 | } 108 | 109 | .carousel-slide img { 110 | width: 100%; 111 | height: 100%; 112 | object-fit: cover; 113 | } 114 | 115 | /* Navigation Buttons */ 116 | .nav-btn { 117 | position: absolute; 118 | top: 50%; 119 | transform: translateY(-50%); 120 | width: 2.5rem; 121 | height: 2.5rem; 122 | border-radius: 50%; 123 | background-color: rgba(255, 255, 255, 0.7); 124 | border: none; 125 | cursor: pointer; 126 | display: flex; 127 | align-items: center; 128 | justify-content: center; 129 | transition: all 0.2s ease; 130 | backdrop-filter: blur(4px); 131 | z-index: 10; 132 | } 133 | 134 | .nav-btn:hover { 135 | background-color: rgba(255, 255, 255, 0.9); 136 | } 137 | 138 | .prev-btn { 139 | left: 1rem; 140 | } 141 | 142 | .next-btn { 143 | right: 1rem; 144 | } 145 | 146 | .nav-btn svg { 147 | width: 1.5rem; 148 | height: 1.5rem; 149 | stroke: var(--foreground); 150 | } 151 | 152 | /* Dots Navigation */ 153 | .carousel-dots { 154 | position: absolute; 155 | bottom: 1rem; 156 | left: 50%; 157 | transform: translateX(-50%); 158 | display: flex; 159 | gap: 0.5rem; 160 | z-index: 10; 161 | } 162 | 163 | .dot { 164 | width: 0.5rem; 165 | height: 0.5rem; 166 | border-radius: 9999px; 167 | background-color: rgba(255, 255, 255, 0.5); 168 | border: none; 169 | cursor: pointer; 170 | transition: all 0.3s ease; 171 | padding: 0; 172 | } 173 | 174 | .dot.active { 175 | width: 1.5rem; 176 | background-color: white; 177 | } 178 | 179 | /* Responsive Design */ 180 | @media (min-width: 1024px) { 181 | .content-wrapper { 182 | grid-template-columns: repeat(2, 1fr); 183 | align-items: center; 184 | } 185 | 186 | .content-left h1 { 187 | font-size: 3rem; 188 | } 189 | } 190 | 191 | @media (max-width: 768px) { 192 | .container { 193 | padding: 1rem; 194 | } 195 | 196 | .content-wrapper { 197 | padding: 1rem; 198 | } 199 | 200 | .content-left h1 { 201 | font-size: 2rem; 202 | } 203 | 204 | .nav-btn { 205 | width: 2rem; 206 | height: 2rem; 207 | } 208 | 209 | .nav-btn svg { 210 | width: 1.25rem; 211 | height: 1.25rem; 212 | } 213 | } 214 | 215 | /* Touch Feedback */ 216 | .carousel-container.dragging { 217 | cursor: grabbing; 218 | } 219 | 220 | /* Accessibility */ 221 | .nav-btn:focus, 222 | .dot:focus { 223 | outline: 2px solid var(--primary); 224 | outline-offset: 2px; 225 | } 226 | 227 | @media (prefers-reduced-motion: reduce) { 228 | .carousel-slide, 229 | .nav-btn, 230 | .dot { 231 | transition: none; 232 | } 233 | } 234 | 235 | .highlight { 236 | background-color: grey; /* Highlight color */ 237 | font-weight: bold; /* Optional: make the text bold */ 238 | } -------------------------------------------------------------------------------- /lower-page-final.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resume Builder 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |

Every detail on your resume, built to perfection

16 |

17 | Our resume templates are based on what employers actually look 18 | for in a candidate. How do we know? We've talked with thousand 19 | of employers to get the answers. 20 |

21 | 22 | 23 |
24 | 25 | 26 |
27 |
28 |
29 | Resume template 1 30 |
31 |
32 | Resume template 2 33 |
34 |
35 | Resume template 3 36 |
37 |
38 | Resume template 4 39 |
40 |
41 | 42 | 43 | 48 | 53 | 54 | 55 |
56 |
57 |
58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /lower-page-final.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const carousel = { 3 | container: document.querySelector('.carousel-container'), 4 | wrapper: document.querySelector('.carousel-wrapper'), 5 | slides: document.querySelectorAll('.carousel-slide'), 6 | dotsContainer: document.querySelector('.carousel-dots'), 7 | prevBtn: document.querySelector('.prev-btn'), 8 | nextBtn: document.querySelector('.next-btn'), 9 | currentSlide: 0, 10 | touchStartX: null, 11 | touchEndX: null, 12 | autoPlayInterval: null, 13 | 14 | init() { 15 | // Create dots 16 | this.slides.forEach((_, index) => { 17 | const dot = document.createElement('button'); 18 | dot.classList.add('dot'); 19 | dot.setAttribute('aria-label', `Go to slide ${index + 1}`); 20 | dot.addEventListener('click', () => this.goToSlide(index)); 21 | this.dotsContainer.appendChild(dot); 22 | }); 23 | 24 | // Add event listeners 25 | this.prevBtn.addEventListener('click', () => this.prevSlide()); 26 | this.nextBtn.addEventListener('click', () => this.nextSlide()); 27 | 28 | // Keyboard navigation 29 | document.addEventListener('keydown', (e) => { 30 | if (e.key === 'ArrowLeft') this.prevSlide(); 31 | if (e.key === 'ArrowRight') this.nextSlide(); 32 | }); 33 | 34 | // Touch events 35 | this.container.addEventListener('touchstart', (e) => this.handleTouchStart(e)); 36 | this.container.addEventListener('touchmove', (e) => this.handleTouchMove(e)); 37 | this.container.addEventListener('touchend', () => this.handleTouchEnd()); 38 | 39 | // Auto play 40 | this.startAutoPlay(); 41 | this.container.addEventListener('mouseenter', () => this.stopAutoPlay()); 42 | this.container.addEventListener('mouseleave', () => this.startAutoPlay()); 43 | 44 | // Initialize first slide 45 | this.updateSlide(); 46 | }, 47 | 48 | updateSlide() { 49 | // Update slides 50 | this.slides.forEach((slide, index) => { 51 | slide.classList.toggle('active', index === this.currentSlide); 52 | }); 53 | 54 | // Update dots 55 | const dots = this.dotsContainer.querySelectorAll('.dot'); 56 | dots.forEach((dot, index) => { 57 | dot.classList.toggle('active', index === this.currentSlide); 58 | }); 59 | 60 | // Announce for screen readers 61 | this.announceSlide(); 62 | }, 63 | 64 | nextSlide() { 65 | this.currentSlide = (this.currentSlide + 1) % this.slides.length; 66 | this.updateSlide(); 67 | }, 68 | 69 | prevSlide() { 70 | this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length; 71 | this.updateSlide(); 72 | }, 73 | 74 | goToSlide(index) { 75 | this.currentSlide = index; 76 | this.updateSlide(); 77 | }, 78 | 79 | handleTouchStart(e) { 80 | this.touchStartX = e.touches[0].clientX; 81 | this.container.classList.add('dragging'); 82 | }, 83 | 84 | handleTouchMove(e) { 85 | if (!this.touchStartX) return; 86 | this.touchEndX = e.touches[0].clientX; 87 | }, 88 | 89 | handleTouchEnd() { 90 | this.container.classList.remove('dragging'); 91 | if (!this.touchStartX || !this.touchEndX) return; 92 | 93 | const diff = this.touchStartX - this.touchEndX; 94 | const threshold = 50; // minimum distance for swipe 95 | 96 | if (Math.abs(diff) > threshold) { 97 | if (diff > 0) { 98 | this.nextSlide(); 99 | } else { 100 | this.prevSlide(); 101 | } 102 | } 103 | 104 | this.touchStartX = null; 105 | this.touchEndX = null; 106 | }, 107 | 108 | startAutoPlay() { 109 | this.stopAutoPlay(); 110 | this.autoPlayInterval = setInterval(() => this.nextSlide(), 5000); 111 | }, 112 | 113 | stopAutoPlay() { 114 | if (this.autoPlayInterval) { 115 | clearInterval(this.autoPlayInterval); 116 | this.autoPlayInterval = null; 117 | } 118 | }, 119 | 120 | announceSlide() { 121 | // Announce slide change for screen readers 122 | const liveRegion = document.querySelector('.carousel-live-region') || (() => { 123 | const region = document.createElement('div'); 124 | region.className = 'carousel-live-region sr-only'; 125 | region.setAttribute('aria-live', 'polite'); 126 | document.body.appendChild(region); 127 | return region; 128 | })(); 129 | 130 | liveRegion.textContent = `Showing slide ${this.currentSlide + 1} of ${this.slides.length}`; 131 | } 132 | }; 133 | 134 | // Initialize carousel 135 | carousel.init(); 136 | }); -------------------------------------------------------------------------------- /resume x/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Resume X 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 | 37 |
38 | 39 |
40 | 41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /resume x/index.js: -------------------------------------------------------------------------------- 1 | function showSection(sectionId) { 2 | 3 | const sections = document.querySelectorAll('.section'); 4 | sections.forEach((section) => { 5 | section.classList.remove('active'); 6 | }); 7 | 8 | // Hide default image 9 | const defaultImage = document.getElementById('default-image'); 10 | if (defaultImage) { 11 | defaultImage.classList.remove('active'); 12 | } 13 | 14 | // Show the selected section if it exists 15 | const activeSection = document.getElementById(sectionId); 16 | if (activeSection) { 17 | activeSection.classList.add('active'); 18 | } else if (defaultImage) { 19 | // If no sectionId is passed or invalid, show the default image 20 | defaultImage.classList.add('active'); 21 | } 22 | } -------------------------------------------------------------------------------- /resume x/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #f9f9f9; 5 | } 6 | 7 | .navbar { 8 | display: flex; 9 | justify-content: center; 10 | background-color: #dadde3; 11 | padding: 10px 0; 12 | flex-wrap: wrap; 13 | flex-direction: row; 14 | } 15 | 16 | .btn { 17 | display: flex; 18 | justify-items:center; 19 | align-items: center; 20 | background: transparent; 21 | color: #5f6061; 22 | border: 10px; 23 | padding: 10px 20px; 24 | margin: 0 5px; 25 | border-radius: 10px; 26 | cursor: pointer; 27 | font-size: 16px; 28 | transition: background-color 0.3s; 29 | } 30 | 31 | .btn:hover { 32 | color: black; 33 | background-color: white; 34 | transition: 0.2s ease-in-out; 35 | 36 | } 37 | 38 | .section { 39 | display: none; 40 | padding: 20px; 41 | text-align: center; 42 | background-color: #f9f9f9; 43 | margin: 20px auto; 44 | width: 80%; 45 | border-radius: 10px; 46 | } 47 | 48 | .btn:focus{ 49 | background-color: white; 50 | color:black; 51 | 52 | } 53 | 54 | .section.active { 55 | display: block; 56 | transition: 0.2s ease-in-out; 57 | } 58 | 59 | /* img{ 60 | border: 5px solid black; 61 | } */ 62 | .img{ 63 | height: 100%; 64 | width : 100%; 65 | 66 | } -------------------------------------------------------------------------------- /resumex project 1: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Resumex 8 | 9 | 10 | 13 | 14 | 15 | 16 | 148 |
149 | 152 | 161 |
162 | 163 | 164 | 165 |
166 |

JUST

167 |

THREE SIMPLE STEPS

168 | 169 |
170 | 171 |
172 |

Filter

173 |
174 |

HEADSHOT

175 |
176 | 177 | 180 |
181 | 182 | 185 |
186 |
187 | 188 | 189 |

COLUMNS


190 | 193 |
194 | 197 | 198 | 199 | 200 |
201 |

BEST TEMPLATES

202 |

FOR 3-4 YEARS


203 |

OF EXPERIENCE


204 |
205 | 206 | 207 | 208 |
209 |

YOU CAN ALWAYS CHANGE YOUR

210 |

TEMPLATE LATER.

211 |
212 |
213 | 214 | 215 | 216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 | 227 |
228 | 229 | 230 | 231 | 232 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | async function downloadImageAsPDF(imageUrl) { 2 | try { 3 | const response = await fetch(imageUrl); 4 | if (!response.ok) throw new Error(`Image fetch failed! Status: ${response.status}`); 5 | 6 | const blob = await response.blob(); 7 | const reader = new FileReader(); 8 | 9 | reader.onloadend = function () { 10 | const imgData = reader.result; 11 | const { jsPDF } = window.jspdf; 12 | const doc = new jsPDF(); 13 | 14 | doc.addImage(imgData, 'JPEG', 10, 10, 180, 250); // Adjust width & height as needed 15 | doc.save("Resume_Template.pdf"); 16 | }; 17 | 18 | reader.readAsDataURL(blob); 19 | } catch (error) { 20 | console.error("Error:", error); 21 | alert(error.message); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Montserrat', sans-serif; 3 | background-color: #ffffff; /* Changed to white background */ 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | h1 { 9 | text-align: center; 10 | margin-top: 20px; 11 | } 12 | 13 | .container { 14 | width: 90%; 15 | margin: 0 auto; 16 | overflow: hidden; 17 | } 18 | 19 | .grid { 20 | display: grid; 21 | grid-template-columns: repeat(3, 1fr); /* 3 columns */ 22 | gap: 40px; /* Increased gap between images */ 23 | margin-top: 20px; 24 | } 25 | 26 | .template { 27 | position: relative; 28 | overflow: hidden; 29 | cursor: pointer; 30 | border: 3px solid rgba(0, 0, 0, 0.408); /* Border around images */ 31 | padding: 10px; 32 | border-radius: 10px; /* Rounded corners */ 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | margin-bottom: 15px; 37 | } 38 | 39 | .template-img { 40 | width: 100%; /* Allow images to fill their container */ 41 | height: auto; /* Maintain aspect ratio */ 42 | transition: transform 0.3s ease-in-out; 43 | } 44 | 45 | .template-img:hover { 46 | transform: scale(1.07); /* Slight zoom effect on hover */ 47 | } 48 | 49 | @media (max-width: 768px) { 50 | .grid { 51 | grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */ 52 | } 53 | } 54 | 55 | @media (max-width: 480px) { 56 | .grid { 57 | grid-template-columns: 1fr; /* 1 column for small screens */ 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /withimage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Resume Templates 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |

Resume Templates

33 |
34 | 35 | 36 |
37 | Template 5 39 |
40 | 41 | 42 |
43 | Template 4 45 |
46 | 47 | 48 |
49 | Template 3 51 |
52 | 53 |
54 | Template 2 56 |
57 | 58 |
59 | Template 1 61 |
62 | 63 | 64 |
65 | Template 6 67 |
68 | 69 |
70 | Template 7 72 |
73 | 74 |
75 | Template 8 77 |
78 | 79 |
80 | Template 9 82 |
83 | 84 |
85 |
86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /withimages/With1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With1.jpg -------------------------------------------------------------------------------- /withimages/With10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With10.jpg -------------------------------------------------------------------------------- /withimages/With2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With2.jpg -------------------------------------------------------------------------------- /withimages/With3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With3.jpg -------------------------------------------------------------------------------- /withimages/With4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With4.jpg -------------------------------------------------------------------------------- /withimages/With5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With5.jpg -------------------------------------------------------------------------------- /withimages/With6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With6.jpg -------------------------------------------------------------------------------- /withimages/With7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With7.jpg -------------------------------------------------------------------------------- /withimages/With8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With8.jpg -------------------------------------------------------------------------------- /withimages/With9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withimages/With9.jpg -------------------------------------------------------------------------------- /withoutimage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Resume Templates 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |

Resume Templates

31 | 32 |
33 | 34 |
35 | Template 7 37 |
38 | 39 | 40 |
41 | Template 2 43 |
44 | 45 |
46 | Template 4 48 |
49 | 50 | 51 | 52 |
53 | Template 9 55 |
56 | 57 |
58 | Template 1 60 |
61 | 62 |
63 | Template 3 65 |
66 | 67 |
68 | Template 8 70 |
71 | 72 |
73 | Template 5 75 |
76 | 77 |
78 | Template 6 80 |
81 | 82 | 83 | 84 |
85 | 86 |
87 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /withoutimages/Out1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out1.jpg -------------------------------------------------------------------------------- /withoutimages/Out2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out2.jpg -------------------------------------------------------------------------------- /withoutimages/Out3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out3.jpg -------------------------------------------------------------------------------- /withoutimages/Out4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out4.jpg -------------------------------------------------------------------------------- /withoutimages/Out5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out5.jpg -------------------------------------------------------------------------------- /withoutimages/Out6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out6.jpg -------------------------------------------------------------------------------- /withoutimages/Out7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out7.jpg -------------------------------------------------------------------------------- /withoutimages/Out8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out8.jpg -------------------------------------------------------------------------------- /withoutimages/Out9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aspatil0/RESUMEX/ff5ea2f2c607ab56013191b36cec9ea5dc50a256/withoutimages/Out9.jpg --------------------------------------------------------------------------------