+
+
+
+
+
+
\ No newline at end of file
diff --git a/blogs/mantou-craving-for-food.html b/blogs/mantou-craving-for-food.html
new file mode 100644
index 000000000..db154c7a6
--- /dev/null
+++ b/blogs/mantou-craving-for-food.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ Mantou's Craving for Food
+
+
+
+
+
+
+
+
Mantou's Craving for Food
+
Published on: 2024-10-21
+
+
Mantou is a glutton who uses his big, watery eyes to beg for food—no one can resist him. He even stands up when he knows I'm grabbing food for him. His cuteness is absolutely irresistible!
+
Here's a photo of him looking so adorable, I couldn't resist snapping it while he begged for his favorite treat. Mantou has a way of stealing hearts with his eyes!
Look at this gorgeous lady! Tiffany keeps sending me pictures of the Ragdoll cat to show off. It's not even hers—it's her cousin's cat, and she's just taking care of it while they're away.
+
Despite not being her cat, Tiffany has formed a special bond with this fluffy beauty, and she can't stop sending me the cutest pictures. I had to share this one!
+
+
+
+
\ No newline at end of file
diff --git a/images/craving.jpg b/images/craving.jpg
new file mode 100644
index 000000000..16762dbdc
Binary files /dev/null and b/images/craving.jpg differ
diff --git a/images/ragdoll.jpg b/images/ragdoll.jpg
new file mode 100644
index 000000000..6f78bf316
Binary files /dev/null and b/images/ragdoll.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..2697c2e77
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+
+
+
+ Personal Website
+
+
+
+
+
+
About Me!
+
+
+
+
+ My name is Sabrina Huang. My pronouns are she/her.
+
+ I'm a
+ second year Software Engineering student.
+
+ (This is a picture of Mantou, not a picture of me. :D)
+
+
+
+
+
+
+
diff --git a/mantou.jpg b/mantou.jpg
new file mode 100644
index 000000000..38a16cf60
Binary files /dev/null and b/mantou.jpg differ
diff --git a/p_project1.jpg b/p_project1.jpg
new file mode 100644
index 000000000..b8e2c97ca
Binary files /dev/null and b/p_project1.jpg differ
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..7ff7bd263
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,28 @@
+{
+ "name": "bootcamp-project-2024",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "bootcamp-project-2024",
+ "version": "1.0.0",
+ "license": "ISC",
+ "dependencies": {
+ "typescript": "^5.7.2"
+ }
+ },
+ "node_modules/typescript": {
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+ "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=14.17"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..bc724af56
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "bootcamp-project-2024",
+ "version": "1.0.0",
+ "description": "This is how we will be tracking your milestones throughout bootcamp! By the end of bootcamp, you will have a fullstack personal portfolio website.",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "typescript": "^5.7.2"
+ }
+}
diff --git a/portfolio.html b/portfolio.html
new file mode 100644
index 000000000..f39a04a5a
--- /dev/null
+++ b/portfolio.html
@@ -0,0 +1,37 @@
+
+
+
+ Personal Webpage
+
+
+
+
+
+
California Polytechnic State University, San Luis Obispo | Expected Graduation June 2026
+
Relevant Coursework: Data Structure, Algorithms, Systems Programming, Discrete Structures, Computer Organization, Project-Based Object-Oriented and Design, Software Engineering, Database Systems
+
+
+
+
Experience
+
+
Compal Electronics, Inc.
+
Software Engineer Intern | June 2024 - September 2024
+
+
Performed OS installations, driver setups, and system performance tests using 3DMark and PCMark.
+
Managed SPI ROM programming and flashing, and conducted BIOS and basic function tests.
+
Developed a tool to analyze log files, extract essential information about common features, and generate organized tables displaying feature statuses, improving system diagnostics and reporting.
+
+
+
+
Dandilyonn
+
Mobile App Development Intern | June 2023 - August 2023
+
+
Led development of mobile iOS application that tracks food and expiration dates in the user’s fridge and syncs with an interactive grocery shopping list.
+
Created and integrated push notification functionality for duplicate food items.
+
+
+
+
UTechzone Co., Ltd
+
Software Engineering Intern in R&D Division | Summer 2021
+
+
Implemented a program to analyze, sort, and organize images into different files for quality control of chips.
+
Contributed to team meetings and acquired knowledge on the functionality of Automatic Optical Inspection systems.
+
+
+
+
+
CS Projects
+
+
Uncluttered
+
Task Management Application
+
Designed and implemented a task management application that allows users to organize tasks into a schedule, with functionalities including time slot allocation based on due dates and categorization by subject.
+
+
+
K-Pop Database
+
Web Application using SQL
+
Utilized SQL to create a comprehensive and dynamic web application that caters to music enthusiasts, providing a rich experience and staying up-to-date with the latest industry developments.
+
+
+
Virtual World
+
Virtual World Development in Java
+
Developed a virtual world with interactive elements and created characters with automated action items.
+
+
+
+
Activities
+
+
Women Involved in Software & Hardware
+
Mentorship Director | September 2022 - Present
+
Lead the mentorship program, run networking events, and organize mentor-mentee pairings for women in STEM.
+
+
+
Hack4Impact
+
Associate Director of Design | September 2023 – Present
+
Designed a user-friendly web application for Paso-Robles Food Co-op and provided software solutions to nonprofit organizations.
+
+
+
Dandilyonn SEEDS Program
+
Mentor | June 2024 – August 2024
+
Mentored participants in Design Thinking, guided them through design prototype creation, task and project management, and React-Native learning.
+
+
+
+
Skills
+
+
Java
+
Python
+
Assembly
+
C
+
HTML
+
CSS
+
JavaScript
+
React
+
SQL
+
MongoDB
+
Figma
+
+
+
+
Languages
+
+
English (native)
+
Mandarin (native)
+
Taiwanese (native)
+
Japanese (elementary)
+
+
+
+
Interests
+
+
Choir
+
Mountain Climbing
+
Traveling
+
Music
+
Ice Skating
+
Taekwondo
+
+
+
+
+
+
+
diff --git a/resume.pdf b/resume.pdf
new file mode 100644
index 000000000..730cd64d9
Binary files /dev/null and b/resume.pdf differ
diff --git a/src/blog.js b/src/blog.js
new file mode 100644
index 000000000..eb759a094
--- /dev/null
+++ b/src/blog.js
@@ -0,0 +1,41 @@
+var blogs = [
+ {
+ title: "Mantou's Craving for Food",
+ date: "2024-10-21",
+ description: "Mantou is a glutton who uses his big, watery eyes to beg for food—no one can resist him. He even stands up when he knows I'm grabbing food for him.",
+ image: "./images/craving.jpg",
+ imageAlt: "Mantou looking eagerly at the food with big watery eyes",
+ slug: "mantou-craving-for-food",
+ },
+ {
+ title: "Tiffany's Adventures in Cat Sitting",
+ date: "2024-10-21",
+ description: "Look at this gorgeous lady! Tiffany keeps sending me pictures of the Ragdoll cat to show off. It's not even hers—it's her cousin's cat, and she's just taking care of it while they're away.",
+ image: "./images/ragdoll.jpg",
+ imageAlt: "A beautiful Ragdoll cat, taken care of by Tiffany for her cousin.",
+ slug: "ragdoll-pic-from-tiff",
+ },
+];
+var blogContainer = document.getElementById("blog-container");
+blogs.forEach(function (blog) {
+ var blogDiv = document.createElement("div");
+ blogDiv.classList.add("blog-post");
+ var blogTitle = document.createElement("h2");
+ blogTitle.innerText = blog.title;
+ var blogDate = document.createElement("p");
+ blogDate.innerText = "Published on: ".concat(blog.date);
+ var blogDescription = document.createElement("p");
+ blogDescription.innerText = blog.description;
+ var blogImage = document.createElement("img");
+ blogImage.src = blog.image;
+ blogImage.alt = blog.imageAlt;
+ var blogLink = document.createElement("a");
+ blogLink.href = "blogs/".concat(blog.slug, ".html");
+ blogLink.innerText = "Read more";
+ blogDiv.appendChild(blogTitle);
+ blogDiv.appendChild(blogDate);
+ blogDiv.appendChild(blogImage);
+ blogDiv.appendChild(blogDescription);
+ blogDiv.appendChild(blogLink);
+ blogContainer === null || blogContainer === void 0 ? void 0 : blogContainer.appendChild(blogDiv);
+});
diff --git a/src/blog.ts b/src/blog.ts
new file mode 100644
index 000000000..ecf456ec9
--- /dev/null
+++ b/src/blog.ts
@@ -0,0 +1,60 @@
+type Blog = {
+ title: string;
+ date: string;
+ description: string;
+ image: string;
+ imageAlt: string;
+ slug: string;
+ };
+
+ const blogs: Blog[] = [
+ {
+ title: "Mantou's Craving for Food",
+ date: "2024-10-21",
+ description: "Mantou is a glutton who uses his big, watery eyes to beg for food—no one can resist him. He even stands up when he knows I'm grabbing food for him.",
+ image: "./images/craving.jpg",
+ imageAlt: "Mantou looking eagerly at the food with big watery eyes",
+ slug: "mantou-craving-for-food",
+ },
+ {
+ title: "Tiffany's Adventures in Cat Sitting",
+ date: "2024-10-21",
+ description: "Look at this gorgeous lady! Tiffany keeps sending me pictures of the Ragdoll cat to show off. It's not even hers—it's her cousin's cat, and she's just taking care of it while they're away.",
+ image: "./images/ragdoll.jpg",
+ imageAlt: "A beautiful Ragdoll cat, taken care of by Tiffany for her cousin.",
+ slug: "ragdoll-pic-from-tiff",
+ },
+ ];
+
+ const blogContainer = document.getElementById("blog-container");
+
+ blogs.forEach(blog => {
+ const blogDiv = document.createElement("div");
+ blogDiv.classList.add("blog-post");
+
+ const blogTitle = document.createElement("h2");
+ blogTitle.innerText = blog.title;
+
+ const blogDate = document.createElement("p");
+ blogDate.innerText = `Published on: ${blog.date}`;
+
+ const blogDescription = document.createElement("p");
+ blogDescription.innerText = blog.description;
+
+ const blogImage = document.createElement("img");
+ blogImage.src = blog.image;
+ blogImage.alt = blog.imageAlt;
+
+ const blogLink = document.createElement("a");
+ blogLink.href = `blogs/${blog.slug}.html`;
+ blogLink.innerText = "Read more";
+
+ blogDiv.appendChild(blogTitle);
+ blogDiv.appendChild(blogDate);
+ blogDiv.appendChild(blogImage);
+ blogDiv.appendChild(blogDescription);
+ blogDiv.appendChild(blogLink);
+
+ blogContainer?.appendChild(blogDiv);
+ });
+
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000..c1866cc06
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,123 @@
+html {
+ height: 100%;
+ font-family: Nunito, sans-serif;
+}
+
+body {
+ background-color: rgba(55, 173, 189, 0.265);
+ position: relative;
+ min-height: 100vh;
+ padding: 0;
+ margin: 0;
+}
+
+main {
+ padding: 0 20px 40px 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+div.about-text {
+ font-size: 1.1em;
+ text-align: center;
+}
+
+.about,
+.about-image img {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+label {
+ display: block;
+ margin-bottom: 8px;
+ font-weight: bold;
+}
+
+input[type="text"],
+input[type="email"],
+textarea {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 15px;
+ font-size: 16px;
+ resize: none;
+}
+
+.navbar {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 0;
+ width: 100%;
+ height: 7%;
+ z-index: 10;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ text-align: center;
+
+ background-color: rgb(26, 124, 137);
+ color: white;
+ padding: 0px 0px;
+}
+
+.nav-list {
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ right: 30px;
+ list-style: none;
+}
+
+.navbar a {
+ color: white;
+ font-weight: bold;
+ margin: 0 12px;
+ text-decoration: none;
+ letter-spacing: 2px;
+}
+
+.nav-list a:hover {
+ color: rgb(245, 192, 32);
+ text-decoration: underline;
+}
+
+.nav-list a:active {
+ color: rgb(245, 192, 32);
+}
+
+.footer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgb(26, 124, 137);
+ color: white;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 2.5rem;
+}
+
+.blog-post img {
+ width: 100%;
+ max-width: 500px;
+ height: auto;
+ display: block;
+ margin-bottom: 20px;
+}
+
+.blog-post {
+ margin-bottom: 40px;
+}
+
+.blog-post:last-child {
+ margin-bottom: 40px;
+}
+
+#blog-container {
+ margin-bottom: 40px;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..c9c555d96
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,111 @@
+{
+ "compilerOptions": {
+ /* Visit https://aka.ms/tsconfig to read more about this file */
+
+ /* Projects */
+ // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+ // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
+ // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
+ // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
+ // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
+ // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
+
+ /* Language and Environment */
+ "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+ // "jsx": "preserve", /* Specify what JSX code is generated. */
+ // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
+ // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
+ // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+ // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+ // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+ // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+ // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
+ // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
+ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
+
+ /* Modules */
+ "module": "commonjs", /* Specify what module code is generated. */
+ // "rootDir": "./", /* Specify the root folder within your source files. */
+ // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
+ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
+ // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
+ // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
+ // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
+ // "types": [], /* Specify type package names to be included without being referenced in a source file. */
+ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
+ // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
+ // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+ // "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
+ // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
+ // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
+ // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+ // "noUncheckedSideEffectImports": true, /* Check side effect imports. */
+ // "resolveJsonModule": true, /* Enable importing .json files. */
+ // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
+ // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */
+
+ /* JavaScript Support */
+ // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+ // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
+ // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+ /* Emit */
+ // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+ // "declarationMap": true, /* Create sourcemaps for d.ts files. */
+ // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
+ // "sourceMap": true, /* Create source map files for emitted JavaScript files. */
+ // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
+ // "noEmit": true, /* Disable emitting files from a compilation. */
+ // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+ // "outDir": "./", /* Specify an output folder for all emitted files. */
+ // "removeComments": true, /* Disable emitting comments. */
+ // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+ // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+ // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
+ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
+ // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
+ // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+ // "newLine": "crlf", /* Set the newline character for emitting files. */
+ // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+ // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
+ // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
+ // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
+ // "declarationDir": "./", /* Specify the output directory for generated declaration files. */
+
+ /* Interop Constraints */
+ // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
+ // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+ // "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+ // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
+ "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+ // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+ "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
+
+ /* Type Checking */
+ "strict": true, /* Enable all strict type-checking options. */
+ // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+ // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
+ // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+ // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+ // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
+ // "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
+ // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
+ // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
+ // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
+ // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
+ // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
+ // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
+ // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
+ // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
+ // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
+ // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
+ // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
+ // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
+ // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
+
+ /* Completeness */
+ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
+ "skipLibCheck": true /* Skip type checking all .d.ts files. */
+ }
+}
+ 
+ 
