RyannKim327 Portfolio

Project version: 3.6.1

A modern, responsive portfolio website showcasing the work and skills of Ryann Kim Sesgundo, an aspiring full-stack developer.

Table of Contents

• 🚀 Live Demo
• ✨ Features
• 🛠️ Tech Stack
  • Frontend
  • Backend
  • Libraries & Tools
• 📁 Project Structure
• 🚀 Getting Started
  • Prerequisites
  • Installation
  • Available Scripts
• 🎨 Design Philosophy
  • Core Principles
• 📝 Changelog
• 🌐 Deployment
• 🔗 Backend Integration
• 📝 About the Developer
  • Connect
• 🤝 Contributing
  • How to Contribute
• 📄 License
• 🙏 Acknowledgments
• 🔧 Technical Details
  • Performance Optimizations
  • Browser Support
  • Development Tools

🚀 Live Demo

Visit the live portfolio at: ryannkim327.is-a.dev

✨ Features

• 🎨 Modern Single-Page Design - Clean, professional layout with smooth scrolling
• 📱 Fully Responsive - Optimized for desktop, tablet, and mobile devices
• ⚡ Lightning Fast - Built with Vite for optimal performance
• 🎯 TypeScript - Type-safe development for better code quality
• 🎨 Tailwind CSS - Utility-first CSS framework for rapid styling
• 📦 Component-Based Architecture - Modular and maintainable code structure
• 🌙 Dark/Light Theme - Elegant theme switching with dark and light modes, featuring purple accents
• 📄 Reusable Resume Component - Integrated resume layout for professional presentation
• 📝 Blog System - Fetch + view blog posts with Markdown rendering
• 🖼️ Blog Post Images - Support for optional image galleries attached to blog posts
• 📜 Dedicated Certifications - Paginated list of certifications for better showcase
• 📜 Poem Preview - Added functionality to preview poetic content
• 💅 Enhanced Markdown Styling - Proper list styling, code blocks, and inline code formatting
• 🧰 Admin Dashboard (WIP) - Manage portfolio content (experiences/projects/blogs)
• 📱 Admin Responsive UI - Improved mobile/tablet usability in admin pages
• 🔘 Refined Form UI - Consistent rounded inputs/buttons for a cleaner admin experience
• 🧩 Experience Icons (Admin) - Add an icon field when creating/editing experiences
• 🔗 Backend Integration - Connected to Go-based backend API

🛠️ Tech Stack

Frontend

• React 19.2.4 - Modern React with latest features
• TypeScript 5.9.3 - Static type checking
• Vite 7.3.1 - Next-generation frontend tooling
• Tailwind CSS 4.2.1 - Utility-first CSS framework

Backend

• Go - Backend API server
• Repository: portfolio-backend

Libraries & Tools

• FontAwesome - Icon library
• Axios 1.13.2 - HTTP client for API communication
• React Toastify - Notification library
• React Markdown - Markdown rendering
• ESLint - Code linting
• gh-pages - GitHub Pages deployment

📁 Project Structure

portfolio/
├── public/                 # Static assets
├── src/
│   ├── assets/            # Images, fonts, etc.
│   ├── parts/             # Layout components (header, etc.)
│   ├── screen/            # Page sections (hero, about, projects, contact)
│   ├── utils/             # Utility functions and API helpers
│   ├── App.tsx            # Main application component
│   ├── main.tsx           # Application entry point
│   └── index.css          # Global styles
├── types/                 # TypeScript type definitions
└── package.json           # Project dependencies

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository

   git clone https://github.com/ryannkim327/ryannkim327.github.io.git
   cd ryannkim327.github.io

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 to view the portfolio

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint
npm run deploy	Deploy to GitHub Pages

🎨 Design Philosophy

This portfolio is built on the principle of "Functional Elegance"—balancing a high-performance technical stack with a sophisticated, user-centric interface.

Core Principles

• Aesthetic Precision

  • A carefully crafted dark-mode-first interface with purple accents, emphasizing focus and readability.
  • Purposeful use of whitespace and typography to create a clean, professional atmosphere.

• Full-Stack Synergy

  • Seamless integration between the React frontend and Go backend, ensuring real-time content management.
  • A robust administrative dashboard that allows for dynamic updates without code changes.

• Fluid Motion

  • Meaningful transitions that guide the user's attention and enhance the "feel" of the site.
  • Micro-interactions that provide immediate feedback and a sense of responsiveness.

• Adaptive Resilience

  • A mobile-first architecture that ensures a premium experience across all device form factors.
  • Layouts that degrade gracefully and maintain usability on everything from smartphones to ultrawide monitors.

• Interactive Utility

  • Bridging the gap between a static portfolio and a dynamic application with features like an AI chatbot and Markdown-powered blogs.
  • Integrated Paginator and dedicated "See More" views for efficient content discovery.

• Security & Performance

  • Built with Vite for near-instant load times and optimized bundle sizes.
  • Implementation of secure admin verification and encrypted repository access.

📝 Changelog

The full changelog has been moved to CHANGELOGS.md.

Latest: v3.6.0 (Current) — 2026-04-02

🌐 Deployment

The portfolio is automatically deployed to GitHub Pages using the custom domain ryannkim327.is-a.dev.

To deploy your own version:

1. Build the project

   npm run build

2. Deploy to GitHub Pages

   npm run deploy

🔗 Backend Integration

This portfolio connects to a Go-based backend API for dynamic content and contact form functionality.

Backend Repository: https://github.com/RyannKim327/portfolio-backend

The backend provides:

• Contact form submission handling
• Dynamic content management
• API endpoints for portfolio data

📝 About the Developer

Ryann Kim Sesgundo is an aspiring full-stack developer focused on enhancing abilities and capabilities to create different applications using modern stacks and technologies.

Connect

• Portfolio: ryannkim327.is-a.dev
• GitHub: @ryannkim327
• Backend Repository: portfolio-backend
• LinkedIn: RyannKim327

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License.

You are free to:

• Share — copy and redistribute the material in any medium or format
• Adapt — remix, transform, and build upon the material

Under the following terms:

• Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made
• NonCommercial — You may not use the material for commercial purposes

This means:

• ✅ You can use this code for learning and personal projects
• ✅ You can modify and share the code with proper attribution
• ❌ You cannot sell this code or use it for commercial purposes
• ❌ You cannot remove the original author's attribution

For more details, see the LICENSE file or visit Creative Commons.

🙏 Acknowledgments

• Vite team for the amazing build tool
• React team for the powerful library
• Tailwind CSS for the utility-first approach
• FontAwesome for beautiful icons
• Go community for the robust backend language

🔧 Technical Details

Performance Optimizations

• Code splitting with React lazy loading
• Optimized bundle size with Vite
• Efficient CSS with Tailwind's purge functionality
• Image optimization and lazy loading

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development Tools

• ESLint for code quality
• TypeScript for type safety
• Vite for fast development
• GitHub Actions for CI/CD

---

Made with ❤️ by Ryann Kim Sesgundo

⭐ Star this repo if you found it helpful!

This project is open source but not for commercial use