Skip to content

fsystemweb/xp-portfolio

Repository files navigation

Retro Portfolio Website

React TypeScript Vite Tailwind CSS Lucide React Vitest ESLint Prettier

A free-to-use, nostalgic portfolio template inspired by popular operating systems. Designed with a retro aesthetic reminiscent of beloved vintage OS interfaces, this template offers a fun and unique way to showcase your work—perfect for developers, designers, or anyone who appreciates a touch of digital nostalgia.

🔗 Live Demo: https://fsystemweb.github.io/xp-portfolio/

✅ Free for personal and non-commercial use
⚠️ Note: I do not own the icons or images included—these are used for demonstration only. Please do not use them commercially without proper rights.

How to Use

To customize this portfolio with your own information, simply edit the portfolio.json file located in the src/data folder. Update the fields (like name, bio, projects, social links, etc.) with your details—no coding required!

Once you've made your changes, build and deploy the site as usual.

💡 Note: More UI enhancements and features are planned for future updates—stay tuned!

Install

npm install

Start locally

npm run dev

Code formatting (Prettier)

This project uses Prettier for consistent code formatting.

  • Run the formatter across the repository:
npm run format
  • Check formatting without modifying files:
npm run format:check

Prettier configuration is stored in .prettierrc.

Linting (ESLint)

This project uses ESLint for linting and code quality.

  • Check the repository for linting issues:
npm run lint
  • Automatically fix fixable issues:
npm run lint:fix

Testing

This project uses Vitest with Testing Library (jsdom) for unit tests.

  • Run the test suite once:
npm test
  • Run tests in watch mode:
npm run test:watch

Test files live alongside components under src/components/__tests__/ and follow the pattern *.test.tsx and *.spec.tsx.

The test setup file is src/setupTests.ts which loads @testing-library/jest-dom for convenient matchers.

  • Run tests coverage:
npm run test:coverage

License

This project is free to use for personal and non-commercial purposes.

Note: I am not the owner of any images, icons, or third-party assets included in this project. These assets are used for demonstration or functional purposes only. Please do not use them for commercial purposes.