Click here for the live page https://leebri101.github.io/Tech-Savvy/
- For potential clients and employers to present to about showcasing my personal portfolio.
- For users who want inspiration for a personal portfolio design.
- Allowing users to able use and view projects and get in touch with the owner of the site.
- To create a simple, effective and user-friendly site which clients and employers can navigate with.
- As a user I want to be able to navigate the website with ease.
- As a user I want to be drawn in with the appearance of the website.
- As an employer I want to be able to gauge at how much the user has shown their creativity.
- As a client I want to be able to see the work that the owner has done and be able to contact them for a future collaboration.
- To prevent any digressions towards the project aims & objectives I have made a basic wire-frame via Figma to refer back to in case of any major changes to the project.
Wire-frame were all designed in Figma for a more simpler design.
There have been some considerable cosmetic changes to the static site to improve the UX, however most of design was kept to original plan on the wireframes. Some of these changes may include:-
- An interactive carousel at which the user can browse through manually.
- A short automatic image gallery.
- A blended in contact page (subject to change at a later date).
- Some animations on some of teh typography on the pages.
- An animated background on all pages.
- The home-page will have multiple unique features which the user can do upon navigating which will contain these most notable features:
- A linear gradient background.
- Three CTA(Call To Action) buttons which the user can skip directly specific pages.
- An automatic image carousel.
- Wave animation on the footer.
- The Title will include some unique features:-
- The main title of the pages all include an animated logo which was used from interesting insignia from Armored Core VI which eases in upon loading.
- Also with an animated title which appears and shifts the letters of the title.
- The page navigation will include an active link which highlights what page the user is on, as well as a hover affect which changes color for the user.
- The main home page will have 3 separate buttons at which the user can navigate without having to manually click & hover over at page links, the most notable features that have been used :
- A simple but clean hover over effect where it transitions into a dark navy blue to match the theme of the page.
- An active page navigation where it allows the user to hover over the different page links and show which page they are currently on.
- Direct web-links where it take the user to my GitHub so that they can manually view each of my projects.
- Mobile version of home page with title, icon, buttons and web-links.
-
Within this part of the page showcases a brief summary of my life and why I went into coding, my educational background, and a personal message. But as a simple design(subject to change) i have included these subtle floating texts boxes that blend in well with the background page.
-
The Skills page shows a rough but honest estimate of my personal skill levels when it comes to coding but it is displayed in a traffic light system (Green = pro-efficient, Amber = Has some knowledge of it, Red = Hasn't learnt/is currently learning) which shows the user my proficiency levels when it comes to coding but it will have a simple design of a manual JavaScript carousel which the user can manually click on which is comprised of these four components:
- Comprises of HTML/CSS and JavaScript
- Containing React, Redux and Bootstrap
- Comprising of Python, REST Django and SQL
- Other components such as Git/GIthub, Figma/Canva and Miro
-
The user can manually navigate with ease to have a look at my current skill levels all contained in a simple but effect carousel. Each end will have two chevrons at which have a hover effect and turn a sandy gold upon moving the mouse (as seen above in the Miscellaneous image)
- The original design of the page was supposed to be within a boxed container within a pyramid scheme of each of the projects at which the user can navigate to which directly sends them to a new tab of each of the projects listed in its respectable links with the inclusion of 2 unique GIFs to display to the user.(I have also placed a disclaimer note on project 3 as the live link is broken and will be amended at a later date).
- Mobile version of the projects-page with an inter-changeable design of a horizontal view of the projects to a vertical view (Fully view on live link).
- The contact page will have a none-working function at which the user can input all their details with the functionality of a contact form but it users will not be able to submit anything (due to the lack of knowledge of PHP).
- The Mobile version will have a shrunken down version of the contact form with the animation of one of imagery in the background of the contact which is viewable on mobile devices.
The footer page has a wave animation at which it is only used for display purposes which blends in very well with the background.
-
These are the features that have been used in the footer:
- All the icons that were used in the project have been sourced by through Font Awesome.
- A personal copyright has been added in-case of plagiarism.
- A personal link to my GitHub page which users can track my coding journey and the link to my Linkedin page.
Throughout the Project Portfolio only two fonts was used throughout for consistency:
-
Electrolize - for a more readable cybernetic look to the text.
-
Orbitron - for a more retro cyberpunk look.
-
Please note that all fonts that have used in the project have been sourced from Google Fonts (quoted in the credits).
- This personal project portfolio page with be an ongoing improvement as i study more advanced coding to change and improve the appearance of the page and functionalities:
- A possible interactive start up function to allow users to interact with the page (with sound and an insignia).
- A fully functional contact form that can redirect users to enable them to contact me.
- A different more cleaner animated background with small but subtle features to it like glowing and floating dots.
- A typewriter effect for the about page which manually shows a new text box for each new text box.
- a proper animated bar where it displays the skill level of my coding knowledge.
- These will be some of the possible changes that i would like to implement at a later date with more knowledge that has been gained over time.
The project has been deployed with the following steps: -
- Within the project's repository, you select the Settings tab.
- Then select the Pages menu tab on the left side.
- Under Source then, select the Main branch from the drop-down menu and click Save.
- A message will then pop up that the project has been successfully deployed with a live link.
You can visit the live link via this URL or on the top the README file- Tech-Savvy
This project was a nice refresher for my self to be able to gauge at how much i have improved from when I first started with little to no knowledge of coding to enjoying the challenges it brings me and for giving me the creative freedom to go beyond. However this will be (potentially be) an ongoing static site with a more improvements as i learn new coding languages, as with each coding language that is being covered it will may or may not be potentially be implemented into the project portfolio. But i must credit the following people:
- John Lamontagne My Coding mentor who is incredible at giving me insight and suggestions on further improving my project and is a huge help to continuously support me for any sort of technical issues within the project.
- My older brother for always being available for being a personal guinea pig for my projects (and as a non-coding person) and (with many more to come) and giving me constant constructive feedback all the time.
- The project theme was based around a mixture of my past projects but to create a personal portfolio to showcase to clients and employers.
- I have used W3Schools for a basic understanding and learning process for knowing some basic functionality as a way of reminding some stuff, and for general basic coding references and as general encyclopedia for any code related issues or ideas, some of the designs for the main parts of the page are taken from inspiration from CodePen.
- All icons that were used throughout the project are sourced from Font-Awesome
- All fonts used have been imported from - Google-Fonts
- Contact page inspiration Asana
- Favicon generator for index.html: Favicon-Pro
- General RGB color Table used in style.css: RGB-Table
- Image compressions: TinyPNG
- HubSpot for different styling of animations on CSS: HubSpot
- RapidTables for general encyclopedia for searching for color themes: RapidTables
- For the basic and simple wire-frame design as a professional and practical project planning platform Figma.
- CSS linear gradient animator via CodePen CodePen
- Animated slideshow CodePen
- Scroll animation CodePen
- Alternative image converter to covertio. FreeConvert.
- Image compress/converter Convertio.
- Armored core 6 logo Armored Core Fandom.
- Px to rem/em converter NekoCalc.
- For styling color identifier Color Hex
- Image finder Unsplash