Welcome to my personal portfolio! 🚀
This site represents my journey as a web developer, showcasing my skills, creativity, and growth in building clean, functional, and user-friendly web interfaces.
🔗 Live Demo: Visit Portfolio
This portfolio is designed as a multi-page showcase of who I am and what I do, featuring a modern dark theme with neon accents.
It includes:
- A professional introduction and hero section
- Detailed about page with skills and background
- Dynamic project showcase (auto-updated from JSON)
- Certificates and achievements section
- Contact information with social links
The portfolio is built to be easily expandable, so new works can be added seamlessly without modifying the core structure.
- HTML5 – Semantic structure and accessibility
- CSS3 – Responsive design, animations, and modern layouts
- JavaScript (Vanilla) – Interactivity, dynamic rendering, and DOM manipulation
- JSON – Data-driven content for projects, skills, and certificates
- Render – Hosting and deployment
- Font Awesome – Icons and visual elements
isaiahwebdev-portfolio/
├── README.md # Documentation
├── index.html # Home page
├── about.html # About page
├── projects.html # Projects page
├── certificates.html # Certificates page
├── contact.html # Contact page
├── resume.html # Resume page
├── css/
│ └── style.css # Main stylesheet
├── js/
│ ├── script.js # Main JavaScript
│ ├── project.js # Project handling
│ ├── footer-loader.js # Footer loading
│ └── hero-final-fix.js # Hero animations
├── data/
│ ├── projects.json # Project data
│ ├── skills.json # Skills data
│ ├── certificates.json # Certificates data
│ └── footer.json # Footer data
├── images/ # Project images and assets
├── logo/ # Logo files
├── docs/ # Additional documents
├── firebase.json # Firebase config
├── robots.txt # SEO
└── sitemap.xml # SEO
- A modern web browser
- Basic understanding of HTML/CSS/JS (for customization)
- Clone the repository:
git clone https://github.com/KAOS-CODM/isaiahwebdev-portfolio.git
- Navigate to the project directory:
cd isaiahwebdev-portfolio - Open
index.htmlin your browser or serve locally.
- Edit
data/projects.jsonto add new projects - Modify
css/style.cssfor styling changes - Update
data/skills.jsonfor skills - Add images to
images/folder
The private admin interface lets the owner create, edit, publish, unpublish and preview projects. It is part of the static frontend and talks to the separate backend API.
- Copy
backend/.env.exampletobackend/.envand setMONGODB_URI— your MongoDB connection string. - Start the backend with
npm run devfrombackend/. - Open
http://localhost:8080/admin. On first run (no administrator exists yet) the page shows a setup form: choose a username and a password of at least 12 characters. The account is created in MongoDB and you are signed in automatically. - Afterwards,
/adminshows the normal sign-in form (username + password). There is no environment variable for the admin password.
Notes:
- The administrator is stored in MongoDB, not in the environment. There is no
ADMIN_PASSWORD_HASHorADMIN_SESSION_SECRET. - The first administrator can only be created from the local machine (
127.0.0.1/::1) whileNODE_ENVis notproduction. Setup is disabled in production and permanently closed once an administrator exists, so production onboarding is performed locally against the same database. - Sessions use a signed,
HttpOnlycookie (notlocalStorage/sessionStorage). The cookie lives for 8 hours, so refreshing the page and restarting the server keep you signed in until it expires; signing out clears the cookie. - The signing secret is a random per-administrator value stored in MongoDB, so it survives restarts and is never taken from the environment. Deleting the administrator record invalidates all outstanding sessions immediately.
- In production the backend is API-only; the admin page is served by the static frontend. The cookie uses
SameSite=None; Securethere (the frontend and API are different sites) andSameSite=Laxduring local development; override withADMIN_COOKIE_SAMESITE(Lax/Strict/None) if needed. - State-changing admin calls require a JSON body and pass the API's strict CORS/origin checks, which (together with the cookie's
HttpOnly/SameSiteattributes) mitigates CSRF. - Image uploads (Cloudinary). Projects can hold several uploaded images. Uploading requires three server-side variables on the API service —
CLOUDINARY_CLOUD_NAME,CLOUDINARY_API_KEYandCLOUDINARY_API_SECRET— plus the optionalCLOUDINARY_FOLDER(MEDIA_MAX_UPLOAD_BYTESandMEDIA_MAX_IMAGES_PER_PROJECTset the per-image and per-project caps). These values are read only by the backend and are never sent to the browser or committed; seebackend/.env.examplefor the annotated placeholders. When they are not set, uploads report that the image service is not configured and the editor's manual "Add image URL" fallback keeps working, so nothing else in the CMS is affected. Accepted formats are JPEG, PNG, WebP and GIF.
I'm Isaiah Adelowo, a Computer Science student passionate about web programming and creating digital experiences that matter.
- Frontend development with modern technologies
- Responsive and accessible web design
- User-centered UI/UX principles
- Clean, maintainable code
- Frontend: HTML5, CSS3, JavaScript (ES6+), React
- Tools: Git, VS Code, Figma, Chrome DevTools
- Design: UI/UX principles, wireframing, prototyping
- Email: kaoskonseptech@gmail.com
- Fiverr: https://www.fiverr.com/isaiahwebdev
- GitHub: https://github.com/KAOS-CODM
- Portfolio: https://isaiahwebdev.onrender.com
This project is open source and available under the MIT License.
⭐ If you like this project, please give it a star on GitHub!
Built with ❤️ by Isaiah Adelowo