myDevPortfolio — Vite 作品集模板

SHA-256: 928564af9e7cf74048936ceaa31273c8e6b07d0bd811044ab685cf03a64a8075

2026-10-15T04:44:19.930Z

# Developer Portfolio Site

This template is designed to showcase skills, projects, and experience as a web developer and/or software engineer.  
You can use it as template. 
Please contribute to make it better!

This portfolio site is built using the following technologies:
Site genereated by **Vite**,
uses **React** library,
designed by **Tailwind CSS**,
deployed by **Netlify**.

## Table of Contents

1. [Layout](#layout)
2. [Configuration](#configuration)
3. [About Me](#about-me)
4. [Resume](#resume)
5. [Projects](#projects)
6. [Certifications](#certifications)
7. [SEO](#seo)
8. [Contact](#contact)

## Layout
The template has three different layout.
In tailwind config the basic xl breakpoint was modified to 1180px.

## Configuration

Personalisation
: For configuration of personal information you should modify the objects in personalConfig.js file.
   - Education: educationDetails
   - Experience: experienceDetails
   - Competencies: skills
   - Self-advertising: hireMeText
   - About-me Summary: aboutMeText
   - TypeWriter configuration: introSecDetails
   - Acquired certificates: certificates

Lookout
:For site configuration us the dataConfig.js file.
   - You can modify the lineParticles option which has effect on the 'Intro' component.
:Tailwind
   - There are color variables for different themes. Those variables can be changed to make the color set better. The basic modes are: **light** and **dark**.
   - Template does not use Tailwind's ':dark' feature instead it uses CSS variables which can be unique for every themes. So the **dark** is a theme. With this method you can define various themes without touching the Tailwind classes.  

## About Me

In this section, you can introduce yourself and provide a brief background about your journey to a developer. You will highlight your passion for coding, problem-solving abilities, and unique perspective in tackling technical challenges.

## Resume 

This section contains general CV elements.

### I. Education

In this section, you can list educational background, including:

- Degree(s) obtained
- Institution(s) attended
- Graduation year(s)

### II. Experience

Here, I will provide an overview of my professional experience. This will include:

- Job Title
- Company Name
- Duration
- Responsibilities and achievements
  
### III. Skills

Here, you can list the various technical skills you have acquired over the years. This can include:

- Front-end development: HTML, CSS, JavaScript, React
- Back-end development: Node.js, Express.js, MongoDB, SQL
- Microsoft Technologies: VBA, Office Script, Power Automate
- Tools and Platforms: Git, GitHub
- Others: Agile methodologies, problem-solving, analytical skills

## Projects

This section will showcase the projects you have worked on. Each project will include:

- Project Title
- Description
- Technologies Used
- Link to the live project or repository
- Screenshots or demo (if available)

## Certifications

Here, you will list any relevant certifications have earned, such as:

- Web Development Bootcamps
- Online Courses (Coursera, Udemy, etc.)
- Microsoft Certifications
- Any other relevant certifications

In the base template the certificate is a modal which jump up when click on a button in the Intro section.

## SEO
Using React Helmet for changing <header> depends on the given location. 
Should be changed:
- In SEO component the static description.
- The url based on domain
- for dedicated portfolio site simply add SEO component and configure accordingly of the nature of the portfolio

## Contact

I provide my contact form to get in touch. 

Thank you for visiting my portfolio site! Stay tuned as I continue to update and enhance it with my latest projects and achievements.