Profolio is the website created to showcase my personal professional expereince with both a technical stack, previous work history, and personal biography information about myself. The website itself is showcasing my ability to build a website using javascript, CSS, and HTML. My website is deployed using github pages at https://cordetg.github.io/Profolio/.
- index.html is used for deployment and fetches the profolio-home.html to use.
- The HTML files are located in the src/ folder.
- Images are all personal photography or made personally and are included in the images/ folder.
- All javascript files are located in the scripts/ folder.
- All the styling codebase is located in the styles/ folder.
- The favicon_io folder includes all the files for the favicon image useage.
- The files folder includes the projects pdf files that can be viewed via a link in the projects page.
Simply visit the deployed website and at the top of the screen. A user will see a welcome page and can use the navbar to read the any of the following pages:
- About me page
- Previous experience page
- Projects showcase page
- Contact page
The project showcase page has external links shown as false buttons to github repositories. There are additional links that open a pdf or an additional website.
The header.html and footer.html is imported into the header and footer of each page's html file through javascript fetch() events. The contact form does not currently submit to a domain, but will display the information entered into the console.log().
[1]L. Kolowich, “9 of the Best Professional Bio Examples We’ve Ever Seen [+ Bio Templates],” Hubspot.com, 2019. https://blog.hubspot.com/marketing/professional-bio-examples
[2]“Navigation,” web.dev. https://web.dev/learn/html/navigation/ (accessed Jun. 2023).
[3]F. Bianchi, “Coolors,” Coolors.co, 2018. https://coolors.co/
[4]“Airbnb CSS / Sass Styleguide,” GitHub, Jun. 07, 2023. https://github.com/airbnb/css#formatting (accessed Jun. 2023).
[5]“A Complete Guide to Grid,” CSS-Tricks. https://css-tricks.com/snippets/css/complete-guide-grid/
[6]“ - HTML: HyperText Markup Language | MDN,” developer.mozilla.org, Mar. 22, 2023. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer#examples (accessed Jun. 2023).
[7]“Forms and Form Fields :: Eloquent JavaScript,” eloquentjavascript.net. https://eloquentjavascript.net/2nd_edition/18_forms.html#p_G8aitsjxoL (accessed Jun. 2023).
[8]“border-style - CSS: Cascading Style Sheets | MDN,” developer.mozilla.org, Feb. 21, 2023. https://developer.mozilla.org/en-US/docs/Web/CSS/border-style (accessed Jun. 2023).
[9]“: The Navigation Section element - HTML: HyperText Markup Language | MDN,” developer.mozilla.org. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#examples -
[10]“CSS text-justify property,” <www.w3schools.com>. https://www.w3schools.com/cssref/css3_pr_text-justify.php (accessed Jun. 2023).
[11]“Style a Card Layout with CSS,” DEV Community, Mar. 21, 2020. https://dev.to/5t3ph/style-a-card-layout-with-css-23h (accessed Jun. 07, 2023).
[12]“How to Embed PDF file using HTML ?,” GeeksforGeeks, Mar. 26, 2022. https://www.geeksforgeeks.org/how-to-embed-pdf-file-using-html/# (accessed Jun. 2023).
[13]“JavaScript Array indexOf() Method,” <www.w3schools.com>. https://www.w3schools.com/jsref/jsref_indexof_array.asp (accessed Jun. 2023).
[14]P. Gorman, “Quickly extract all links from a web page using JavaScript and the browser console,” Medium, Mar. 09, 2020. https://towardsdatascience.com/quickly-extract-all-links-from-a-web-page-using-javascript-and-the-browser-console-49bb6f48127b (accessed Jun. 2023).