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
img
src with your profile picture url, your profile picture must live in theassets/
folder. - Edit
p
with class.mb-8.text-left
with information about you. - Lastly and not mandatory, put your resume link in the
a
button that lives insideabout-wrapper__info
.
Projects Section
- Projects are organized in
row
and they live inside.project-wrapper
. - The left-side
col
contains 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
col
contains theimg
of the project, set thehref
of your project on theproject-url
a
tag that holds theimg
and define thesrc
path of your project image. The projectimg
must 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
a
links. - 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
a
links 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.git
this repositorycd simplefolio-ember
npm install
ember serve
- Visit your app at http:https://localhost:4200.
- Visit your tests at http:https://localhost:4200/tests.
Make use of the many generators for code, try ember help generate
for more details
ember test
to run all tests in CI mode in headless Chromenpm run test-server
orember test --server
to run all tests in the Chrome browsernpm run test-acceptance
to run only acceptance testsnpm run test-integration
to run only integration testsnpm run test-unit
to run only unit tests
npm run lint:hbs
npm run lint:js
npm run lint:js -- --fix
ember build
(development)ember build --environment production
(production)
Specify what it takes to deploy your app.