Giter VIP home page Giter VIP logo

resume-screener-frontend's Introduction

TCET - Resume Screener Website

Note: The TCET Resume Screener page is built using AstroJS, an all-in-one web framework designed for speed.

Steps to run the site on your local system:

These are the steps you need to follow to get this site on your local system.

Install Git in your computer

Follow these steps to install git in your computer.

  1. Go to https://git-scm.com/downloads.
  2. Click on Windows. Download should start.
  3. Go to downloads and install the package.

Clone the repo

Open Git Bash in any folder and paste the following command

git clone https://github.com/tcet-opensource/resume-screener-frontend.git

Install NodeJs

  1. Go to https://nodejs.org/en/download
  2. Select Current.
  3. Download the 64-bit .msi version. Follow the steps and install NodeJS.

Note: It is important to have NodeJS in your system

Open the folder in VS Code

  1. Install VS Code if not installed.
  2. Open Windows Terminal in the folder you have cloned the repo, as done in step 2.

Install Important Packages/Dependencies

Install yarn globally

npm install -g yarn

You can make changes to your respective files and changes will be shown once you have saved the file.

Commands used to run locally

  1. To run the commands, make sure that you have installed yarn globally first.
  2. All commands are run from the root of the project, from a terminal

Here are a set of commands used to run locally:

Command Action
yarn Installs dependencies
yarn dev Starts local dev server at localhost:3000
yarn build Build your production site to ./dist/
yarn preview Preview your build locally, before deploying
yarn astro ... Run CLI commands like astro add, astro check
yarn astro --help Get help using the Astro CLI

Steps to run after a Pull / Merge:

  1. To install all dependencies
yarn
  1. To run local dev environment
yarn dev

resume-screener-frontend's People

Contributors

bhargav-44 avatar demonkillerr avatar horror26 avatar jayeshvp24 avatar kamalika0363 avatar shlok-2003 avatar tanishakumar18 avatar yashodharpatel avatar yv2003 avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar

Forkers

tanishakumar18 aisu2635

resume-screener-frontend's Issues

Design Navbar & Footer

The files are already there.
Edit those and make changes according to the design in Figma.
Responsiveness of design already exists, test and verify everything is working properly
change fonts and icons and buttons, nav links as in Figma.

Design About Us Section

Design the About us Section with proper gaps and sizing

Keep the Start Resume Start button clickable
Export Images from Figma File
image

Design mobile-first

Follow folder structure:

public -> AboutUS -> assets here
components -> AboutUs -> components here

Fonts

Inter is the default font
Rubik is the title font - use classname font-rubik
Fonts are already linked and setup is done for everything.

Fix Links

This issue aims to point the buttons to the correct links.

The following needs to be changed.

  • Navbar links
  • Main Button (Hero)
  • Contribute botton (hero)
  • Tool Buttons

Design Free ATS and Features Section

Create the ATS resume test section

Keep the buttons clickable and try to make it responsive.
image

Design mobile-first

Follow folder structure:

public -> ATSResumeTest -> assets here
components -> ATSResumeTest -> components here

Fonts

Inter is the default font
Rubik is the title font - use classname font-rubik
Fonts are already linked and setup is done for everything.

Design Cards Section

Create the Cards before the footer Section

Keep the spacing equal and make it responsive.
Keep a single card in Mobile View.
image

Design mobile-first

Follow folder structure:

public -> Cards -> assets here
components -> Cards -> components here

Fonts

Inter is the default font
Rubik is the title font - use classname font-rubik
Fonts are already linked and setup is done for everything.

Design Guidelines Section

Create the ATS-Compliant Section

Keep the Drop Down Section Clickable and try to add responsiveness.
For colors and highlights follow the figma file.

image

Design mobile-first

Follow folder structure:

public -> guidelines -> assets here
components -> guidelines -> components here

Fonts

Inter is the default font
Rubik is the title font - use classname font-rubik
Fonts are already linked and setup is done for everything.

Design Hero Section

Design the hero section as in the Figma link provided to you.

Export the gradient graphics and other images from Figma itself.
Don't forget to add hover effects to buttons and other interactivity you may think of.
Make sure everything is responsive.
There is no responsive design provided, u have to think for yourself and make the design responsive.
image

Design mobile-first

Follow folder structure:

public -> Hero -> assets here
components -> Hero -> components here

Fonts

Inter is the default font
Rubik is the title font - use classname font-rubik
Fonts are already linked and setup is done for everything.

Design Resume Template Section

Create the ATS Resume Template

Export the image from Figma
Keep the download button and resume test button clickable.
image

Design mobile-first

Follow folder structure:

public -> Template -> assets here
components -> Template -> components here

Fonts

Inter is the default font
Rubik is the title font - use classname font-rubik
Fonts are already linked and setup is done for everything.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.