A portfolio type landing page, implemented as a CSS driven SPA. While it is designed for artists, photographers, or other content creators, it is relatively flexible.
Heavy (ab)use of the :target
selector. Because of this, this site suffers from page-jump. Additionally, it can get a bit glitchy if browsers, like Internet Explorer decide not to render/update CSS rules. This site should be supported by all of the major modern browsers, (not IE8) and mobile devices. It is fully responsive.
This site does not use jQuery.
Inline everything for maximum performance (and simplicity of hosting).
- Add
index.html
to some web server.
Any place that could be edited for content will have a <!-- - - - CONTENT - - - -->
HTML comment.
Here is the general list, in file order, of what needs to be changed:
- Title
- This one is a bit weird. In order to (attempt) stopping web crawlers from spamming your email, it should be hidden via JavaScript. Follow the instructions in the function.
- Header
- This is what shows up at the top of the page. It can be blank.
- About
- Example text has been provided. Multiple images, texts, banners, and cursive banners can be used. All are optional.
- Contact
- Example text has been provided. Add / remove
contact-link-item
s as needed. The icon pack isIonicons
should additional links be needed. Update thehref
link as desired.
- Work
- This contains multiple
work-item
s, each with several parts. Any number ofwork-item
s are allowed. - Several changes must be made in several places to make these things hookup correctly.
- Set
work-item-title
as desired. - Update the
work-item
s id to the same (lowercase, all one word,hyphens-can-be-used
). - Update the
<a href>
directlt below thework-item
to"/#id"
, where id is thework-item
s id. - Set at least one
work-item-image
with the appropriate link (href
). - At the bottom, in the
work-list
section, add awork-list-link
with anhref
to/#id
where id is the same as thework-item
s id.
All of the CSS styles for the various components are located directly in index.html
. Fonts, sizes, colors, and all sorts of things can be changed. Be sure to test all of your changes on all the major browsers, and at different sizes to ensure a good look.