Welcome to my professional portfolio website, designed to showcase my skills and projects. This site serves as a platform for potential employers and collaborators to view my work and understand my capabilities in software development.
The primary purpose of this portfolio is to effectively present my projects and contributions. It aims to attract professional opportunities and serve as a resume that showcases my background and experience.
- Project Showcase: Each project has its own project card with a link to the deployed site or github repository.
- Responsive Design: Ensures that the website is accessible and visually appealing on any device, from desktops to mobile phones. This is in progress.
- Contact Form: Allows visitors to easily reach out to me, enhancing professional connectivity.
- Accessibility Features: Includes keyboard navigation and screen reader support to ensure the website is usable for people with disabilities. In progress.
Home page desktop view
About page desktop view
Project page desktop view
Contact page desktop view
Home page tablet view
About page tablet view
Projects page tablet view
Contact page tablet view
Home page mobile view
Project page mobile view
Contact page mobile view
Home
├── About
├── Projects
│ ├── Project 1
│ ├── Project 2
| ├── Project 3
│ └── Project 4
└── Contact
The target audience for this portfolio includes but is not limited to:
- Potential employers looking to hire.
- Fellow developers seeking collaboration.
- Recruiters aiming to find talent.
- Coder Academy tutors
- HTML
- CSS
- Markdown
To run this project locally, clone the repository:
git clone https://github.com/shayzimm/ca-portfolio-t1a2.git
cd ca-portfolio-t1a2
- The header component is present on all pages and contains a logo and navigation menu.
- The logo has an eye-catching animation and changes colour on hover, immediately grabbing the user's attention.
- The navigation menu provides easy access to different sections of the website (Home, About, Projects, Contact), allowing users to seamlessly navigate through the content.
- The home page features a visually appealing hero section with a striking illustration and animated elements, immediately captivating the audience's interest.
- The hero section introduces myself with a brief description, establishing a personal connection with the audience.
- The prominent "Download CV" and "Let's Talk" buttons encourage the audience to take action, either by exploring my professional background or initiating contact.
- The social media icons in the bottom-right corner provide additional channels for the audience to connect with me.
- The about page features a prominent headshot.
- The page provides a detailed background story.
- The tech stack section showcases skills and proficiency in various technologies.
- The "Download CV" button encourages the audience to learn more about my professional experience and qualifications.
- The projects page showcases my portfolio of work.
- Each project is presented as a card with a visual representation and a "Click to view" button.
- The projects cover a range of technologies, including React, Django, Python, and HTML/CSS.
- The contact page features a visually appealing background image, creating an immersive and engaging experience for the audience.
- The contact form allows the audience to easily get in touch, fostering communication and potential collaboration opportunities.
- The presence of social media icons reinforces the multiple channels through which the audience can connect.
- The consistent use of vibrant colors, such as purple and pink, creates a cohesive and visually appealing theme throughout.
- Animations and transitions, including the logo animation, hover effects, and button interactions, add dynamism and interactivity, enhancing the overall user experience.
- The use of modern icons and fonts contributes to a sleek and contemporary design, appealing to a tech-savvy audience.
- Accessibility
Need to add proper heading structure and keyboard navigation support to enhance accessibility.
- Performance Optimisation
Am aware that the animations I've included could impact performance.
- Responsive Design
Need to add additional media queries and responsive styles to ensure an optimal experience across various screen sizes and device orientations.
- Code Organisation
My CSS file contains a mix of styles for different components and pages, which has made it challenging for me to maintain and scale. I need to adopt a more systematic approach to styling.
- Form Validation and Submission
The contact form on the contact page currently lacks client-side validation and submission handling. Will be adding Formspree component.
- Semantic HTML
Need to include more semantic HTML. Similar to CSS, I need to be more systematic in my approach and not let the bad habits I've learned in the past become any more entrenched than they already are.
- Documentation and Comments
While the code is relatively straightforward, adding comments and documentation can improve readability and make it easier for me to make changes in the future.