https://github.com/kenclaron/kenclaron.github.io
Personal website (React, TypeScript) with GitHub API sync.
https://github.com/kenclaron/kenclaron.github.io
api frontend gh-pages i18next nodejs personal react recoil typescript
Last synced: 3 months ago
JSON representation
Personal website (React, TypeScript) with GitHub API sync.
- Host: GitHub
- URL: https://github.com/kenclaron/kenclaron.github.io
- Owner: kenclaron
- Created: 2022-11-19T08:59:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-14T16:35:36.000Z (8 months ago)
- Last Synced: 2025-01-12T22:10:50.915Z (4 months ago)
- Topics: api, frontend, gh-pages, i18next, nodejs, personal, react, recoil, typescript
- Language: TypeScript
- Homepage: https://kenclaron.github.io
- Size: 10.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal website
> Link: https://kenclaron.github.io/
> Stack: `React`, `Recoil`, `TypeScript`, `Node.js`, `gh-pages`, `i18next`.
## Features
- Language auto-detecting for users by `i18next`;
- Project list of author from GitHub API;
- Semantic webpage development for accessibility and screen-readers;
- New Material Design 3 UI/UX reference;
- Skeletons-components when device not loaded page yet;
- Compressing of build version of project;
- Generating OpenGraph images of repositories from GitHub.
## Usage
### **Using via npm**
- Install `Node.js`: ;
- Clone this repository: `git clone https://github.com/kenclaron/kenclaron.github.io.git`;
- Go to folder of repository: `cd ./kenclaron.github.io`;
- Install needed libraries: `npm install`
- Type: `npm start` (launching in dev-mode in browser, by default: `http://localhost:3000`)
- Type: `npm build` (build project for production)
- Results save in folder `./build`
```text
git clone https://github.com/kenclaron/kenclaron.github.io.git
cd ./kenclaron.github.io
npm install
npm start
npm build
```
### **Open Webpage**
- Open:
## Project folder
```text
kenclaron.github.io
├── build - Builded project
│
├── public - static files of website
│ ├── css - static .css-files
│ ├── js - static .js-files
│ └── manifest - static files for manifest information
│
└── src - Source fiels
├── __test__ - Jest-tests
├── @types - declaring of types
├── api - .ts-files with requests to API
├── components - .tsx-files with components
├── content - static content-information for generating components
├── i18n - i18n-content
└── utils - utilities
├── containers - atoms and selectors of variables by recoil
├── hooks - custom React-hooks
└── types - custom types
```
## Preview
[
](https://i.imgur.com/bTK0Sa5.png)
[
](https://i.imgur.com/GFAIjav.png)
[
](https://i.imgur.com/ON3e55K.png)
[
](https://i.imgur.com/isM6fGV.png)