diff --git a/components/HomePage/Features.js b/components/HomePage/Features.js index 988994c..7727513 100644 --- a/components/HomePage/Features.js +++ b/components/HomePage/Features.js @@ -13,32 +13,32 @@ const features = [ { title: '100+ Templates', description: 'ResumCraft\'s experience and features library make customization easy. Powering over 100 templates, you can easily create a personalized resume that reflects your skills, experiences, and career goals.', - icon: + icon: }, { title: 'Customizable', description: 'Create your own customized resume tailored to your career goals and skills. Simply upload your resume and select the template you want to use, and ResumCraft will generate a personalized resume for you.', - icon: + icon: }, { title: 'Save Changes', description: 'Save your changes to resume and resume history. ResumCraft will automatically save your changes and generate a personalized resume for you.', - icon: + icon: }, { title: 'Resume Score', description: 'Resume Score is a tool that helps you to evaluate your resume. It provides a score based on your resume and highlights areas that need improvement.', - icon: + icon: }, { title: 'Suggestions', description: 'ResumCraft will suggest improvements to your resume based on your skills and experiences. It will help you to improve your resume and make it more effective.', - icon: + icon: }, { title: 'AI Assistance', description: 'ResumCraft will provide AI assistance to help you create a personalized resume. It will analyze your resume and provide suggestions to improve your resume.', - icon: + icon: }, ] @@ -47,95 +47,114 @@ function Features() { const interval = useRef(null) useEffect(() => { - interval.current = setInterval(() => { - setSelected((prev)=>{ - if(prev === features.length-1){ + interval.current = setInterval(() => { + setSelected((prev) => { + if (prev === features.length - 1) { return 0 } - return prev+1 + return prev + 1 }) - }, 7000) + }, 4000) return () => clearInterval(interval.current) }, []) return (
-
- +
+
-

Make your own

-

Customized

-

Resume

-
-

- ResumCraft's experience and features library make customization easy. Powering over 100 templates, you can easily create a personalized resume that reflects your skills, experiences, and career goals. +

Make your own

+

Customized

+

Resume

+
+

+ ResumCraft's experience and features library make customization easy. Powering over 100 templates, you can easily create a personalized resume that reflects your skills, experiences, and career goals.

-
- - - - +
+ { features.map((feature, index) => ( -
{ +
{ clearInterval(interval.current) setSelected(index) }}>
{feature.icon} -

{feature.title}

+

{feature.title}

)) } + + +
+
+ + { features.map((feature, index) => ( -
{ +
{ clearInterval(interval.current) setSelected(index) }}>
{feature.icon} -

{feature.title}

+

{feature.title}

)) - } - + } + +
-
+
-
+
-

{features[selected].title}

-

{features[selected].description}

+

{features[selected].title}

+

{features[selected].description}

+ +
+ +
+
+

Product

+

Select template

+

Use default template

+ +
+
+

Company

+

About

+

Blog

+ + +
+
+

Connect

+

Linkedin

+

Github

+ + +
+ +
+ +
+
+ ) +} + +export default Footer \ No newline at end of file diff --git a/components/HomePage/Hero.js b/components/HomePage/Hero.js index f0d6ce1..c2148b7 100644 --- a/components/HomePage/Hero.js +++ b/components/HomePage/Hero.js @@ -6,10 +6,10 @@ import Typewriter from 'typewriter-effect'; function Hero() { return ( -
+
-

Build Your Perfect Resume with

Build Your Perfect Resume with

for Your Dream Job

-
- -
-

Create a professional resume tailored to your dream job with our user-friendly builder. Choose from customizable templates, highlight your skills, and craft a standout resume in minutes.

-
- -
- +
+
+

Create a professional resume tailored to your dream job with our user-friendly builder. Choose from customizable templates, highlight your skills, and craft a standout resume in minutes.

+
+
) } diff --git a/components/HomePage/MarqueeText.js b/components/HomePage/MarqueeText.js new file mode 100644 index 0000000..ae3d827 --- /dev/null +++ b/components/HomePage/MarqueeText.js @@ -0,0 +1,91 @@ +import React from 'react' +import { Splide, SplideSlide } from '@splidejs/react-splide'; +import '@splidejs/react-splide/css'; +import { AutoScroll } from '@splidejs/splide-extension-auto-scroll'; +function MarqueeText() { + return ( +
+ + +

Easy to Use

+ + +

Easy to Use

+ + +

Easy to Use

+ + + + +

Customizable

+ + +

Customizable

+ + +

Customizable

+ + + + +

AI Powered

+ + +

AI Powered

+ + +

AI Powered

+ + +
+ ) +} + +export default MarqueeText \ No newline at end of file diff --git a/components/HomePage/Navbar.js b/components/HomePage/Navbar.js index a0f1a42..116146f 100644 --- a/components/HomePage/Navbar.js +++ b/components/HomePage/Navbar.js @@ -3,19 +3,19 @@ import { GoArrowRight } from "react-icons/go"; import { SignInButton, SignedIn, SignedOut, UserButton, SignOutButton } from '@clerk/nextjs' function Navbar() { return ( -
+
-
+
-
- Resume +
+ Home
-
+
About
-
+
@@ -23,12 +23,12 @@ function Navbar() {
-
-
diff --git a/components/HomePage/ShowCase.js b/components/HomePage/ShowCase.js index 09ee19a..c535f46 100644 --- a/components/HomePage/ShowCase.js +++ b/components/HomePage/ShowCase.js @@ -26,22 +26,22 @@ function ShowCase() { card.style.transform = ''; } return ( -
+
-
- -

Build your Resume,

-

your way.

+
+

Templates

+

Build your Resume,

+

your way.

-
+
-
handleMouseMove(e, "card1")} onMouseLeave={(e) => { +
handleMouseMove(e, "card1")} onMouseLeave={(e) => { // handleMouseLeave(e, "card1") }}> diff --git a/components/ResumeTemplates/Default/Dummy.js b/components/ResumeTemplates/Default/Dummy.js index 246da3a..7511fee 100644 --- a/components/ResumeTemplates/Default/Dummy.js +++ b/components/ResumeTemplates/Default/Dummy.js @@ -4,21 +4,20 @@ import { FaGithub, FaLinkedinIn } from "react-icons/fa"; import { IoIosCall } from "react-icons/io"; import { FaExternalLinkAlt } from "react-icons/fa"; import Link from 'next/link'; -function Dummy({data}) { - if(data) - { +function Dummy({ data }) { + if (data) { data = { ...data, - basicDetails:data?.basic_details, - WorkDetails:data?.work_details, - educationDetails:data?.education_details, - projectDetails:data?.project_details, - skillsDetails:data?.skills_details + basicDetails: data?.basic_details, + WorkDetails: data?.work_details, + educationDetails: data?.education_details, + projectDetails: data?.project_details, + skillsDetails: data?.skills_details } } - let resumeData = data? data : sampleData - console.log("here", {resumeData}); - + let resumeData = data ? data : sampleData + console.log("here", { resumeData }); + return (
@@ -45,7 +44,7 @@ function Dummy({data}) {

-

+

diff --git a/components/SelectTemplate/Tabs.js b/components/SelectTemplate/Tabs.js new file mode 100644 index 0000000..f3e2496 --- /dev/null +++ b/components/SelectTemplate/Tabs.js @@ -0,0 +1,20 @@ +import React from 'react' +import { TABS_SELECT_TEMPLATE } from '@/constants'; +function Tabs({selectedTab, setSelectedTab}) { + return ( +
+
+ + +
+ +
+ + ) +} + +export default Tabs \ No newline at end of file diff --git a/constants.js b/constants.js index 83808b9..b355414 100644 --- a/constants.js +++ b/constants.js @@ -26,7 +26,7 @@ export const sampleData = { location: "Remote", start_date: "2001/02/05", end_date: "2001/02/05", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Diam quis enim lobortis scelerisque fermentum. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Eu volutpat odio facilisis mauris sit amet massa vitae. Aliquet nec ullamcorper sit amet risus nullam eget felis" + description: "Lorem ipsum dolor sit amet," }, { title: "SDE", @@ -34,7 +34,7 @@ export const sampleData = { location: "Remote", start_date: "2001/02/05", end_date: "2001/02/05", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Diam quis enim lobortis scelerisque fermentum. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Eu volutpat odio facilisis mauris sit amet massa vitae. Aliquet nec ullamcorper sit amet risus nullam eget felis" + description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " } ], @@ -62,7 +62,7 @@ export const sampleData = { projectDetails: [ { name:"Insta Clone", - description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Diam quis enim lobortis scelerisque fermentum. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Eu volutpat odio facilisis mauris sit amet massa vitae. Aliquet nec ullamcorper sit amet risus nullam eget felis", + description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ", tech_stack:"Mongo , NodeJS, ExpressJS, ReactJS", start_date: "2001/02/05", end_date: "2001/02/05", @@ -71,7 +71,7 @@ export const sampleData = { }, { name:"Insta Clone", - description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Diam quis enim lobortis ", + description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ", tech_stack:"Mongo , NodeJS, ExpressJS, ReactJS", start_date: "2001/02/05", end_date: "2001/02/05", @@ -91,6 +91,11 @@ export const sampleData = { ] } +export const TABS_SELECT_TEMPLATE = { + YOUR_RESUMES: '1', + TEMPLATES: '2' +} + export const COLORS = [ "#4f46e5", "#28b95f", "#991b1b", "#000000" ] diff --git a/pages/api/resumedata/get_resume_data.js b/pages/api/resumedata/get_resume_data.js index 9e32b75..0b2a5ce 100644 --- a/pages/api/resumedata/get_resume_data.js +++ b/pages/api/resumedata/get_resume_data.js @@ -47,7 +47,10 @@ export default async function (req, res) { basic_details: true, work_details: true, education_details: true, - project_details: true + project_details: true, + // skills_details: true, + // other_details: true, + // updated_at: true } }) diff --git a/pages/index.js b/pages/index.js index 4a345e7..e7a98ed 100644 --- a/pages/index.js +++ b/pages/index.js @@ -6,7 +6,8 @@ import { GoArrowRight } from "react-icons/go"; import ShowCase from "@/components/HomePage/ShowCase"; import Features from "@/components/HomePage/Features"; // const inter = Inter({ subsets: ["latin"] }); - +import Footer from "@/components/HomePage/Footer"; +import MarqueeText from "@/components/HomePage/MarqueeText"; export default function Home() { function handleMouseMove(event) { @@ -33,18 +34,19 @@ export default function Home() {
- -
- + +
diff --git a/pages/select_template.js b/pages/select_template.js index 955177c..9c70e76 100644 --- a/pages/select_template.js +++ b/pages/select_template.js @@ -1,18 +1,24 @@ import Navbar from '@/components/HomePage/Navbar' import Dummy from '@/components/ResumeTemplates/Default/Dummy'; import Link from 'next/link'; -import React, { useEffect } from 'react' +import React, { useState } from 'react' import { getAuth, buildClerkProps } from "@clerk/nextjs/server"; import axios from 'axios'; import { TEMPLATES } from '@/constants'; -function select_template({ savedResumes }) { - console.log({savedResumes}); +import Tabs from '@/components/SelectTemplate/Tabs'; +import { TABS_SELECT_TEMPLATE } from '@/constants'; +import { SignInButton, SignedIn, SignedOut, UserButton, SignOutButton } from '@clerk/nextjs' +import { GoArrowRight } from 'react-icons/go'; +import { TbAB, TbError404 } from 'react-icons/tb'; +import { PiSignInBold } from 'react-icons/pi'; +function SelectTemplate({ savedResumes, userId }) { + const [selectedTab, setSelectedTab] = useState(TABS_SELECT_TEMPLATE.YOUR_RESUMES); let resumeTemplates = { - Default: + Default: } - const getResumeTemplate = (data, id) =>{ + const getResumeTemplate = (data, id) => { let templates = { Default: @@ -22,44 +28,32 @@ function select_template({ savedResumes }) { } return ( -
+
-
-

Select A Template

-
- { - Object.keys(resumeTemplates).map((item, key) => { - return ( - -
- {resumeTemplates[item]} -
- + + {selectedTab === TABS_SELECT_TEMPLATE.TEMPLATES ? ( - ) - }) - } +
- -
- -
- - {savedResumes && ( -
-

Your Saved Templates

{ - savedResumes?.map((item, key) => { + Object.keys(resumeTemplates).map((item, key) => { return ( - -
- {getResumeTemplate(item, item?.resume_id-1)} +
+ +
+ {resumeTemplates[item]} +
+ + +
+

{item}

- +
+ ) }) @@ -69,21 +63,110 @@ function select_template({ savedResumes }) {
+ ) : ( + +
+
+ + + + + +
+ +
+ + + +
+ { + savedResumes ? ( +
+ + +
+ + { + savedResumes?.map((item, key) => { + return ( +
+ +
+ {getResumeTemplate(item, item?.resume_id - 1)} +
+ +
+

{TEMPLATES[item?.resume_id - 1] + " - "} {new Date(item?.updated_at).toLocaleDateString()}

+
+ +
+ ) + }) + } + + +
+
+ ) : ( +
+ {userId ? ( + +
+ +
+ +
+

You have not saved any resumes yet

+ +
+ +
+
+ ) : ( +
+
+ +
+

You need to login to save your resumes

+ +
+ +
+
+ )} +
+ ) + } + +
+ )} + +
) } -export default select_template +export default SelectTemplate export const getServerSideProps = async (ctx) => { const { userId, getToken } = getAuth(ctx.req); let savedResumes = null; - console.log({userId}); + console.log({ userId }); if (userId) { const token = await getToken(); const res = await axios.get(`${process.env.API_URL}/api/resumedata/get_resume_data`, { headers: { "Authorization": `Bearer ${token}` } }); @@ -91,6 +174,6 @@ export const getServerSideProps = async (ctx) => { console.log({ savedResumes }); } - return { props: { ...buildClerkProps(ctx.req), savedResumes: savedResumes } }; + return { props: { ...buildClerkProps(ctx.req), savedResumes: savedResumes, userId: userId } }; } \ No newline at end of file diff --git a/prisma/migrations/20240721114006_changes/migration.sql b/prisma/migrations/20240721114006_changes/migration.sql new file mode 100644 index 0000000..ac25e4d --- /dev/null +++ b/prisma/migrations/20240721114006_changes/migration.sql @@ -0,0 +1,2 @@ +-- AlterTable +ALTER TABLE "ResumeData" ADD COLUMN "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP; diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 2d0573b..e3107c3 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -23,6 +23,8 @@ model ResumeData { skills_details String[] project_details ProjectDetails[] other_details String[] + updated_at DateTime @default(now()) + } model BasicDetails { diff --git a/public/images/bg-gradient-dark.jpg b/public/images/bg-gradient-dark.jpg new file mode 100644 index 0000000..635e4fb Binary files /dev/null and b/public/images/bg-gradient-dark.jpg differ diff --git a/styles/globals.css b/styles/globals.css index 12ea648..af1ff72 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -188,4 +188,26 @@ body { -o-transform-origin: 0 0; -webkit-transform: scale(0.5); -webkit-transform-origin: 0 0; +} + +.not-filled { + color: transparent; + -webkit-text-stroke-width:.0002rem; + -webkit-text-stroke-color:black; +} + +.nav-underline { + background: linear-gradient(currentColor 0 0) + bottom left/ + var(--underline-width, 0%) 0.15em + no-repeat; + color: black; + display: inline-block; + padding: 0 .5em 0.2em; + text-decoration: none; + transition: background-size 0.5s; +} + +.nav-underline:hover { + --underline-width: 100%; } \ No newline at end of file