From 9fcc3a110da4c328d9897cebf07ef0cdb338e92f Mon Sep 17 00:00:00 2001 From: Tony Kimani Date: Thu, 12 Mar 2026 00:57:02 +0800 Subject: [PATCH 1/2] new files --- portfolio-website--from-Alexa- | 1 + 1 file changed, 1 insertion(+) create mode 160000 portfolio-website--from-Alexa- diff --git a/portfolio-website--from-Alexa- b/portfolio-website--from-Alexa- new file mode 160000 index 000000000..51b1f90bf --- /dev/null +++ b/portfolio-website--from-Alexa- @@ -0,0 +1 @@ +Subproject commit 51b1f90bf129025f8a50bcab8401275678f47d56 From f71a31276eae30873d42a8bf12395de50db42cbf Mon Sep 17 00:00:00 2001 From: Tony Kimani Date: Thu, 12 Mar 2026 17:36:15 +0800 Subject: [PATCH 2/2] Polish portfolio layout with richer sections and media placeholders --- assets/css/styles.css | 448 +++++++++++++++++++++++++++++------------- assets/js/main.js | 99 ++++++---- index.html | 270 +++++++++++++++++-------- 3 files changed, 552 insertions(+), 265 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 8a6bf02e9..a11fac3db 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,85 +1,40 @@ -/*==================== GOOGLE FONTS ====================*/ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); -/*==================== VARIABLES CSS ====================*/ :root { - --header-height: 3rem; - - /*========== Colors ==========*/ - /* Change favorite color */ - --hue-color: 250; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/ - - /* HSL color mode */ - --first-color: hsl(var(--hue-color), 69%, 61%); - --first-color-second: hsl(var(--hue-color), 69%, 61%); - --first-color-alt: hsl(var(--hue-color), 57%, 53%); - --first-color-lighter: hsl(var(--hue-color), 92%, 85%); - --title-color: hsl(var(--hue-color), 8%, 15%); - --text-color: hsl(var(--hue-color), 8%, 45%); - --text-color-light: hsl(var(--hue-color), 8%, 65%); - --input-color: hsl(var(--hue-color), 70%, 96%); - --body-color: hsl(var(--hue-color), 60%, 99%); - --container-color: #fff; - --scroll-bar-color: hsl(var(--hue-color), 12%, 90%); - --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%); - - /*========== Font and typography ==========*/ - --body-font: 'Poppins', sans-serif; - - /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */ - --big-font-size: 2rem; - --h1-font-size: 1.5rem; - --h2-font-size: 1.25rem; - --h3-font-size: 1.125rem; - --normal-font-size: .938rem; - --small-font-size: .813rem; - --smaller-font-size: .75rem; - - /*========== Font weight ==========*/ - --font-medium: 500; - --font-semi-bold: 600; - - /*========== Margenes Bottom ==========*/ - /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */ - --mb-0-25: .25rem; - --mb-0-5: .5rem; - --mb-0-75: .75rem; - --mb-1: 1rem; - --mb-1-5: 1.5rem; - --mb-2: 2rem; - --mb-2-5: 2.5rem; - --mb-3: 3rem; - - /*========== z index ==========*/ - --z-tooltip: 10; - --z-fixed: 100; - --z-modal: 1000; -} - -/* Font size for large devices */ -@media screen and (min-width: 968px) { - :root { - --big-font-size: 3rem; - --h1-font-size: 2.25rem; - --h2-font-size: 1.5rem; - --h3-font-size: 1.25rem; - --normal-font-size: 1rem; - --small-font-size: .875rem; - --smaller-font-size: .813rem; - } -} - -/*========== Variables Dark theme ==========*/ - - -/*========== Button Dark/Light ==========*/ - - -/*==================== BASE ====================*/ + --header-height: 4.25rem; + + --color-primary: #1d4ed8; + --color-primary-dark: #1e40af; + --color-primary-soft: #dbeafe; + --color-title: #0f172a; + --color-text: #334155; + --color-muted: #64748b; + --color-bg: #f8fbff; + --color-surface: #ffffff; + --color-border: #dbe3f0; + + --font-body: "Inter", sans-serif; + + --h1: clamp(2rem, 4.8vw, 3.6rem); + --h2: clamp(1.5rem, 2.2vw, 2.2rem); + --h3: 1.1rem; + + --space-1: 0.5rem; + --space-2: 1rem; + --space-3: 1.5rem; + --space-4: 2rem; + --space-5: 3rem; + --space-6: 5rem; + + --radius-sm: 0.6rem; + --radius-md: 0.95rem; + --shadow-soft: 0 14px 30px rgba(30, 64, 175, 0.08); +} + * { box-sizing: border-box; - padding: 0; margin: 0; + padding: 0; } html { @@ -87,135 +42,348 @@ html { } body { - margin: 0 0 var(--header-height) 0; - font-family: var(--body-font); - font-size: var(--normal-font-size); - background-color: var(--body-color); - color: var(--text-color); + font-family: var(--font-body); + color: var(--color-text); + background: radial-gradient(circle at 80% -10%, #e6efff 0%, var(--color-bg) 35%), var(--color-bg); + line-height: 1.75; } -h1, h2, h3, h4 { - color: var(--title-color); - font-weight: var(--font-semi-bold); +img { + max-width: 100%; + display: block; +} + +a { + color: inherit; + text-decoration: none; } ul { list-style: none; } -a { - text-decoration: none; +.container { + width: min(1100px, calc(100% - 2.5rem)); + margin-inline: auto; } -img { - max-width: 100%; - height: auto; +.narrow { + width: min(760px, 100%); } -/*==================== REUSABLE CSS CLASSES ====================*/ .section { - padding: 2rem 0 4rem; + padding: var(--space-6) 0; +} + +.section__label { + font-size: 0.78rem; + font-weight: 700; + color: var(--color-primary); + text-transform: uppercase; + letter-spacing: 0.13em; + margin-bottom: var(--space-1); } .section__title { - font-size: var(--h1-font-size); - color: var(--title-color); + font-size: var(--h2); + color: var(--color-title); + letter-spacing: -0.02em; + margin-bottom: var(--space-3); } -.section__subtitle { - display: block; - font-size: var(--small-font-size); - margin-bottom: var(--mb-3); +.section__text { + margin-bottom: var(--space-3); } -.section__title, -.section__subtitle { +.center { text-align: center; } -/*==================== LAYOUT ====================*/ -.container { - max-width: 768px; - margin-left: var(--mb-1-5); - margin-right: var(--mb-1-5); +.header { + position: sticky; + top: 0; + z-index: 30; + border-bottom: 1px solid var(--color-border); + background: rgba(248, 251, 255, 0.95); + backdrop-filter: blur(12px); } -.grid { - display: grid; - gap: 1.5rem; +.header.shadow { + box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } -.header { - width: 100%; - position: fixed; - bottom: 0; - left: 0; - z-index: var(--z-fixed); - background-color: var(--body-color); +.nav { + height: var(--header-height); + display: flex; + align-items: center; + justify-content: space-between; } -/*==================== NAV ====================*/ - - -/* show menu */ +.nav__logo { + font-weight: 800; + color: var(--color-title); + letter-spacing: -0.02em; +} +.nav__toggle { + border: 1px solid var(--color-border); + background: var(--color-surface); + color: var(--color-title); + padding: 0.35rem 0.62rem; + border-radius: var(--radius-sm); + cursor: pointer; +} -/* Active link */ +.nav__menu { + position: fixed; + inset: var(--header-height) 0 auto 0; + background: var(--color-surface); + border-bottom: 1px solid var(--color-border); + transform: translateY(-125%); + transition: transform 0.25s ease; +} +.nav__menu.show-menu { + transform: translateY(0); +} -/* Change background header */ +.nav__list { + padding: 1.2rem; + display: grid; + gap: 0.95rem; +} +.nav__link { + font-weight: 500; + color: var(--color-muted); +} -/*==================== HOME ====================*/ +.nav__link.active-link, +.nav__link:hover { + color: var(--color-primary); +} +.hero { + padding-top: calc(var(--space-6) + 0.75rem); +} -/*==================== BUTTONS ====================*/ +.hero__grid { + display: grid; + gap: var(--space-4); + align-items: start; +} +.hero__content { + width: min(700px, 100%); +} -/*==================== ABOUT ====================*/ +.hero__eyebrow { + color: var(--color-primary); + font-weight: 700; + margin-bottom: var(--space-2); +} +.hero__title { + color: var(--color-title); + font-size: var(--h1); + line-height: 1.12; + letter-spacing: -0.03em; +} -/*==================== SKILLS ====================*/ +.hero__subtitle { + margin-top: 0.5rem; + font-size: clamp(1.05rem, 2.4vw, 1.45rem); + color: var(--color-muted); + font-weight: 500; +} +.hero__description { + margin-top: var(--space-2); + max-width: 63ch; +} -/*==================== QUALIFICATION ====================*/ +.hero__actions { + margin-top: var(--space-4); + display: flex; + gap: 0.9rem; + flex-wrap: wrap; +} +.hero__meta { + margin-top: var(--space-4); + display: grid; + gap: 0.55rem; + color: var(--color-muted); +} -/*==================== SERVICES ====================*/ +.hero__meta strong { + color: var(--color-title); +} +.button { + display: inline-block; + border: 1px solid transparent; + background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); + color: #fff; + padding: 0.72rem 1.15rem; + border-radius: var(--radius-sm); + font-weight: 600; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} -/* Active Modal */ +.button:hover { + transform: translateY(-2px); + box-shadow: 0 10px 16px rgba(30, 64, 175, 0.2); +} +.button--ghost { + background: transparent; + color: var(--color-primary-dark); + border-color: var(--color-primary-soft); +} -/*==================== PORTFOLIO ====================*/ +.button--ghost:hover { + background: var(--color-primary-soft); + box-shadow: none; +} +.card { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-soft); + padding: var(--space-3); +} -/*==================== PROJECT IN MIND ====================*/ +.card__title { + color: var(--color-title); + font-size: var(--h3); + margin-bottom: var(--space-2); +} +.card__list { + display: grid; + gap: 0.5rem; +} -/*==================== TESTIMONIAL ====================*/ +.skills__grid, +.projects__grid { + display: grid; + gap: var(--space-3); +} +.image-placeholder { + width: 100%; + border: 1px dashed #9db6ed; + border-radius: var(--radius-sm); + background: linear-gradient(180deg, #f5f9ff, #edf4ff); + display: grid; + place-items: center; + color: var(--color-muted); + text-align: center; + padding: var(--space-2); +} -/*==================== CONTACT ME ====================*/ +.image-placeholder p { + font-size: 0.9rem; +} +.image-placeholder--profile { + aspect-ratio: 4 / 5; + max-width: 260px; + margin-inline: auto; +} -/*==================== FOOTER ====================*/ +.image-placeholder--project { + aspect-ratio: 16 / 10; + margin-bottom: var(--space-2); +} +.hero__profile { + display: grid; + gap: var(--space-2); +} -/*========== SCROLL UP ==========*/ +.hero__profile-text { + font-size: 0.9rem; + color: var(--color-muted); +} +.project__description { + margin-bottom: var(--space-2); +} -/* Show scroll */ +.project__link { + color: var(--color-primary); + font-weight: 600; + font-size: 0.95rem; +} +.project__link:hover { + text-decoration: underline; +} -/*========== SCROLL BAR ==========*/ +.contact__links { + margin-top: var(--space-3); + display: grid; + gap: 0.8rem; + justify-items: start; +} +.contact__links a { + color: var(--color-primary-dark); + font-weight: 500; +} -/*==================== MEDIA QUERIES ====================*/ -/* For small devices */ +.contact__links a:hover { + text-decoration: underline; +} +.contact__hint { + margin-top: var(--space-2); + color: var(--color-muted); + font-size: 0.92rem; + text-align: center; +} -/* For medium devices */ +.footer { + border-top: 1px solid var(--color-border); + background: var(--color-surface); +} +.footer__content { + padding: var(--space-3) 0; + display: grid; + gap: 0.15rem; + color: var(--color-muted); + text-align: center; +} -/* For large devices */ +@media screen and (min-width: 768px) { + .nav__toggle { + display: none; + } + + .nav__menu { + all: unset; + } + + .nav__list { + padding: 0; + display: flex; + align-items: center; + gap: 1.5rem; + } + + .hero__grid { + grid-template-columns: 1.3fr 0.9fr; + } + + .skills__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .projects__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} diff --git a/assets/js/main.js b/assets/js/main.js index 303db3cc5..6f7e66cd7 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,39 +1,60 @@ -/*==================== MENU SHOW Y HIDDEN ====================*/ - - -/*===== MENU SHOW =====*/ -/* Validate if constant exists */ - - -/*===== MENU HIDDEN =====*/ -/* Validate if constant exists */ - - -/*==================== REMOVE MENU MOBILE ====================*/ - - -/*==================== ACCORDION SKILLS ====================*/ - - -/*==================== QUALIFICATION TABS ====================*/ - - -/*==================== SERVICES MODAL ====================*/ - - -/*==================== PORTFOLIO SWIPER ====================*/ - - -/*==================== TESTIMONIAL ====================*/ - - -/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/ - - -/*==================== CHANGE BACKGROUND HEADER ====================*/ - - -/*==================== SHOW SCROLL UP ====================*/ - - -/*==================== DARK LIGHT THEME ====================*/ \ No newline at end of file +const navMenu = document.getElementById('nav-menu'); +const navToggle = document.getElementById('nav-toggle'); +const navLinks = document.querySelectorAll('.nav__link'); +const sections = document.querySelectorAll('main section[id]'); +const yearSpan = document.getElementById('year'); +const header = document.getElementById('header'); + +if (navToggle && navMenu) { + navToggle.addEventListener('click', () => { + navMenu.classList.toggle('show-menu'); + }); +} + +navLinks.forEach((link) => { + link.addEventListener('click', () => { + navMenu?.classList.remove('show-menu'); + }); +}); + +function updateActiveLink() { + const scrollY = window.scrollY + 140; + + sections.forEach((section) => { + const sectionHeight = section.offsetHeight; + const sectionTop = section.offsetTop; + const sectionId = section.getAttribute('id'); + const targetLink = document.querySelector(`.nav__menu a[href*="${sectionId}"]`); + + if (!targetLink) return; + + if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { + targetLink.classList.add('active-link'); + } else { + targetLink.classList.remove('active-link'); + } + }); +} + +function updateHeaderShadow() { + if (!header) return; + if (window.scrollY > 12) { + header.classList.add('shadow'); + } else { + header.classList.remove('shadow'); + } +} + +window.addEventListener('scroll', () => { + updateActiveLink(); + updateHeaderShadow(); +}); + +window.addEventListener('load', () => { + updateActiveLink(); + updateHeaderShadow(); +}); + +if (yearSpan) { + yearSpan.textContent = new Date().getFullYear(); +} diff --git a/index.html b/index.html index 2c2e862eb..c0f012d38 100644 --- a/index.html +++ b/index.html @@ -1,86 +1,184 @@ - - - - - - - - - - - - - - - - Responsive Portfolio Website - - - - - - -
- -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
-
- - -
- -
- - - - - - - - - - - + + + + + + + Tony Kimani | Portfolio + + + + + + +
+
+
+
+

Aerospace Engineering Graduate

+

Tony Kimani

+

Aspiring Full Stack Developer

+

+ Building clean, practical web applications while transitioning from engineering into software development. +

+ +
+ View Projects + Contact Me +
+ +
    +
  • Focus: Full Stack Fundamentals
    • +
  • Current Track: Python + Web Development
    • +
+
+ + +
+
+ +
+
+

Overview

+

About Me

+

+ I am an Aerospace Engineering graduate with a strong interest in technology, problem-solving, and building practical digital solutions. As I transition into software development, I am focusing on full stack web development and strengthening my skills in Python, web technologies, and modern development workflows. +

+

+ My engineering background has helped me develop analytical thinking, discipline, and a structured approach to solving problems. I am now applying those same strengths to software development by building projects, learning continuously, and creating user-focused applications. +

+
+
+ +
+
+

Capabilities

+

Skills

+ +
+
+

Development

+
    +
  • Python
    • +
  • Git
    • +
  • GitHub
    • +
  • Codex
    • +
+
+ +
+

Engineering Tools

+
    +
  • CFD
    • +
  • SolidWorks
    • +
  • GasTurb
    • +
+
+ +
+

Additional

+
    +
  • SEO
    • +
+
+
+
+
+ +
+
+

Selected Work

+

Projects

+ +
+
+
+

Project screenshot placeholder

+
+

Poker Game in Python

+

+ A Python-based game project focused on logic, rules handling, and clean command-flow implementation. +

+ Add project link ↗ +
+ +
+
+

Project screenshot placeholder

+
+

Personal Portfolio Website

+

+ A clean, responsive portfolio website to present my profile, skills, and projects in a professional format. +

+ Add project link ↗ +
+ +
+
+

Project screenshot placeholder

+
+

Wardrobe Web App

+

+ A practical web app concept for organizing outfits and clothing items with a user-focused experience. +

+ Add project link ↗ +
+
+
+
+ +
+
+

Get In Touch

+

Contact

+

+ I am open to internship and junior developer opportunities, collaboration, and tech conversations. +

+ +
+ Email: toniekimngash@gmail.com + GitHub: TonyKimani-eng + LinkedIn: tonykimaninganga +
+ +

You can add more contact links by duplicating an anchor inside this contact card.

+
+
+
+ +
+
+

© Tony Kimani

+

Built with clarity, consistency, and continuous learning.

+
+
+ + + +