/portfolio

I've built this website to show you my love for making great digital stuff. Whether you want to see my cool web projects, learn about my tech skills with embedded systems, or chat about freelance work, you're in the right place. It's all here in one spot!

Primary LanguageTypeScriptMIT LicenseMIT

🌸 My portfolio

Welcome to my portfolio website repository! 🚀
As a versatile Frontend Developer and Embedded System Engineer, I've crafted this website to showcase my passion for creating elegant and efficient digital experiences. Whether you're here to explore my frontend projects, delve into my embedded systems expertise, or discuss potential freelance collaborations, this website serves as a hub for it all.

🎉 Key Features:

🌐 Frontend Showcase: Explore a collection of web applications and projects I've developed, each highlighting my skills in HTML, CSS, JavaScript, and various frontend frameworks.

🔌 Embedded Systems: Dive into my embedded system engineering work, where I tackle hardware and software integration challenges, from microcontrollers to IoT devices.

🤝 Freelance Opportunities: Let's connect! If you're interested in collaborating on a project or need assistance with frontend development or embedded systems, feel free to reach out.

📚 Blog and Portfolio: Stay updated with my latest tech insights, tutorials, and articles on the blog section. Peruse through my portfolio to see the variety of projects I've worked on.

🔧 Customization: This website is built with flexibility in mind. Feel free to fork this repository and adapt it for your own portfolio, or use it as inspiration for your own web development journey.

📚 Tech

  • React - A JavaScript library for building user interfaces.
  • Vite - A fast, opinionated frontend build tool.
  • TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
  • Tailwind CSS - A utility-first CSS framework.
  • Tailwind Prettier Plugin - A Prettier plugin for formatting Tailwind CSS classes.
  • ESLint - A pluggable linting utility for JavaScript and TypeScript.
  • PostCSS - A tool for transforming CSS with JavaScript.
  • Autoprefixer - A PostCSS plugin to parse CSS and add vendor prefixes.
  • shadcn/ui - Beautifully designed components that you can copy and paste into your apps.

⚙️ Prerequisites

Make sure you have the following installed on your development machine:

  • Node.js (version 16 or above)
  • pnpm (package manager)

🚀 Getting Started

Follow these steps to get started with the react-vite-ui template:

  1. Clone the repository:

    git clone https://github.com/dan5py/react-vite-ui.git

  2. Navigate to the project directory:

    cd react-vite-ui

  3. Install the dependencies:

    pnpm install

  4. Start the development server:

    pnpm dev

📜 Available Scripts

  • pnpm dev - Starts the development server.
  • pnpm build - Builds the production-ready code.
  • pnpm lint - Runs ESLint to analyze and lint the code.
  • pnpm preview - Starts the Vite development server in preview mode.

📂 Project Structure

The project structure follows a standard React application layout:

react-vite-ui/
  ├── node_modules/      # Project dependencies
  ├── public/            # Public assets
  ├── src/               # Application source code
  │   ├── components/    # React components
  │   │   └── ui/        # shadc/ui components
  │   ├── styles/        # CSS stylesheets
  │   ├── lib/           # Utility functions
  │   ├── App.tsx        # Application entry point
  │   └── index.tsx      # Main rendering file
  ├── .eslintrc.json     # ESLint configuration
  ├── index.html         # HTML entry point
  ├── postcss.config.js  # PostCSS configuration
  ├── tailwind.config.js # Tailwind CSS configuration
  ├── tsconfig.json      # TypeScript configuration
  └── vite.config.ts     # Vite configuration

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.