Submit templates for repl.it/templates here.

← Back to all posts
Portfolio Site Template
h
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
hg0428
zte2976exe
flosada
katyasorok
RayhanADev
salmangaming
SiddhantManze
FarezIskandar
CairoSoft
VXZELL12345
Comments
hotnewtop
Meheer007

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

lilykhan
NoelB33

Your really good at css!

lilykhan

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

CodingCactus

wow, that's amazing!!!

Way better than mine!

lilykhan

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

CodingCactus

@lilykhan thanks! :)

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

lilykhan

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

Code1Tech
CodingCactus
lilykhan

huh++;

AstOwOlfo

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

lilykhan

thnx :) <3

coderash

Mind if i use it lol

lilykhan

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

coderash

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

lilykhan

haha thnx <3

coderash

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

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

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]

lilykhan

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

coderash
ShayMcInarlin

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

lilykhan

aww thnx <3

Coder100

Nice job!

lilykhan

thank you! <3

Coder100

no problem :) @lilykhan

HahaYes

dang this is awesome

lilykhan

thank u :D

HahaYes

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

lilykhan

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

HahaYes
CodeSalvageON

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

lilykhan

thnx! :D

HahaYes
Codemonkey51

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

lilykhan

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

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.

lilykhan

yeah sure :) @FerkoHangai

FerkoHangai

@lilykhan

  • So,
  • thank
  • you very much!
lilykhan
CoolCoderSJ

Prob the best I’ve seen so far

upvotes and forks

CursorsDev

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

lilykhan

jQuery is for navbar to hide when scrolling

CursorsDev

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

lilykhan

:(

CursorsDev

:)

CursorsDev

way better and cleaner than jQuery ;)
I upvote!

CursorsDev

not bad at javascript, either

lilykhan

oh wow thx

HahaYes

riot

Lord_Poseidon

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

lilykhan

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

Lord_Poseidon

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

lilykhan

oh sad :C

[deleted]

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

lilykhan

thx :) @TereDeJugo

MCPE2019Github

way too good
you have my vote

jefe08

Very nice

lilykhan

@jefe08 tq :)

jefe08
TetCode

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:

<h2 style="color:purple;">Your text:</h2> or<p style="color:purple;">Your text:</p>
Code1Tech

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

lilykhan

thank u :)

xmasboy

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

lilykhan

same

xmasboy

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

lilykhan

nice add some space

xmasboy

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

xmasboy
lilykhan

around text

xmasboy

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]

lilykhan

not right now

xmasboy
zhaq6129

ya i like

lilykhan

:)

EvanMaksud

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

lilykhan

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

EvanMaksud

@lilykhan yeah In Sha Allah someday!

[deleted]

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

lilykhan

thank u :) <3

Rayan81

That is sooooooo coool

lilykhan

@rayaansom tq :D

Rayan81
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.

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. („• ֊ •„)

BenFord

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

lilykhan

np (⁀ᗢ⁀)

EdwinCifuentes

esta genial , lo puedo usar?

lilykhan

@EdwinCifuentes yes u can use it and thank u :D

techgeek680

perfect! who says you arent professional?

lilykhan

My lil brain :o

techgeek680
AmazingMech2418

Wow! This is a professional-looking website! You should make a framework based on this (kind of like Bootstrap, but your superior CSS)!

lilykhan

(ノ◕ヮ◕)ノ:・゚✧ ✧゚・: ヽ(◕ヮ◕ヽ) thank u <3

AmazingMech2418

@lilykhan You're welcome! Though, really, this is a professional website. I'd like to see you create a CSS framework like this so the same CSS can be used even on other types of websites!

lilykhan

i'm not sure if i can do it! and there r already few amazing CSS framework to do that! u should try water.css and fox.css :D

AmazingMech2418

@lilykhan I've used some Bootstrap before, but never either of those. Though, it actually looks like both of those are actually made by people on Repl.it! However, neither of them can make a website like this. You said you are not sure if you can do it, but it is less than you think. I've tried making my own framework with Framework CSS+JS (also includes useful JavaScript utilities based on AngularJS, unless using the Home theme which is designed for home pages and login/signup pages). I actually designed Framework CSS+JS for my new series of webapps under the project name iConn (Internet Connection Technologies in full name version). However, it didn't take too much work at all and I think you could definitely do it! Of course, it might take a little more JavaScript, but not much at all anyways (I only used like 1 line in the Home theme of Framework CSS+JS).

lilykhan

:o yeah both water.css and fox.css was made by people of repl community, and i think i have so much more to learn for now! but thanks :D

AmazingMech2418

@lilykhan You're welcome. Though, after you learn what you need to learn, still keep thinking about what you could do in a framework. I think it would be great to see this level of CSS in a framework!

lilykhan

ofc i'll try it for sure :D