+ {blog.title} +
+{blog.date}
+{blog.description}
+ + Read more + +The Goat Groot
+2024-10-18
+Here is my favorite marvel Character
+2024-10-18
+Here is my favorite marvel Character
+2024-10-20
+Learning about TypeScript and its power T-T
+{blog.date}
+{blog.description}
+ + Read more + +
+ + I'm Anthony Mendoza, a passionate Computer Science major at + California Polytechnic State University, San Luis Obispo, set to + graduate in June 2026. With hands-on experience in software + development through personal projects, I enjoy tackling complex + problems, whether it's developing efficient algorithms or building + innovative systems. I have a strong foundation in Python, and web + development, and I'm always eager to learn new technologies. My goal + is to continue growing as a developer while contributing to + impactful projects that improve user experiences and solve + real-world challenges. +
+ + +No projects found. Please check back later!
+{project.description}
++ | (510)660-2461 |{" "} + + anthonymendoza321123@gmail.com + {" "} + |{" "} + + LinkedIn + {" "} + |{" "} + + GitHub + {" "} + | +
+
+ California Polytechnic State University – San
+ Luis Obispo, CA
+
+ Bachelor of Arts in Computer Science, June 2026
+
+ Mobile Technologies Inc. – Richmond, CA
+
+ June 2024 – Present
+
+ Languages: Java, Python, C, HTML/CSS, Assembly +
++ Frameworks: ArduPilot, Unity, React, Pytest, + JUnit +
++ Developer Tools: Git, VS Code, PyCharm, IntelliJ +
+Feel free to get in touch using the form below:
+ + + +
+ + I’m Anthony Mendoza, a passionate Computer Science major at + California Polytechnic State University, San Luis Obispo, set to + graduate in June 2026. With hands-on experience in software + development through personal projects, I enjoy tackling complex + problems, whether it's developing efficient algorithms or building + innovative systems. I have a strong foundation in Python, and web + development, and I'm always eager to learn new technologies. My goal + is to continue growing as a developer while contributing to + impactful projects that improve user experiences and solve + real-world challenges. +
+ + + ++ | (510)660-2461 | + anthonymendoza321123@gmail.com + | + LinkedIn + | + GitHub +
+
+ California Polytechnic State University – San Luis
+ Obispo, CA
Bachelor of Arts in Computer Science, June 2026
+
+ Mobile Technologies Inc. – Richmond, CA
June
+ 2024 – Present
+
Languages: Java, Python, C, HTML/CSS, Assembly
++ Frameworks: ArduPilot, Unity, React, Pytest, JUnit +
++ Developer Tools: Git, VS Code, PyCharm, IntelliJ +
+").concat(blog.date, "
\n").concat(blog.description, "
\n Read more\n "); + blogContainer.appendChild(blogElement); + }); +} +displayBlogs(blogs); diff --git a/src/blog.ts b/src/blog.ts new file mode 100644 index 000000000..5393f6289 --- /dev/null +++ b/src/blog.ts @@ -0,0 +1,55 @@ +// Blog type definition +type Blog = { + title: string; + date: string; + description: string; + image: string; + imageAlt: string; + slug: string; +}; + +// Example blog data +const blogs: Blog[] = [ + { + title: "Understanding TypeScript", + date: "2024-10-20", + description: "Learning about TypeScript and its power T-T", + image: "groot.jpg", + imageAlt: "My goat Groot", + slug: "typescript-understanding", + }, + { + title: "the-goat-groot", + date: "2024-10-18", + description: "my favoriite marvel character", + image: "goat.jpg", + imageAlt: "another goated pic of groot", + slug: "my-goat-groot", + }, +]; + +function displayBlogs(blogPosts: Blog[]) { + const blogContainer = document.getElementById("blog-posts-container"); + + if (!blogContainer) { + console.error("Blog container not found."); + return; + } + + blogPosts.forEach((blog) => { + const blogElement = document.createElement("article"); + blogElement.classList.add("blog-post"); + + blogElement.innerHTML = ` +${blog.date}
+${blog.description}
+ Read more + `; + + blogContainer.appendChild(blogElement); + }); +} + +displayBlogs(blogs); diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..dc7faaae0 --- /dev/null +++ b/styles.css @@ -0,0 +1,406 @@ +:root { + /* variables */ + --cg-black: rgb(18, 30, 30); + --cg-blue: rgb(16, 16, 28); + --cg-grey: rgb(99, 97, 97); + --cg-white: rgb(255, 255, 255); +} + +html { + height: 100%; + scroll-behavior: smooth; +} + +* { + box-sizing: border-box; /* Added for better layout handling */ +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; /* Ensures body takes full viewport height */ + background: var(--cg-grey); + padding: 0; + margin: 0; + font-family: monospace; +} + +main { + flex: 1; /* Makes the main content grow and push the footer down if necessary */ + padding: 0 20px 40px 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +/* CSS for the 'About Me' section */ +.about { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; + background-color: #f8f8f8; + border: 1px solid #ccc; + border-radius: 5px; + flex-direction: row-reverse; /* Keeps the image on the right */ +} + +.about-image img { + display: block; + margin: 20px auto; + max-width: 350px; /* Make the image smaller */ + height: auto; + border-radius: 5px; +} + +.about-text { + flex: 1; + margin-right: 20px; + font-size: 16px; + line-height: 1.5; +} +.about-text p { + margin-bottom: 20px; /* Ensure enough space below the paragraph */ +} + +.social-icons { + margin-top: 20px; + z-index: 2; /* Ensures icons are above background elements */ + text-align: center; /* Centers the icons horizontally */ +} + +.social-icons a { + margin: 0 10px; + font-size: 24px; + color: var(--cg-black); /* Icon color */ + text-decoration: none; + display: inline-block; /* Ensures icons are displayed properly */ + transition: color 0.3s; +} + +.social-icons a:hover { + color: var(--cg-blue); /* Change color on hover */ +} + +@media (max-width: 768px) { + .about { + flex-direction: column; /* Stack text and image vertically on smaller screens */ + text-align: center; + } + .about-text { + margin-right: 0; + margin-bottom: 20px; /* Add space below text */ + } +} + +/* CSS for navigation */ +.navbar { + 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: var(--cg-black); + color: var(--cg-white); + padding: 0; +} + +.nav-list { + display: flex; + flex-direction: row; + position: relative; + right: 30px; + list-style: none; +} + +@media (max-width: 768px) { + .nav-list { + flex-direction: column; /* Stack nav items vertically on smaller screens */ + align-items: center; + } +} + +.navbar a { + color: var(--cg-white); + font-weight: bold; + margin: 0 12px; + text-decoration: none; + letter-spacing: 2px; + font-family: monospace; + transition: color 0.3s, background-color 0.3s; /* Added smooth transition */ +} + +.navbar a:hover { + color: var(--cg-blue); + text-decoration: underline; +} + +.navbar a:active { + color: var(--cg-blue); +} + +.logo a { + font-family: Georgia; +} + +.logo a:hover { + text-decoration: none; +} + +/* Centering title and moving contact info below */ +.page-title { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + font-size: 36px; + font-family: Georgia; + color: var(--cg-white); + margin-top: 20px; + padding-bottom: 20px; + border-bottom: 1px solid var(--cg-white); +} + +.page-title h1 { + margin-bottom: 10px; +} + +.page-title p { + font-size: 18px; + font-family: monospace; + margin-top: 0; +} + +.page-title a { + color: var(--cg-blue); + text-decoration: none; +} + +.page-title a:hover { + text-decoration: underline; +} + +/* Resume Container */ +.resume { + width: 80%; + margin: 0 auto; + color: var(--cg-white); + font-family: monospace; + line-height: 1.6; +} + +/* Section Titles with lines */ +.resume .section-title { + font-size: 28px; + margin-bottom: 10px; + color: var(--cg-white); + font-family: Georgia; + padding-bottom: 5px; + position: relative; +} + +.resume .section-title::after { + content: ""; + display: block; + width: 100%; + height: 2px; + background-color: var(--cg-white); + position: absolute; + left: 0; + bottom: -5px; /* Space between title and line */ +} + +.resume p { + margin-bottom: 15px; +} + +.resume ul { + margin: 0; + padding-left: 20px; + list-style: disc; +} + +.resume ul ul { + list-style: circle; +} + +.resume li { + margin-bottom: 10px; +} + +/* CSS for button */ +.button { + background-color: var(--cg-black); + border: none; + color: var(--cg-white); + font-family: monospace; + padding: 5px 7px; + text-align: center; + border-radius: 2px; + transition: background-color 0.3s ease; /* Added transition */ +} + +.button:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + background-color: var(--cg-blue); +} + +/* CONTACT Form Styling */ +#contact-form { + max-width: 500px; + margin: 0 auto; /* Center form horizontally */ + padding: 50px; /* Add padding for inner space */ + background-color: #efe7e7; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add some shadow for depth */ +} + +@media (max-width: 768px) { + #contact-form { + width: 90%; /* The form takes 90% of the viewport width on small screens */ + max-width: none; /* Remove max-width to let it adjust naturally */ + } +} + +/* Adjust labels and inputs */ +#contact-form label { + display: block; + margin-bottom: 10px; + font-family: Georgia, serif; + font-weight: bold; + font-size: 18px; +} + +#contact-form input[type="text"], +#contact-form input[type="email"], +#contact-form textarea { + width: 100%; + padding: 12px; + margin-bottom: 20px; /* Increase margin for spacing between fields */ + border: 2px solid #ccc; + border-radius: 5px; + font-size: 16px; + background-color: #f0f0f0; /* Light background for input fields */ +} + +/* Submit Button Styling */ +#contact-form input[type="submit"] { + background-color: var(--cg-black); + color: #ffffff; + border: none; + padding: 12px 20px; + font-size: 16px; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#contact-form input[type="submit"]:hover { + background-color: var(--cg-blue); /* Hover effect for button */ +} + +/* CSS for Particles.js background */ +#particles-js { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: -1; /* Make sure particles stay behind the content */ + background-color: #2b2b2b; /* Fallback background color */ +} + +/* Cube container styling */ +.cube-container { + display: flex; + justify-content: center; + align-items: center; + height: 400px; /* Adjust height as needed */ + margin-top: 20px; +} + +/* Ensures the Three.js canvas is sized properly */ +#cube-canvas canvas { + width: 300px; /* Set width for the cube rendering */ + height: 300px; /* Set height for the cube rendering */ +} + +/* Under construction message styling */ +.construction-message { + text-align: center; + margin-top: 20px; +} + +.construction-message h2 { + font-size: 24px; + color: var(--cg-white); + margin-bottom: 10px; +} + +.construction-message p { + font-size: 18px; + color: #ffffff; +} +/*blog post styling :) */ +.blog-post { + border: 1px solid #ccc; + padding: 16px; + margin-bottom: 20px; + border-radius: 8px; + background-color: #f9f9f9; +} + +.post-title { + font-size: 1.5em; + margin-bottom: 10px; +} + +.post-date { + color: #888; + font-size: 0.9em; +} + +.post-image { + max-width: 100%; + height: auto; + margin-bottom: 10px; +} + +.post-description { + font-size: 1.1em; + margin-bottom: 15px; +} + +.read-more { + color: #007BFF; + text-decoration: none; + font-weight: bold; +} + + +/* CSS for footer */ +.footer { + display: flex; + justify-content: center; + align-items: center; + background-color: var(--cg-black); + color: var(--cg-white); + padding: 10px 0; + width: 100%; + height: 50px; + position: relative; + font-family: monospace; +} + +@media (max-width: 768px) { + .footer { + flex-direction: column; /* Stack footer content vertically */ + text-align: center; + height: auto; /* Allow the footer to adjust its height */ + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..56a8ab810 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,110 @@ +{ + "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. */ + // "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 '