Chisomloius Website

My random test of using open source project, Sparky, to build my personal website

Introduction

Sparky Portfolio is an open source responsive website project of a simple yet beautiful portfolio/personal site. It's under the MIT License. Build your personal site in twelve hours or less !

Motivation

I started this project with a small question as i started taking coding more seriously while studying some codes:

Is a personal site useful as I keep building my expertise ? What is okay for a personal website ?

The answer is: a site can be linked almost everywhere (Github, LinkedIn, YouTube, Facebook, Instagram, Telegram) so it's a good way to tell people who you are and what you can do. It could be a sort of online curriculum, just like LinkedIn, but more personal.

So I built a small site, starting from tweaking web development libraries and templates to create something customizable and simple. The result is a good looking site which contains a lot of personal informations in a small amount of space and in a single page. I'm still trying to figure out how to make it even more simple. Help me if you can !!!

Features

The work contains everything you probably needed to get started and more.

• The single page layout with 4 sections (introduction, skills, projects, additional informations). Rearranging the content should be easy enough.
• The needed css, easily customizable and commented.
• Some javascript libraries, such as particles.js. You can easily customize particle.js, refer to the official site.
• Various images and favicons (small image in the tab title) which you can replace.

• Status: V 1.1. Ready to be used!

  • New sections (Add some suggestions!)
  • Monthly colors
  • Optimizations
  • Cleanup
  • Code comments

Since this is my personal site, you will have to replace some assets and configure the layout to your liking.

• Clone the repository to your machine, or simply download as a zip and unzip it.
• The "core" of the site is the index.html file: here you will find the page layout.
• Replace the images in the /images folder with your profile pic, your projects and your site icon. I used an svg for my logo, but you can replace it with a png.
• Open app.js to customize particles.js. You can easily remove them, if you want. A little function changes the color scheme depending on the month. Removing or modifying it should be easy.
• To change the font and customize buttons, dimensions and so on, just open main.css and read the comments inside. If something is not commented and you don't know what you're doing, don't modify it!
• To test the site, just open the index.html in Chrome or in your favorite browser. Use the dev tools to show the mobile version, if you need it.

Screenshot

Here are some snapshot lauyout of my website 1. 2. 3. 4. 5. 6. 7. 8. 9. 0.

Suuport: Hosting A Website

Option A:

You can use the github website hosting service by following this four steps:

1. Create a repository
   • Head over to GitHub and create a new public repository named username.github.io, where username is your username (or organization name) on GitHub. ex. chisomloius.github.io.
2. Clone the new created repository using the git command on the terminal of your code editor ($ git clone https://github.com/username/username.github.io)
3. Create more files like this
   • $ cd username.github.io
   • $ echo "Hello World" > index.html
4. Push it
   • $ git add --all
   • git commit -m "Initial commit"
   • git push -u origin main

Option B:

You can us the (.ml) domain: it is free and renewable, you can learn more here. Regarding the hosting, you have a lot of potential options, but my advice is to use Firebase:

• First thing first, sign up or login.
• Click on go to console.
• Start a new project.
• Open your new project and click on hosting.
• Now connect your personalized domain to the Firebase one.
• Firebase is perfect for this kind of sites, in my opinion.

Acknowledgment

Special shoutout to @m-i-n-a-r for allowing me clone his repo and improve on it.