T1A2 - Portfolio Rahal Abeyrathna
A personal portfolio website created for the Coder Academy T1A2 assignment.
Live Portfolio Website
Github Repository
Video Presentation
Table of Contents
Purpose
The purpose of this project is to develop a presentable website that will function as an online resume, showing potential employers an insight as to who I am as well as presenting any projects that I may have worked on in the past. It should also help highlight my skills and expertise to help demonstrate the value I can bring as an emoployee. The website should stand out to employers and showcase my personality while leaving a lasting impression of my character. Finally, the website should intrigue the reader to get into contact with me and to reach out using one of the methods found on the contact page.
Functionality and Features
- Responsive design for mobile, tablet and desktop viewing
- Semantic HTML for accessibility purposes
- Animations for user engagement
- Section animations when loading specific pages
- Animated buttons and links
- Simplistic design and layout
- Home Page
- Shows general information about me and gives insight as to who I am
- Links at bottom of the website which navigate to other pages of the website
- Projects Page
- Shows any other projects that I have worked on so employers can see my past work
- Currently only uses placeholder text and images
- Blog Page
- Show lists of blog posts
- The heading and ‘read more’ text show and underline when hovered to indicate it is a link
- Blog Article
- Shows the entirety of the blog article
- Contact Page
- Links to various methods to connect with me
- LinkedIn
- GitHub Profile
- Direct link to my professional email
- Link to my current resume
Sitemap

Screenshots
Home Page
Home Page - Desktop

Home Page - Tablet

Home Page - Mobile

Projects Page
Projects Page - Desktop

Projects Page - Tablet

Projects Page - Mobile

Contact Me Page



Blog Page
Blog Page - Desktop

Blog Page - Tablet

Blog Page - Mobile

Blog Article Page
Blog Article Page - Desktop

Blog Article Page - Tablet

Blog Article Page - Mobile

Target Audience
My target audience are potential employers who are in the market to hire a junior web developer with a history of past coding projects. The employers likely have seen similar websites portfolio websites from other candidates and would have a degree of experience in web development or in a similar field.
Tech Stack
- Website: Written in HTML and CSS
- Web-based Git Repository: GitHub
- Web Deployment: Netlify
- Icons sourced from Icons8
- Mockups: Figma