diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..b443479e6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,47 @@ +# Dependency directories +/node_modules +/vendor +/bower_components + +# Build artifacts +/dist/ +/build/ +/public/build/ +*.min.js +*.min.css + +# Log files +*.log +npm-debug.log* +yarn-debug.log* + +# OS-generated files +.DS_Store +Thumbs.db +ehthumbs.db + +# Editor-specific files/directories +.vscode/ +.idea/ +*.sublime-project +*.sublime-workspace +*.komodoproject + +# Environment variables +.env +.env.local + +# Databases and related files +*.sqlite +*.sql +*.db + +# Compiled files +*.class +*.o +*.pyc + +# Backup files +*~ +*.bak +*.swp \ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 000000000..b54a82031 --- /dev/null +++ b/blog.html @@ -0,0 +1,25 @@ + + + + Blog + + + + +
+

Blog

+
+
+ + + + diff --git a/blogs/entry1.html b/blogs/entry1.html new file mode 100644 index 000000000..1eca3294e --- /dev/null +++ b/blogs/entry1.html @@ -0,0 +1,32 @@ + + + + Home + + + + +
+

Blog Entry 1

+
+
+
+ A picture of clouds in the sky during a sunset +
+
+

Date Posted: 2025

+

Hello, this is my text for my blog entry number 1.

+

Text text text.

+
+
+
+
+ + + diff --git a/blogs/entry2.html b/blogs/entry2.html new file mode 100644 index 000000000..13da92922 --- /dev/null +++ b/blogs/entry2.html @@ -0,0 +1,33 @@ + + + + Home + + + + +
+

Blog Entry 2

+
+
+
+ A picture of clouds in the sky during a sunset +
+
+

Date Posted: 2024

+

Hello, this is my text for my blog entry number 2.

+

Text text text.

+
+
+
+
+ + + diff --git a/blogs/entry3.html b/blogs/entry3.html new file mode 100644 index 000000000..3818c9bdb --- /dev/null +++ b/blogs/entry3.html @@ -0,0 +1,32 @@ + + + + Home + + + + +
+

Blog Entry 3

+
+
+
+ A picture of clouds in the sky during a sunset +
+
+

Date Posted: 2023

+

Hello, this is my text for my blog entry number 3.

+

Text text text.

+
+
+
+
+ + + diff --git a/blogs/entry4.html b/blogs/entry4.html new file mode 100644 index 000000000..6b9636927 --- /dev/null +++ b/blogs/entry4.html @@ -0,0 +1,32 @@ + + + + Home + + + + +
+

Blog Entry 4

+
+
+
+ A picture of clouds in the sky during a sunset +
+
+

Date Posted: 2022

+

Hello, this is my text for my blog entry number 4.

+

Text text text.

+
+
+
+
+ + + diff --git a/contact.html b/contact.html new file mode 100644 index 000000000..154aa5aa2 --- /dev/null +++ b/contact.html @@ -0,0 +1,34 @@ + + + + Contact + + + + +
+

Contact

