Portfolio Site Template
This is a simple portfolio website template that I made for Repl.it template jam.
You can use it and make it yours by changing things and colors to your style and liking! I made it with a lot of hard work, love and of course with code :) I'm not a professional coder, but i tried my best to make it look cool and yet still keep it simple. While working with JS i got many errors, but thanks to @apoorvsingal (Kakashi) for fixing them. Also thanks to all people on discord who provided feedback and suggestions, especially Panda and Kub! :D
Mistakes are proof that we are trying!
I learned so much while making this template, if you use it, please let me know. I would love to see how amazing people can make it! I hope you'll like it!
I have used:
- HTML5 for markup
- Pure CSS3 for styling
- Bit of Jquery to make header animation effects work
- Bit of JavaScript to make a hamburger menu to work on mobile devices
- Font Awesome for Icons
- Unsplash for Images
You can add more things to make it even cooler! The comments in the code will help you navigate through it. Have a nice day!
wow, that's amazing!!!
Way better than mine!
thank you! <3 and your site is really cool!
@lilykhan thanks! :)
but yours is waaayyyy better, I have no clue on how to do that stuff lol
u can check the code to know about how to do the stuff u wanna do!!:D
huh++;
Mind if i use it lol
sure y would i mind if i made it as a template for others to use lol :D feel free to use it :)
Thank so much, template creators are the [email protected]
haha thnx <3
Do you know how people get the content creator tab [email protected]
the content creator tag? ohh yes if u make template or content for repl.it and if they approve it then u can get it!
i won it with this site i made it for template jam and i got 1st place so that's how i get the content creator tag :P
Oh, im making a full guide its gonna be about 500 lines when finished, do you think it would deserve content creator? its on a programing language no one has ever talked about on [email protected]
well staff will decide is,but best of luck :D
That was really good! The design is amazing! Keep up the good work!
aww thnx <3
BRO, ITS DAMN NICE!!!
Really liked it!!!
yEsss....yESss....GoOd...G0oD...
thnx! :D
@CodeSalvageON hahayes
AMAZING I will use this for my site I'll put you in the credits
Its a template! of course u can use it, thats y i made it lol. <3
Hi , I am a student currenty doing my final exams and I really liked your template, so I decided to use the template if you dont mind , I will give you all the credit also I am not sharing it online , just for my examiner to correct , I promise all credit will be pointed to you as reference for my template
:) Thank you
Prob the best I’ve seen so far
upvotes and forks
That's amazing! Everything looks smooth and felt smooth, especially the menu animation! The only problem I have is using jQuery ;-;
jQuery is for navbar to hide when scrolling
It looks nice, but it could be done without any jQuery.
I say this because jQuery is really thicc and slow...
:(
:(
:)
// header scrolling effect window.addEventListener('scroll', function() { if (window.scrollTop()) document.getElementsByTagName('header')[0].classList.add('nav-show'); else document.getElementsByTagName('header')[0].classList.remove('nav-show'); }); //hamburger const navSlide = () => { const hamburger = document.querySelector(".hamburger"); const navbar = document.querySelector(".nav-bar"); const navLinks = document.querySelectorAll(".nav-bar li"); hamburger.onclick = () => { navbar.classList.toggle("nav-active"); navLinks.forEach((link, index) => { if (link.style.animation) link.style.animation = ""; else link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`; }); //hamburger animation hamburger.classList.toggle("toggle"); } } window.onload = () => navSlide();
way better and cleaner than jQuery ;)
I upvote!
not bad at javascript, either
oh wow thx
riot
GOOD!
I used to think it's impossible to be good at CSS
its not, css is awesome! u should try using css more u'll like it, i'm sure :D
@lilykhan CSS is the reason I don't do webdev. I tried it.
oh sad :C
It is really an amazing and simple personal site! Great. if you would allow me, I would like to use it for my own portfolio.
Thanks, the truth is I don't know anything about design, but the one you made is very good.
thx :) @TereDeJugo
way too good
you have my vote
I also do html, css, js and jquery (even though I am not that good at js and jquery)
same
check this project I made it isn't complete yet but here it is: https://[email protected]
nice add some space
This file cannot be displayed:
it is a php webserver I used php only for the visit counter but my dad helped [email protected]
ok just [email protected]
around text
oh ok I invited you to a team I have with a friend it is all about html, css, js (jquery) and last but not least, PHP. Want to [email protected]
not right now
wow!!!! being a beginner puts me to depression that everyone else is already conquering on my subject :")
@EvanMaksud we all start form somewhere and i think u can make better than that :D
@lilykhan yeah In Sha Allah someday!
Don't underestimate your skills. This is a really beautiful and responsive site.
thank u :) <3
That is sooooooo coool
This is such a lovely template - I have used it for my personal professional portfolio and tweaked it a little. Thanks so much for creating it! I have flicked through some of your other projects and you are an amazing coder for just only 15 years old! I wish I had that much passion in coding that age, life would be so much easier now at university haha.
Your really good at css!
Just trying my best, thank u so much! <3