Skip to content
← Back to Community
Portfolio Site Template
Profile icon
h
has Hacker Plan
lilykhan

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!

Voters
Profile icon
UchennaNgwu
Profile icon
EthenRoth
Profile icon
akumar123961
Profile icon
benskhalid9
Profile icon
brasil2022
Profile icon
WellytonSdJ
Profile icon
onosseir
Profile icon
MatheusSousa30
Profile icon
OOlajide
Profile icon
JohnPolli
Comments
hotnewtop
Profile icon
NoelB33

Your really good at css!

Profile icon
lilykhan

Just trying my best, thank u so much! <3

Profile icon
CodingCactus

wow, that's amazing!!!

Way better than mine!

Profile icon
lilykhan

thank you! <3 and your site is really cool!

Profile icon
CodingCactus

@lilykhan thanks! :)

but yours is waaayyyy better, I have no clue on how to do that stuff lol

Profile icon
lilykhan

u can check the code to know about how to do the stuff u wanna do!!:D

Profile icon
Code1Tech

lol
image
@CodingCactus

Profile icon
CodingCactus
Profile icon
lilykhan

huh++;

Profile icon
AstOwOlfo

the animations are hot. gotta love dark theme too ;3

Profile icon
lilykhan

thnx :) <3

Profile icon
coderash

Mind if i use it lol

Profile icon
lilykhan

sure y would i mind if i made it as a template for others to use lol :D feel free to use it :)

Profile icon
coderash

Thank so much, template creators are the [email protected]

Profile icon
lilykhan

haha thnx <3

Profile icon
coderash

Do you know how people get the content creator tab [email protected]

Profile icon
lilykhan

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

Profile icon
coderash

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]

Profile icon
lilykhan

well staff will decide is,but best of luck :D

Profile icon
coderash
Profile icon
ShayMcInarlin

That was really good! The design is amazing! Keep up the good work!

Profile icon
lilykhan

aww thnx <3

Profile icon
Coder100

Nice job!

Profile icon
lilykhan

thank you! <3

Profile icon
Coder100

no problem :) @lilykhan

Profile icon
Meheer007

BRO, ITS DAMN NICE!!!
Really liked it!!!

Profile icon
lilykhan
Profile icon
HahaYes

dang this is awesome

Profile icon
lilykhan

thank u :D

Profile icon
HahaYes

@lilykhan how long did you have to study web dev to make this awesome template?

Profile icon
lilykhan

I'm trying to learn web development since 2yrs :)

Profile icon
HahaYes
Profile icon
CodeSalvageON

yEsss....yESss....GoOd...G0oD...

Profile icon
lilykhan

thnx! :D

Profile icon
HahaYes
Profile icon
Codemonkey51

AMAZING I will use this for my site I'll put you in the credits

Profile icon
lilykhan

Its a template! of course u can use it, thats y i made it lol. <3

Profile icon
akumar123961

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

Profile icon
lilykhan
Profile icon
CoolCoderSJ

Prob the best I’ve seen so far

upvotes and forks

Profile icon
CursorsDev

That's amazing! Everything looks smooth and felt smooth, especially the menu animation! The only problem I have is using jQuery ;-;

Profile icon
lilykhan

jQuery is for navbar to hide when scrolling

Profile icon
CursorsDev

It looks nice, but it could be done without any jQuery.
I say this because jQuery is really thicc and slow...
:(

Profile icon
lilykhan

:(

Profile icon
CursorsDev

:)

// 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();
Profile icon
CursorsDev

way better and cleaner than jQuery ;)
I upvote!

Profile icon
CursorsDev

not bad at javascript, either

Profile icon
lilykhan

oh wow thx

Profile icon
HahaYes

riot

Profile icon
aaryanj

GOOD!

Profile icon
Lord_Poseidon

I used to think it's impossible to be good at CSS

Profile icon
lilykhan

its not, css is awesome! u should try using css more u'll like it, i'm sure :D

Profile icon
Lord_Poseidon

@lilykhan CSS is the reason I don't do webdev. I tried it.

Profile icon
lilykhan

oh sad :C

Profile icon
PndaBoi

This is a really nice site!

Very simple!

Profile icon
lilykhan

thx :) @PndaBoi

Profile icon
PndaBoi

@lilykhan welcomee

Profile icon
FerkoHangai

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.

Profile icon
lilykhan

yeah sure :) @FerkoHangai

Profile icon
FerkoHangai

@lilykhan

  • So,
  • thank
  • you very much!
Profile icon
lilykhan
Profile icon
[deleted]

Thanks, the truth is I don't know anything about design, but the one you made is very good.

Profile icon
lilykhan
Profile icon
MCPE2019Github

way too good
you have my vote

Profile icon
jefe08

Very nice

Profile icon
lilykhan

@jefe08 tq :)

Profile icon
jefe08
Profile icon
Siwan-SR

Excellent website. I have made one like this but my one has bright color in it. Maybe you should add a bit of bright colors.
Color code:

Your text:

or

Your text:

Profile icon
Code1Tech

Very professional looking! Looks like something you would get from wix or squarespace. Good Job! I could never make anything like that.

Profile icon
lilykhan

thank u :)

Profile icon
[deleted]

I also do html, css, js and jquery (even though I am not that good at js and jquery)

Profile icon
lilykhan

same

Profile icon
[deleted]

check this project I made it isn't complete yet but here it is: https://[email protected]

Profile icon
lilykhan

nice add some space
This file cannot be displayed:

Profile icon
[deleted]

it is a php webserver I used php only for the visit counter but my dad helped [email protected]

Profile icon
[deleted]
Profile icon
lilykhan

around text

Profile icon
[deleted]

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]

Profile icon
lilykhan

not right now

Profile icon
[deleted]
Profile icon
zhaq6129

ya i like

Profile icon
lilykhan

:)

Profile icon
EvanMaksud

wow!!!! being a beginner puts me to depression that everyone else is already conquering on my subject :")

Profile icon
lilykhan

@EvanMaksud we all start form somewhere and i think u can make better than that :D

Profile icon
EvanMaksud

@lilykhan yeah In Sha Allah someday!

Profile icon
[deleted]

Don't underestimate your skills. This is a really beautiful and responsive site.

Profile icon
lilykhan

thank u :) <3

Profile icon
Rayan81

That is sooooooo coool

Profile icon
lilykhan
Profile icon
Rayan81
Profile icon
mayamunn

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.

Profile icon
lilykhan

@mayamunn I'm so glad to see that u like my work. I saw your changes, purple looks cool. Read about u so amazing to know u, and I can see ur love for technology, university can be hard but I think u r good enough to handle it easily. best of luck for ur future and thx again. („• ֊ •„)

Profile icon
BenFord

Thanks so much, it looks amazing! I'll totally use it.

Profile icon
lilykhan

np (⁀ᗢ⁀)