Personal Resume Project

Build a visually appealing resume webpage to showcase your web development projects and skills. Include your personal details and links to your work for easy access. You will be building this project as part of our CSS Course.

Max Chat

Task 01

  • Create the header section with the main heading, subheading and introductory text.

  • The text given in the image is a reference one and we want you to add details related to you in there.

  • Set the background color to #0a192f and Lato font family from Google Fonts give in the resources for the entire page.

  • Center-align all text and set the color to white and light gray as shown in the reference image. Adjust the spacing to match the layout in the provided design.

Task 02

  • Create the My Work section with a single card for a project.

  • Style this header in white color and align it to the left and use a slightly larger font size than the body text for emphasis.

  • You can list the projects you have built here.

  • Each project card should have:

    • An image of the project.

    • Name

    • Description

    • NeetoCode link. (view in neetcode ↗)

  • Add the image and text to the project card as per the layout.

  • Make sure that only 2 cards are visible.

  • Add a VIEW ALL button at the bottom of this section that will show more cards when clicked.

  • Each project card should be styled with a background color of #0c2f3d, rounded corners and padding for a card-like appearance with a slight box-shadow.

  • Style the view in neetcode ↗ link text with a color of #829467 underline it on hover.

  • For the VIEW ALL button, set the background color to transparent and add a small solid border in light yellow-green #c5c5a5, and make the text color match the border color. Add proper spacing and the round the border as per the given image.

Task 03

  • Add a Writings section in the portfolio.

  • If you don't have any writing, this is a good time to start. If you haven't written anything yet, change the heading to Writings I like.

  • Add a couple of articles that you have written or articles that you like in card format.

  • Each article card should have:

    • Thumbnail image

    • Title

    • Author name

    • Estimated reading time.

  • Add the image and text to the project card as per the layout.

  • Make sure that only 2 cards are visible.

  • Add a VIEW ALL button at the bottom of this section that will show more cards when clicked.

  • Each writing card should be styled with a background color of #0c2f3d, rounded corners and padding for a card-like appearance with a slight box-shadow.

  • For the VIEW ALL button, set the background color to transparent and add a small solid border in light yellow-green #c5c5a5, and make the text color match the border color. Add proper spacing and the round the border as per the given image.

Task 04

  • Add the Get in touch with me section with appropriate text.

  • Add a Book a session button at the bottom of the Get in touch with me section.

  • You can connect your NeetoCal link here after creating an account from the link given in the resource.

  • Create the footer section with your name and the social and other links.

  • The links you can use are

    • Github

    • LinkedIn

    • Email

    • Schedule a call

    • Blog

Task 05

  • Add a sidebar to the left of the portfolio.

  • Add a profile picture at the top of the sidebar with your name.

  • Add an internal links section in the sidebar with the four links to the sections:

    • Intro

    • Work

    • Writing

    • Contact.

  • You can list your Email, Github and LinkedIn links using icons in the sidebar.

  • Get the icons from the Flaticon site listed in the resources.

Task 06

  • Make the project responsive so it looks good on mobile, desktop and tablet.

More projects

These are some of the projects you'll build while learning.