-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
279 lines (251 loc) · 16.6 KB
/
index.html
File metadata and controls
279 lines (251 loc) · 16.6 KB
1
2
3
4
5
6
7
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="en" class=""> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom CV & Resume Templates | cv.getprojects.org</title>
<meta name="description" content="Discover professionally designed, role-specific CV and resume templates. Create a standout CV for full-stack development, graphic design, marketing, and more.">
<meta name="keywords" content="cv templates, resume templates, job-specific cv, full-stack developer cv, graphic designer resume, marketing cv, professional resume, cv builder, getprojects.org">
<meta name="author" content="cv.getprojects.org team">
<link rel="canonical" href="https://cv.getprojects.org">
<meta property="og:title" content="Custom CV & Resume Templates | cv.getprojects.org">
<meta property="og:description" content="Discover professionally designed, role-specific CV and resume templates. Create a standout CV for full-stack development, graphic design, marketing, and more.">
<meta property="og:image" content="https://cv.getprojects.org/og-image.jpg"> <meta property="og:url" content="https://cv.getprojects.org">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Custom CV & Resume Templates | cv.getprojects.org">
<meta name="twitter:description" content="Discover professionally designed, role-specific CV and resume templates. Create a standout CV for full-stack development, graphic design, marketing, and more.">
<meta name="twitter:image" content="https://cv.getprojects.org/twitter-card-image.jpg"> <script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
/* Default light mode background */
background-color: #f8fafc; /* Tailwind gray-50 */
color: #1f2937; /* Tailwind gray-800 */
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Dark mode body styles */
.dark body {
background-color: #111827; /* Tailwind gray-900 */
color: #f3f4f6; /* Tailwind gray-100 */
}
.skill-button {
transition: all 0.2s ease-in-out;
}
.skill-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dark .skill-button:hover {
box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.dark .card-hover {
background-color: #1f2937; /* Tailwind gray-800 */
border: 1px solid #374151; /* Tailwind gray-700 */
}
.dark .card-hover:hover {
box-shadow: 0 10px 20px rgba(255,255,255,0.05);
}
.dark .text-gray-800 { color: #e5e7eb; /* gray-200 */ }
/* Adjusted default text color for menu for better contrast in light mode */
.dark .text-gray-700 { color: #d1d5db; /* gray-300, was text-gray-600 before */ }
.dark .text-gray-600 { color: #9ca3af; /* gray-400 */ }
.dark .bg-gray-50 { background-color: #1f2937; /* gray-800 */ }
.dark .bg-indigo-50 { background-color: #312e81; /* indigo-900 */ }
.dark header { background-color: #1f2937; /* gray-800 */ border-bottom: 1px solid #374151; }
.dark footer { background-color: #030712; /* gray-950 */ }
/* Theme toggle button icon styles */
.theme-toggle-icon {
width: 24px;
height: 24px;
fill: currentColor;
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9704521076577901"
crossorigin="anonymous"></script>
</head>
<body class="text-gray-800">
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="https://cv.getprojects.org" class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">cv.getprojects.org</a>
<nav class="space-x-2 sm:space-x-4 flex items-center">
<a href="https://getprojects.org" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Main Home</a>
<a href="https://getprojects.org/about" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">About</a>
<a href="https://getprojects.org/contact" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Contact</a>
<button id="theme-toggle" type="button" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden theme-toggle-icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="hidden theme-toggle-icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
</nav>
</div>
</header>
<section class="hero-gradient text-white py-20 md:py-32">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">Find Your Perfect CV, Uniquely Crafted.</h1>
<p class="text-lg md:text-xl mb-10 max-w-3xl mx-auto">
Stop using generic templates. Our CVs are designed to reflect your specific skills and the job you want, from Full-Stack Developers to Creative Graphic Designers.
</p>
<a href="#cv-showcase" class="bg-white text-indigo-600 font-semibold py-3 px-8 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 text-lg dark:text-indigo-700 dark:hover:bg-gray-200">
Explore Templates
</a>
</div>
</section>
<section id="cv-showcase" class="py-16 md:py-24 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">CVs That Speak Your Language</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">
<div class="bg-white p-8 rounded-xl shadow-lg card-hover">
<img src="https://placehold.co/600x400/7F9CF5/FFFFFF?text=Developer+CV" alt="Full-Stack Developer CV Preview" class="w-full h-48 object-cover rounded-lg mb-6" onerror="this.src='https://placehold.co/600x400/CCCCCC/FFFFFF?text=Image+Not+Found'">
<h3 class="text-2xl font-semibold mb-3 text-indigo-700 dark:text-indigo-400">For the Full-Stack Developer</h3>
<p class="text-gray-600 mb-4">
A CV that showcases your technical prowess, projects, and stack. Clean, structured, and code-inspired.
</p>
<a href="cv/full-stack-developer.html" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium inline-flex items-center">
View Developer Templates →
</a>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg card-hover">
<img src="https://placehold.co/600x400/A78BFA/FFFFFF?text=Designer+CV" alt="Graphic Designer CV Preview" class="w-full h-48 object-cover rounded-lg mb-6" onerror="this.src='https://placehold.co/600x400/CCCCCC/FFFFFF?text=Image+Not+Found'">
<h3 class="text-2xl font-semibold mb-3 text-purple-700 dark:text-purple-400">For the Graphic Designer</h3>
<p class="text-gray-600 mb-4">
Visually stunning templates that let your creativity shine. Emphasize your portfolio and design skills.
</p>
<a href="cv/graphic-designer.html" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 font-medium inline-flex items-center">
View Designer Templates →
</a>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg card-hover">
<img src="https://placehold.co/600x400/FBBF24/FFFFFF?text=Marketing+CV" alt="Marketing Specialist CV Preview" class="w-full h-48 object-cover rounded-lg mb-6" onerror="this.src='https://placehold.co/600x400/CCCCCC/FFFFFF?text=Image+Not+Found'">
<h3 class="text-2xl font-semibold mb-3 text-amber-700 dark:text-amber-400">For the Marketing Specialist</h3>
<p class="text-gray-600 mb-4">
Highlight your campaign successes, strategic thinking, and digital tool proficiency. Results-oriented designs.
</p>
<a href="cv/marketing-specialist.html" class="text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 font-medium inline-flex items-center">
View Marketing Templates →
</a>
</div>
</div>
</div>
</section>
<section class="py-16 md:py-24 bg-indigo-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-6 text-gray-800">Craft Your CV by Skill</h2>
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
Select the skills you want to highlight. Our templates adapt to showcase your unique expertise.
</p>
<div id="skillsContainer" class="flex flex-wrap justify-center items-center gap-3 md:gap-4">
</div>
</div>
</section>
<footer class="bg-gray-800 text-gray-300 py-12 dark:bg-gray-950">
<div class="container mx-auto px-6 text-center">
<p>© <span id="currentYear"></span> cv.getprojects.org. All rights reserved.</p>
<p class="text-sm mt-2">Designed to help you land your dream job.</p>
</div>
</footer>
<script>
// Dynamically set the current year in the footer
document.getElementById('currentYear').textContent = new Date().getFullYear();
// Skills list
const skills = [
// Design Skills
"UI Design", "UX Design", "Graphic Design", "Web Design", "Mobile App Design",
"Illustration", "Logo Design", "Branding", "Typography", "Color Theory",
"Figma", "Adobe XD", "Sketch", "Photoshop", "Illustrator", "InDesign",
"User Research", "Wireframing", "Prototyping", "Visual Communication",
"Interaction Design", "Motion Graphics", "After Effects", "Premiere Pro",
"Canva", "Blender", "3D Modeling", "Print Design", "Layout Design", "Photo Editing",
// Developer Skills
"HTML5", "CSS3", "JavaScript", "React.js", "Angular", "Vue.js", "Node.js",
"Python", "Java", "C#", "PHP", "Ruby on Rails", "SQL", "NoSQL", "MongoDB",
"REST APIs", "GraphQL", "Git", "GitHub", "Docker", "Kubernetes", "AWS",
"Azure", "Google Cloud", "Responsive Design", "Web Performance", "Cybersecurity",
"Full-Stack Development", "Front-End Development", "Back-End Development", "DevOps",
// Marketing & Content Skills
"SEO", "SEM", "Content Writing", "Copywriting", "Social Media Marketing",
"Email Marketing", "Digital Strategy", "Content Creation", "Google Analytics",
"HubSpot", "Salesforce", "Market Research", "Brand Management",
// Other Professional Skills
"Project Management", "Agile Methodologies", "Scrum", "Data Analysis",
"Data Visualization", "Business Analysis", "Communication", "Problem Solving",
"Critical Thinking", "Teamwork", "Leadership", "Public Speaking", "Microsoft Office Suite"
];
const skillsContainer = document.getElementById('skillsContainer');
const skillColors = [
'bg-indigo-500 hover:bg-indigo-600', 'bg-purple-500 hover:bg-purple-600',
'bg-pink-500 hover:bg-pink-600', 'bg-sky-500 hover:bg-sky-600',
'bg-teal-500 hover:bg-teal-600', 'bg-emerald-500 hover:bg-emerald-600',
'bg-rose-500 hover:bg-rose-600'
];
// Dark mode equivalents for skill buttons
const skillDarkColors = [
'dark:bg-indigo-600 dark:hover:bg-indigo-700', 'dark:bg-purple-600 dark:hover:bg-purple-700',
'dark:bg-pink-600 dark:hover:bg-pink-700', 'dark:bg-sky-600 dark:hover:bg-sky-700',
'dark:bg-teal-600 dark:hover:bg-teal-700', 'dark:bg-emerald-600 dark:hover:bg-emerald-700',
'dark:bg-rose-600 dark:hover:bg-rose-700'
];
// Function to create a URL-friendly slug from a skill name
function slugify(text) {
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
skills.forEach((skill, index) => {
const button = document.createElement('a');
const skillSlug = slugify(skill);
// Construct the link to the specific CV template page
button.href = `cv/${skillSlug}.html`; // e.g., cv/full-stack-development.html
button.textContent = skill;
const colorClass = skillColors[index % skillColors.length];
const darkColorClass = skillDarkColors[index % skillDarkColors.length];
button.className = `skill-button text-white font-medium py-2 px-4 md:py-2.5 md:px-5 rounded-full shadow-md text-sm md:text-base ${colorClass} ${darkColorClass}`;
skillsContainer.appendChild(button);
});
// Theme Toggle Functionality
const themeToggleBtn = document.getElementById('theme-toggle');
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
// Function to apply theme
function applyTheme(isDark) {
if (isDark) {
document.documentElement.classList.add('dark');
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
} else {
document.documentElement.classList.remove('dark');
themeToggleDarkIcon.classList.remove('hidden');
themeToggleLightIcon.classList.add('hidden');
}
}
// Check for saved theme preference or system preference
let isDarkMode = localStorage.getItem('color-theme') === 'dark' ||
(!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
// Apply initial theme
applyTheme(isDarkMode);
themeToggleBtn.addEventListener('click', function() {
// toggle
isDarkMode = !isDarkMode;
localStorage.setItem('color-theme', isDarkMode ? 'dark' : 'light');
applyTheme(isDarkMode);
});
// Update hero button link to point to the CV showcase section
const exploreButton = document.querySelector('.hero-gradient a[href="#templates"]');
if(exploreButton) {
exploreButton.setAttribute('href', '#cv-showcase');
}
</script>
</body>
</html>