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 look will be loaded.
This whole write-up is based off this site - Dinesh Pandiyan | Full Stack Dev
A few weeks back I created Dev Landing Page and wrote a blog post about it. In less than a week, the repo got over 150 stars and got featured in various articles. I guess people liked it. I created my portfolio on top of it.
I am no UI expert but in recent times I've took a liking towards responsive design, animations, flexbox, and other fancy CSS features. So I thought I'd take my UI skills for a spin and build my portfolio along the way. While looking for inspiration, I stumbled across Ali Spittel's post How I Re-Wrote my Portfolio Site. Her portfolio looks pretty darn awesome and gives you the 'wow' feel. I, then, embarked on a journey to build something that gives a similar vibe and a magical feel.
I wanted to build everything from scratch without the help of any UI libraries/frameworks, except React though, because I love how React simplifies the whole web development process. I had so much fun building every single piece of my portfolio alongside learning so many new things. I'm gonna list down a few of my favorite parts of the site and what I learnt from them.
- Flexbox Layout
- Theme and React's context API
- Responsive Design
- Parallax Background
- Animations
- Browser Specific Code
Flexbox Layout
The whole website is laid out with Flexbox.
Flexbox makes putting things in place so much easier
CSS Grid and Flexbox have been the talk of the town lately. Still the support for CSS Grid is not very good but almost all the de-facto browsers today support flexbox. So I think it's pretty safe to implement the layout with Flexbox rather than Grid.
Flexbox is all about containers and children. I used this flex-cheatsheet as a reference while building the layout and things seem pretty straight forward.
One thing what bugs me about Flexbox is the flex property. I have used,
flex: 1 0 auto;
flex: auto;
flex: 1;
in a lot of places in the site but still couldn't figure out how it exactly behaves. Most of the times, it's a trial and error usage. Need to pick up on these properties and maybe I'll write a post about it soon.
Theme and React's Context API
While deciding on the theme for the site, I kept juggling between two themes constantly. One day I'd have one, then the other day I'll replace my Sass theme definitions with the other theme. Turns out, I couldn't pick one and wanted to have them both.
Then a crazy idea popped in my head - Why not have both and alternate between them?
I explored on ways to do it with React and settled on React's Context API. We could easily argue to have Redux instead, but I have worked way too much with Redux and wanted to get my hands dirty with React without Redux. Context API is a bit of a non-ideal way to do things but it got the job done for me and I'm happy with it. I will probably rewrite this with React 16.3's new Context API soon.
After playing around for a while, I ended up with 16 awesome themes - 10 light themes and 6 dark themes.
Of all these, 1 of my 3 favorite themes will be applied when the site loads. And when you click the magic wand, 1 of the 16 themes will be applied.
Try and see if you could tell all 16 themes apart. Trust me, it's not that easy : )
Everytime you refresh the page, a new look will be loaded. I gotta say, theme magic is my most favorite feature of the site āØ
Responsive Design
Sass could be a powerful tool if you know how to use it right. I recently started exploring Sass mixins and it helped me design and refactor responsive layouts without breaking a sweat.
I have come up with standard, re-usable sass breakpoint mixins. You can find the entire mixin code here - Sass breakpoint mixins
Writing media queries are a lot easier with these mixins.
.content-grid {
margin: 0 auto;
width: calc(100% - 5rem);
@include breakpoint-medium-up {
width: calc(100% - 5rem);
}
@include breakpoint-large-up {
width: calc(100% - 10rem);
}
@include breakpoint-xlarge-up {
width: calc(100% - 20rem);
}
}
Parallax Background
I've seen parallax tagged posts and codepens quite a bit but never tried my hand at it. I got inspired from one of the codepens and ended up with my own version - Parallax Star background
This is not exactly 'Parallax' but more or less serves the purpose and creates a snowfall effect in the background.
Animations
I added a few animations to the site as well. You'll find the Scroll to next page arrow bouncing up and down. You'll also find the Social Icons (GitHub, Twitter, LinkedIn, etc) bounce when you hover over them.
Somehow, bounce seems to be my favorite animation. 'Parallax snowfall' is also an animation but most of it is inspired work.
Browser Specific Code
While working with animations, I figured out that Safari does not support smooth scroll and FireFox has glitches rendering the snowfall. So I needed browser specific behavior and ended up creating a react component that renders code for specific browsers.
You can find the code for the component here - Browser Component. I'm thinking about writing thorough test cases and open-sourcing this component sometime soon.
It's pretty neat to use the component like this.
<Browser except firefox chrome mobile>
<span>All the magic tricks in this site work best in <b>Chrome!</b></span>
</Browser>
<Browser only firefox>
<span>Magic background is disabled in FireFox. Try in <b>Chrome!</b></span>
</Browser>
Site is Up and Running
I recently re-wrote my portfolio with GatsbyJS - Portfolio v3
I moved the portfolio mentioned in this post here - Portfolio v2
Link to source code - React Codebase
I'm still tweaking here and there. The portfolio section clearly needs an upgrade. But most of the design part is done. Feel free to drop a comment on what you think about the site and if there are things that could be improved.
You are amazing! Have a good day! āØ
Top comments (45)
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.