Feel free to use it as-is or customize it as much as you want. I was motivated to create this project after I saw the original Simplefolio by Jacobo Martinez. He wanted to contribute something useful for the dev community and I support his efforts 100%. Simplefolio Ember is just a recreation of that same portofolio template in Ember.js.
See the instructions down below at Installation and Running / Development to get a copy of the project up and running on your local machine for development and testing purposes.
Go to /app/index.html and fill in your site information:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Put here your site title -->
<title>[Your name here] | Developer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add some coding keywords below, Ex: (javascript, yourusername, etc) -->
<meta name="keywords" content="[username], [name], skill" />
<!-- Improve your SEO by adding a small descrption of you -->
<meta name="description" content="[Your name here] | Developer" />
...
</head>
<body>
...
</body>
</html>Go to /app/templates/application.hbs and fill in your personal and professional information, there are 5 sections:
Header Section - Edit the h1 with ID #opening-text and p with ID #opening-paragraph.
About Section
- Edit the
imgsrc with your profile picture url, your profile picture must live in theassets/folder. - Edit
pwith class.mb-8.text-leftwith information about you. - Lastly and not mandatory, put your resume link in the
abutton that lives insideabout-wrapper__info.
Projects Section
- Projects are organized in
rowand they live inside.project-wrapper. - The left-side
colcontains 4 blocks to fill information such as (project-title, project-information, project-url, project-repo-url). Fill in each piece of information! - The right-side
colcontains theimgof the project, set thehrefof your project on theproject-urlatag that holds theimgand define thesrcpath of your project image. The projectimgmust live inside theassets/folder.
Contact Section - Simply change the p with class .contact-wrapper__text and include some call-to-action message. Lastly change your email address on the href property.
Footer Section
- Put your social media link on each
alinks. - If you have more social-media accounts, check out the Font Awesome Addon Docs to add more social icons.
- You can delete or add as many
alinks your want.
Change the color theme of the website ( choose 2 colors to create a gradient ):
Go to app/styles/abstracts/_variables.scss and only change the values on this classes $primary-color and $secondary-color to your prefered HEX color
// Defaut values
$primary-color: #02aab0;
$secondary-color: #00cdac;- Ember.js - JavaScript Framework
- Bootstrap 4 - Front-end component library
- Tailwind - Utility-First CSS Framework
- Sass - CSS extension language
- ScrollReveal - JavaScript library
- VanillaTilt - JavaScript library
- Jump.js - JavaScript library
- Michael Serna - https://github.com/sernadesigns
This project is licensed under the MIT License - see the LICENSE.md file for details
I was motivated to create this project after seeing the Simplefolio that Jacobo Martinez created and shared with the ZTM Community and Andrei
You will need the following things properly installed on your computer.
- Git
- Node.js (with npm)
- Ember CLI
- Google Chrome
git clone https://github.com/sernadesigns/simplefolio-ember.gitthis repositorycd simplefolio-embernpm install
ember serve- Visit your app at http://localhost:4200.
- Visit your tests at http://localhost:4200/tests.
Make use of the many generators for code, try ember help generate for more details
ember testto run all tests in CI mode in headless Chromenpm run test-serverorember test --serverto run all tests in the Chrome browsernpm run test-acceptanceto run only acceptance testsnpm run test-integrationto run only integration testsnpm run test-unitto run only unit tests
npm run lint:hbsnpm run lint:jsnpm run lint:js -- --fix
ember build(development)ember build --environment production(production)
Specify what it takes to deploy your app.