# Personal website - Snowing City **URL:** \ **Category:** Showcase\ **Created:** [September 18, 2019, 12:12pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705 "2019-09-18T12:12:17Z")\ **Posts on this page:** 11\ **Page:** 1

**Author:** ![barion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/barion/32/7224_2.png) [@barion](https://discourse.threejs.org/u/barion)\ **Post date:** [September 18, 2019, 12:12pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/1 "2019-09-18T12:12:17Z")

Hi guys! There is my personal [project](https://stoic-wilson-0f5f0c.netlify.com/) built with ThreeJS, I want to add him to the initial screen of [https://threejs.org/](https://threejs.org/) The repository: [https://github.com/danielbarion/portfolio](https://github.com/danielbarion/portfolio) I make it public because of: [Interest for collaborative coding "jams"?](https://discourse.threejs.org/t/interest-for-collaborative-coding-jams/9880) Thanks to @EliasHasle ---

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\ **Post date:** [September 18, 2019, 3:37pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/2 "2019-09-18T15:37:34Z")

> [@barion](#): > > I want to add him to the initial screen of FYI, you can’t do this by yourself. @mrdoob scans the topics in the showcase category from time to time and then updates the homepage. ---

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\ **Post date:** [September 18, 2019, 3:55pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/3 "2019-09-18T15:55:04Z")

> [@Mugen87](#): > > scans the topics in the showcase category from time to time and then updates the homepage 🤖 ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ---

**Author:** ![barion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/barion/32/7224_2.png) [@barion](https://discourse.threejs.org/u/barion)\ **Post date:** [September 18, 2019, 4:12pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/4 "2019-09-18T16:12:47Z")

hmm, okays thanks! This topic in the correctly section ? (showcase category) Thank you @Mugen87 ---

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\ **Post date:** [September 18, 2019, 4:16pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/5 "2019-09-18T16:16:23Z")

> [@barion](#): > > This topic in the correctly section ? (showcase category) Yes 😉 ---

**Author:** ![barion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/barion/32/7224_2.png) [@barion](https://discourse.threejs.org/u/barion)\ **Post date:** [September 18, 2019, 4:35pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/6 "2019-09-18T16:35:23Z")

Thank you @Fyrestar 😄 ---

**Author:** ![doum](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/doum/32/5825_2.png) [@doum](https://discourse.threejs.org/u/doum)\ **Post date:** [September 19, 2019, 4:47pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/7 "2019-09-19T16:47:08Z")

Good 🙂 I found another sample same your project https://codepen.io/vcomics/embed/preview/aGmoae?height=300&slug-hash=aGmoae&default-tabs=js,result&host=https://codepen.io ---

**Author:** ![barion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/barion/32/7224_2.png) [@barion](https://discourse.threejs.org/u/barion)\ **Post date:** [September 19, 2019, 5:16pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/8 "2019-09-19T17:16:49Z")

Yeah! My project are inspired and based in this codepen. I did a lot of performance improvements and calc correction, I’ve used this code pen as study project (like others) and my personal website is the result; do you want see my source code ? I’ve learned a lot of with this codepen. Edit: My personal website are build with ReactJS and I have 4 versions of him (focused on GPU, focused on CPU, main thread and web worker). Edit²: I can select GPU → main thread | GPU → web worker | CPU → main thread | CPU → worker The currently version are running focused on GPU rendering and in main thread 😄 ---

**Author:** ![cream](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cream/32/12511_2.png) [@cream](https://discourse.threejs.org/u/cream)\ **Post date:** [September 25, 2019, 6:55am UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/9 "2019-09-25T06:55:08Z")

Did you even take a look at the examples on the three.js homepage? Don’t you see the huge difference in complexity / originality? 🤔 If you’re serious about being a frontend-developer, you must be able to recognize this. If you want to promote yourself / your service, it was already a very good idea to do a post here. You got the attention! 👍🏻 ---

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\ **Post date:** [September 25, 2019, 7:50am UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/10 "2019-09-25T07:50:02Z")

I think the demo looks quite good. I like that the snow moves naturally in world space, and persists while moving the camera. I would like to propose a few improvements to it, though: 1. It looks like all the particles move down in a straight line. I think you can make them look more natural by adding a few sine components with random parameters based on x,z position (if your world is y up) (EDIT: actually just based on initial x,y,z position from the attribute, the point being to have independent paths per particle. If regenerating the same random parameters every frame becomes a problem, they can instead be supplied as an extra attribute or two.). Also, you can add a uniform position offset to all the snow particles, that can move with a variable virtual “wind” in JS space. 2. It looks like the particles repeat the same “animation” every second or so, with particles disappearing and respawning within the view. I think it would be better to start each particle with a vertical offset (+the shared offset) and then position them individually in the vertex shader, according to a time-dependent function, but wrapping the position with the `%` operator, so that when each particle reaches the bottom it always respawns on the top. ---

**Author:** ![barion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/barion/32/7224_2.png) [@barion](https://discourse.threejs.org/u/barion)\ **Post date:** [September 25, 2019, 12:31pm UTC](https://discourse.threejs.org/t/personal-website-snowing-city/9705/11 "2019-09-25T12:31:04Z")

Thank you for the suggestions @EliasHasle, in the code pen, if you take a look for a few seconds you can see the snow moving 360º and the city (all buildings) are changing his positions, not the camera. When I started developing my site with codepen I had no video card so it crashed a lot … my phone is from last year and it was also a bit heavy on it. I recalculated the snow particles and put them in a group to maintain visual fidelity (when they hit the ground, I restart their position - well, your suggestions say exactly this, thank you for the improvement suggestion!). The most point I’ve worked in this study project is the performance in low-end devices. I’m happy with the result lol. Yeah, my world is y up. Again, thank you for the suggestions, I liked so much and will try to apply him to this project.