🚀 First Coding Project! | Showcasing My Skills & Experience
🌍 Live Website: eliasb.dev
This is my first coding project, built to showcase my skills, projects, and experience as I transition into the world of software engineering.
The website is designed to be visually engaging, interactive, and dynamic, using modern HTML, SCSS, and JavaScript/TypeScript to create an impressive and professional presentation.
- Dynamic Time-Based Greeting (e.g., "Good Morning, I'm Elias!")
- Smooth fade-in animation for a polished experience.
- Categorised skill sets (Frontend, Backend, DevOps, Tools).
- Animated icons with a staggered entry effect.
- Responsive and interactive layout.
- Tabbed navigation to switch between different job roles.
- Smooth scroll animation for a better user experience.
- Fully responsive layout (optimised for desktop & mobile).
- Clean grid-based layout for project displays.
- Hover effects for better visual interaction.
- External links for GitHub Repos & Live Demos.
- A fully functional contact form with an email action.
- CTA buttons for LinkedIn, GitHub, and CV.
- User preference is saved for future visits.
- Smooth transition animation when switching modes.
- Frontend: HTML5, SCSS, TypeScript, JavaScript
- Styling: SCSS (BEM methodology), CSS Animations
- Version Control: Git, GitHub
- Deployment: GitHub Pages
- Responsive Design: Flexbox, Grid, Media Queries
- JavaScript Functionality:
- Intersection Observer API for animations
- TypeScript for better type safety and scalability
Working on this portfolio has been a great learning experience. Some key takeaways include:
- Structuring SCSS with BEM for maintainable and scalable styling.
- Implementing JavaScript animations (Intersection Observer, event listeners).
- Handling responsiveness properly to ensure an optimal experience across devices.
- Optimising accessibility to make the portfolio user-friendly for all.
- Using Git and GitHub effectively, learning best practices for version control.
Although the portfolio is complete, there are a few enhancements I’d like to make in future iterations:
- Performance optimisation: Reduce asset sizes for faster load times.
- Custom email functionality: Implement a backend service for contact form handling.
- Blog section: Share insights, tutorials, and updates on my development journey.