Portfolio: Reloaded. A complete overhaul after finishing FCC's front end/other projects, with no JQuery, BootStrap

I remember having grand ideas for my the Portfolio project when I first came across it, but had little knowledge of CSS or JS. Plus I had no experience writing projects above 200 lines, which eventually changed due to FCC. While I still haven’t done everything I wanted to, I’m still a lot happier with this one.

So after a few months, I have decided to refactor my portfolio completely, avoiding Bootstrap, which I have grown to dislike apart from its grid, and JQuery, which is great, but usually unnecessary and has a huge download size.

If you’re interested, check it out at : https://imtoobose.github.io/

I learned a bunch of things:

  • Using Gulp with Browserify and Live Reload, as well as compiling Babel, Sass and Pug (the three preprocessors I was using) files automatically. I had a better idea of how I want to structure project hierarchies for larger front end work as well.
  • Lazy loading scripts and images for a better load time
  • Some basic experience with Greensock’s fantastic animation library GSAP, which is what I’m using for my scrolling portfolio slideshow
  • Writing modular client side code. This really helped with being organized and not having to deal with a messy script file
  • A small lesson in how OOP is fantastic when using canvas, and a lot more
  • That I should probably be using React to manage my views, but it was too late and I was too lazy
  • The importance of following a style guide with variables

I appreciate reviews, suggestions and any bugs you find, so I can squash them soon!

Test it out at >1020px, 1021px-768px, <768px sizes to see the responsive design (Refresh when you resize to below 768px).

P.S.
For contrast, here’s my original portfolio: Codepen
The source code for the new one can be seen here: Github
In case you skipped to the end here’s the portfolio site again Portfolio
A lot of the design is heavily inspired by one of my favorite sites ever Waaark

14 Likes

This is impressive work. I like it!

Kind of nit-picky, but it would be nice to be able to scroll down in your portfolio. It took me a bit of thinking to figure out your UX, and you know how the book goes…

5 Likes

Ah, I actually really want to implement being able to change the slides/views with scrolling but I don’t have a mouse and can’t really test it out at the moment. I do plan on changing this eventually. Have you tried looking at it with a width of below 1021px? I add a couple of scroll arrows at that point (for tablets), but I’m not sure if I should just have them at all but mobile resolutions.

You can also move around with the keyboard’s up and down arrow buttons, in case the clicking is inconvenient.

Thanks for looking at it, and the suggestion!

I agree. The animated image implied scrolling, but it did not work.

1 Like

Yeah, I meant it to mean “Click this to scroll down”, but it doesn’t really work that way. I’ve added arrows for scrolling instead, and will fix up the scrolling when I get a mouse.

I absolutely love it. The design is great, animations are awesome, and overall I think it flows well.

1 Like

I really loved the website! The animation and design look great. One thing that irked me though was that when I moved down to the portfolio there was nothing labeling it really as part of a portfolio. For a moment I was a bit confused, but I did catch on.

1 Like

Looks great! One thing I would mention is the “tools” section. The cursor changes to a hand and the animations when you hover over the icons make me think there’s a link there but clicking does nothing. At least, not on my computer.

1 Like

@lauryndbrown Thank you for looking at it! I thought the navbar would be sufficient, but I guess it’s not very visible where it is. I’ll add project descriptions or maybe a slide in the beginning that indicates the following ones are my portfolio.

@GitCoderr Dumb design decision there. I’ll fix the cursor, thank you for catching it.

very nice … struggled to get used too not being able to scroll up or down with my mouse wheel, but thats minor … what i really like though is comparing it too your original … its amazing the difference and shows how much you have learned and put into practice, and gives me hope that ill go through the same learning process and will be able to do stuff like this.

1 Like

I’m looking into getting the scrolling to work. It seems simple enough from what I’ve seen, but my touchpad’s scroll isn’t working. I’ll test and implement it ASAP when I get access to a mouse.

