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.
Resources: Lato Font - Google Fonts, Store All Your Project Images Here, NeetoCode Account, NeetoCal Account, Flaticon
Things you need to know: HTML structure, position, display, float, box model, browser events, functions.
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
#0a192fandLatofont 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
#829467underline 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.
