Hello everyone this is my first post on here. I have built a website using tutorials online and built a website to showcase my projects in my portfolio. I feel like my website is very basic using HTML and CSS. I have come across a few portfolios online built by other people which have amazing animations and all sorts of moving objects and things. What I wanted to know is how is that done??? Is it done by using some sort of framework? or is it by using CSS animations? I would like some sort of help on this as I want to rebuild my website but want to be able to use animations on it to make it more aesthetically pleasing. Any information would be greatly appreciated.
Thanks :D
Top comments (8)
Try to design your portfolio website to match your work or style. What I mean is, if you're a visual designer, focus on creating an impressive visual and alive website, otherwise don't worry too much about the visuals. Focus on your site being and looking productive and looking ordered and clear. You don't need a framework for showing some projects with pictures and text.
Thank you for the constructive advice! I shall take that onboard. I think I was getting a bit run down after seeing some portfolios online and the website having a lot of different animations on it just was very eye catching and comparing it to mine, mine seemed very simple and plain lol If you want to check it out it is deployed here at sohaib-dev.co.uk and thank you once again for the advice.
Your website does seem pretty straight-forward, but judging from your GitHub, it seems to have all your work in it and CV as well. You seemed interested in more visuals/animations, so you can start with small things like adding icons to the My Passion section, one favicon for the page or maybe adding links from each project on your site to their GitHub repos for convenience. Aside from that, it is good that its simple and plain because throughout your career you will learn new techniques and tools, so the more complex and difficult your website is, the harder it will be to re-design it or update it. It is best if you keep the design simple while you're learning new things but keeping it as professional as possible.
Once again Thank you so much for the tips! I think the GItHub repos idea is a good one but I would like to show the live view aswell; maybe I could add another button to show the source code which can be linked to the GitHub repos. Your right I shall leave it as it is just do small adjustments to the site and keep it professional. Thank you. Will probably ask you for help if I am stuck here and there, that is if you don't mind.
I don't mind, no worries. Like Rohit Gupta says, you can try playing with fonts/fonts settings, colors and small things like that or even try to tackle SEO so you understand how websites are treated by social media and search engines. Things like that are easier to try out without taking down your website or spending too much time on it while you're busy.
Your right. Thank you for that. So glad I joined DEV, already being able to talk to people like yourself inspires me to do more and keep on learning!
Sohaib, its great to see you getting involved in personal projects.
As you go along, you will learn some advance css. By the time you can learn a bit of javascript and then use some pre-existing libraries to get animations working.
Although I must suggest, animations are not necessary for portfolios, the cleaner your website is, the better.
I suggest you should learn about what fonts you should be using, color scheme of different components on the page and general responsiveness for now.
AH I see. Well I have built a website I think I did a good job but just feel that it is very plain and simple. You can have a look at it here sohaib-dev.co.uk
Thank you for the reply though really appreciate it!