Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ayazhankadessova/portfolio-website-v2

Upgraded version of my Personal Portfolio.
https://github.com/ayazhankadessova/portfolio-website-v2

gatsby react

Last synced: about 1 month 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 (over 1 year ago)
Default Branch: main
Last Pushed: 2024-08-09T20:57:13.000Z (5 months ago)
Last Synced: 2024-08-09T22:04:16.177Z (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

[![Netlify Status](https://api.netlify.com/api/v1/badges/92df0046-adaf-4ece-9fa8-004b36b780cf/deploy-status)](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`       | ![#020c1b](https://via.placeholder.com/10/0a192f?text=+) `#0a192f`                           |

| `--navy`            | ![#eae1dc](https://via.placeholder.com/10/ece5c7?text=+) `#ece5c7`                           |

| `--light-navy`      | ![#f0eae7](https://via.placeholder.com/10/f0eae7?text=+) `#f0eae7`                           |

| `--lightest-navy`   | ![#f7f3f1](https://via.placeholder.com/10/f7f3f1?text=+) `#f7f3f1`                           |

| `--navy-shadow`     | ![rgba(2, 12, 27, 0.7)](https://via.placeholder.com/10/020c1b?text=+) `rgba(2, 12, 27, 0.7)` |

| `--dark-slate`      | ![#495670](https://via.placeholder.com/10/495670?text=+)   `#495670`                         |

| `--slate`           | ![#8e8d8a](https://via.placeholder.com/10/8e8d8a?text=+) `#8e8d8a`                           |

| `--light-slate`     | ![#72716e](https://via.placeholder.com/10/72716e?text=+) `#72716e`                           |

| `--lightest-slate`  | ![#474745](https://via.placeholder.com/10/474745?text=+) `#474745`                           |

| `--white`           | ![#e6f1ff](https://via.placeholder.com/10/e6f1ff?text=+) `#e6f1ff`                           |

| `--green`           | ![#e85a4f](https://via.placeholder.com/10/e86422?text=+) `#e86422`                           |

| `--green-tint-dark` | ![#8b362f](https://via.placeholder.com/10/e55807?text=+) `#e55807`                           |

| `--green-tint`      | ![#f6bdb9](https://via.placeholder.com/10/f6bdb9?text=+) `#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 | ![#c5f015](https://placehold.co/15x15/c5f015/c5f015.png) 1. Check the experiences section & links| ------- | ------- |

| 2. Make loading faster | ------------ | ------- | ------- |

| 3. make page flowing | -------  | ------- | ------- |

| ![#f03c15](https://placehold.co/15x15/f03c15/f03c15.png) 3. Add pic to hobbies | -------- | ------- | ------- |

| ![#f03c15](https://placehold.co/15x15/f03c15/f03c15.png) 2. Add personal website pic to Linkedin | -------- | ------- | ------- |

- ![#c5f015](https://placehold.co/15x15/c5f015/c5f015.png) `Additional`

- ![#1589F0](https://placehold.co/15x15/1589F0/1589F0.png) `Delayed`

- ![#f03c15](https://placehold.co/15x15/f03c15/f03c15.png) `Important`