[TECH ED] Portfolio: branch to branch

[PERicci]

From Module-JS1 created by SallyMcGrath: CodeYourFuture/Module-JS1#62

Link to the coursework

https://github.com/CodeYourFuture/Portfolio/tree/Module-JS-1

Why are we doing this?

You will slowly iterate on your Portfolio over the whole course of CYF. You need to build your portfolio so you can use it to get into The Launch module, and then later use it to apply for jobs.

This module we're exploring a branch to branch pattern in Git. Read the readme carefully and follow the instructions.

Bring your portfolio to class to get help and feedback from your community. Writing a great case study will help you understand how to explain and present your work to recruiters and employers. Your first case study doesn't have to be great, don't panic, but it's important to start one.

Explore and revise

• If you want help or to break the "blank page" fear for writing your case study, try getting a first draft from Claude and then revise the text to express your own ideas.
• It's not a good idea to let AI write everything for you. Why? (One reason is you cannot "stand out" by copy-pasting the same bland verbiage everyone else is copy-pasting.) What other drawbacks are there? Discuss in class.
• You've written quite a lot of reflections and technical writing by now, just by doing pull requests. Can you take some inspiration from that work?

Maximum time in hours

1

How to get help

Bring your portfolio to class to get help and feedback from your community. Writing a great case study will help you understand how to explain and present your work to recruiters and employers. Your first case study doesn't have to be great, don't panic, but it's important to start one.

How to submit

Follow the submission instructions in Portfolio.

[PERicci]

I implemented two features in my portfolio page:

1- Scroll to the correct position when clicked on the section link on the navbar in the top of the page.

When we click on the section link, the section title are positioned below de top bar, which is not the ideal. Using JavaScript, the onclick event attribute calls a function that identifies the href in the 'a' tag and scroll the page until there, considering the scroll-margin-top CSS attribute.

2- Mini contact section hides itself when the user reach the bottom of the page. The mini contact section is useful as a quick acess to my contact information, regardless of where the user is on the page. But, when the user reachs the bottom of the page and the contact section, the mini contact section becomes irrelevant. Using JavaScript, it identifies when the user reachs the bottom of the page (with some margin of error) and it hide the mini contact section.

Pull request and live demo