My website is hosted on GitHub Pages, a service provided by GitHub for hosting static sites directly from a repository.
GitHub Pages offers a straightforward and efficient way to publish content on the web.
Here's how it works:
The website's source code is stored in a GitHub repository.
By pushing changes to the repository, the site automatically updates.
GitHub Pages offers free SSL certificates, ensuring that our site is served over HTTPS for secure communication.
- GitHub Pages is an ideal hosting solution for static websites due to its ease of use, integration with version control,
- and zero-cost hosting.
In this project, several innovative features and technologies have been utilized to create a dynamic and engaging virtual CV.
Here’s what makes this project unique and cutting-edge:
- Mobile-Friendly: The use of meta tags and responsive CSS ensures that the website adapts to different screen sizes and devices.
- HTML5 & CSS3: By using the latest standards in HTML and CSS for structuring and styling the content, ensures a modern look.
- Social Media Icons: Utilization of icons for enhancing visual appeal and providing intuitive links to social media profiles.
- CSS Animations: The inclusion of CSS animations, like the slide-in-left effect, adds a dynamic element to the website, making it
more engaging for visitors.
- Downloadable Content: A button that allows users to download a PDF version of the CV, making it easy to share and review offline.
- Video Embedding: Integrating video content to showcase projects, enhancing the interactive experience and providing a more comprehensive understanding of the work done.
The foundation of our website, HTML (HyperText Markup Language) structures the content and elements on the web pages.
It defines the layout and organization of text, images, links, and other multimedia.
Cascading Style Sheets (CSS) are used for styling the HTML elements. Our project includes a main CSS file (assets/css/main.css)
for the overall styling and a noscript.css file for cases when JavaScript is disabled. CSS is responsible for the visual presentation,
including colors, fonts, layouts, and responsive design.
JavaScript is used to add interactivity and dynamic behavior to the website. The project includes several JavaScript files that enhance the
user experience through animations, transitions, and other interactive features.
The website includes external links that open in new tabs using the target="_blank" attribute.
This ensures a seamless navigation experience without losing the current page.
- Desktop Operating Systems: Windows, macOS, Linux
- Mobile Operating Systems: iOS, Android
- Desktop Computers: Full compatibility with modern desktops and laptops.
- Tablets: Optimized for both iOS and Android tablets.
- Smartphones: Fully responsive design ensuring compatibility with iOS and Android smartphones.
- Upon landing on the homepage, users are greeted with a welcome message, my name and links to my Twitter and GitHub Pages.
- The header prominently displays the main title, "Bs.C. IT Graduate - 2024," giving visitors an immediate understanding of my site's focus.
- Located at the top-right of the page, this bar contains icons linking to my LinkedIn and GitHub profiles.
My main content is divided into several sections, each accessible by scrolling down the page. These sections include:
Experience:
Showcasing my professional experience and job roles.
Education:
I am listing my academic background and degree to be earned.
Hobbies & Interests:
Sharing my personal interests and hobbies.
Skills:
Displaying my technical skills with categorized images for visual ease of consumption.
Past Projects:
Showcasing significant projects I have worked on, with descriptions and links to videos or repositories.
Download CV Button: A button that opens a new tab to download my CV in .PDF format. Project Links: Images and text links within the "Past Projects" section directs users to more detailed views or external resources.
Contact Details: The footer provides my address, phone number, and email, ensuring visitors can easily reach out to me. Social Media Links: Additional LinkedIn and GitHub icons are present in the footer for quick access to my social profiles. Go to Top Button: A link in the footer that scrolls the page back to the top, enhancing the ease of navigation.
SVG Images used for Skills:
ChatGPT: