This project was created to practice some development skills and also used as my professional portfolio.
All the pages were created following the LinkedIn profile structure to keep it simple to understand and easy to change when it is needed:
- Homepage
- This page has some introduction info:
- Summary;
- Some contact links;
- My profile photo;
- This page has some introduction info:
- Experience
- This page has a timeline of all my professional positions;
- The items are listed by default as a simple list only showing:
- Company logo;
- Role name;
- Company name;
- Start and end years;
- A short description of the role;
- It's possible to see a detailed version including:
- A list of the main responsibilities;
- The biggest challenge faced;
- Education
- This page has a timeline of all my school and education history;
- The items are listed as a list including:
- School logo;
- Field of study;
- School name;
- Start and end years;
- Degree;
- Subjects;
- Skills
- This page has a list of my most relevant skills;
- The items are listed by default as a random sorted Word Cloud including:
- Hard skills;
- Soft skills;
- The words have a size between 1 and 5 where:
- 5 -> My major skills and my current focus;
- ...
- 1 -> The skills I learned but am not using or are not so relevant at the moment;
- Recommendations
- This page has a list of the latest professional recommendations received from workmates;
- The items are listed as quotes including:
- Author's photo
- Author's name;
- Author's role;
- Author's company;
- Recommendation text;
- Resume
- This page has a standard resume template designed for printing;
- The resume includes:
- Contact info;
- Summary;
- Skills;
- Experience;
- Education;
The design is fully responsive and was validated for the most common screen resolutions of each platform (desktop, mobile, and tablet).
- 1920 x 1080
- 1366 x 768
- 1536 x 864
- 1280 x 720
- 1440 x 900
- 360 x 800
- 390 x 844
- 414 x 896
- 375 x 667
- 412 x 732
- 768 x 1024
- 810 x 1080
- 1280 x 800
- 1024 x 768
- 1920 x 1080
The app is prepared to run in light mode and dark mode. To improve the user experience, the user's browser preference (prefers-color-scheme) is retrieved and set to the application on the first visit.
There is also a button on the header to change the theme anytime. This choice will be persisted on the localStorage
for future visits.
The app was created with all texts in English but supports multiple languages. It's now already available in Portuguese as well.
The language was set depending on the user's browser language priority (Accept-Language
) and persisted in the URL for the whole navigation.
There is a menu in the website footer with all available languages that allow the user to change at any time.
All pages were highly optimized following the Google Core Web Vitals guidelines and validated in PageSpeed Insights achieving a score of 100 in all evaluations.
It uses Vercel Speed Insights which provides a detailed view of the website's performance metrics and a near real-time Real Experience Score monitoring.
This website is properly designed and coded following the WCAG best practices, so people with disabilities can use it. Making the web accessible benefits individuals, businesses, and society.
yarn install
to install the dependencies
yarn dev
to run the server in development mode
yarn lint
to run the static code analysis
yarn test
to run the unit tests
yarn test:update
to run the unit tests and update the snapshots
yarn test:coverage
to check the code coverage
yarn cy:prepare
to run the server prepared for E2E tests
yarn cy:open
to open Cypress interface
yarn cy:run
to run the E2E tests
yarn cy:update
to run the E2E tests and update the snapshots
yarn build
to generate a production build
yarn start
to run the server in production mode
- React to build the interfaces
- Next.js to improve the performance
- Tailwind CSS to level up the CSS
- TypeScript to level up the JavaScript
- Jest and React Testing Library to the unit tests
- Cypress to the E2E tests
- Vercel to the deployment
- Daniel Xavier (@DanielJXavier)