Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliankrzysiak/portfolio
My portfolio website
https://github.com/juliankrzysiak/portfolio
portfolio portfolio-website
Last synced: 18 days ago
JSON representation
My portfolio website
- Host: GitHub
- URL: https://github.com/juliankrzysiak/portfolio
- Owner: juliankrzysiak
- License: mit
- Created: 2023-09-03T05:11:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-18T10:02:44.000Z (22 days ago)
- Last Synced: 2024-12-18T11:22:07.215Z (22 days ago)
- Topics: portfolio, portfolio-website
- Language: Astro
- Homepage: https://juliankrzysiak.com
- Size: 18.4 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
Julian's Website
My personal website for showcasing my portfolio, blog, and reviews.
View Demo
·
Report Bug
·
Request Feature
## About The Project
Desktop Light | Mobile Dark
-------------------------|-------------------------
| 
### Built With
### How It's Made
I wanted to build a simple one-page personal website, and with each new project, I might as well learn something new.
So I picked Astro, a framework utilizing static site generation, which was the perfect use case for me; a small, fast, simple website.
The development process was enjoyable, and I tried to use as little Javascript as possible. The only two instances where I have it is for controlling light/dark mode and copying my email to the clipboard.
I implemented both of these using Svelte since I wanted to practice using it after learning about it recently.
### Optimizations
Using static site generation makes the website pretty fast already. The included images are also optimized by Astro.
Designing the whole website ahead of time, for both mobile and desktop, in both light and dark mode, was very beneficial. I can mess up and develop the design much faster in Figma,
and then I just have to copy the design over. The design is also more coherent and clean.
Initially I styled the whole website in Tailwind CSS, but I decided to convert everything to vanilla CSS since I felt like I was getting rusty with the fundamentals.
Also, I had to change some things to be more accessible; I would rather have a more accessible website than a more aesthetic website (but you can certainly have both!).
I was going to add some superfluous animations and the like, but at the end of the day, this website is just for information.
### Learning Outcomes
| The Good | The Bad | The Ugly |
|----------------------------------------|------------------------------------------------------|----------|
| New framework was easy to implement | Config for prettier and Astro was confusing at first | |
| Designing beforehand, not while coding | Figuring out dark mode logic | |
| Added dark mode | Converting Tailwind to vanilla CSS | |
| Responsive design | | |
| Learning vanilla CSS again | | |
## Getting Started
If you want to get a local copy running for some reason, here you go.
### Prerequisites
* pnpm
```
npm install -g pnpm
```
### Installation
1. Clone the repo
```
git clone https://github.com/CastillejaCode/portfolio.git
```
2. Install NPM packages
```
pnpm install
```
3. Run local development server
```
pnpm dev
```
4. Switch out my info for yours
For projects, you can just replace the array with your project objects, and they will be automatically created.
You can also add any blog posts or reviews easily due to the content collection schema.
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact
Julian Krzysiak - [email protected]
## Acknowledgments
* Favicon generator - [favicon.io](https://favicon.io/)
* Icons - [Hero Icons](https://heroicons.com/)
* Readme Template - [Best-README-Template](https://github.com/othneildrew/Best-README-Template)