+
+ + + + + + + +
+
+ + + diff --git a/imports/IMG_5318.jpeg b/imports/IMG_5318.jpeg new file mode 100644 index 000000000..3d1b83c70 Binary files /dev/null and b/imports/IMG_5318.jpeg differ diff --git a/imports/Kyle_Morgan_Resume.pdf b/imports/Kyle_Morgan_Resume.pdf new file mode 100644 index 000000000..206492938 Binary files /dev/null and b/imports/Kyle_Morgan_Resume.pdf differ diff --git "a/imports/Screenshot 2025-09-28 at 1.20.19\342\200\257PM.png" "b/imports/Screenshot 2025-09-28 at 1.20.19\342\200\257PM.png" new file mode 100644 index 000000000..768ca5c4c Binary files /dev/null and "b/imports/Screenshot 2025-09-28 at 1.20.19\342\200\257PM.png" differ diff --git a/imports/Yifeng-Ding-1800x1192.avif b/imports/Yifeng-Ding-1800x1192.avif new file mode 100644 index 000000000..481d0ef4b Binary files /dev/null and b/imports/Yifeng-Ding-1800x1192.avif differ diff --git a/imports/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2dldHR5aW1hZ2VzLTUwMDk0MjQ2Mi1oZXJvLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19.webp b/imports/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2dldHR5aW1hZ2VzLTUwMDk0MjQ2Mi1oZXJvLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19.webp new file mode 100644 index 000000000..0281ef3e3 Binary files /dev/null and b/imports/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2dldHR5aW1hZ2VzLTUwMDk0MjQ2Mi1oZXJvLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19.webp differ diff --git a/imports/istockphoto-517188688-612x612.jpg b/imports/istockphoto-517188688-612x612.jpg new file mode 100644 index 000000000..675130e4d Binary files /dev/null and b/imports/istockphoto-517188688-612x612.jpg differ diff --git a/imports/landscape-with-a-lake-1493481278Ed8.jpg b/imports/landscape-with-a-lake-1493481278Ed8.jpg new file mode 100644 index 000000000..ea5545cf5 Binary files /dev/null and b/imports/landscape-with-a-lake-1493481278Ed8.jpg differ diff --git a/imports/photo-1506744038136-46273834b3fb.jpg b/imports/photo-1506744038136-46273834b3fb.jpg new file mode 100644 index 000000000..08fe94a6e Binary files /dev/null and b/imports/photo-1506744038136-46273834b3fb.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..31101d0e0 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + Home + + + + +
+

Home

+
+
+
+ A picture of clouds in the sky during a sunset +
+
+

+ My name is Kyle Morgan, from + Sunnyvale, California. Some of my passions involve music, + fitness, and as of recently playing on an ultimate frisbee team. +

+

+ I love being able to learn new things, and I am looking forward to + further developing my coding skills. +

