https://github.com/ayazhankadessova/portfolio-website-v2
Upgraded version of my Personal Portfolio.
https://github.com/ayazhankadessova/portfolio-website-v2
gatsby react
Last synced: 3 months ago
JSON representation
Upgraded version of my Personal Portfolio.
- Host: GitHub
- URL: https://github.com/ayazhankadessova/portfolio-website-v2
- Owner: ayazhankadessova
- License: mit
- Created: 2023-07-23T14:54:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-09T20:57:13.000Z (11 months ago)
- Last Synced: 2025-02-10T19:22:18.421Z (5 months ago)
- Topics: gatsby, react
- Language: JavaScript
- Homepage: https://ayazhan-kadessova.netlify.app/
- Size: 8.12 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Portfolio Website - v2
`Gatsby`, `React`
- v1: https://github.com/ayazhankadessova/portfolio-website-v1 -> [Live Demo](https://ayazhankadessova-portfolio-website.netlify.app)
## 💡 Motivation
After repeatedly coming across **Gatsby** on YouTube, I was motivated to give it a try in order to make my portfolio website **more responsive and interactive**. Additionally, I wanted to experiment with different color palettes, as my first website had a dark theme. Using React and Gatsby, I was able to create a more dynamic and visually appealing website that showcases my skills and projects in a more engaging way.
I will work on upgrading this site!
## Links & Demo
[](https://app.netlify.com/sites/ayazhan-kadessova/deploys)
## 🛠Installation & Set Up
1. Install the Gatsby CLI
```sh
npm install -g gatsby-cli
```
2. Install and use the correct version of Node using [NVM](https://github.com/nvm-sh/nvm)
```sh
nvm install
```
3. Install dependencies
```sh
yarn
```
4. Start the development server
```sh
npm start
```
## 🚀 Building and Running for Production
1. Generate a full static production build
```sh
npm run build
```
1. Preview the site as it will appear once deployed
```sh
npm run serve
```
## 🎨 Color Reference
The color variables are all defined in `src/styles/variables.js`.
**The variable name does not always correspond to the actual color value** since I was experimenting :)
| Variable Name | Hex |
|---------------------|----------------------------------------------------------------------------------------------|
| `--dark-navy` |  `#0a192f` |
| `--navy` |  `#ece5c7` |
| `--light-navy` |  `#f0eae7` |
| `--lightest-navy` |  `#f7f3f1` |
| `--navy-shadow` |  `rgba(2, 12, 27, 0.7)` |
| `--dark-slate` |  `#495670` |
| `--slate` |  `#8e8d8a` |
| `--light-slate` |  `#72716e` |
| `--lightest-slate` |  `#474745` |
| `--white` |  `#e6f1ff` |
| `--green` |  `#e86422` |
| `--green-tint-dark` |  `#e55807` |
| `--green-tint` |  `#f6bdb9` |
## Credits
- Inspired by [Brittany Chiang's Design on GitHub](https://github.com/bchiang7/bchiang7.github.io).
## About Me
I'm an aspiring software developer from Kazakhstan, studying in Hong Kong.
I love experimenting with various tech stack. Here is my first project using Gatsby ;)
- [@ayazhankadessova](https://github.com/ayazhankadessova)
- [Linkedin](https://www.linkedin.com/in/ayazhankad/)
## TODO:
| Done | Easy | Time-consuming | Planning |
| ---- | ------ | ------- | ------- |
| 1. Add new CV |  1. Check the experiences section & links| ------- | ------- |
| 2. Make loading faster | ------------ | ------- | ------- |
| 3. make page flowing | ------- | ------- | ------- |
|  3. Add pic to hobbies | -------- | ------- | ------- |
|  2. Add personal website pic to Linkedin | -------- | ------- | ------- |
-  `Additional`
-  `Delayed`
-  `Important`