Submit templates for repl.it/templates here.

← Back to all posts
Portfolio Site Template
h
lilykhan (124)

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!

Commentshotnewtop
Kopamed (222)

Jeez this is a professional site!

lilykhan (124)

:o omg thank u! <3

BenFord (13)

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

NoelB33 (308)

Your really good at css!

lilykhan (124)

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

coderash (270)

Mind if i use it lol

lilykhan (124)

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

coderash (270)

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

coderash (270)

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

lilykhan (124)

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 (270)

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 (124)

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

ShayMcInarlin (4)

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

CodingCactus (2743)

wow, that's amazing!!!

Way better than mine!

lilykhan (124)

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

CodingCactus (2743)

@lilykhan thanks! :)

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

lilykhan (124)

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

Codemonkey51 (792)

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

lilykhan (124)

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

HahaYes (1014)

dang this is awesome

HahaYes (1014)

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

lilykhan (124)

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

Lord_Poseidon (158)

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

lilykhan (124)

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

Lord_Poseidon (158)

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

EdwinCifuentes (1)

esta genial , lo puedo usar?

lilykhan (124)

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

techgeek680 (66)

perfect! who says you arent professional?

AmazingMech2418 (691)

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

lilykhan (124)

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

AmazingMech2418 (691)

@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 (124)

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 (691)

@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 (124)

: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 (691)

@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 (124)

ofc i'll try it for sure :D

syflexer (467)

This is super cool!!!

[deleted]

wow!

47Anonymity (0)

This is beautiful man. Def will use this as a foundation to make my own. Thank you!

StudentFires (340)

This is actually perfect, the only thing I could possibly say, is that you should actually put an example logo so that it looks complete. Otherwise, that is high-quality work well worth my vote.

lilykhan (124)

(ノ◕ヮ◕)ノ:・゚✧ Thank u!!

StudentFires (340)

@lilykhan Dang, it's already amazing, but that looks even better.
Also, I just noticed that when you click "Projects" or "Contact," it doesn't turn blue like "Home" does. But I'm definitely going to use this.

lilykhan (124)

the logo was like this before, but by mistake i remove the image but when u told me i checked and i fixed it back! and blue where? on icons? its blue in all icons in home and in contact when hover, projects have shadow when hover!

StudentFires (340)

@lilykhan Yeah, it is when you hover, but they don't stay that way after being pressed. You'll probably need JS for that.

Wilke000 (449)

Wow! Can I use then post this?

raghavm (95)

hot damn this is nice GG lily this is awesome

ShivankChhaya (73)

Aweosme Template! I am defenetley going to use it.

DaLiteralPanda (4)

This is a good site but you need to learn how to think ot get the users attention (:
(docord emote dont work here)

DaLiteralPanda (4)

Also you forgot to write #savethepandas I am offended! >:(

lilykhan (124)

#savethepandas °˖✧◝(⁰▿⁰)◜✧˖°

[deleted]

i saw a lot of people say: Lorem ipsum, dolor sit amet consectetur adipisicing elit
What does that mean?

lilykhan (124)

In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.

DaLiteralPanda (4)

S̶h̶e̶ ̶t̶o̶t̶a̶l̶l̶y̶ ̶d̶i̶d̶ ̶n̶o̶t̶ ̶g̶o̶o̶g̶l̶e̶ ̶i̶t̶ :D @lilykhan

AmazingMech2418 (691)

@Zuhdi28 It's actually Latin, but nobody really knows what it means (it doesn't even say really on Google Translate). Though, for pretty much any website specifically just to showcase a specific CSS style or even just template websites, as @lilykhan said, it is just placeholder text.

AmazingMech2418 (691)

@Zuhdi28 Actually, I just found out that it is actually a jumbling of a quote from Cicero.

[deleted]

just a question:
how to the blue stick on right for draging the web?

lilykhan (124)

its a scroll bar, customized. u can use it normally as u scroll! and thank u, i hope u liked it! <3

[deleted]

@lilykhan yes i like it...
but how to do the scroll bar?
(or give me the code)

[deleted]

@CodingCactus lol, but how i find it?

lilykhan (124)

The comments in the code will help you navigate through it!

AmazingMech2418 (691)

@Zuhdi28 Unfortunately, though, I think it will only work on Chrome and Safari (at least for right now). I don't think there is a normal standardized CSS selector for the scrollbar and think that it is just for webkit (Chrome and Safari).

StudentFires (340)

@AmazingMech2418 Yeah, it's only for webkit browsers, they're starting to standardize it; there's a bit that's standardized already.