+
+
+
+
+ + + diff --git a/json/package-lock.json b/json/package-lock.json new file mode 100644 index 000000000..75f4476b4 --- /dev/null +++ b/json/package-lock.json @@ -0,0 +1,29 @@ +{ + "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.9.3" + } + }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + } + } +} diff --git a/json/package.json b/json/package.json new file mode 100644 index 000000000..45cf9cd07 --- /dev/null +++ b/json/package.json @@ -0,0 +1,23 @@ +{ + "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" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/kylem148/bootcamp-project-2024.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/kylem148/bootcamp-project-2024/issues" + }, + "homepage": "https://github.com/kylem148/bootcamp-project-2024#readme", + "dependencies": { + "typescript": "^5.9.3" + } +} diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..59da6beaa --- /dev/null +++ b/portfolio.html @@ -0,0 +1,42 @@ + + + + Portfolio + + + + +
+

Portfolio

+
+ + A picture of kyle's website + +
+

Personal Website

+

+ A personal website containing information about myself +

+ Link To Website +
+
+
+ + + diff --git a/resume.html b/resume.html new file mode 100644 index 000000000..3c8f77afd --- /dev/null +++ b/resume.html @@ -0,0 +1,136 @@ + + + + Resume + + + + +
+

Resume

+ Download Resume +
+
+

Education

+
+
+ Bachelor of Science in Computer Science +
+
+
+ California Polytechnic State University, San Luis Obispo, CA | + Expected Graduation May 2029 +
+
    +
  • Computer Science and Artificial Intelligence Club Member
    • +
  • Computer Science Security Education Club Member
    • +
+
+
+
+
+ High School Diploma +
+
+
+ Homestead High School, Cupertino, CA | June 2025 +
+
    +
  • 3.9 Unweighted GPA
    • +
  • + Extracurricular Activities: 4 years of Marching Band, and 4 + years of Winter Percussion +
    • +
  • + Elected Drum Captain of Homestead High School Marching Band. + Organized section progress, + managed 30+ students, and taught + 3+ hour practices +
    • +
+
+
+
+

Coursework

+
+
    +
  • Completed AP Courses in AP Physics C, AP Calculus BC
    • +
  • Hack4Impact HTML, CSS, & Git Starter Pack
    • +
  • Data Structures and Algorithms
    • +
+
+
+
+

Skills

+
+
+
+
    +
  • + Experience in + Python, Java, and C#, and HTML Software Development + +
    • +
  • Git version control
    • +
  • Team-oriented communication
    • +
+
+
+
+

Projects

+
+
Personal Website
+
+
+ Designed and built a personal website using HTML, and CSS +
+
+
+ - Implemented multiple pages using HTML, CSS - Focused on semantic + HTML design - Used best practices for Git and GitHub +
+
+
+
+

Experience

+
+
+ Professional Musician +
+
+
+ Hired pit musician for + The Music School, Sunnyvale Community Players, Starstruck + Theatre, + and The Pear Theatre | June 2023 to May 2025 +
+
    +
  • Performed in over 25 shows with industry veterans
    • +
  • + Developed strong communication skills though practice and + collaboration with peers +
    • +
    +
    +
+
+
+
+
+ + + diff --git a/src/blog.d.ts b/src/blog.d.ts new file mode 100644 index 000000000..8a5828bb0 --- /dev/null +++ b/src/blog.d.ts @@ -0,0 +1,2 @@ +export {}; +//# sourceMappingURL=blog.d.ts.map diff --git a/src/blog.d.ts.map b/src/blog.d.ts.map new file mode 100644 index 000000000..5b1d6011c --- /dev/null +++ b/src/blog.d.ts.map @@ -0,0 +1,10 @@ +{ + "version": 3, + "file": "blog.d.ts", + "sourceRoot": "", + "sources": [ + "blog.ts" + ], + "names": [], + "mappings": "" +} diff --git a/src/blog.js b/src/blog.js new file mode 100644 index 000000000..bdd2494bc --- /dev/null +++ b/src/blog.js @@ -0,0 +1,65 @@ +"use strict"; +const Blogs = [ + { + title: "Entry # 1", + date: "2025", + description: "The text of the blog", + image: "./imports/istockphoto-517188688-612x612.jpg", + imageAlt: "A picture of a guy on a chair", + slug: "entry1", + }, + { + title: "Entry # 2", + date: "2024", + description: "The text of the blog", + image: "./imports/landscape-with-a-lake-1493481278Ed8.jpg", + imageAlt: "A picture of a guy on a chair", + slug: "entry2", + }, + { + title: "Entry # 3", + date: "2023", + description: "The text of the blog", + image: "./imports/photo-1506744038136-46273834b3fb.jpg", + imageAlt: "A picture of a guy on a chair", + slug: "entry3", + }, + { + title: "Entry # 4", + date: "2022", + description: "The text of the blog", + image: "./imports/Yifeng-Ding-1800x1192.avif", + imageAlt: "A picture of a guy on a chair", + slug: "entry4", + }, +]; +const blogContainer = document.getElementById("card-list"); +if (blogContainer) { + Blogs.forEach((blog) => { + const image = document.createElement("img"); + image.src = blog.image; + image.alt = blog.imageAlt; + const article = document.createElement("article"); + article.classList.add("card"); + const header = document.createElement("header"); + header.classList.add("card-header"); + const paragraph = document.createElement("p"); + paragraph.textContent = blog.date; + const header2 = document.createElement("h2"); + header2.textContent = blog.title; + const description = document.createElement("a"); + description.href = `./blogs/${blog.slug}.html`; + description.innerText = "Click Here To Veiw..."; + const blog_image = document.createElement("img"); + blog_image.classList.add("blog-image"); + blog_image.src = blog.image; + blog_image.alt = blog.imageAlt; + article.appendChild(header); + header.appendChild(paragraph); + header.appendChild(header2); + header.appendChild(description); + header.appendChild(blog_image); + blogContainer.appendChild(article); + }); +} +//# sourceMappingURL=blog.js.map diff --git a/src/blog.js.map b/src/blog.js.map new file mode 100644 index 000000000..470fe26ba --- /dev/null +++ b/src/blog.js.map @@ -0,0 +1,10 @@ +{ + "version": 3, + "file": "blog.js", + "sourceRoot": "", + "sources": [ + "blog.ts" + ], + "names": [], + "mappings": ";;AASA,MAAM,KAAK,GAAW;IACpB;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,MAAM;QACZ,WAAW,EAAE,sBAAsB;QACnC,KAAK,EAAE,6CAA6C;QACpD,QAAQ,EAAE,+BAA+B;QACzC,IAAI,EAAE,QAAQ;KACf;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,MAAM;QACZ,WAAW,EAAE,sBAAsB;QACnC,KAAK,EAAE,mDAAmD;QAC1D,QAAQ,EAAE,+BAA+B;QACzC,IAAI,EAAE,QAAQ;KACf;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,MAAM;QACZ,WAAW,EAAE,sBAAsB;QACnC,KAAK,EAAE,gDAAgD;QACvD,QAAQ,EAAE,+BAA+B;QACzC,IAAI,EAAE,QAAQ;KACf;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,MAAM;QACZ,WAAW,EAAE,sBAAsB;QACnC,KAAK,EAAE,sCAAsC;QAC7C,QAAQ,EAAE,+BAA+B;QACzC,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;AAE3D,IAAI,aAAa,EAAE,CAAC;IAClB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5C,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;QACvB,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE1B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAClD,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAE9B,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAEpC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAC9C,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;QAElC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC7C,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;QAEjC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAChD,WAAW,CAAC,IAAI,GAAG,WAAW,IAAI,CAAC,IAAI,OAAO,CAAC;QAC/C,WAAW,CAAC,SAAS,GAAG,uBAAuB,CAAA;QAG/C,MAAM,UAAU,GAAqB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnE,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACvC,UAAU,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,UAAU,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE/B,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC5B,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC9B,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC5B,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAChC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAE/B,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;AACL,CAAC" +} diff --git a/src/blog.ts b/src/blog.ts new file mode 100644 index 000000000..13d34b638 --- /dev/null +++ b/src/blog.ts @@ -0,0 +1,89 @@ +type Blog = { + title: string; + date: string; + description: string; + image: string; + imageAlt: string; + slug: string; +}; + +const Blogs: Blog[] = [ + { + title: "Entry # 1", + date: "2025", + description: "The text of the blog", + image: "./imports/istockphoto-517188688-612x612.jpg", + imageAlt: "A picture of a guy on a chair", + slug: "entry1", + }, + { + title: "Entry # 2", + date: "2024", + description: "The text of the blog", + image: "./imports/landscape-with-a-lake-1493481278Ed8.jpg", + imageAlt: "A picture of a guy on a chair", + slug: "entry2", + }, + { + title: "Entry # 3", + date: "2023", + description: "The text of the blog", + image: "./imports/photo-1506744038136-46273834b3fb.jpg", + imageAlt: "A picture of a guy on a chair", + slug: "entry3", + }, + { + title: "Entry # 4", + date: "2022", + description: "The text of the blog", + image: "./imports/Yifeng-Ding-1800x1192.avif", + imageAlt: "A picture of a guy on a chair", + slug: "entry4", + }, +]; + +const blogContainer = document.getElementById("card-list"); + +if (blogContainer) { + Blogs.forEach((blog) => { + //create image tag + const image = document.createElement("img"); + image.src = blog.image; + image.alt = blog.imageAlt; + + //create article tag + const article = document.createElement("article"); + article.classList.add("card"); + + //create card heading tag + const header = document.createElement("header"); + header.classList.add("card-header"); + + //create date paragraph + const paragraph = document.createElement("p"); + paragraph.textContent = blog.date; + + //create title + const header2 = document.createElement("h2"); + header2.textContent = blog.title; + + //create the link + const description = document.createElement("a"); + description.href = `./blogs/${blog.slug}.html`; + description.innerText = "Click Here To Veiw..."; + + //create insertion point, and append html + const blog_image: HTMLImageElement = document.createElement("img"); + blog_image.classList.add("blog-image"); + blog_image.src = blog.image; + blog_image.alt = blog.imageAlt; + + article.appendChild(header); + header.appendChild(paragraph); + header.appendChild(header2); + header.appendChild(description); + header.appendChild(blog_image); + + blogContainer.appendChild(article); + }); +} diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..9b0d857ef --- /dev/null +++ b/styles.css @@ -0,0 +1,454 @@ +:root { + /* variables */ + --cg-black: rgb(62, 64, 64); + --cg-green: rgb(55, 134, 88); + --cg-darkgreen: rgb(12, 63, 28); + --cg-grey: rgb(242, 242, 242); + --cg-moss: rgb(190, 207, 193); + --cg-darkmoss: rgb(119, 140, 122); + --cg-white: rgb(255, 255, 255); +} + +html { + height: 100%; +} + +body { + background: var(--cg-moss); + position: relative; + min-height: 100vh; + padding: 0; + margin: 0; + font-family: monospace; +} + +/* CSS for navigation */ + +.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: var(--cg-black); + color: var(--cg-white); + padding: 0px 0px; + + /* Debug border */ + /* border: solid red; */ +} + +.nav-list { + display: flex; + flex-direction: row; + position: relative; + right: 30px; + list-style: none; + + /* Debug border */ + /* border: solid blue; */ +} + +.navbar a { + color: var(--cg-white); + font-weight: bold; + margin: 0 12px; + border-bottom: 2px solid transparent; + letter-spacing: 2px; + font-family: monospace; + display: inline-block; + text-decoration: none; + + cursor: pointer; + transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; +} + +.navbar a:hover { + color: var(--cg-green); + border-bottom: 2px solid var(--cg-green); + transform: scale(1.1); +} + +.navbar a:active { + color: var(--cg-green); +} + +.logo a { + font-family: Georgia; + padding-left: 20px; +} + +.logo a:hover { + padding-left: 20px; + text-decoration: none; + border-bottom: 2px solid transparent; +} + +main { + padding: 0 20px 40px 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +@keyframes slideInFromTop { + 0% { + transform: translateY(-100px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.page-title { + transform: traslateY(-100px); + opacity: 0; + + animation: slideInFromTop 0.5s ease-out forwards; + + display: flex; + justify-content: center; + align-items: center; + font-size: 50px; + font-family: Georgia, "Times New Roman", Times, serif; + color: rgb(56, 54, 54); +} + +/* CSS for portfolio grid */ + +.project { + display: flex; + flex-direction: row; + max-width: 100%; + margin: 1em 0 2em 0; + border-radius: 10px; + + cursor: pointer; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + + /* Debug border */ + /* border: 2px solid blue; */ +} + +.project:hover { + transform: scale(1.02); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); +} + +.item-link { + flex: 7; + + /* Debug border */ + /* border: 2px solid red; */ +} + +.project-image { + display: flex; + width: 100%; + height: 500px; + flex-grow: 2; + + /* Debug border */ + /* border: 2px solid black; */ +} + +.project-details { + display: flex; + background-color: var(--cg-white); + flex: 3; + height: 500px; + flex-shrink: 1; + padding: 0 20px; + margin: 0px; + line-height: 1.5; + overflow: scroll; + + flex-direction: column; + text-align: center; + justify-content: center; + + /* Debug border */ + /* border: 2px solid green; */ +} + +.project-details a { + color: var(--cg-black); + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; +} + +.project-details a:hover { + color: var(--cg-green); + text-decoration: underline; +} + +.project-details { + font-weight: lighter; +} + +.project-name { + font-weight: bold; + font-size: 20px; +} + +/* CSS for home page */ + +.index { + background: #646464; +} + +@keyframes slide-in-left { + 0% { + transform: translateX(100px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} + +.about { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; + background-color: #f8f8f8; + border: 1px solid #ccc; + border-radius: 5px; + position: relative; + overflow: hidden; + z-index: 0; +} + +@property --angle { + syntax: ""; + initial-value: 0deg; + inherits: false; +} +.about-wrapper { + position: relative; +} + +.about-wrapper::after, +.about-wrapper::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: calc(100% + 8px); + height: calc(100% + 8px); + background-image: conic-gradient( + from var(--angle), + transparent 50%, + rgb(152, 243, 165) + ); + border-radius: 8px; + transform: translate(-50%, -50%); + animation: 3s spin linear infinite; + z-index: -1; +} + +.about::before { + filter: blur(1.5rem); + opacity: 1; +} +@keyframes spin { + from { + --angle: 0deg; + } + to { + --angle: 360deg; + } +} + +.about-image img { + max-width: 300px; + border-radius: 3px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +.about strong { + color: var(--cg-darkgreen); +} + +.about-text { + flex: 1; + margin-left: 20px; +} + +.about-text h2 { + font-size: 24px; + margin-bottom: 10px; +} + +.about-text p { + font-size: 16px; + line-height: 1.5; +} + +/* CSS for Blog page */ + +.blog { + background-color: var(--cg-darkmoss); +} + +.blog-logo { + color: white; +} + +.blog-image { + margin-top: 10px; + width: 100%; + height: 180px; /* or whatever height your card needs */ + object-fit: cover; /* Ensures image fills the box and crops excess */ + border-radius: 8px; +} + +.card-list { + display: flex; + padding: 3rem; + flex-wrap: wrap; + gap: 2rem; + padding: 3rem; + justify-content: center; +} + +.card { + display: flex; + position: relative; + flex-direction: column; + + flex: 1 1 200px; + height: 300px; + min-width: 150px; + max-width: 250px; + + padding: 1.5rem; + border-radius: 16px; + background: #e2e6e4; + box-shadow: -1rem 0 3rem #465146; + + transition: transform 0.2s ease; +} + +.card:hover { + transform: translateY(-1rem); +} + +.card:hover ~ .card { + transform: translateX(100px); +} + +.card:not(:first-child) { + margin-left: -130px; +} + +/* CSS for resume page */ + +.button { + background-color: var(--cg-black); + border: none; + color: var(--cg-white); + + font-family: monospace; + + padding: 5px 7px; + text-align: center; + + border-radius: 2px; + + cursor: pointer; + transition: background-color 0.2 ease-in-out, transform 0.2s ease-in-out; +} + +.button:hover { + background-color: var(--cg-green); + transform: scale(1.1); +} + +.resume h2 { + font-family: Georgia; +} + +.resume-body { + background: var(--cg-grey); + position: relative; + min-height: 100vh; + padding: 0; + margin: 0; + font-family: monospace; +} + +.resume-button { + background-color: rgb(164, 159, 159); + border: none; + color: var(--cg-white); + + font-family: monospace; + + padding: 5px 7px; + text-align: center; + + border-radius: 2px; + + cursor: pointer; + transition: background-color 0.1s ease-in-out, transform 0.1s ease-in-out; +} + +.resume-button:hover { + background-color: var(--cg-moss); + transform: scale(1.05); +} + +/* CSS for contact form */ + +label { + display: block; + margin-bottom: 8px; + font-family: Georgia; + font-weight: bold; +} + +input[type="text"], +input[type="email"], +textarea { + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; + resize: none; +} + +/* Add some spacing to the form */ +form { + width: 500px; + margin: 0 auto; +} + +/* CSS for footer */ + +.footer { + display: flex; + justify-content: center; + align-items: center; + background-color: var(--cg-black); + color: var(--cg-white); + position: absolute; + bottom: 0; + width: 100%; + height: 2.5rem; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..d22d4a37f --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,44 @@ +{ + // Visit https://aka.ms/tsconfig to read more about this file + "compilerOptions": { + // File Layout + // "rootDir": "./src", + // "outDir": "./dist", + + // Environment Settings + // See also https://aka.ms/tsconfig/module + "module": "nodenext", + "target": "esnext", + "types": [], + // For nodejs: + // "lib": ["esnext"], + // "types": ["node"], + // and npm install -D @types/node + + // Other Outputs + "sourceMap": true, + "declaration": true, + "declarationMap": true, + + // Stricter Typechecking Options + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + + // Style Options + // "noImplicitReturns": true, + // "noImplicitOverride": true, + // "noUnusedLocals": true, + // "noUnusedParameters": true, + // "noFallthroughCasesInSwitch": true, + // "noPropertyAccessFromIndexSignature": true, + + // Recommended Options + "strict": true, + "jsx": "react-jsx", + "verbatimModuleSyntax": true, + "isolatedModules": true, + "noUncheckedSideEffectImports": true, + "moduleDetection": "force", + "skipLibCheck": true + } +}