Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ajitsinghkamal/portfolio
Work Portfolio of Ajit Singh Kamal.
https://github.com/ajitsinghkamal/portfolio
gatsby gatsby-site portfolio
Last synced: 14 days ago
JSON representation
Work Portfolio of Ajit Singh Kamal.
- Host: GitHub
- URL: https://github.com/ajitsinghkamal/portfolio
- Owner: ajitsinghkamal
- License: mit
- Created: 2020-05-16T15:01:12.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-28T15:24:11.000Z (6 months ago)
- Last Synced: 2024-06-29T11:04:19.503Z (6 months ago)
- Topics: gatsby, gatsby-site, portfolio
- Language: TypeScript
- Homepage: https://ajitskamal.xyz
- Size: 6.45 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This portfolio is meant to showcase my past experiences and UI development skills.
_Screenshot for the lazy_
The project is built with Gatsby.
## 🧐 Why Gatsby
I am an avid learner first and a web developer second. Having never worked with a static site generator before, Gatsby was an obvious choice.
The plugin ecosystem is great and the developer experience is quite good. A static server side rendered portfolio also adds some brownie points for pleasing the picky search engine bots 🙄
Also, I really wanted to experiment with the `mdx` support and yes, it works like a charm.
## 💅 What about styling ?
Styling is done with emotion.
- I prefer emotion over styled components because it gives you way more options. You can simply use the `emotion/css` package if you like to stick to the CSS roots and still get all the advantages of CSS in JS. No need of having a seperate `.module.<>css` or declaring styles as object 🤭. If you like attaching styles to your components - use `emotion/styled`.
- Emotion also provides an out-of-the-box way of extracting css to prevent _Flash of Unstyled Content_ on server side rendered content.
## 🤸🏽♂️What else ?
- TypeScript. Yes, some JavaScript purist thinks its an unnecessary overhead but from my experience, TS really makes the code more reasonable and navigational.
- There's also a bit of ThreeJS added to spice things up.
## 🚀 Quick start
1. **Clone the repo.**
If you want to test it out locally then clone the repo first.
2. **Setup**
Move inside the directory
```
cd
```
and start installing the npm dependencies.
```
yarn
```
or
```
npm i
```
2. **Start Project**
Once all dependencies are installed then just run
```
gatsby develop
```
or
```
yarn start
```
3. **Open the source code and start editing!**
The site is now running at `http://localhost:8000`!