Merge pull request #35 from Abhrajitdas02/portfolio

feat(templates): Added html-CSS Portfolio template
Abhishek-Mallick · Sep 10, 2024 · 8188de8 · 8188de8
2 parents 6dd2230 + c32faf0
commit 8188de8
Show file tree

Hide file tree

Showing 74 changed files with 18,109 additions and 0 deletions.
diff --git a/template/Portfolio-Websites/Simple/HTML-CSS/v2/README.md b/template/Portfolio-Websites/Simple/HTML-CSS/v2/README.md
@@ -0,0 +1,39 @@
+# Portfolio Website
+
+This is a responsive and interactive personal portfolio website created using HTML, CSS, and JavaScript. It showcases my skills, projects, and contact information in a user-friendly and visually appealing manner.
+
+## Features
+
+- **Responsive Design**: The website is fully responsive, ensuring it looks great on all devices, including mobile, tablet, and desktop.
+- **Interactive Animations**: Smooth animations and transitions make the website dynamic and engaging.
+- **Skills Showcase**: A section that highlights key technical and soft skills.
+- **Project Gallery**: Displays a collection of projects, each with descriptions, images, and links to live demos or repositories.
+- **Contact Form**: A functional contact form that allows users to get in touch.
+- **Social Links**: Links to my social media profiles for easy connection.
+
+## Technologies Used
+
+- **HTML5**: For structuring the content and providing the foundation of the site.
+- **CSS3**: For styling, including Flexbox and Grid for layout, and animations for interactive elements.
+- **JavaScript**: For adding interactivity and smooth animations.
+
+## Sections
+
+1. **Home**: Introduction with a professional photo and a short bio.
+2. **About Me**: A brief overview of my background, interests, and what I do.
+3. **Skills**: A section to showcase my technical skills and tools I'm proficient in.
+4. **Projects**: A grid or carousel of projects with screenshots, descriptions, and links to their GitHub repositories or live demos.
+5. **Contact**: A contact form and social media links to reach out directly.
+
+## Setup and Usage
+
+To run the portfolio website locally, follow these steps:
+
+1. **Clone the repository:**
+
+   ```bash
+      npm i universal-box
+      universal-box init
+      cd Portfolio-Website
+      cd v2
+   ```
diff --git a/template/Portfolio-Websites/Simple/HTML-CSS/v2/contact.html b/template/Portfolio-Websites/Simple/HTML-CSS/v2/contact.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Contact</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/vendor.css">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="icon" type="image/png"
+        href="https://cdn3d.iconscout.com/3d/premium/thumb/burger-shape-6808067-5576442.png?f=webp">
+</head>
+
+<body>
+
+    <section id="contact">
+
+        <div style="background-color: transparent;" class="row section-intro">
+            <div class="col-twelve">
+
+                <h5>Contact</h5>
+                <h1>I'd Love To Hear From You.</h1>
+            </div>
+        </div> <!-- /section-intro -->
+        <div id="successMessage" style="display: none;"><center>Form submitted successfully!</center></div>
+
+
+        <div class="row contact-form">
+
+            <!-- generate your key from web3forms.com and paste the key here at your key="" -->
+
+            <div class="col-twelve">
+                <form action="https://api.web3forms.com/submit" method="POST" id="contactForm" style="font-family: poppins-semibold, serif;">
+                    <fieldset style="border: none" ;>
+                        <input type="hidden" name="access_key" value="${your key}">
+                        <div class="form-field">
+                            <input name="name" type="text" id="name" placeholder="Your Name" value="" minlength="2"
+                                required="">
+                        </div>
+                        <div class="form-field">
+                            <input name="email" type="email" id="email" placeholder="Your Email" value="" required="">
+                        </div>
+                        <div class="form-field">
+                            <textarea name="message" id="message" placeholder="message" rows="10" cols="50"
+                                required=""></textarea>
+                        </div>
+                        <div class="form-field">
+                            <button class="submitform" type="submit" style="width: 180px;margin-left: auto;margin-right: auto;">Submit</button>
+                        </div>
+
+                    </fieldset>
+                </form>
+            </div>
+
+        </div>
+
+    </section>
+
+    <script src="js/contact.js"></script>
+
+
+
+
+</html>