dochner/my-react-portfolio

An portfolio website built with React, Vite, UnoCSS, and applying clean-architecture for learning purpose.

Live Demo

MyReactPortfolio is being created with the following purposes:

• To learn and practice React and its ecosystem
• To create a portfolio that is easy to maintain and update
• To learn and practice the use of GitHub Actions
• To learn and practive clean code and clean architecture
• To implement a i18n solution

Features

• ⚡️ React, Vite, pnpm, esbuild - born with fastness

• 🗂 File based routing

• 📦 Components auto importing

• 📑 Layout system

• 📲 PWA

• 🎨 UnoCSS - the instant on-demand atomic CSS engine

• 😃 Use icons from any icon sets with classes

• 📥 APIs auto importing - use Composition API and others directly

• 🦾 TypeScript, of course

• ☁️ Deploy on Netlify, zero-config

Pre-packed

UI Frameworks

• UnoCSS - The instant on-demand atomic CSS engine.

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• Pure CSS Icons via UnoCSS

Plugins

• React Router
  • vite-plugin-pages - file system based routing
• unplugin-react-components - components auto import
• unplugin-auto-import - Directly use Hooks, Context and others without importing
• vite-plugin-pwa - PWA

Coding Style

• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• Netlify - zero-config deployment
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Iconify IntelliSense - Icon inline display and autocomplete
  • ESLint

Try it now

requires Node >=14.18

Usage

Development

Just run and visit http://localhost:3333

pnpm dev

Build

To build the App, run

pnpm build

And you will see the generated file in dist that ready to be served.