Thanks for looking at the site and the comments.
Also, the portfolio project definitely feels more personal than the other projects and it was something I wanted to do very well when I came across it. Unfortunately it comes at a time in the course when you don’t have much experience with JS or CSS, so it’s not very easy. After getting a hang of these, plus using Sass/Less, Pug/HAML, Babel etc. make developing so much easier. It feels good to be able to put my ideas in practice after finishing FCC projects.

You’ll definitely see the same change, and also find yourself writing cleaner, better code if you stick through the course. Good luck with the journey!

I know that there are some kinks to work out, but this is quite lovely :clap:

As a person who’s just starting out on FCC…:heart_eyes:

Looking forward to making it to that level of mastery!

1 Like

It would be great to hear about your journey in Free Code Camp and it has helped you to evolve…

Your advancement is incredible when I look at the first project compared to your most recent creation…

I am new to the world computer science t… Seeing your work is inspiring

1 Like

@ayrenay Glad my work could inspire!
@Docwali777 I had coded in Python and C++ a decent bit before starting FCC, but it was mostly tiny scripts I wanted to write and solving algorithmic challenges on sites like Codeforces/Codechef/Hackerrank. So while I was comfortable with code, I’d never really created a project or a product before.

FCC provides with a quick and dirty intro to everything you need to develop for the web, and assigned me projects to get actual practice. To get where I am, I just end up browsing through Codepen’s picked pens and try to emulate what others have made, which resulted in me learning some canvas, and a lot of SCSS and CSS stuff (as well as an intro to Pug/Jade).

This led me to Dribble and sites that have fantastic design, and just teaching myself as much as I could to make something like, say, the Waaark page. Of course, I’m not even close to the level of skill pros like them have, but it’s very helpful to look at other’s people work and code. Doing React.js and Node.js projects will help a ton too. Really, writing any code will help.

Since you’re a beginner, I would recommend looking into solving some basic challenges on Hackerrank, just to get a hang of coming up with clever solutions and getting comfortable with JS. Besides that, just code, code, code. Putting in the hours is what’s really going to make you good. Good luck, and I hope to see your work too!

1 Like

Very cool! What resources helped you to move from putting things together yourself to using a builder like Gulp?

1 Like

thanks for your reply and insight… I went to Hackrank… wow it is interesting and challenging…

I will continue coding..... there is joy in the challenge of creating and problem solving in coding..

1 Like

I started using Gulp because I got tired of compiling and reloading whenever I wanted to use anything other than vanilla CSS/HTML/JS.

Gulp itself is pretty minimal, and has maybe 3 or 4 pre-defined functions and the Gulp docs are a great way to start. Next, you just need to search for the right modules/plugins from the Gulp plugins page. I’m not really sure how to write my own plugins yet, but you’ll usually find everything you need there.

The real issue was making Browserify (for using node.js/npm modules on the front end) and Browser-Sync (reloading browser on change) work. Browserify has to be used without a plugin, and I had to look around a few sites to make it work. It emits a stream, which is something a lot of gulp plugins aren’t configured for (even though they ideally should), which led me to getting another plugin to fix that. Similarly, Browser-Sync had a different setup than just using a plugin.

If you’re building front-end stuff for FCC with the same stack (Babel, Pug, SCSS), my gulpfile for this project should actually be pretty decent, and you can just change folder names/file names as you wish. You can also just remove the pipe to Babel and the Pug task if you don’t need them. I also have one for Express/Node.js stuff, although that one was my first attempt with Gulp, and doesn’t have browserify or Babel. You can see it here.

2 Likes

I’ve tried Gulp with a personal project just before I started FCC and liked it. Never occurred to me to use it for front end projects as well. I’ve shamelessly copied your gulpfile and modified it to my situation.
I guess I stuck too rigid to the convention that FCC explained i.e. everything in 1 html file. I’m going to rearrange my projects to use separate files before I put the code up on CodePen.
Thanks for the inspiration.

Gulp is usually a bore to write, so no issues if copying my gulpfile helps. I still have to write one for the React projects, but I’m glad this one could help you. Also, once the projects get bigger, especially the amount of JS and Sass/CSS, separating everything helps writing organized code a lot easier.

hear hear. My local weather app file was huge so I immediately started to split it into separate files.