NUR LIYANA
Project: Custom Responsive Portfolio & Web Showcase
Role: Front-End Developer
Tech Stack: HTML5, Tailwind CSS, JavaScript, Wix
Deployment: GitHub Pages & Netlify
In this project, mostly, I code from scratch a fully responsive website using Tailwindcss. To see how Tailwind CSS works. The site includes dynamic sections, scroll animations, and seamless navigation. To make it accessible to a broader audience, I deployed the website on two free platforms: GitHub Pages and Netlify.
You can view the website hosted on two different servers by clicking the buttons above.
As a self-driven developer, the primary challenge was moving beyond static layouts to create a professional-grade website that functions perfectly across the fragmented device landscape.
Utility-First Complexity: Learning to use Tailwind CSS’s utility classes efficiently without creating "div soup" or messy, unreadable code.
Performance vs. Aesthetics: Implementing scroll animations and dynamic sections while maintaining fast loading speeds across global servers.
Multi-Platform Deployment: Ensuring the site performed consistently whether hosted on GitHub Pages or Netlify’s CDN.
I adopted a hands-on methodology to ensure I didn't just designing, but actually understood the underlying architecture.
Deep-Dive Research: Utilized YouTube and documentation to master responsive design techniques and Tailwind’s configuration.
Modular Coding: Focused on writing clean, modular HTML and CSS to make the site easy to maintain and scale.
Interactive Testing: Integrated ScrollReveal to add high-end interactivity, followed by rigorous testing on different screen sizes to ensure full responsiveness.
To create a "working website" that would impress employers, I made the following technical choices:
Tailwind Utility-First Framework: I chose Tailwind over traditional CSS to accelerate development and ensure design consistency across all components.
Scroll-Based Interactivity: I implemented ScrollReveal animations to increase user engagement, making the site feel "alive" and modern.
Redundant Hosting: I deployed the site on both GitHub Pages (for version control integration) and Netlify (for global CDN speed) to ensure 100% uptime and accessibility.
Clean Navigation: Designed a seamless navigation system that remains intuitive regardless of whether the user is on a mobile or desktop device.
Learning Phase
Followed a tutorials on YouTube to understand the Tailwind CSS framework, including utility classes, responsive design techniques, and component customization.
Experimented with modern web design trends to create visually appealing layouts.
Development Phase
Built the project using HTML, Tailwind CSS, and JavaScript.
Focused on clean and modular code, ensuring the design is fully responsive across devices.
Added animations using libraries like ScrollReveal for enhanced interactivity.
Deployment Phase
Deployed the website to GitHub Pages, showcasing its simplicity and integration with version control.
Also hosted the site on Netlify, leveraging its continuous deployment and faster global CDN.
The project successfully demonstrated my ability to deliver a live, high-performance web product from scratch.
Metric | Outcome | Acheivement |
|---|---|---|
Responsive Accuracy | Perfect layout adaptation from mobile to ultra-wide screens. | 100% |
Site Availability | Successfully hosted and active on GitHub Pages, Netlify, Framer and Wix. | 100% |
Animation Fluidity | Smooth, bug-free scroll effects across all browsers. | 95% |
Code cleanliness | Achieved modular, professional-standard HTML/CSS structure. | 95% |
Responsive Design: Adapts seamlessly across devices.
Smooth Animations: Scroll-based effects enhance user engagement.
Fast Loading: Optimized for performance with both GitHub Pages and Netlify hosting.
I reached my objective of creating a fully functional, responsive website. By coding from scratch and managing the deployment phase, I proved my capability to handle the end-to-end web development lifecycle. Employers can now verify my skills in real-time by visiting the live links on GitHub and Netlify.
© Nur Liyana Aris | 2026
Johor, Malaysia