The portfolio will be a great test of your React, HTML and CSS skills but we will also take the opportunity to get started with accessibility and build websites for everyone -- something every frontend developer should know. Don't save until the last day to do the testing -- it's very much the task of this project and will take some time.
We've created a portfolio design for you that you should follow. You are free to change:
If you have any written articles or blog posts that you consider relevant, there's a section for that in the portfolio. If you don't have that (yet), feel free to leave that part out.
We want you to practise following a design strictly. This is normally how the workflow is for a Frontend Developer: to work together with a designer who provides a design file (in Figma) for you to translate into code.
If you work as a designer and really hate our design, you could pitch to us why you would do a better job and hand in your own design file for us to evaluate. But otherwise, this design comes from an experienced designer in collaboration with the expertise of a recruiter who knows what recruiters look at.
This is where you sell in your new self. You're happy to combine your previous experience with your new Frontend skills or use this area to describe yourself and how you see your future role. Either you do something like "Web dev + design" or more of a sentence like; "Web developer with a background in communications". Or if you don't see yourself as a Frontend Developer in the future, maybe you want to write something like; "Project manager with coding skills". It's your portfolio. Add a photo of yourself and summarise what you have been doing in the past and what you want to do in the future. This gives the reader an idea of who you are. Keep it short and personal.
Give a short summary/name-dropping of all the technologies, tools, libraries and things you know and will learn during this course.
Mention the projects you are most proud of here; feel free to add all of them! The more, the merrier at the beginning of your developer career. Make sure to mention all technologies, libraries or APIs you have used. Don't feel like you are repeating yourself. As a recruiter looking for a React developer – the more React is mentioned – the better. If you have other code projects unrelated to this course, feel free to add them, too. For every project, add a link to the GitHub repo and a link to the deployed page, where the project can be viewed live. Add a thumbnail image that shows your project and a short summary of what the project is about.
Presenting yourself and your thoughts about programming, career change, remote work, and bootcamping can be extremely helpful for recruiters to gain insight into what you're up to. It can be a great way to show off your knowledge and skills - and that you reflect on it.
During the career coaching program, you will be asked to post reflections on LinkedIn connected to the different topics covered in the bootcamp, this is an excellent opportunity to showcase your reflections to future employers. You can leave this empty for now and return to it when you have progressed further in the career coaching program. You can also include reflections that you have posted on social media in this section if you have done so.
Place ALL your skills here. Feel free to add tech skills that are not in the course but things you have knowledge of from before. In the other columns, place everything that you think will be useful for a tech job. Softwares that you know, methodologies, leadership frameworks and basically whatever.
Make it super clear how a person can contact you. Again, add the social media links that you are using.
- Begin with forking and cloning the repo as usual. Since there is no starter code this week, you must create it by utilising Vite →
npm create vite@latest my-portfolio --template - Before starting the coding, consider what components you need and break the design into reusable and manageable pieces. Has your team already created some components during the team session? Great—use them!
- Consider how you will get the data, e.g. the projects and articles. Do you want to go with JSON files all the way (see
projects.jsonas an example), or do you want to go with the stretch goal that uses the GitHub API to get all projects? - When picking colours, remember to consider accessibility so that the contrast is sufficient.
- Remember that your portfolio will continue to evolve and grow as you progress in your coding journey. Happy coding!
To use the icons from the design, simply mark the icon you want to export and save it as an SVG or copy the code and make it into a component.
- Your portfolio should have components and props
- Your portfolio should contain:
- A picture of you.
- A presentation of your tech skills.
- A presentation of your projects linking to GitHub and Netlify.
- A presentation of some thoughts that you have around code.
- A clear way to get in contact with you.
- Your portfolio should follow the design as closely as possible
- Your portfolio should be responsive (it should look good on devices from 320px width up to 1600px)
- Your portfolio should be following accessibility guidelines to ensure your website is usable by a diverse range of users:
- You should have a score of at least 95 in Lighthouse
- All images should have alt attributes and proper sizes
- All contrasts should be OK
- Follow the guidelines on how to write good code
- Optimise your website for sharing on social media using og:tags.
- Implement animation on scroll as present in the design for enhanced user experience.
- Add a favicon
- Give your portfolio a custom domain and connect to your deployed site. Read more.
- Utilise the GitHub API to fetch your public projects from your GitHub account, ensuring your portfolio stays up-to-date with your latest work.
- Use the following URL link [https://api.github.com/users/YourGitHubProfile/repos] as an example. Replace "YourGitHubProfile" with your actual GitHub profile name to fetch your repository data. Example: Technigo GitHub profile