🌟 Ade Naufal Rianto - Portfolio Website

Professional portfolio showcasing 7+ years of progressive network engineering experience, Juniper certifications (JNCIS-SP, JNCIA-Junos), and technical projects

View Demo • Report Bug • Request Feature

---

📋 Table of Contents

• About
• Features
• Tech Stack
• Project Highlights
• Getting Started
• Deployment
• Contact
• License

---

🎯 About

This is a modern, responsive portfolio website built to showcase my professional experience as a Network Engineer with specialization in:

• 🌐 Enterprise Routing, Switching & WAN Architectures
• 🔒 Network Security & High Availability Design
• 🛠️ Juniper JunOS (MX, EX, SRX Series) Configuration
• 🐍 Network Automation with Python (Paramiko, Scapy, PySNMP)
• 📊 Network Monitoring & Infrastructure Documentation
• 🏅 Juniper Certifications (JNCIS-SP, JNCIA-Junos)

The portfolio features a clean, professional design with dark/light mode, smooth animations, dynamic browser tab titles, and comprehensive sections highlighting my career progression from IT Support to Network Engineering.

---

✨ Features

🎨 Design & UX

• ✅ Fully Responsive - Optimized for mobile, tablet, and desktop
• 🌓 Dark/Light Mode - Theme toggle with localStorage persistence
• 🎭 Smooth Animations - Fade-in effects, scroll reveals, and transitions
• ♿ Accessible - WCAG compliant with ARIA labels and keyboard navigation
• ⚡ Fast Loading - Optimized assets, lazy loading, and code splitting
• 📑 Dynamic Tab Titles - Browser tab updates based on active section

📱 Sections

• 👤 Hero Section - Professional introduction with CTA buttons
• 📝 About & Cover Letter - Career journey and professional narrative
• 💼 Experience Timeline - 7+ years from IT Support to Network Engineer
• 🎓 Education - Bachelor's degree with Cum Laude honors
• 🏆 Certifications - JNCIS-SP, JNCIA-Junos, BNSP, TOEFL ITP
• 🛠️ Technical Skills - Core (24 skills) & Additional (12 skills) with 2-column layout
• 💭 Professional Focus - Career philosophy and approach
• 🚀 Projects & Achievements - Network Monitoring, IoT, Web Development, Data Mining
• 📬 Contact Form - Formspree integration for direct messaging

🎥 Interactive Elements

• 🎬 Project Demos - Auto-play disabled carousel for Network Monitoring screenshots
• 🔍 Modal Views - Detailed project information with technology badges
• 🔽 Lazy Loading - Performance-optimized media loading
• 📊 Skill Filtering - 10 filter options (All, Core, Additional, + 7 specific groups)
• 📄 CV Download - Direct PDF download button
• 🔝 Clickable Logo - Smooth scroll to top with URL hash clear

---

🛠️ Tech Stack

Frontend

Styling

Icons & UI

Deployment & Hosting

Development Tools

SEO & Analytics

---

🚀 Project Highlights

1️⃣ Network Monitoring System

Python | Paramiko | Scapy | PySNMP | openpyxl

📖 View Details

• Automated network infrastructure monitoring and reporting
• ICMP ping for device availability monitoring
• SNMP-based performance metric collection (bandwidth, CPU, memory, FPC)
• Excel report generation with multiple worksheets
• Dashboard summary with overall network health status
• Multi-device support with automated data aggregation
• View Source Code →

2️⃣ Arduino Smart Door Lock System

Arduino | C/C++ | Keypad 4x4 | LCD I2C | RTC DS3231 | Servo

📖 View Details

• IoT-based secure access control system
• Keypad authentication with PIN validation
• LCD display for user interface
• Real-time clock for access logging
• Servo motor control for door mechanism
• Developed firmware in C/C++ for microcontroller
• View Source Code →

3️⃣ Sales Information System (SIFO)

CodeIgniter | PHP | MySQL | Bootstrap | JavaScript

📖 View Details

• Full-featured POS and inventory management system
• Role-based access control for multiple user types
• Sales reporting with advanced filtering
• Responsive design with Bootstrap framework
• DataTables integration for data management
• View Source Code →

4️⃣ Sales Data Mining Using Apriori Algorithm

Data Mining | CodeIgniter | PHP | MySQL | Bootstrap

📖 View Details

• Undergraduate thesis project - Cum Laude distinction
• Implemented Apriori algorithm for association rule mining
• Analyzed pharmacy sales data for pattern discovery
• Web-based interface for data input and analysis
• Generated actionable business insights for inventory optimization
• View Source Code →

---

🏁 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/wokding/ade-portfolio.git
   cd ade-portfolio

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   VITE_DOORLOCK_VIDEO_URL=https://github.com/wokding/ade-portfolio/releases/download/v1.0.0/doorlock-demo.mp4
   VITE_APRIORI_VIDEO_URL=https://github.com/wokding/ade-portfolio/releases/download/v1.0.0/apriori-demo.mp4
   VITE_SIFO_VIDEO_URL=https://github.com/wokding/ade-portfolio/releases/download/v1.0.0/sifo-demo.mp4

4. Run development server

   npm run dev

5. Open in browser

   http://localhost:5173/ade-portfolio/
   

---

📦 Deployment

Build for Production

npm run build

This creates an optimized production build in the dist/ folder.

Deploy to GitHub Pages

npm run deploy

This automatically builds and deploys to GitHub Pages using gh-pages.

Custom Domain Setup

To use a custom domain, add a CNAME file in the public/ directory:

yourdomain.com

---

📧 Contact

Ade Naufal Rianto

Portfolio: wokding.github.io/ade-portfolio

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Icons by Lucide Icons
• Contact form powered by Formspree
• Hosted on GitHub Pages
• Built with React & Vite

---

⭐ Star this repository if you found it helpful!

Made with ❤️ by Ade Naufal Rianto