https://github.com/kiaancastillo/kiaancastillo.github.io
Kiaan Castillo's personal website
https://github.com/kiaancastillo/kiaancastillo.github.io
minimalist-design personal-website
Last synced: 6 months ago
JSON representation
Kiaan Castillo's personal website
- Host: GitHub
- URL: https://github.com/kiaancastillo/kiaancastillo.github.io
- Owner: KiaanCastillo
- Created: 2024-03-27T03:29:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-14T22:03:12.000Z (about 1 year ago)
- Last Synced: 2024-12-19T18:13:56.407Z (10 months ago)
- Topics: minimalist-design, personal-website
- Language: TypeScript
- Homepage: http://kiaancastillo.com/
- Size: 6.51 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kiaan Castillo's Personal Portfolio
Welcome to my personal portfolio website! Here you can learn more about how I built it and what design decisions I made to get to this current state.
## How I built this
### The Tech Stack
This website was created using React with TypeScript for my frontend framework, Vite for my build tool, and Tailwind for my CSS utility library. This stack enabled me to work really fast and get a website up and running in no time. Other utility libraries include React Router and React Router hash link for routing purposes.
### The Design
As for designing the website, I took to my favourite tool of all time - Figma! I did a lot of brainstorming and inspiration seeking and finally landed with something that I felt embodied who I am as a person. For the visual design of my personal portfolio, I wanted it to be minimal yet attentive to small details. So while my website may seem unassuming at first, it has lots of cool little details when looking closer.
For instance, the loading animation is one that I spent a long time tweaking. Go to [my website](https://kiaancastillo.com) again and refresh the page. You'll notice that there's a quick focus in with a small fade up action. This is actually a recreation of the loading animation from one of my favourite designers, [Gavin Nelson](https://nelson.co/)! I loved the simplicity of it that I *had* to recreate it for my own site. Another detail is the scissor cut line near the bottom of my landing page. I wanted some separation between the projects section and my about section and initially started out with a simple line divider. I wasn't satisfied with it and played around with different concepts like a squiggly line. Eventually, I landed on the dashed line with a scissor icon and thought it was quite neat!
## Let's Connect
Interested in learning more? Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/kiaancastillo/) and send me a message! I'd love to chat :)