Sci-fi/Space Theme Portfolio Template Site


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 ==>

Link to site ==>


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

About page

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

Projects page

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

Contact page

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


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

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

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

4) Now, you can click almost anywhere on the text to edit things!

Editing the about section:

Editing the projects section:

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.

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

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

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.

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

You are viewing a single comment. View All

@BobTheTomatoPie haha thanks! :D