Portfolio Website Redesign

Before, the home page sat beside a fixed left sidebar of six links and opened on a typewriter headline, the phone number and email, three recent projects shown as covers and titles, three tools, and an oversized Let's Connect! sign-off. After, the sidebar becomes a top bar with the project count beside Projects. The page opens on the name, a short introduction, an interactive portrait card and four headline facts, then walks through the design thinking model, the nine web application and platform case studies as full cards, a rail of every project cover, the career record and a closing contact strip. The design thinking frames are shown together on this board; on the live page they play one after another as the visitor scrolls.

⤢ Enlarge

Before, the projects page was one grid of 29 covers, each with a category label and a title, and 24 of those labels read WEB DESIGN, so the label told a reviewer almost nothing. After, the page opens with a count and a filter, then splits the work into two named groups, Web Applications & Platforms and Web & Brand Design, each with its own count. Application cards carry two descriptors over the cover, the role, platform and industry, a one-sentence description, the tools, the client and the timeline; web and brand cards carry a descriptor, the category and the main tags.

⤢ Enlarge

Before, the Smart Forest page was one continuous column of text and process boards, 50,321 pixels tall at a 1440px desktop width; the board shows its first 5,000. After, the same project opens on its Overview & Impact tab with three highlights, a short summary, the problem, the key design decisions, the outcomes table and what was learned, in the same order on every case study. The process boards move to the Design Process & Workflow tab, where each step has its own heading and every board opens full-screen.

⤢ Enlarge

Before, a web and brand project page held a cover, one board and a short description: 17 of the 20 pages carried fewer than 70 words of text, and 13 of them used the same sentence about building a company profile for Google Ads and SEO. After, every web and brand project uses the same template as the application case studies, written around the usability heuristics: three highlights named after the heuristics they serve, the usability gaps, the design decisions with the heuristic each one answers, a before-and-after table and the design learnings, with the boards in the Design Process tab.

⤢ Enlarge

Before, the about page was a paragraph of introduction, the phone number and email, a list of job titles with dates, the education and courses, and a short paragraph about tools. After, it opens on a one-line design philosophy and a short introduction, then a portrait carousel beside a note on how an architecture background shapes the work, the four-step methodology drawn as an animated helix, and the career record as cards with the role, the dates and what was designed, followed by the education, the courses and the contact strip.

⤢ Enlarge

Before, the stack page listed twelve tools one after another, each with a paragraph of description. After, the tools are grouped by stage of work, design, AI-assisted workflow, research and testing, and collaboration and development, and each carries a short line on what it is used for and a tag for how often or how deeply it is used.

⤢ Enlarge

Before, contact was its own page with a message form, the email, the phone number and three social links, and the navigation included a Licensing page carried over from the template, crediting the icon set, the fonts and the stock photography. After, contact opens as a panel over whatever page the visitor is on, with copy buttons for the email and phone number, links to LINE, LinkedIn and Facebook, and the resume one click away; closing it returns the visitor to the same place. The resume opens the same way and prints to PDF. The licensing page is no longer part of the navigation.

⤢ Enlarge

At 390px, the earlier pages stacked into the same single column with a Made in Framer badge floating over the content, and the Smart Forest case study ran from its cover straight into long paragraphs. The rebuilt pages collapse the navigation into a menu button and reach the name and introduction, the projects filter, or the case-study highlights within the first screen.

⤢ Enlarge