Overview
Purpose
A handcrafted portfolio site built with HTML, CSS, and vanilla JavaScript, featuring dynamic filtering, animations, and interactive components. Designed with a custom dark theme, original SVG graphics, and a deliberate typographic system to present engineering and cybersecurity project work to prospective employers.
Audience
The target audience for this website is potential employers and clients interested in my software development skills.
Dynamic elements
This website will include dynamic elements such as a responsive navigation menu, interactive portfolio items, dynamic portfolio updates, and a contact form.
Branding
Website Logo
Style Guide
Color Palette
Palette URL: https://coolors.co/141410-f3ece3-d4a84b-a8c5b5-7a7870| Primary | Secondary | Accent 1 | Accent 2 |
|---|---|---|---|
| #141410 | #F3ECE3 | #D4A84B | #A8C5B5 |
Typography
Heading Font: Georgia
Paragraph Font: Verdana
Normal paragraph example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Colored paragraph example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Navigation
Content
Home page
Work Page
[content, images, data for the subpage]
Wireframes
Create two wireframes for your site. One for each page and list them here
Home
Colors may change but the layout will be similar to the wireframe below. The home page will include a header with the site name and navigation, a main section with an introduction and featured projects, and a footer with contact information.
Work Page
Colors may change but the layout will be similar to the wireframe below. Page 2 will include a header with the site name and navigation, a main section with detailed information about my projects and skills, and a footer with contact information.
