The design of this portfolio website is inspired by Neovim and Gruvbox Material. The website is built with custom, reusable react components. The data and structure are completely separated. It's easy to swap in all your highlights and achievements. With tailwind css, any adjustments or changes you make to an element or component stays local.
- Dark mode and more color themes
- Responsive layout, delivering a concise and slick look on both Mobile and Desktop
- Componentized and tailwind styled, customise to your heart's content without affecting other parts.
- To-the-point sections to showcase your skills at a glimpse.
- A none-intrusive navbar animation to reveal your qualities when hovered.
- Recieve feedback from viewers without needing the backend.
- Live Site URL: Github page
- React hooks (useState, useContext, useEffect)
- Tailwind Css
- Css custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- Clone the repository using
git clone https://github.com/llhyuan/portfolio-website.git - Run
pnpm installto install all dependecies - Run
pnpm run devto boot up local server - Open your code editor and browser, and start customizing
- All content is stored under
src/assets/data - Screenshots for the Projects section is stored under
src/assets/project-image - All data is stored as well structured JS objects and divided into files corresponding to each section on the website.
- The object key-value pairs are descriptive and straightforward
- key: 'value'
How to: simply replace the value - key: ['value', ...]
How to: add to/delete from the array.
If you don't want this section, just leave the array empty
- key: 'value'
- Receiving submitted feedback form without using backend code
- This is made possible with emailjs
- The code is located in the Form component
- Check out their documentation for a step-by-step guide
- This is made possible with emailjs
- Run
pnpm run deployto deploy it to GitHub Page.
- LinkedIn - Hangyuan Liu
- Frontend Mentor - @llhyuan