Portfolio Website

Hello, welcome to my portfolio website's code! I hope you enjoyed my website!

Table of Conents

1. Website
2. Libraries
3. Features
4. Setup
5. Structure
6. Pages

Website

You can find the website here: https://ethanwongca.github.io/

Libraries Used

Languages: TypeScript, HTML, CSS, and JavaScript
Technologies: React.js, Tailwind CSS, Node.js

Features

• Responsive design
• Dynamic content fetching from GitHub API
• Interactive UI with Tailwind CSS
• Real-time updates of GitHub repositories

Setup

1. Clone the repository:

   git clone https://github.com/ethanwongca/ethanwongca.github.io.git
   cd ethanwongca.github.io

2. Install dependencies:

   npm install

3. Run the development server:

   npm start

4. Build for production:

   npm run build

5. Deploy to GitHub Pages:

   npm run deploy

Folder Structure

ethanwongca.github.io/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   │   └── headshot.jpg
│   ├── components/
│   │   └── Header.tsx
│   ├── pages/
│   │   ├── About.tsx
│   │   ├── CV.tsx
│   │   ├── Publications.tsx
│   │   ├── Projects.tsx
│   │   └── Socials.tsx
│   ├── App.tsx
│   ├── index.css
│   └── index.tsx
├── .gitignore
├── package.json
└── README.md

Pages

About

• The about page provides a description of myself

CV

• Basics: Displays name, experience, volunteering in containers
• Mobile Friendly: Sidebar is removed when on mobile devices

Publications

• Publication Entries: Include entries with publication title, journal name, link to publication, and a brief description

Projects

• Project: Updates realtime using GitHub's API to fetch the latest project data dynamically.

Socials

• Links: Provides clickable cards for email, LinkedIn, GitHub, and Google Scholar