This repository contains the source code for my personal portfolio website, built as a "Professional Competency Platform" to showcase my skills in Physics, Chemistry, Computer Science, and Engineering.
The site is designed to be interactive, performant, and easily updatable with new projects and case studies.
The repository in a structure to keep it clean
mywebsite/
├── assets/ # All static assets (CSS, JS, images, 3D models)
│ ├── css/
│ ├── js/
│ ├── images/
│ └── models/
│
├── projects/ # All individual project case study pages
│ └── project-template.html
│
├── index.html # The main landing page
└── README.md # This guide
Follow these steps to add a new project to the portfolio.
- In the
/projectsdirectory, make a copy ofproject-template.html. - Rename the copied file to match your new project (e.g.,
my-new-project.html). Use lowercase and hyphens for the file name.
Open your new HTML file (my-new-project.html) and update the following sections:
<title>: Change the page title in the<head>.- Header (
.project-header):- Update the
<h1>with your project's title. - Update the
<p>with the one-line summary. - Fill out the
.specs-boxwith the correct Role, Tech Stack, etc.
- Update the
- A.R.C. Tabs:
- Approach Tab: Update the problem statement and the
vis-timelinedata in the JavaScript section at the bottom of the file if needed. - Realization Tab: Update the code snippets in the
<pre><code class="language-cpp">...</code></pre>blocks. Make sure to specify the correct language for syntax highlighting (e.g.,language-python). - Conclusion Tab: Update the "Stat Cards" and your personal reflection.
- Approach Tab: Update the problem statement and the
-
Open
index.htmlat the root of the project. -
Find the
.projectssection. -
Copy an existing
.project-cardblock and paste it to create a new card. -
Update the content of the new card (title, description, tags).
-
Crucially, update the link at the bottom of the card to point to your new project file:
<!-- Example link for your new project card --> <a href="projects/my-new-project.html" class="full-case-study-link">View Full Case Study →</a>
Commit the new project file and the updated index.html to your GitHub repository. The changes will go live automatically.