TL;DR - I re-wrote my portfolio in React and added some niche tricks to make it look all shiny and rad. Everytime you refresh the page, a new loo...
For further actions, you may consider blocking this person and/or reporting abuse
Wow great article and the site! 🎉
I have a feeling that you will be updating the
ThemeSwitcherto use the new React.JS 16.3 API (reactjs.org/blog/2018/03/29/react-...)? 😜React 16.3 was released 2 days after I created the theme switcher. I should've waited. Nevertheless I'm gonna re-write it with the new Context API sometime soon.
I am learning a lot from your code and would love to see the update~
Have you looked at CSS variables? It seems a lot easier and a lot less work to ditch React and just use a couple of different data-themes.
We can do the same with Sass variables as well. But I want to be able to switch themes on user click. If we could achieve it with CSS variables, then it's time to ditch React's context API.
twitter.com/Real_CSS_Tricks/status... I was saying CSS variables that way you can just redefine them in the data-theme styling and cut down on have to write more CSS than necessary.
You could write some simple JS to just toggle the data-theme on body when the user clicks the color switch and that's all you would need instead of all of React.
Wow! This is excellent. Thanks for bringing it up. I'm gonna take a deeper look into it. 🎉
I like it!
The first thing I thought of was "Users shouldn't be allowed to scroll"
Try it yourself
That's just me thinking out loud
Great job
Users always should be allowed to scroll. Please stop messing around with scrolling.
Thanks Aurel! This is an interesting idea. But the portfolio page overflows the view height and the users might have to scroll there.
Cool. Din't think of that, it was just an immediate reaction.
I love the cool idea of different themes! 😍
However, I feel like React is just overused for everything these days. Couldn't you have just applied CSS based on different classes for the
and then changed it with a few lines of JavaScript??If we went through different css classes approach, then everytime we add or remove a new theme, then we would need to make changes through the entire codebase and chances are we could easily miss a few spots and wouldn't notice it at all until someone points it out. This seemed like the easier way to theme it.
We can use css variables to theme things.
codepen.io/aravindballa/pen/XEpZbr
It is not supported in IE11 though!
Dude this is so cool.
I hope that one day i'd be able to create such things.
Keep it up 👍
Very cool site, Dinesh! Hope you don't mind, I was really impressed with your design when I saw it a couple weeks ago and got curious to see how the React code would translate to Svelte.
I just pushed an initial build to github.com/tonyfsullivan/tonyfsull...
I plan to rework the site to make it my own soon (I blatantly copied your styles and themes for the sake of a comparison), but it was interesting to see how to solve some of the complex designs (especially the background and scrolling) in a different framework!
Hey - I love the site and I also see you've tweaked the font as well. It looks great.
I'm glad you like my work and translated to code to a different framework without any glitches. I don't mind at all. The way I see it, it's not copy if you're inspired. Keep up the good work mate!
Just as a quick note: I'm not a huge fan of people using just plain divs etc. for clickable things, as the browser does not know it's supposed to be basically a button.
For example in this case I have a Google translate extension installed. Combine that with the fact that when I click on text a few times it selects it, and then we have a prompt for the plugin showing up when I click on "Color me" a few times.
This could be avoided by using elements meant for the purpose and restyling them.
I'm sorry to say that seeing this kind of killed my excitement:
I've seen too many "Works only in Internet Explorer" websites back in the day to be able to accept a "Works best in Chrome" banners today. I don't know if you've experienced those days, but trust me when I say that we don't want to go back to the single browser experience.
I find it kind of ironic that you won't use CSS Grid because it's not supported by all browsers, but then add a disclaimer on non-Chrome browsers!
I encourage you to make the experience awesome regardless of the browser of choice: this way you'll better advertise your skills for a true cross-browser experience and you will respect your user's preferences.
Help us keep the web an open platform!
Stephane - I totally get your thoughts and stand by "true cross-browser experience" dev mindset. But at the same time, new specs come out everyday and browsers adopt them at different pace. I wanted to use this site as an opportunity to pick up on all the skills (including browser specific design). That's the only reason I put out that banner there. There's still a few things I need to figure out in animations and smooth scroll. Once I get those things figured out, I'm gonna take these banners away.
Maybe I'll just put a browser specific banner that says "Hey, you're using FireFox. You're awesome!"
That should work I guess. Thanks for taking your time and sharing your thoughts. Cheers! 🎉
Hi Dinesh,
that is totally fair and it's cool that you try out new things as they come out: only make sure these do not hinder the experience in other browsers. Maybe if the banner wasn't there at all it would have gone unnoticed and people would feel more welcome even with other browsers!
Thank you for being open to the criticism :)
"support for CSS Grid "
caniuse.com/#feat=css-grid
You've created a great site! I'm going to use you for Inspo if that's okay! :)
Thanks Katie! Use it however you'd like to :)
I'm curious, what browsers do you think are still lacking support for grid? I know IE11 has an old version of the spec, so if you have to support it then you have to account for that, but every other major browser has it now. Great article!
Ethan - IE11 is still officially supported by Microsoft and the grid spec doesn't work exactly well in IE11. So that's why I put it out. But re-thinking it now, I should start picking up on my grid skills soon.
Great Article!
What is your build and deploy process?
I know that the "master" branch has to contain the compiled files in order for user.github.io pages to work, and I see you have a "dev" branch that contains your source files.
Looking at your package.json
"deploy": "aws s3 cp build/ s3://dineshpandiyan.com --recursive"
How are you building the files and moving just the contents of the "build" folder from the "dev" branch to the "master" branch? via webhooks?
thanks,
drew
Hey, I use gh-pages library for that.
Previously my code was
"deploy": "gh-pages -d build -b master"I recently changed it to
"deploy": "aws s3 cp build/ s3://dineshpandiyan.com --recursive"because I bought a new domain - dineshpandiyan.com. I haven't acted on it because I'm yet to setup https in it.
gh-pagespretty much takes care of everything. But it will also delete all your source code inmasterbranch. That's why my source code is indevbranch.is there a github link?
It's mentioned in the post. Here it is - GitHub link
does this use npm start to run it?
Yes. But remember, the source code is in
devbranch.You will need to run
git checkout -b dev origin/devfirst.Then
npm installnpm startLooks great. What did you use to be able to use @ to access files outside of the current directory? I’ve always just used ../ to exit and then go back into the file.
I used webpack alias to configure alias name to directories. It's easy that way.
You can refer this line for more info.
github.com/flexdinesh/flexdinesh.g...
Sweet! Thank you for the quick reply
Very fun. I am going to play with what you did and make a react version of my portfolio!
Great article.
Quite neat, I deployed a react app in github user page, but for a wrong URL or opening a github project page it's still showing me the github user page, any tips and tricks for me ?
Simple yet elegant!
I am also planning to create a simple portfolio this will definitely be an inspiration.
Well done!
Looks awesome! Sad that the "magic background" doesn't work in Firefox :(
Hey - I'm working on revising the parallax. This time I'll make sure it works great in all browsers :)
Great job Dinesh!
I created my portfolio as well => madhusudhan-srinivas.github.io/
Hey Dinesh, nice article and site. Do perhaps have a tutorial or step by step procedure how to make a similar portfolio? Thanks!
@aspittel not sure if you ever saw this shout out!