Skip to content
Sign upLog in
← Back to Community

Sci-fi/Space Theme Portfolio Template Site

Profile icon
Bookie0

Hey!

Here is a Portfolio Template Site, made in HTML CSS JS! But it's not like any other template that you just fork (though you can fork this if you wish); but you can edit it on the site itself, download the edited copy, and that's all!

This was first made as just a template for

@Vandesm14
's Jam on their server here, where we had to create a sci-fi interface, but with the great help of a friend (@itsvyle), we managed to make the template editable on the actual website.


Link to repl ==> https://replit.com/@Bookie0/Portfolio-Template-Site?v=1

Link to site ==> https://portfolio-template-site.bookie0.repl.co/


Features

This template, as like many other portfolio sites, has a home page, an about page, projects page, and finally a contact page.

Home page

  • Your name
  • Your profile picture
  • Links to different pages

HomePageImage

About page

  • About yourself
    • Intro
    • More about yourself
    • More about yourself

AboutPageImage

Projects page

  • 6 projects
    • Project title
    • Image of project
    • Project description

ProjectsPageImage

Contact page

  • Concluding words
  • Social media icons
  • Footer with year and name for copyright (not seen in image below)

ContactPageImage


How

  1. To start using your template, first go to this link.

  2. Next, click the pencil icon to edit the template.

EditButtonImage

  1. You'll have this banner on the top to let you know that you're currently editing:

EditingModeImage

  1. Now, you can click almost anywhere on the text to edit things!

Editing the about section:

EditingImage

Editing the projects section:

EditingProjectsImage

Editing the contact section:

If you don't want a certain icon (for example YouTube), you can just leave the field empty which will remove that icon.

EditingContactImage

  1. When you're done, scroll back to the top and click the download icon to download your portfolio site.

DownloadButtonImage

Next open it up, and you'll find your site with the changes you made!

FinderImage

If you want to edit your site again, in the URL, add #edit at the end, and reload the page, and you'll be able to edit your site again. Remember to download it using the same method, and you'll have the most recent one.

URLImage


Well that's about all! Thanks again to

@itsvyle
and also also to
@Spotandjake
for helping with this! :)

If you have any questions or comments feel free to let me know.

Have a super day!

Bye! 👋

Also if you check the repl you'll see all these images (AboutPageImage.png, ContactPageImage.png, DownloadButtonImage.png, etc. – it's because I'm using them in the markdown for the README.md file. For some reason I can't get them to work if I add them in a folder =/)

Disclaimer: adding images for the projects in Firefox/Safari doesn't seem to work, try Chrome or Edge..

Voters
Profile icon
DerErde
Profile icon
Guilhermeggg
Profile icon
VenQuiDev
Profile icon
AlexGomez27
Profile icon
itsVyle
Profile icon
IronOlympus
Profile icon
isaiah08
Profile icon
Ghostglass
Profile icon
BobTheTomatoPie
Profile icon
SilvermoonCat
Comments
hotnewtop
Profile icon
xfinnbar

It's cool but to me it's a little over the top.

Profile icon
Bookie0

@xfinnbar
thanks, wdym by over the top?

Profile icon
xfinnbar

@Bookie0
A bit too crazy for me, I prefer minimalist designs. It may also add a bit of lag on trash devices.

Profile icon
Bookie0

ah okay, thanks for the feedback! :)

@xfinnbar

Profile icon
BobTheTomatoPie

nice bookie, your getting better at CSS

Profile icon
Bookie0

@BobTheTomatoPie
haha thanks! :D

Profile icon
Spotandjake

lol bookie i said you dont need to thank me lol.

Profile icon
Bookie0

@Spotandjake
lol I just am 'cuz you did help me lol :D

Profile icon
VulcanWM

Nice!

Profile icon
Bookie0

@VulcanWM
Thanks! :)

Profile icon
VulcanWM

np! :)

@Bookie0