This is a project 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:
- Home
- 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:
- Role name;
- Company name;
- Start and end years;
- A short description about the role;
- It's possible to see a detailed version incluind:
- A list of the main responsibilities;
- The biggest challenge faced;
- Education
- This page has a timeline of all my school and education hsitory;
- The items are listed as a list including:
- Field of study;
- School name;
- Start and end years;
- Degree;
- Subjects;
- Skills
- This page has a list 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 that I've learned but I don't using or it's not so relevant for now;
- Recommendations
- This page has a list of the latest professional recommendations received from workmates;
- The items are listed as quotes including:
- 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)